Learnings from Refactoring UI
If you are a designer and do anything related to UI, you need to read Refactoring UI. It is a great ebook with a lot of practical tips to take your designs to the next level.
I finished reading it and can honestly say that the tips make so much sense. They can be used by anyone at any level.
Another thing I found useful is the explanations for some of the things that designers do without realizing and why they actually work. For eg. Why do elements with drop shadows appear clickable? Answer: The closer something is to the user (big drop shadow) the more interactive it appears and vice versa.
Here are some tips that I found extremely helpful or ones that I had never thought of before.
1. Start with a feature rather than thinking about the shell
When you start designing an app, first think about the actual feature/functionality of the app. Don’t start thinking about the shell i.e how the navbar will look like or where the feature will exist.
Only after designing a few features would you understand how the navbar should work. It may also happen that in the end, you find out that a nav bar is no longer required.
2. Two font weights are good enough. Normal: most text, Heavier: to emphasize
As a designer who tends to use font-weight a lot to create hierarchy, this one was very interesting to me. They suggest to stay away from font weights under 400 (anything less than Regular). Instead of using lighter weight to de-emphasize text, use a lighter color or smaller font size.
3. Make sure for bulleted lists, paragraph spacing and line-height is not the same.
I had never thought about this one before. In case you are not aware, Paragraph spacing is the spacing between lines when in a text block there is a line break or enter is pressed. Whereas line-height is the spacing between lines when the text wraps because of the text block bounds.
It is important to make the paragraph spacing to be higher than the line-height so as to show relatedness between similar content.
4. When deciding on a sizing scale, don’t have 2 values that are closer than 25%.
I tend to do it without knowing but this is a good way to put it. This rule helps to maintain enough distinction between font sizes especially at higher values.
Let’s say that your sizing scale is 8px based. At low sizes, like 8px, 16px (+100%), 24px (+50%) etc. the values are at least 25% apart. At higher values, you may encounter 80px and 88px which are apart by 10%, and thus the distinction is not clear enough.
5. Line height and paragraph width should be inversely proportional.
For narrow content, line ht — 1.5
For wide content, line ht — 2
This is a good rule of thumb to follow in case of paragraph text so that it is easy on the eyes. The wider the paragraph, the harder it is for users to make out the next line.
6. The hue rotating technique:
Sometimes it is not possible to get a darker or lighter shade of a color without it feeling dull or washed out. In those cases rotating the hue based on perceived brightness is particularly useful.
To make the color lighter, rotate the hue towards the nearest light hue and similarly towards dark hue to make it darker. But don’t rotate more than 20–30 degrees.
From the graph above, if you want to make purple darker, rotate it towards blue but to make it lighter rotate it towards pink.
This technique is particularly useful when the background and the foreground color need to have enough contrast.
7. Headlines over hero image
There are some cases when we want to display text over hero images on a landing page.
I always relied on using an overlay as the only way to maintain enough contrast. But in the book, they shared 2 cool techniques to make the text stand out.
First technique: Blend color to an image
Decrease image saturation to 0%. Add a brand fill color and multiply.
This a great way to make the presence of your primary color more apparent as well.
Second technique: Add a text-shadow
Add shadow to text but use a large blur radius and don’t add any kind of offset. (0,0, 50, Black 40%)
This is a very subtle way to create a distinction between text and the background image and it works well most times.
8. Accent border with colors
It can be a great way to add some style to an otherwise plain UI.
Here are some places where it can be used:
- Can be added at the top of a card
- Highlight active action items
- Side of an alert message
- Short border underneath a headline
- Across the top of an entire layout
9. Look for decisions that you wouldn’t have made yourself.
This was a big one for me. It was an all-round advice on what as a UI designer you should be on the lookout for to keep growing your craft.
Every time you look at a design try to identify any elements that you would have never used, the way that designer has. These types of decisions give you ideas which you can, later on, apply to your own designs.
A good example is Dribbble‘s dropdown. We are so used to seeing dropdowns with a list of text links but this is another way to look at dropdowns.
Thanks for reading. These are a few of the tips that I found to be very interesting. The book is a light read and is filled with many such interesting tips. Steve Schoger’s youtube channel is another great place to look for such tips.
👏 to let me know that I should keep writing more and comment below with the tip that you found most interesting.
Connect or follow along with me here.
If you found this useful, consider buying me a coffee ☕️.
