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.