Visual Hierarchy
Showing importance
- Font size, contrasting color, and visual weight
- Good for short, large items
Visual Hierarchy
Showing importance
- Density, background color, position/size, rhythm
- Good for blocks of items
Visual Hierarchy
Important places
- top, top right, left edge
Visual Hierarchy
Showing relationships
- Grouping (Gestalt proximity and closure)
Visual Hierarchy
Showing relationships
- Peers (Gestalt similarity)
Visual Hierarchy
Showing relationships
- Lists (Gestalt continuity)
Visual Hierarchy
Showing relationships
- Containment
Visual Flow
- Implied lines (curved or straight) can be used to create a visual narrative.
Visual Flow
- Calls to action should be placed after the related text. Can be isolated with whitespace if not critical.
Visual Flow
- OK buttons (Cancel, Submit, Buy, etc.) work well when at the end of the flow.
Center Stage
Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller panels.
Center Stage
Center Stage
Grid of Equals
Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary.
Grid of Equals
Grid of Equals
Visual Framework
Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content.
Visual Framework
Visual Framework
Titled Sections
Define separate sections of content by giving each one a visually strong title, separating the sections visually, and arranging them on the page.
Titled Sections
Titled Sections
Module Tabs
Put modules of content into a small tabbed area so that only one module is visible at a time. The user clicks on tabs to bring different modules to the top.
Module Tabs
Module Tabs
Accordion
Put modules of content into a collinear stack of panels that can be closed and opened independently of each other.
Accordion
Collapsible Panels
Put secondary or optional material into panels that can be opened and closed by the user.
Collapsible Panels
or is it an accordion?
Collapsible Panels
Movable Panels
Put modules of content into boxes that can be opened and closed independently and moved into a custom configuration.
Movable Panels
Movable Panels
Right/Left Alignment
When designing a two-column form or table, right-align the labels on the left and left-align the items on the right.
Right/Left Alignment
Right/Left Alignment
Diagonal Balance
Arrange page elements in an asymmetric fashion, but balance it by putting visual weight into both the upper-left and lower-right corners.
Diagonal Balance
Diagonal Balance
Responsive Disclosure
Starting with a very minimal UI, guide a user through a series of steps by showing more of the UI as he completes each step.
Responsive Disclosure
Responsive Disclosure
Responsive Enabling
Starting with a UI that is mostly disabled, guide a user through a series of steps by en- abling more of the UI as each step is done.
Responsive Enabling
Liquid Layout
As the user resizes the window, resize the page contents along with it so that the page is constantly “filled.”
Liquid Layout
Liquid Layout
