Over the 5+ years I have been working in the tech world on websites and products, I’ve come to learn that the combination of many small details come together to make the final work great. Things like typography, grid systems, alignment, and even spacing can really make a difference in the overall look and feel of a product.
While this may seem obvious, it’s most likely more detailed than you’d think. I know it was for me when I was first starting out. My boss/mentor a few years ago had a big impact on my approach to these details. If what I was working on had a small spacing issue or even a couple typos, I had to redo the screen and make it better somehow each time it happened.
It might feel like this was a waste of time from an outside perspective, but it was quite impactful for me. This practice helped me really dial in on high-quality and detail-oriented work. I developed a keen eye for catching small details and mistakes (not only in my work, but the work of others which has been helpful in a team setting) and has lead to much more refined work. This has made me much more careful in my work as well and has helped me avoid typos, kept spacing consistent, watch for alignment, etc.
Here are a few high-level tips that may be helpful, make sure to double check each of these often, especially before a review day:
Typography
- Create a system and use case for typography sizes and spacing.
- Make sure all your leading is tall enough for legibility—default values aren’t always the best option.
- Use 2 typefaces max and assign each to their own use cases.
- Use 3 font weights max and assign them to sizes or use cases.
- Use system fonts when possible.
- Give type space to breathe, makes it easier to read and digest for users.
Use a Consistent 8pt Grid
- You can read about the 8pt grid and how to use/create one here and here
- Keeps you from guessing and “eye-balling” spacing of elements
- Helps you work faster and more consistently
- A great foundation for quality design work
Double Checking
This is a big one that’s overlooked, a lot of the time designers are in a rush to get something shipped and don’t double check work. I see it all the time, trust me!
- Check for typos, goes a long way in presentations and avoiding copy confusion.
- Make sure your alignment is consistent, even a few pixels off here and there can have a bigger impact than you’d think.
- Make sure your spacing is not only consistent, but visually correct. For example, containers are actually better visually when the vertical space is a bit more than the horizontal space. Designers tend to always make these the same but visually they won’t look correct to a user.
- Check that you are using a consistent color palette and don’t have legacy colors or mistakes. Inconsistent colors are a sure way to lose trust from users subconsciously.
At the end of the day, these should obviously come after time and effort put into figuring out core features and the experience of a product. I find that iterating quickly at the beginning of a project without giving too much thought into details is better. Afterwards I come back through and clean up files with the above in mind to not limit myself or spend too much time on things that aren’t crucial to a product at first.
Hope you found this helpful!
