Design fundamentals

Layout is the most important part of web design. These practices help build a strong foundation for your website design:

  • Proximity (Relationships)
  • Alignment (Order)
  • Repetition (Consistency)
  • Contrast
  • Balance and Symmetry

Proximity

The rule of relationships. The closer elements are to one another, the more we see them as a group:

  • this is the primary method of organizing objects in design
  • whitespace is how you group and create distinction for users
  • Keep unrelated items apart

Proximity prevents confusion

  • Creates easily scannable web pages
  • The goal is to create easily identifiable sections of content for users
  • Reduces cognitive load - how much your user needs to think about how to interact with the page
  • For page layouts, add less margin between related block elements to distinguish them from each other

During wireframing, focus first on proximity: grouping and organizing components on the page to make sure the relationships make sense.

Forms need proximity

Proximity provides a natural stopping point if the user needs to return later

Alignment

Alignment establishes structure and order on the page and creates relationships. In web design, alignment is the following:

  • positioning elements along different axes
  • aligning groups of elements to form a cohesive unit
  • text alignment (justified, centered, etc)

Types of alignment

There are two ways to align elements:

  • edge alignment: elements are aligned along a composition’s top, bottom, left, or right edges
  • center alignment: elements are horizontally (horizontal axis) or vertically (vertical axis) aligned down a central axis

Text alignment is a little different but with similar goals:

  • helps establish order and clear hierarchy
  • left, right, center, justified
  • justified adds spacing between words so that the left and right edges are even. can impact readability

For cards, if you align the top and bottom edges, the middle content doesn’t need to be aligned.

Establishing order

Establish a strong line and use that to align elements on the page. You can choose different alignments for different sections on the page:

  • mixing alignments between sections distinguishes sections and creates dynamic content, which keeps the user engaged by moving their eyes through the content

Repetition

Repetition creates consistency and a unified brand experience while orienting users. You should reuse the same design patterns (shapes, elements, etc) through the site to create a unified and cohesive feeling. Helps users know what to expect.

There are two aspects of repetition in web design:

  • visual elements: repeat shapes or other graphics to tie the brand together
  • component and style reuse: help users identify patterns in actions associated with certain UI components

Repetition is also practical from a development standpoint–you don’t need to create lots of code, which impacts performance.

Orienting users

The homepage should have a distinct layout that catches the eye and provides information in small chunks:

  • secondary and lower pages should share layouts depending on what content they present. For example, product pages should share a layout
  • all of this reduces cognitive load

Indicate function

Make components that look alike perform the same function. This sets user expectations.

Contrast

Contrast draws eyes to a certain area of a page, and is the easiest to create hierarchy and order.

  • most effective way to focus and guide users around the page
  • make elements on the page extremely different to help draw focus
  • users want to scan a page and quickly figure out where to go next

Color contrast

Critical for accessibility purposes:

  • common anti-pattern is putting thin or incorrectly colored text over a hero image
  • to fix this, use a darker picture or add some sort of treatment behind the text

For the best contrast:

  • use high-contrasting colors for text, which are opposite each other on the color wheel
    • don’t overdo it, though, or your site will be hard to scan

Size contrast

Large text or objects naturally attract user eyes:

  • creates hierarchy, because you can infer from the element size how important it is to the web page
  • whitespace contributes to size contrast

Shape contrast

There are two types of shapes:

  • organic: looser, inspired by nature, not rigid
  • geometric: rigid shapes like rectangles, circles

For example, to draw attention to an organic shape, use lots of geometric shapes and one organic shape.

Balance

This is the weight of visual elements that create a proportional and well-balanced design that move a person’s eye through the design. Makes a page feel complete.

Add weight by:

  • color: darker colors are heavier
  • size
  • kinds of photos
  • type styles

Types of balance

There are two main types of balance: symmetrical and asymmetrical.

symmetrical
Corresponding elements are arranced on opposite sides of an axis. In other words, each side of the layout has the same visual balance.

You should distribute your elements equally and repetitively

asymmetrical
Lacks symmetry–unequal weight is applied to elements but they still balance the page as a whole.

This is very good at creating movement and hierarchy when applied properly. Often, one larger element is balanced by several smaller elements.