7 rules for creating visually aesthetic UI

I’ve been into Graphic and visual design for more than 5 years now, and with time I’ve made some horrible mistakes from which I’ve learned a lot.

I’ve always thought of Graphic design as a tool to simplify complicated things..but we often end up making even more complicated design than the problem itself.

So, here are 7 rules, which I think will help a designer make better UI:

1. Minimalism is must, maximise your white space
2. Microinteractions are God
3. When in doubt, use Muted colours
4. Light always comes from top
5. Create single focus point for each screen (creating emphasis)
6. Make the user feel smart
7. Be consistent

Now lets understand all these rules:

#1 Minimalism is must, maximise your white space

Designers adore it. Business owners want to fill it

Whitespace is one of the most overlooked and under-utilised elements that make up a great visual layout. Too often, whitespace is seen as empty space and, therefore, a waste of screen real estate.

Whitespaces are really necessary to make better and simplified layout as it eventually makes the users focus on the content which they are intended to see.

Generous whitespace can make some of the messiest interfaces look inviting and simple — like forums.

Here is a very good example of whitespaces used in design:

#2 Micro Interactions are God

There are many ways to drive users engagement on website/web app/mobile app but the tremendous potential that often gets overlooked is “Micro Interaction”.

The basic rule of micro interactions is Action-Reaction, as the basic rule of physics that states that every action has a reaction. This applies to design as well. These small interactions make the design look more organic and responsive.

Some good examples of where to use Micro interactions:

• Switching on/off
• Adjusting setting preferences
• Uploading and downloading
• Notifications
• Social media sharing
• Pull-down and hidden menus
• Highlighting calls-to-action

The colour of the text changes as soon as the HEX code of the text is changed.

The mail counter increases subtly when a new mail is received.

#3 When in doubt, use muted colours

I remember the first graphic that I made was black, since then I have an unconditional love for dark tones. Most of my designs have dark tone to it. Black imparts a grace to the design that no other colour can provide.

There are times, when you have to decide the colour scheme of your design before you start designing it, and for me the trick is to use muted colours when in doubt.

The muted colours guide

Muted colours allow designers to create depth within a page without breaking the rules of minimalist flat design. A muted blue on top of a deeper muted blue is easy on a user’s eye and can evoke a kind of hierarchy that indicates page depth without relying on shading.

#4 Light always comes from top

Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at.

The most common mistake designers have made is not to know the fact that when light comes from the sky, it illuminates the tops of things and casts shadows below them. The top of objects are lighter, the bottom is darker.

Our screens are flat, but we’ve invested a great amount of art into making just about everything on them appear in 3D. Even while using flat designs we have always tried to add that 3D element without breaking the flat design terminology:

#5 Create a single focus point for each screen

Emphasis is a strategy that aims to draw the viewer’s attention to a specific design element. That could be to an area of content, to an image, to a link, or to a button, etc. We see emphasis used in most fields of design, including architecture, landscape design, and fashion design. Emphasis surrounds us, even if you might not realize that it’s called “emphasis”.

A visual hierarchy is always a good call in creating emphasis. Visual hierarchy can be cerated in various ways (We’ll not get into the depths of it here). Gestalt Principles governs the basic building blocks of interaction design.

In this case, focal point is created by colour

The Rule of Thirds is widely used by designers and photographers to create a focal point in their art and design.

#6 Make the users feel smart

Design should not be complicated. Users love when they can predict certain behaviour about the design, it makes them feel smart.

Users love products and services that makes them feel smarter. The more efficiently they can spend their valuable attention, time and money, the smarter they feel. The smarter the users feel when interacting with your product, the more they love it.

The most common example of this point is the salt and pepper rule. Its easier to differentiate between the salt and pepper dispensers on the right as compared to those on the left.

Another strong example is: If the hamburger icon is meant for a menu which comes from left then don’t use it to show profile details.

#7 Be consistent

Consistent design is intuitive design.

When design is consistent, people can transfer knowledge to new contexts and learn new things quickly without difficulty. This way they can focus on executing the task and not learning how the product UI works every time they switch the context.

Using familiar design patterns all over the design system is the best approach to be consistent. If a website has two web pages displaying blog cards then both the screens should have same card properties so that the users don’t feel alienated to the pattern of a component they have already seen.

Try to follow component driven design by building consistent re-usable components.

A really helpful guide to understand and implement consistency in design: https://www.uxpin.com/studio/ebooks/consistency-ui-design-creativity/

All the seven rules that I’ve written are my understanding of design, so feel free to drop your comments. Constructive criticism is always appreciated.