Visual Design Principles Readings + Writeup

Proximity

The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. 

An example of this can be found on the Aritzia website where the space between the image and text has a closer proximity to distinguish each item from one another. 

 

Alignment

Alignment is the placement of visual elements so they line up in a composition.

All of the text and information on the New York Times is left-aligned to organize each of the elements and create structure between the article description and the article itself. 

 

Contrast

The design principle contrast refers to the use of visually different elements. This can apply to both elements on the same page and also contrasting uses of color.

In this above example, the Stanford d.School website displays contrast between the bright orange color and the background white color. The contrast in font sizes also does a great job at emphasizing the hierarchy of information.

 

Similarity

The principle of similarity simply states that when items share some visual characteristic, they are assumed to be related in some way.

Spotify’s home page utilizes the similarity design principle by grouping recently played playlists together to show the user that they are all related in some way without explicitly saying so.

Font Pairing

The font pairings chosen on this website convey the values and emotions that Em Cosmetics strives for: creativity, serenity, and self-expression. These serif and san-serif fonts balance each other out and allow the banner title to stand out from the rest of the website.

 

Color Palette

The Apple Weather app utilizes a simple color palette with different shades of blues that represents the variety in weather across different locations. The color palette still allows for all the information to stay readable whilst making the interface aestethically pleasing.

 

Grids

Pinterest uses a grid on its Home page feed to organize each of the pins.

Avatar

About the author

Comments

Comments are closed.