CareerFoundry UI Design Short Course - Day 02

UI Design Short Course Header

I hope you’re feeling confident now that you’ve had time to sleep on what you’ve learned so far!

How did you do on the exercise? Were you able to explain what UI design is and what a UI designer’s job entails?

Today we’re going to dig a bit deeper and start looking at some basic principles of design. While UI design is certainly a creative field, it’s not as open to interpretation as other art forms. When UI design adheres to predictive patterns, users have less to think about and, in turn, are happier when they use your interface.

Basically, these principles will make your job as a UI designer a bit simpler. And simple is good, right? Let’s dive in!

Movement

Movement refers to the path a viewer’s eye takes as it navigates a composition or layout. Take a look at the example below. Doesn’t your eye naturally travel from left to right, making you feel like the lines are toppling over?

Email2-Img1.png

You can create movement in the same way in UI, to guide your users through sections of screens or to create hierarchy and emphasis. You can use lines to direct movement, as well as shapes, color, and even gradients.

Rhythm

Rhythm is organized movement. It’s very active and, for obvious reasons, closely tied to music.

Email2-Img2.png

You can create rhythm using:

  • Repetition: using predictability to create a pattern
  • Alternation: using contrast to create a pattern
  • Gradation: using a series of steps to create a pattern

Using these 3 techniques, there are 3 main kinds of rhythm you can plan for in design. As you read about them, it’s helpful to assign a sound to each shape you see. Play the beat they would produce in your head. It will help you understand how rhythm works visually.

Regular Rhythm

The hallmark of regular rhythm is predictability. Identical elements are arranged over predictable intervals, just as it is done in the example below.

Email2-Img3.png

Flowing Rhythm

Flowing rhythm is organic. Each element making up the pattern is similar but not exactly the same and the intervals vary slightly. Think of zebra or tiger stripes.

Email2-Img4.png

Progressive Rhythm

Progressive rhythm is a combination of both. Elements are placed in regular intervals but begin to vary and change gradually. Essentially, one element transforms into another or a variation of itself. Think of the notes on a harp and how they gradually transform into each other. A color gradient is an example of progressive rhythm.

Email2-Img5.png

In UI design, rhythm can add structure and visual interest to your layouts. It will also provide an avenue for you to explore alternative solutions to traditional, overused layouts.

Balance

Balance in design works just like it does in the real world. You distribute the objects' “visual” weight on the screen to make sure it doesn't feel like it is about to topple over. There are 2 types of balance: symmetrical/formal and asymmetrical/informal.

Symmetrical or Formal

In symmetrical balance, both sides of a composition or layout will look exactly the same. If you sliced the example below horizontally or vertically, you'd have two identical pieces. If they sat on a scale, both sides would sit at the same height.

Email2-Img6.png

Asymmetrical or Informal

Elements on either side of a composition or layout are different in asymmetrical design. They still, however, feel balanced. Take a look at the composition below. If it sat on a scale, would both sides be at the same height?

Email2-Img7.png

Balancing your compositions, using either symmetrical or asymmetrical balance, will be important in your design. When layouts lack balance, you can create unwanted hierarchy and screens that feel awkward. It is the same feeling you get when you light elements from the bottom—it just doesn't feel right.

Proportion

Proportion deals with the size relationships of components in a composition or layout, how they relate to each other, and how they work to create unity. Think of your body. All its parts are proportional; they feel like they belong and work well together. You want to achieve the same feeling in design.

Email2-Img8.png

When designing interfaces, all UI elements should feel “the right size.” You would not want to create a button so big that it eclipses other elements. Its size must suit its function and work well with the other elements, making them feel like a family.

Emphasis

Emphasis deals with highlighting one element or section over another in a composition or layout. It’s similar to making text bold or italicized.

Email2-Img9.png

Emphasis is a great tool for establishing hierarchy or directing a user’s attention. Elements noticed first will be dominant in your layouts and those that follow will be subordinate. You can create emphasis using size, color, or any other attribute that will be applied differently to the element you wish to emphasize.

Ready to put what you’ve learned to use?

Fire up your favorite app or website and let’s see if you can identify some of the design principles above. You’ll be surprised how often these principles are put into practice in apps you use every day!

That’s all for day 2 of the CareerFoundry UI Design Short Course—you can breathe a sigh of relief! Why not check out our recommendations for further reading below?

Further Reading

If you've enjoyed the topics covered in this lesson, take a look at these articles from the CareerFoundry blog:

What Are Gestalt Principles? A Designer's Guide

Why Consistency Is So Incredibly Important In UI Design

Essential Tools For UI Designers: A Beginner's Guide


This page was last updated: 11-6-2019