August 18, 2023

Design guidelines to display content consistently across all device types — Part 1

The best time to establish protocols with your clients is when you onboard them.

Heading

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

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.

Image showing different grid patterns used in publishing. Credits: Jason Prini. Copyright terms and licence: CC BY-NC-SA 2

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.

Font size comparison across differnet fonts. Courtesy: https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

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.

CodeStax.Ai
Profile
August 17, 2023
-
6
min read
Subscribe to our newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share this article:

More articles