Understanding the ‘Why’ behind some basic UI design practices

As the first assignment at 10kdesigners, we had to replicate the UI from existing app screenshots. Our main aim was to deconstruct a well designed app and understand some of the design decisions like colours, spacing, typography, etc. and try to replicate them pixel-perfectly.

This blog is an attempt into understanding why some common design practices are followed, helping us understand and apply these principles better in our own designs.

We had just submitted our first assignment and were relaxing in the 10kdesigners’ discord voice channel, sharing our experiences and insights. During our discussion, Yug, one of the industry mentors, asked us, “What did you learn from your first assignment?”

As I shared my thoughts, Yug gave us a great tip: while following best practices is crucial, it’s equally important to understand the why behind these practices. He explained that this deeper understanding helps us think in layers and make more informed design decisions.

Naturally, being curious by nature, I was hooked. I quickly noted down some major takeaways and started researching online to figure out the reasons behind these design practices. My aim was to get as detailed as possible and really grasp the why behind these seemingly straightforward principles.

❓ Ensure that padding is consistent in both the x and y directions

Why?

• Consistent padding in both the x and y directions contributes to visual harmony and a sense of order within the design. It creates a balanced layout that is easier for users to scan and grasp mentally, enhancing the user experience.
• This practice is rooted in the psychology of design, specifically in the Gestalt principles.

Gestalt principles are all about how our brains prefer to see things as a whole rather than just separate parts. So, even if there are many blocks or elements, our brains tend to group them together as one unified thing.

Cases where inconsistent padding is used intentionally:

• Optical spacing

  It is more or less the “art” side of the spacing system. Inconsistent padding is used here to create a visual hierarchy which makes a visually balanced and harmonious layout, taking into account the shapes of characters and their interactions.

• Asymmetrical focus

  To draw attention to specific content or sections, we may apply different padding values in the x and y directions. This technique can guide the user’s focus and highlight key information within the interface.

Conclusion

• In most of the cases keep padding consistent in x and y directions. For cases where images or vectors need to be aligned optically, inconsistent padding should be used.
• If you want to use inconsistent padding for focusing any element then make sure that it does not disturb the overall flow of the design.

❓ Maintain padding and gaps in multiples of 8 or 4

Why?

• Most modern displays and monitor resolutions are divisible by 4 or 8. Hence following this leads to a more cohesive and polished look.
• Both Google and Apple recommend the 8pt system. If Apple is using an 8pt grid in its Design System (Human Interface) and Google also in theirs (Material Design), for us as product designers it has a lot of importance.
• This also makes it easier to scale the design. Whether it’s increasing the size of elements or the entire layout, having a base grid that is divisible by 8 or 4 allows for seamless scaling without losing the harmony of the design.
• Use of multiples of 8 or 4 contributes to a more visually appealing, organized and consistent design, making it easier for users to navigate and consume the content.

Is it necessary to always follow this? What are the examples?

No, it is not always necessary to follow this practice. Main goal is to balance structure and creativity to achieve effective and user-friendly designs.

Examples:

1. Artistic or creative portfolios: Personal or portfolio websites may intentionally break away from the grid to showcase creativity and individuality.

2. Branding websites: Brands looking to establish a unique and memorable online presence may use unconventional layouts that do not strictly adhere to a traditional grid.

Conclusion

It is recommended to use 8pt or 4pt (for more granularity) grid system. But it is not necessary that this should be practiced always, main thing that matters is to balance the structure and order of design with creativity.

❓ Avoid decimals

Why?

• High-density screens can handle decimals but lower density screens may display designs as blurry due to lack of “extra” pixels to render the design accurately.
• This can lead to issues such as visual inconsistencies and complications in rendering on lower density screens. This may also lead to unintended design issues.

Conclusion

It is the best practice to avoid decimals.

❓ Keep line height of text to ‘Auto’

Why?

• This ensures that the spacing between lines adjusts dynamically, maintaining a visually pleasing layout.
• This is also related to the trouble in the handoff between designer and developer, and keeping the line height auto can help mitigate this issue.
• This allows Figma to distribute line height just like web does. When line height is set to auto, Figma will calculate the line height based on the font size, which can make the maintenance of text styles simpler and simplifies the overall design process.

Should we always keep line height to Auto? What are the edge cases?

No, it is not necessary to always follow this. The line height should typically be between 120% to 145% of the font size, making the text more readable. But this may vary for different fonts.

Edge Cases:

1. Visual alignment: In some cases, we may need to align text elements visually by using a consistent fixed line height, even if the content varies.

2. Accessibility: To improve readability for users with visual impairments, a fixed line height adjusted as per needs can be beneficial in these cases.

3. Unusual font: If we are working with a font that has an unusual intrinsic line height, we may need to adjust line height manually to ensure that the text is readable and well-spaced.

Conclusion

• In most of the scenarios keeping the line height Auto is the best approach. For readability, line height should be between 120% to 145% of the font size.
• We can use different line height but it should not disturb the visual design flow, and also ensure that it does not create conflicts while handoff.

❓ Keep icons in a 24px frame

Why?

• Icons are designed to work best in specific sizes, and 24px is one of the standard sizes for icons. By using a consistent frame size, and exporting icons at that size, designers can ensure visual consistency and simplify the design process.
• Usually for mobile devices the tappable area is 40px, hence most of the CTA buttons in well designed apps are large and above 32px to 40px, and 24px being the minimum standard size. We should avoid making a CTA button go below 24px.

Are there any cases where we need frames smaller than 24px?

• Yes. When designing for small screens or dense content areas, a smaller frame size may be necessary to create an icon or to fit within a specific layout.
• Furthermore, when building an icon set, it’s recommended to choose a common size for all icons, such as 16px, 24px or 32px, and then allow for scaling to other sizes as needed. This helps maintain visual consistency and efficiency in the design process.

Conclusion

Icons should follow some basic size guidelines when being created. Sticking to a 24x24 pixel icon is a great middle of the road icon size to start out with. But if needed for specific applications, we can use smaller frames of 16px or 20px too.

❓ Ghost buttons 👻

What are Ghost buttons?

• Ghost buttons are basically secondary or tertiary buttons, used typically as call-to-action (CTA) buttons, which help to create a visual hierarchy of buttons, allowing the most important button to be promoted.
• They are usually transparent and empty buttons with a basic shape, often bordered by a very thin line with a subtle colour contrast between stroke and background. Ghost buttons offer a clean and minimalist look.
• Some use-cases where ghost button can be used are: “Learn more”, “Sign up”, “Get started”, “Go back”.

Conclusion

• Ghost buttons enhance the aesthetics of an application while providing a subtle and user-friendly way to guide visitors towards important actions.
• Ultimately, the choice of using ghost buttons should align with the overall design strategy and the preferences of target audience.

I greatly enjoyed researching and documenting this blog and hope you enjoyed reading it as well. For any feedback, suggestions, or just to have a chat, please reach out to me on Twitter, Peerlist, or LinkedIn.

Want to know more about me? Check my portfolio site and do reach out if you wish to work with me or collaborate. ([email protected]) 😼

धन्यवाद 🙏 Thank you!

😼 You can give up to 50 claps for an article on Medium. Just click and hold the clap icon for few seconds and watch the magic happen! 😉