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.
- Minimalism is must, maximise your white space
- Microinteractions are God
- When in doubt, use Muted colours
- Light always comes from top
- Create single focus point for each screen (creating emphasis)
- Make the user feel smart
- Be consistent
Now lets understand all these rules:
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 user focus on the content which he is intended to see.
Generous whitespace can make some of the messiest interfaces look inviting and simple — like forums.
Here is a very good example whitespaces used in design:
There are many ways to drive users engagement on website/web app/mobile app but the tremendous potential that often get overlooked is “Micro Interaction”
The basic rule of micro interactions are Action-Reaction, as the basic rule of physics that states that every action has a reaction, this applies to design aswell. These small interactions make the design look more organic and responsive.
Some good examples to use Micro interactions:
- Switching on/off
- Adjusting setting preferences
- Uploading and downloading
- Social media sharing
- Pull-down and hidden menus
- Highlighting calls-to-action
Here is a very good example micro interaction used in design:
I remember the first graphic that I made was black, since then I have an unconditional love for black colours, most of my designs have dark tone to it, I think black gives the design the maximum grace that no other colour can give.
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.
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.
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 tops of stuff are lighter, the bottoms are darker.
Our screens are flat, but we’ve invested a great amount of art into making just about everything on them appear be 3-D. Even using flat designs we have always tried to add that 3-D element without breaking the flat design terminology:
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 depths of it here. Gestalt Principles governs the basic building blocks of interaction design.
The rule of Thirds is widely used by designers and photographers to create focal point in their art and design.
Don’t hide things in complexity in design, users love when they can predict certain behaviour about the design, it makes them feel smart
Users love products and services that make them feel smarter. The more efficiently they can spend their valuable attention, time and money, the smarter they feel. The smarter that 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, the left shakers as seen is very hard to guess which is salt and which is pepper whilst on the right the shakers are very easy to guess which is salt and which is pepper.
Similarly in design, follow the universal design and dont make it more complex for the user to understand the design.
Strong example is: If the hamburger is meant for a menu which comes from left then don’t use it to show profile details.
Consistent design is intuitive design
When consistency is present in your design, people can transfer knowledge to new contexts and learn new things quickly without pain. 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 pattern all over the design system is the best approach to be consistent. If a website has 2 web pages displaying blog cards then both the screen should have same card properties so that user doesnt feel new to the patter he already has seen. Try to make the design in components and use those components all over the design.
A really helpful guide to understand and implement consistency in design https://www.uxpin.com/studio/ebooks/consistency-ui-design-creativity/
All the 7 rules that I’ve written are just my understanding of design, so feel free to agree disagree.