UI Design Fundamentals

Course by Gary Simon

• White Space

• Alignment

• Contrast

• Scale

• Typography

• Color

• Visual Hierarchy

White Space

White Space is the empty space between the elements in your user interface

Old Design

whitespace-old-design.png

New Design

whitespace-new-design.png

Alignment

Alignment in UI design is the process ensuring that every element is positioned correctly in relation to other elements.

Each element in the UI defines a series of rows and columns.

alignment-issue.png

alignment-issue-fixed.png

Contrast

Contrast as defined as being in a ‘strikingly’ different state from something else.

WCAG 2.0 Contrast Guidelines

WCAG - Web Content Accessibility Guidelines

Minimum AA : The visual presentation of text and images of text has a contrast ration of at least $4.5:1$, except for large text which should have a contrast ratio of at least $3:1$

Enhanced AAA : The visual presentation of text and images of text has a contrast ratio of at least $7:1$, expect for large text which should have a contrast ratio of at least $4.5:1$

Contrast Checking Tools

• Browser Plugins (Chrome, Firefox)

• Websites

• UI Designs Application Plugins

contrast-old-design.png

contrast-new-design.png

Scale

The size of every UI element must be carefully considered.

scale-old-design.png

scale-new-design.png

Typography

Good typography requires the understanding of other fundamentals, along with few special considerations.

Understanding Typography

• Font Choice(s) - do not use more than 2 font families

• Visual Hierarchy

• Font size (scale)

• Alignment

• Letter spacing and line height

• Font style (weight, italics, etc.)

• Color and contrast

typography-old-design.png

typography-new-design.png

Color

The first UI design fundamental that shapes a user’s experience is color.

Important Notes

• Green : wealth, nature, growth

• Black : luxury, sophistication, elegance

• Certain colors can mean different thing to different cultures

• Know your target audience and where they come from before deciding on the color

• What your business wants to project in terms of eliciting emotions

• Do not use too many colors

• Do not use colors which do not contrast well together

• Use different hues of same color to create distinction between elements of the page

Bad Example

color-bad-example.png

too many colors

color-bad-contrast.png

bad contrast of colors

color-bad-hue.png

no hue

color-old-design.png

Good Example

color-good-example.png

less colors

color-good-contrast.png

good contrast of colors

color-good-hue.png

using hue for separation

color-new-design.png

Visual Hierarchy

Every element on a user interface has a level of importance. Some elements are more important than others. Visual hierarchy is how we establish this importance.

visual-heirarchy-bad-example-1.png

visual-hierarchy-old-design.png

visual-heirarchy-good-example-1-using-alignment.png

alignment

visual-heirarchy-good-example-1-using-color.png

color

visual-heirarchy-good-example-1-using-contrast.png

contrast

visual-heirarchy-good-example-1-using-scale.png

scale

visual-heirarchy-good-example-1-using-scale-color.png

scale and color

visual-hierarchy-new-design.png

Design Challenge 1

Based on White Space and Alignment

design-challenge-1-problem.png

design-challenge-1-instructor-solution.png

Design Challenge 2

Based on Contrast and Scale

design-challenge-2-problem.png

design-challenge-2-instructor-solution.png

Design Challenge 3

Based on Typography and Color

design-challenge-3-problem.png

design-challenge-3-instructor-solution-1.png

design-challenge-3-instructor-solution-2.png

design-challenge-3-instructor-solution-3.png

Design Challenge 4

Based on Visual Hierarchy

design-challenge-4-problem.png

design-challenge-4-instructor-solution.png

Design Challenge 5

Based on Visual Hierarchy, Contrast, Alignment

design-challenge-5-problem.png

design-challenge-5-instructor-solution.png