I’d probably assume that most of us started in UI design with the littlest knowledge or nothing at all. But even though the odds were against us at the start, we managed our way through numerous design books and articles to understand how colors, typography, layout etc works. I remember how it is established in us at Make Technology, a UX driven company, that Design can’t be simply explained by colors, shapes, and text. It is a process that has a “Why” behind it, that whenever we create a text bigger, add a shadow, or change the color, there has to be a reason of why things have to be.
Thus in this article, I’ll be sharing a list of things I’ve learned from different companies, designers, things I’ve learned in designing user interfaces, and new discoveries I found along the way:
*Disclaimer: The following “Don’t” samples provided doesn’t necessarily mean they’re wrong. It’s our basis of how we can improve from a good design solution to a much better one ????
1. This text is important, make it bigger!
When faced with content that needs font hierarchy, making the text bigger to give emphasis and importance usually doesn’t solve the problem, just like the one below:
Font hierarchy is just not about small to big font sizes. It is about the right mix of size, weights, and colors that creates contrast. Bigger contrast, the better.
Apologies if the photo comes in low res format ✌️
So how do I create better contrast?
- Don’t use one kind of weight with different font sizes to create contrast and hierarchy.
- Instead, use bolder and darker style for primary content, or smaller and lighter for secondary content (less important).
- Create three kinds of text colors that varies from dark to light (see example below). Usually I use my base color as body text color.
- Don’t be afraid to apply big font gaps to your items (i.e. 24px header, 16px body text, 10px meta etc). Bigger gap = better contrast.
- Check out Modularscale an online calculator you can use to create better font hierarchy.
- Remember, contrast is = size + weight + color.
- Lastly, make sure to check its contrast ratio. You can use this calculator to check its accessibility.
from my base color, I move from darker for headlines to lighter for ancillary content.
2. Don’t create multiple shades of black
Don’t make your life difficult by moving your color picker up and down to produce different shades of black text over white background.
We all know that using black text color (#000) causes eye strains for readers, and so our solution is to create darker variants as an alternative. But instead of color picking 3 or more hex color values, we can use black with different opacity as a solution:
In my example above, I used black as my primary color (#000) and decreased its opacity depending to where it will be applied (i.e. primary content, secondary content, etc)
3. Do the math for understanding colors
Most of us suck at picking the right color combinations, and whenever we see a design with a well orchestrated color palette, we question ourselves “How the F they did it?” (just like the one below):
taken from momoandspirits
Until I learned that understanding colors is not just for those who have the gift of design since the beginning of time, that a simple addition and subtraction at Hue, Saturation, Brightness (HSB) will do the magic (we will be using HSB for this formula instead of RGB). You can easily get rid of the boring white over colored backgrounds, and turn it into a Picasso work like the one below:
So where does the addition and subtraction in HSB comes in?![]()
Two approaches for understanding colors
There are actually two approaches we can do, and as we can see, both options have the same base color #B9F4BC (circle background) but differ when it comes to Folder and Strip color. As we start, always remember that the first number corresponds to Hue, followed by Saturation and lastly, Brightness.
Option A![]()
Option A
In Option A, we can see that we kept the Hue value 123 all throughout the shapes (circle, folder, strip) while the Saturation and Brightness are where the change happens.
Now, as we focus on the Saturation of the base which is 24 and its Brightness, 96, both values changed when we created darker green for the Folder. From Saturation of 24 it became 40 (increment of +16) and from Brightness of 96 it became 82 (decrement of -14), which shows us that a change in saturation whether incremental or decremental needs an inversely proportional adjustment to brightness, in order to create a good contrast (vice versa). And the same thing happened in Strip, using the Folder’s Saturation and Brightness as base value, we moved from 40 to 44 (increment of +04), and decreased from 82 to 75 (decrement of -07) for Brightness.Thus, leads us to the formula:
"Darker Value = Increment in Saturation is a decrement in Brightness.
Lighter Value = Decrement in Saturation is an increment in Brightness"
This formula helped me every time I’m in wonder of what right colors should I use on my designs. I learned that the best starting point is to have a base color, and from there, start the adjustments in Saturation and Brightnesswhile keeping the Hue value the same.
Option B![]()
Option B
In Option B, the same principle is still applied (the formula we had above) but the Hue values change. And the terminologies RGB and CMY which we used to pass by in various design materials, will now make sense for us.
RGB stands for Red, Green, and Blue, while CMY is Cyan, Magenta, and Yellow. These terminologies haven’t made any importance for me when I first started, until I came across this discovery of using RGB and CMY for color combinations.
Now In Option B, if we want to have a darker variation of the base color, all we need to do is move our color picker to the direction where the nearest RGB is located in our color palette, or move it the direction of CMY for lighter variation. For example:
Color Picker
Since we want to create a darker variation of our base color #B9F4BC (circle background) which is to be applied in our Folder icon, we need to move our color picker to the direction where the nearest RGB is located (which is Blue in this case). But if we want to have a lighter version of our Folder, we will be moving our picker to the left, near CMY (in this case Yellow).
"*More often RGB leads to darker variation and CMY for lighter one"
After moving the color picker to our desired variation, we now apply the formula in Option A, which results us to having this color combination:
"Red, Green, Blue (RGB) + Option A formula = Darker variation. Cyan, Magenta, Yellow (CMY) + Option A formula = Lighter variation"
4. Use spacing to separate groups ![]()
Be a generous space giver
Aside from adding a line between two groups to show separation, using a generous space between is a better and easier solution.
As what the Law of Proximity states:
"Objects that are near, or proximate to each other, tend to be grouped together."
From my example above, my goal is to create a separation between my title and its writer by using a large space gap between them which is 24px.
5. Use colors to separate rows![]()
Colors as separators
Doing row interfaces could be boring at times to design, since it only requires duplicating the component for n times. But on the user side, reading them can be difficult specially if there’s no great distinction between one row to the other. Thus aside from using lines, adding color background in rows can be a lot helpful for users in reading, and also will be more enjoying to do for us designers????
6. Multiply instead of Drop shadow text ![]()
Header design
It’s quite challenging designing header components or adding text over an image specially if the image background will be dynamic (or can be changed from time to time).
Usually the common solution for text with dynamic image background is adding drop shadow, but it doesn’t help user’s readability. It adds more visual clutter around the letters and words because they fill up the spaces in between them.
For some, black/white color overlay is the solution which is a helpful hack for these kinds of designs. But recently, I’ve discovered about using Multiply as blend tool for a gradient fill.
Specs for Multiply blend options
Doing it is much easier than creating a black background over the image and lessen its opacity. Also, having it grayed scale makes the other part of the image retain its natural color, and makes the part where the text is located a little bit darker, for text readability.
7. Line Length![]()
The common thing most designers do is making the line length longer so that it may fit its container. But doing so, creates eye strain for our users unlike having a 45–65 characters per line which is the ideal.
If you ever came across the dilemma of making the length shorter to make it ideal but will result to a big white space at the right side like the one below:
with big white space at the right
Don’t hesitate to do so, and make the whole text column center aligned to its container, so that you can remove the white space.
centered content
8. Don’t reinvent the wheel![]()
What makes a design inconsistent is when it is not component based. It is when you came to realize that you’ve made 5 kinds of card interface, 10 buttons, 5 heading title styles etc.
Before you start creating an interface for specific content, try to look around your previously created designs, for you might see a pattern which you can recycle and use.
Instead of reinventing the wheel and create another card for an Art Group (example above), we can use the Article card and replace it with the Art Group’s content. This will save time for designers and also make the interface consistent.
9. Use brand colors as accents![]()
We usually think that branding colors must occupy a big chunk of our interface colors. We are having a hard time where to showcase our client’s shocking neon yellow, orange, and pink branding colors in our clean and minimalist layout. The answer? use them as accent colors.
10. Hang the bullets ![]()
<
/h2>
/h2>And lastly, if you are creating a list design like the one above, make the bullets, glyphs, or number sit in the margin to highlight the list. This will make the user readability flow uninterrupted and more legible.
There’s still a long list of design cheatsheets I would like to add, but for now, I hope these 10 design tips will help you in creating design interfaces. Also, feel free to add your cheat codes in the responses ????
This article is inspired by 7 practical tips for cheating at design and by tons of design articles, I’ve read :)
This article was originally posted on Riel M's Medium page.
