Get more updates and further details about your project right in your mailbox.
The best time to establish protocols with your clients is when you onboard them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Design consistency is a set of guidelines and principles to provide a better user experience for customers across all device types. The main purpose of design consistency guidelines is to maintain a set of design systems to make sure the application is usable and interactive across platforms. In this article we will be looking at design principles such as grid systems, fonts, colors, color psychology, icons, alignments, UX writing and shadows.
Grid systems are aids designers use to build designs, arrange information and make consistent user experiences. They include rule of thirds, golden section, single-column, multi-column, modular, baseline and responsive grid systems.
Villard De Honnecourt, a 13th-century French artist, merged the grid system with the golden ratio to produce printed page layouts with margins based on fixed ratios. That methodology continues to the present day, as the majority of printed books and magazines prove. Publishers, editors and designers place so much effort on keeping the tradition, not only because it’s known to be the best way but for another large reason. The readers (i.e., the users) expect to find everything in its proper place. Remember, the human eye is drawn to elements; it is also easily upset if it is confused or made to work out a problem it was not expecting to encounter.
On applying the above design principle for mobile and web applicatons we can come up with the following grid guidelines.
There are three types of grid guidelines for desktop, tablet and mobile view.
For desktop applications the standard grid count is 12 to 16 and for mobile view the the maximum grid count is 4. For tablets the maximum grid count is 8.
Choosing the right font and font size is priority when it comes to readability of text in the applications. Both mobile and web applications have different standards for choosing font and font sizes. We will list the do’s and dont’s of such principles below.
Body fonts should be about 16px: Different fonts can be more or less legible even at the exact same size, 16px is a good place to start when choosing your default mobile font size.
For text heavy web applications going with a 16px font size is a absolute minimum. Having a 18px font size is more readable. For interaction heavy website going with a 14–16px font size is a norm.
Avoid using fancy graphic fonts and maintain consistent font family usage
Try to avoid having multiple font families in the same application. Prioritise readable fonts over fancy caligraphic fonts.
If your text inputs have a smaller font size than that, iOS browsers will zoom in on the left side of the text input, often obscuring the right side and forcing the user to manually zoom out after using the text box¹.
Colors have their own guidelines in UI/UX. For product apps, going with brand colors as the primary color is a norm. For a perfect color combiation follow the 60–30–10 rule. 60% of the UI components should use the primary color, 30% should use secondary color and 10% should use accent color.
Apart from brand guidelines colors also play a key role in user interactivity and decision making. Try avoiding brand colors for elements of user interactivity and go with commonly agreed color schemes for call to actions.
We will be covering icons, alignments, UX writing and shadows in the next part of the article.
.webp)
.png)