DEMYSTIFYING COLOR AND LAYOUT.

Omotolani Ogunleye
3 min readJan 8, 2022

Layout Grids and Colors play vital roles in designing a product so I’ve done a bit of reading to break them down for easy understanding for beginners like myself.

BASIC UNDERSTANDING OF LAYOUT GRIDS

When designing, we can’t just randomly toss elements on the page without thoughts-we try our best to place them with rational logic. Layout grid is an instrument or tool used in the process of organizing visual elements-like text, images and shapes-on a given page. It helps create consistency, proportion, rhythm and harmony in products, either websites or apps.

SOME OF THE TERMS ASSOCIATED WITH LAYOUT GRID.

Margins- These are the negative spaces between the edge of the format and the outer edge of the content.

Columns- These are the building blocks of grids

Alleys/Gutters-The spaces between columns.

USES OF GRIDS IN UI DESIGN

  1. People experience apps and websites on devices with a broad range of screens, using a grid creates a consistent experience across multiple devices with different screen sizes.
  2. It helps quicken design process as perfect designs are created from the start and there is no need to rework adjustments.
  3. An effective grid guides the eyes, making it easier and more pleasant to scan objects on screen i.e Clarity.
  4. Grids are used for consistency-users can easily understand where to find the next piece of information.

A BASIC UNDERSTANDING OF COLORS

Color, as we may or may not have known ,have strong representation of our emotions; this makes choosing the right palette one of the most crucial and essential steps in any design process because not only does color affects the style but also the mood.

For example, Red is a very strong color; it symbolizes strength, passion and confidence but it can also mean aggression, anger, alerts or danger while Yellow connotes cheerfulness and adds a pop of refreshment to one’s palette. Color choice can be personal, cultural or conceptual so when it comes to designing a web product for a specific culture, it is important that the traditions and beliefs are taken into account to make sure colors are interpreted as they are designed to be. By acknowledging the culture’s perception of color, UI designers could engage right users by avoiding any possible misinterpretation about the product designed.

WHY YOU SHOULD USE THE RIGHT COLORS.

  1. Colors promotes Precision/Clarity: Aesthetically stimulating and balanced color palette influences usability, navigation, interactions and provides clarity of content to users.
  2. Colors coordinate the experience of a product by setting the tune to the mood, overtone and undertone.
  3. Colors creates an overall harmony and set a recognisable language for a brand.

Some of the things to consider to make right color selection

  1. The golden ratio of colors “60–30–10”: The idea is that one color -generally something fairly neutral-makes up 60% of the palette, another complementary makes up 30% of the same palette and another color is used as an accent for the remaining 10% of the design.
  2. Simplicity: A simple color palette makes content easier to consume.
  3. Users with Visual impairment.

Until next time!

--

--