Check project status.

In this course:

In this course we will cover how designers make components and screens look beautiful, simple, and pleasing.
6 Lessons|7 Minute Read
Design
Course:
UI Design - How to Make Beautiful Software

Lessons:

Positioning - Alignment, Spacing and Size

In this lesson we will cover how to properly size elements, position them in relation to the page, and align them to each other.

Alignment

When placing elements on a screen, users expect connection between these elements. In nature everything is connnected in some way. As humans we feel something is wrong if this connection doesn't exist in the systems we use. When placing elements you can either
Align Bottom
Align bottom
Align bottom
Align Top
Align Top
Align Top
Align Left
Align left
Align left
Align Right
Align right
Align right
Align Horizontal Centers
align horizontal centers
align horizontal centers
Align Verticle Centers
align verticle centers
align verticle centers
Below we can see these alignments in action on a Prohura screen. Notice the use of each alignment method, which connects elements visually.
alignment of elements on screen
alignment of elements on screen

Spacing

The spacing of elements helps a user focus on some specific set of data. Data and user actions that will be accessed at the same time should be placed near eachother. For example in the following screen, you can see that the navigation is contained in the blue rectangle. Nearby are the breadcrumbs, which tell the user where they've been, in the bright green rectangle.
spacing of screen elements
spacing of screen elements

Size

The larger an element the faster a user will see it. When building out screens you should think about which elements the user would want to see first and make those larger, more contrasted and in sight. For example after a user clicks edit, the will be shown two large buttons to cancel edit mode or finalize the changes.
large button screen
large button screen
While these buttons large enough to stand out, they are too large to look reasonably sized. They are oversized and break congruency of sizing of the other elements on screen. Instead sizing the buttons larger than most other elements but too large will ensure that they are quickly noticed by users without looking out of place.
reasonable sized buttons on screen
reasonable sized buttons on screen

Interested in learning more about design?
The Lab

Our Library

Raidon
433 Broadway Suite 404 New York, NY 10012
+1 (332) 333-2855
© 2024 Raidon.