Lessons
Go back to module homepage

Layout for visual importance

Incomplete

When it comes to where elements are positioned, you can encourage users to take actions or view information they ought to be seeing by just putting things in the right place.

L
A
Y
O
U
T
Separated
Balanced
Combined

A user's eye would generally (like in the Western world of left to right reading) follow a pattern of top to bottom, and left to right, tracing to the right when attention is grabbed.

Law of Common Region + layout

The Law of Common Region Gestalt Principle suggests that you can create an identifiable region around an element to group or draw attention to.

Two of the most straightforward ways to do this as a UI designer are:

  1. adding a border around grouped/emphasized elements
  2. adding a background color around grouped/emphasized elements
A Designer's Toolset
Go to article
Photo Framing for Beginners
Go to article
Designing a Custom UI
Go to article
  • Unclear distinction between which image goes with which title.
  • Borders create a "common region" by enclosing the image with the related title.
  • Obvious groups with vertical alignment make items scannable one at a time.

Let's add a border on the listing card example.

The heart button is likely one of the pieces of the card you most want the user to notice, but the changes we made in font sizes keep the button from looking like it has any relevance in the design. We don't want to scale the icon up so large it looks awkward, so we need to turn to another technique.

Take a look at this adjustment by toggling the switch:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

  • No visual importance over other elements makes button appear similar to text.
  • Overlapping content sections makes button "float".
  • Animations on button hover and press make it more enticing to click.
  • cursor: pointer makes button obviously clickable.

The heart button becomes much more prominent in this space. By overlapping sections, a content space was created where one was virtually empty before. The padding on the top and bottom elements actually gives some space that can be strategically used by the button.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

By moving the heart icon to overlap the two content sections, it appears to float over the content and is even more visually apparent than even the title. We've raised the heart button in the visual hierarchy by giving it greater importance by its place in the layout.

(Since we want the user to press the button, you'll also notice how the button will animate when hovered and tapped.)

You can play with that differentiation in visual layers to help form an accurate mental model in this demo.

  1. start by switching the component to the better state to see how the button looks overlapping the 2 content sections
  2. then flip the component into isometric mode to see how the component might look if it were modeled in the real world
  3. hover the card to see the visual layers animate.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Grouping items in overlapping sections is a clever way to almost lift a group of elements up in the page. Although we're operating in a 2D plane on a computer screen, our brain that sees in 3D will find ways to sort the page into varying levels of depth.

Feedback

Get the full course!

UI Foundations avatar
50
25
Yours Forever

Build Beautiful UIs

Includes 2 modules (+ access to future modules as they are released):
  • Visual Importance
  • Design Systems
  • Colors (in progress)
  • Space & Size (in progress)
  • Data (in progress)
  • Typography
  • Shadows
  • Pro Details
  • Animations
© 2021 UI Foundations · All Rights Reserved · logos provided by Clearbit