Proximity
The principle of proximity states that things that are close together appear to be more related than things
Example: Wistia
The input labels are closer to the inputs than other fields, making the label appear more closely related to the input area. For example, you wouldn’t think that the first field on the left was for word email.
Alignment
Alignment is the placement of visual elements so they line up in a composition. We can use this in designs to create balance and structure.
Example: GoodBooks
The site uses a consistent left alignment to create a sense of structure.
Contrast
Contrast refers to the use of visually different elements in design– it can be used to draw attention to something or make something stand out.
Example: ebay.com
The blue search button stands out greatly from the rest of the (mostly white) site, drawing users’ attention.
Similarity
The principle of similarity states that when things appear to be similar to each other, we group them together. And we also tend to think they have the same function.
Example: Patreon
Because all the “join” buttons look similar, we assume that they have the same function.
Good font pairing
Good font pairings have contrast between them while maintaining readability and harmony. Keep distinction and harmony in mind– they shouldn’t compete too much with each other, but shouldn’t be indistinguishable from each other.
Example: medium.com
The two fonts used have good contrast, but are not inharmonious.
Good Color Palette used
Common color schemes are monochromatic, analogous, complementary, split complementary, and triadic. Colors can be used to highlight or background certain areas of design, if used wisely.
Example: Slumber
The text colors pop on the dark background due to good contrast. The color palettes also reminiscent of the sleep theme.
Identify the grid
Grids are used to provide alignment and a sense of structure to designs.
Example: Kickstarter
The grid divides the page into thirds and the grid is used to structure all the Kickstarter cards.
