Visual Design Principles Readings + Writeup

I explored my commonly used websites to identify the following design principles:

1. Proximity
2. Alignment
3. Contrast
4. Similarity
5. Good font pairing
6. Good Color Palette used
7. Identify the grid (take a screenshot and find the grid)

Examples are below.

Proximity

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

On slack, this manifests itself in grouping together all my channels and separately grouping together my direct messages.

Alignment

Alignment in design refers to the arrangement of visual elements such as text, images, and shapes in relation to one another. The purpose of alignment is to create a cohesive and harmonious design that is visually pleasing and easy to read.

On notion, we see that all the options on the left hand tab bar are all left-aligned and that each inner layer of a workspace is indented 1 level to the right. Similarly, in the template on the right, all the text is centered and on the page and has a clear visual hierarchy.

Contrast

Contrast in design refers to the juxtaposition of different elements in a design to create visual interest and hierarchy. It can be achieved through variations in color, size, shape, texture, and other design elements. Contrast helps to draw attention to important information, create emphasis and hierarchy, and make a design more visually appealing.This example from my CS147 website exhibits contrast between orange and white to call attention to our name, Tango, and our catchphrase.

Similarity

Similarity in design refers to the use of consistent design elements throughout a design. This can include similar colors, shapes, textures, and other visual elements. Similarity helps to create unity and cohesiveness in a design, making it easier for viewers to understand and navigate.The home screen of iMessage shows this. Each message listing looks the same as the others, with bold text for the name and small text for the preview.

Good font pairing

Good font pairing refers to the use of two or more fonts in a design that complement each other and enhance the overall look and feel of the design. Good font pairing should take into consideration factors such as font style, size, weight, and color, and should aim to create a harmonious and balanced composition.

On slack, names are shown in bold to draw attention to them. The actual message text is a bit smaller for readability purposes. @’s and mentions are shown in bold for attention reasons as well. The label of the channel is larger than everything else as well to show importance of title.

Good Color Palette used

Good color palette used refers to the selection and use of colors in a design that work well together and enhance the overall visual impact of the design.

Acorns, a mobile application investing app uses green as a color scheme to remind users of money and also of nature.

Grids

Using gridsinvolves using a framework of intersecting vertical and horizontal lines to organize and align content, which helps to create a more cohesive and visually pleasing user interface.

The spotify desktop app uses the grid quite well. I draw below the grid in white: