Part Two: Foundational Design Principles worth knowing

This is the 2nd article in a 3-part article series of personal experiences and industry tips to take your graphic design career to a different level.

A few weeks ago, we touched on the differences between Graphic and UI design. In this article, I’m going to take you through a few of the foundational design principles which apply to both disciplines, but will certainly benefit any designer wanting to accelerate their UI career. These are principles you would already use in any creative design environment.

Why the need for sharing this kind of information? It’s simple, really. A lot of designers get by on making beautiful artwork and validating it by saying it’s “aesthetically pleasing to the eye” or “it’s pretty”. This may be good enough for a print ad campaign. Unfortunately, in the user-centred world, that sort of rationale just won’t cut it. Our stakeholders want data, heuristics, research and best practice examples as design justifications. 
The principles in graphic design and UI design are largely similar, even though the platforms are different (as I mentioned in my previous article). This is why I think any graphic designer can become a great UI designer. 

Here are a few key principles you need to know when embarking on the move.

Visual hierarchy

Just as you would create a movie poster with the title of the movie being the key copy on your poster, hierarchy in any digital scenario is similar, only here you would display the key information, like a page title or distinct action you want the user to take as most important information.

Why is it important? Simon’s Law states that ‘hierarchical structures reduce complexity’. This means that the better your sense of visual hierarchy, the easier your content will be to understand and remember.

Balance and proportion

Balance is the arrangement of elements on your design which avoids putting all your heavy elements in the same place. Symmetrical balance creates balance by aligning equally sized elements, and asymmetrical design is the opposite, you align a bigger element with smaller ones to create a contrast effect.

It’s also important to remember that balance and proportion are not only limited to imagery and copy. It can also come in the form of colour, texture and type.

White space

I cannot emphasise this enough. White space not only reduces the cognitive load for the user, but it makes it possible to understand and absorb the information presented on the screen. New visitors approach designs by firstly scanning the page and then dividing the content into bite-size chunks of information.

When your design is too cluttered or busy, the page becomes overwhelming and harder to read. It’s always better to let your sections ‘breathe’ by having sufficient white space around them.

Contrast

In a world where accessibility is becoming more and more important, contrast plays a vital role in any design. Contrast is basically the difference between 2 elements. If you use a dark background, your text should be light and vice versa. When designs are too similar in colour tones, it becomes harder for someone to read or distinguish between different elements. You’ll see this in call-to-action buttons. The primary button is usually in contrast with the secondary action button so that the user can clearly distinguish between the two actions. 

Rhythm

Just as music and poetry have a rhythm, so too should your design. Common elements or groups of elements are repeated with equal spacing between each other, creating a natural flow in the design to make it predictable (again, reducing cognitive load) and easily understandable. 
There are fives types of visual rhythm: random, regular, alternating, flowing and progressive.

Unity

The principle of Unity refers to how well elements used in your design project work together as a whole. Ideally, they should have clear relationship and communicate the same concepts or messaging. Designs with unity look more organized and are easier to interact with. 

Pattern

Pattern in design refers to the repeating of multiple elements in your design working together to create an attractive and cohesive design. 

A good example of this is on e-commerce sites in their product displays. Although the product is made up of a number of elements (product image, price, availability, action button) all products are displayed in the same way, with the same spacing between them, creating a pattern. It becomes instantly recognisable by the users as to how to interact and consume the information on the page as well.

Consistency

Icon

Description automatically generated

This is one of my favourite design principles and probably why I specialised in UI design in the first place. I love rules and I love boundaries. While some would argue this is not necessarily a principle, I feel that it’s probably one of the most important attributes to UI design. Consistency refers to the same elements being used or displayed in the same way throughout the design. If all your buttons are on the bottom left of a component, then that’s the way they should be treated throughout the design. Typography and text styles also need to be consistent. Alignment and grids need to be consistent. Spacing needs to be consistent. Image treatments and sizes need to be consistent. I think you can see where I’m going here. 

Conclusion

These are just some of my favourite design principles, there are many more. I’ve created this handy download for you to quickly refer to. Play around with them in your designs and see how much of a difference they make. 
The next time you are asked to playback any of your designs and what the rationale is behind them, refer back to some of these principles. It sounds a whole lot better than “I thought it looked nice”.

Download your FREE copy here.

MORE ABOUT SHANNON

Harnessing her skills and expertise in Visual Communication and Creative Direction, Experience Design became a natural career progression goal for her where she has been able to specialize UI as her craft. Her strength lies in building and managing design teams of all skill levels including graduate designers all the way to design directors.

Connect with Shannon on LinkedIn: https://www.linkedin.com/in/shannon-glenn-0b341131/