6 lessons
Free

UI Design - How to Make Beautiful Software

In this course we will cover how designers make components and screens look beautiful, simple, and pleasing.

Lesson 5

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 Top
Align Top
Align Left
Align left
Align Right
Align right
Align Horizontal Centers
align horizontal 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

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

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

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

Looking forward to meeting you.

Email us now at
info@raidoninc.com

433 Broadway Suite 404, New York, NY 10012

© 2022 Raidon Inc. LLC. - Build The Future, All Rights Reserved.