We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or on the dense pixel sheet of our workstations.
Often times this harmony is disturbed by all-out arrangements of elements, essential or not, in tiny places. Resulting in claustrophobic or anxious experiences, like the one we have at a cluttered desks or rooms.
And you most certainly don’t want your users to feel that way about your app or website. A good visual hierarchy which takes spacing, fonts, colors etc, all into consideration helps in coming up with consistent and clean UI designs.
To ensure that users don’t abandon your websites citing cluttered design or app as the reason, here are some layout fundamentals that will help you in creating an eye pleasing design.
Use Grids
We all started learning numbers by writing them in square grid notebooks and continued using it for handwriting practices as well. Grid style is implanted in our minds without us being aware of it. Even painters don’t shy from using grids as an assistance to picture all the elements of a painting.
It helps in accurate spacing out and ‘social distancing’ of interactions, images and content within your design. The grids are not visible to your users, but anything out of alignment will catch their attention first (unless that is your intention). Thus, designing without grids will lead to inconsistent design.
A popular argument against grids is that it limits the creativity space of the designers. However, we believe in deploying grids from initial phases itself, and then move 1-2 elements which we want to be the spotlight. This ensures consistency among our designs and at the same time, we are able to get the users attention in a short span of time.
Scanning patterns
Many studies have confirmed that we scan content or texts from left to right and in patterns, the most popular ones being ‘F’ and ‘Z’. Your users do this to find information which is relevant and interesting to them.
‘F’ scanning pattern is subconsciously carried out in cases of content heavy websites like informational ones, news and magazines, blogs etc.
‘Z’ scanning pattern is done which has lesser content and which require less scrolling.
Once you know your visitor’s attention points, you can place your CTAs, value addition information and interaction buttons accordingly.
White space
Negative space or white space is a vital component of visual hierarchy. White space helps the users in accessing an element’s importance. If there is a lot of negative space around an interaction, users by default perceive it to be significant.
Adequate usage of negative space will ensure that your users follow the pathway you designed.
Negative space will help in drawing your user’s attention to the elements of your choice and will increase the engagement rates of your website.
Spacing out the elements keeping this in mind will assist in creating a visually pleasing design.
Typography
Remember those calligraphy classes our mothers insisted on for improving handwriting? Don’t know about the handwriting, but calligraphy letters sure did look great on paper!
And yes, there is a difference between calligraphy and typography but both work on taking your content to the next level in terms of presentation and visual aspects.
Your content copy is what will your user understand about you and your organization. It will communicate who you are and what value you will provide to your customers. And the right typography will ensure that your users focus on the text written and have no criticism for the font selected.
Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience- Oliver Reichenstein
Using too many fonts can be distracting for the user. Instead use color, alignment, size and smaller variations to align with the importance of the copy you wish to highlight.
Golden ratio
The golden ratio, 1:1.618 is a mathematical discovery. But in design, it showcases the best proportional size of the elements and helps in creating an eye pleasing website and apps.
It can be applied to every element of your design right from white space, buttons and interactions size, typography, images and icons.
The overall design should also be in this proportion. Applying this ratio, ensures harmony and reduces any clutter or visual noise in your design.
Color Play
There are hundreds of emotions and moods connected with colors. The good (or bad) thing about colors is that they run their own show. Meaning, each color has a defined effect, the bright ones taking the center stage themselves, while the dull ones remain backstage.
Here also, taking too many different colors can strain the users eye and ruin the virtual experience. Colorful things do attract people but only to a certain point.
Even if you do wish to experiment with colors, you can come up with a color palette having a mix of colors belonging to a similar color family.
For interactions like CTAs, buttons, you can opt for bright or dark colors for getting your user’s attention. You can always play with the brightness, hue and saturation of the colors for establishing visual hierarchy.
Size
Any large object put in an empty room is bound to attract visitors, moving past all the other objects. The same applies to your virtual contact points.
Size of icons, buttons, images, logos, interactions will be the deciding factor for all your users. Starting with larger objects, designers then size down as a visitor scrolls down the page.
A side note here, once the largest object is fixed, other elements should have a considerable difference in their size, otherwise there the design will become cluttered.
All the points mentioned above, when stitched together, build an UI that enhances your user experience by laying the foundation of a good visual hierarchy. Missing out on any points will lead unnecessary visual noise.
A good design is when your user is not bothered by your design in the very first place. Looking for a partner that can do the same for you, talk to our designers here.
