Week 2: Design Principles - Layouts

Learning Objective

• Visual design principles
• The 8pt grid
• Design Practice: Using grids to apply visual design principles

Visual Design Principles

Visual design principles are fundamental guidelines that designers follow to create visually appealing and effective designs. These principles help designers communicate ideas, convey messages, and enhance user experiences. Here are some common visual design principles:

1. Contrast: Contrast refers to the juxtaposition of different elements in a design to make them stand out. It can involve differences in color, size, shape, texture, or style. Contrast helps create hierarchy, emphasis, and visual interest.
2. Repetition or Consistency: Repetition involves using consistent visual elements throughout a design. It helps create unity, consistency, and rhythm. Repetition can include repeating colors, shapes, patterns, or styles to reinforce branding and create a cohesive design.
3. Alignment: Alignment refers to the arrangement of elements along a common axis or edge. It helps create order, organization, and clarity in a design. Proper alignment ensures that elements are visually connected and that the design feels cohesive.
4. Balance: Balance is the distribution of visual weight in a design. There are three types of balance: symmetrical (equal weight on both sides), asymmetrical (unequal weight that still achieves balance), and radial (balance around a central point). Balance helps create stability and harmony in a design.
5. Visual Hierarchy: Hierarchy establishes an order of importance within a design. It involves organizing elements so that viewers know where to focus their attention first, second, and so on. Techniques for establishing hierarchy include size, color, contrast, typography, and spatial relationships.
6. Gestalt Principles: These are a set of principles that were established in the early twentieth century by the Gestalt psychologists. They capture how humans make sense of images.Gestalt principles capture our tendency to perceive the whole as opposed to the individual elements. Learn More (opens new window) . There are several Gestalt principles, including similarity, continuation, closure, proximity, common region, figure/ground, and symmetry and order.

By understanding and applying these visual design principles, designers can create compelling, engaging, and user-friendly designs across various mediums and platforms.

Using an 8pt-grid to apply Design Principles

Read

Everything you need to know about the 8pt Grid (opens new window)

Watch

Learn Figma auto Layout

Create your own Grid

Understand impact of grid on developer handoff

Additional Resources

1. NNG on visual Design Principles (opens new window)
2. 4 foundational UI Design principles (opens new window)
3. Gestalt Principle: similarity (opens new window)
4. Gestalt Principle: Proximity (opens new window)
5. UI Design Principles (opens new window)

Figma shortcuts for this week

1. Shift + A = auto layout
2. CTRL + G = Show and hide the grid
3. Shift + 2 = zoom on selection
4. Option + drag or cmd + D = Duplicate

Lesson Slides