Image for post
Image for post

7 rules for creating visually aesthetic UI

Raunak Trikha
Jun 4, 2018 · 5 min read

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:

Image for post
Image for post

#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
Image for post
Image for post
The colour of the text changes as soon as the HEX code of the text is changed.
Image for post
Image for post
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.

Image for post
Image for post
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:

Image for post
Image for post

#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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post

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.

NYC Design

A publication for designers of New York & design lovers from all around the world.

Raunak Trikha

Written by

I geek out on Design Systems, Human Psychology, and Smoothies.

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Raunak Trikha

Written by

I geek out on Design Systems, Human Psychology, and Smoothies.

NYC Design

A publication for designers of New York & design lovers from all around the world. Design thinking is what makes us share with the whole world.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store