Boost User Experience (UX) with the BASICS - Tips for UI designers

“Design is not just what it looks like and feels like. Design is how it works.”
- Steve Jobs, Apple CEO

Can a clean and clear layout create a great user experience?

Steve Jobs understood the role of visual design in UX. He stated that visual hierarchy, or where we place items on a screen and how we call attention to them, helps us do three things: communicate messages, illuminate actions and organize information.

When working on any project, it’s essential to keep two things in mind at all times-- your users and what they will take away from your design layout.

You can easily turn a good design into a great one if you keep in mind six core principles. I call them the BASICS:

  • Balance
  • Alignment
  • Size & Repetition
  • Intimacy
  • Contrast
  • Space

Back to BASICS

Regardless of experience level, the BASICS can help you effortlessly apply UX fundamentals to any design.

Apply these simple, essential principles during your next project and you’ll begin to view your work through the eyes of your audience more effectively. In doing so, you’ll grow more aware of how your audience might be interpreting—or misinterpreting—the message of your design layout. You’ll instantly have an added edge. And, you’ll know exactly how to manipulate elements to guide the viewer toward the important sections in your design layout.

So, how are the BASICS principles creating more dynamic and user-friendly design layouts?

Balance: One principle that seems to be included in every designer’s list is balance. Balance helps distribute the visual weight of the objects, colors and textures in your layout, creating a seamless and aesthetically pleasing design. There are three types of balance: symmetrical, asymmetrical and radial. In a symmetrical layout, the elements used on a single side of a design resemble those on the other side.

Smiley face

An asymmetrical layout displays different sides, yet still appears balanced. A radial balance displays arranged elements around a central point that may still be similar. Balance in design is no different than balance in real life. A balanced design just “feels” right to the user, while an unbalanced layout feels awkward and creates tension.

Alignment: The principle of alignment refers to placing text and graphics in a systematic manner. Readers will not consciously notice whether everything is lined up neatly, but they will notice when elements are out of alignment. Alignment helps you create order, visual connections and organize page elements. There are several different varieties of alignments: horizontal, vertical, edge, central and visual alignment. Horizontal alignment deals with left and right margins and alignment across the page.

Smiley face

Vertical alignment refers to the top and bottom margins being visually equal. Edge alignment places text and vectors along the appropriate edges. Central alignment could be either horizontal or vertical. All elements should work together to create a visually pleasing layout.

Size and repetition: Size refers to the relationship of the area represented by one shape to that of another.

Smiley face

Repetition is widely used in websites and refers to the replication of visual elements like line, color, shape, texture or image. Both work together to create rhythm, association and consistency. Repetition has the power to strengthen a design and can be as simple as repeating typefaces or textures.

Intimacy: When a user views random objects on a page, he or she tries to make relevant connections based on what is presented.

Smiley face

Intimacy refers to the closeness of these objects. Designers help users make connections by arranging objects into groups that convey a desired meaning. Obvious spacing is an easy process of grouping objects through the placement of physical barriers. You can use a variety of shapes, colors or textures to visually group similar items together and provide visual separation for dissimilar items.

Contrast: The principle of contrast refers to the arrangement of opposite elements in a single piece. It can encompass values, colors, textures, shapes and other components.

Smiley face

Contrast is so much more than just “light or dark”-- it works to create visual interest and excitement. A UX designer applying the principle of contrast is trying to direct the viewer’s attention to a specific point.

Space: Space is a design principle that can be used to either separate or connect elements in a design layout.

Smiley face

It helps show the difference between the separate sections of your site and ensures that the user will not get disoriented. As long as boilerplate white space is consistent, the viewer is aware that the site is the same. However, if only the positive elements are arranged, the white space in your layout will be ineffective. If white space in a layout has been arranged well, all elements will fall into place.

So, those are the BASICS. Try incorporating these elements during your next project. How did it help you gain insight into the user experience? Do you have questions about applying the BASICS? Feel free to leave your comments and I will try my best to respond.

Next month: Learn why you should never leave your user “alone”…