Design guidelines to display content consistently across all device types — Part 1
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
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.
Fonts
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.
Mobile Typography Guidelines
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.
Web Typography Guidelines
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.
Text input sizes should be at least 16px
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
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.
Color Psychology
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.
About the author
Jameel is a UI/UX designer with a flare for design and arts. Jameel started as a brand designer and fell in love with holistic design in UI/UX. He loves to travel and gain new experiences.
About CodeStax.Ai
At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.
But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.
