Understanding the 'Why' behind UI design do's and don'ts

UI designers often use space or margins to group related elements together. Grouping information makes an interface easier to navigate. However, using a common margin across the page can make it difficult for users to prioritize content.

Varying the margins helps define a sense of hierarchy on the page. It also helps create groups within groups. Margins can be made smaller as you go deeper into subgroups. Think of it as Russian nesting dolls. This enhances readability and makes the interface cleaner.

UI designers often stress on maintaining equal padding in x and y directions. This practice has its roots in the Gestalt principles.

According to Gestalt principles, our brains perceive a group of objects as a whole rather than individual elements. For example, text layered on a block is seen as a single unit.

Maintaining equal padding in x and y directions helps make each such unit visually appealing. It maintains visual balance and creates a sense of order. In turn, this makes it easier for users to scan the screen and improves the user experience.

Irrespective of the size of an element, margins and padding should always be measured in multiples of 4 or 8. Multiple of 8 are more commonly used. This is because most monitor resolutions are divisible 8.

An 8x8 pixel grid can be made to fit most mobile, tablet and desktop displays. This becomes important when scaling designs. Maintaining increments of 8 lets you make the design bigger or smaller without affecting the overall visual harmony.

Multiples of 4 are used when creating designs for small screens or creating icons.

When it comes to font sizes, it is always better to choose whole numbers. As far as possible, UI designers avoid sizes like 11.5, 12.5, etc. This is also followed for dimensions of buttons, images, etc.

This is because lower-density screens may not be able to render these designs accurately. The limited pixel availability can make designs appear blurry. Web browsers may also distribute the red, green and blue values across neighboring pixels to smoothen the edge. This isn't pleasing to the eye and lowers the overall user experience.

Line height should ideally be between 120% and 145% of the font size. This is usually what the Auto line heights are set at. Setting a lower line height may make the text look congested. On the other hand, higher line heights can affect readability.

Cloud-based design tools like Figma can auto-calculate line heights based on the font size. This helps maintain consistent spacing between lines irrespective of the font size. In turn, this creates a visually pleasing layout.

Setting ‘Auto’ line heights also simplifies the handover between the designer and developer.

24x is considered the standard size for UI icons. Using this standardized frame size helps maintain visual consistency and simplifies the design process.

Choosing a 24x frame also leaves enough space to put the icon inside a button with sufficient padding on all sides. On most mobile phone screens, 40x is considered the tappable area.

Making icons larger can affect the design’s responsiveness. On the other hand, making them smaller can make them harder to interact with.

Ghost buttons are amongst the most preferred forms for secondary or tertiary buttons. These transparent buttons usually have a basic, rectangular shape and may or may not have a thin border. This gives them a clean, minimalistic look.

Ghost buttons are popular because they are easy to design and can be integrated into almost all designs. They also help create focal points without overwhelming the viewer.

It's easy to assume that black text on a white background is the surest way to make text readable. However, this isn't always optimal. Black text against a white background has a very high contrast. When reading large chunks of text, this can put a strain on the eyes and cause fatigue.

Instead, tone down the black a little to a dark grey. Text in this color is still easy to read but the contrast is lower.

You can also use varying shades of grey to aid in visual hierarchy. For example, you could use pure black for the title and grey for the body.

Text should ideally also be left aligned. This is based on the way the English language is read. We typically read from left to right following an F-shaped pattern.

Aligning text to the right or using centrally aligned text goes against this pattern. It makes the starting point change for every line. After reading till the end of the line, the eyes have to work harder to find the beginning of the next line.

Hence, the text could be harder to read. It makes reading especially difficult for people with cognitive disabilities.

Following a set of rules for UI design simply because they exist can limit innovation and lead to rigid layouts. Every website would look the same! There are numerous principles guiding UI design. While margins and padding help create a visual hierarchy, text alignment plays a critical role in making an interface readable.

It’s okay to deviate from UI design rules. But, when they’re broken or bent, they should improve the user experience. Understanding the 'Why' behind design rules helps you assess how and when to go around them so that your design looks fresh and users continue to have a good experience.