When creativity and talent fail you, implement these 5 tactics so your designs won’t pay the price.
Once in a while, every digital marketer, graphic designed and web designer faces difficulties making the decisions regarding their designs. Maybe the company you are working for doesn’t have a full-time web designer who will make these decisions for you, or maybe you need to make a decision to improve the UI for a personal project. Or, maybe you are creating a whole new website and you want it to look better than a typical Bootstrap website.
It is easy to give up and comfort yourself saying “I will never do my website look that good; I’m not an artist”. But don’t give up just yet – most of the web designers these days do not have any artistic skills, yet they design websites that will make your jaw drop. Here are five tricks I would like to recommend you in order for you to improve your designs. Not a designer? No problem! These are purely practical advice that require no previous background in graphic design whatsoever. With no further ado, here are my tips.
1. Use font colors and weight to create hierarchy
We often make the mistake of using font size to create hierarchy in our designs.
“This sentence is important? Let’s make it bigger.”
“This sentence is not important? Let’s make it smaller.”
Instead of giving the task of creating hierarchy to the font size itself, try to share the responsibility between font color and font weight.
“This sentence is important? Let’s make it bolder.”
“This sentence is not important? Let’s make it thinner.”
Regarding font color, my general advice is to use two or three colors only:
- Dark (but not black) colors for primary content (for example, headline of a blog post);
- Grey (but not black) colors for secondary content (for example, publishing date);
- Light colors for not-so-important content (maybe some information included in the footer);
The same goes for the font weight. Here’s the general rule of thumb:
- Normal font weight (400 or 500 depending on the font style) for most content on your website;
- Bolder font size (600 or 700) for text you would like to emphasize.
2. Don’t use grey text on color background
Using grey text on a white background is an amazing way to de-emphasize it, but the same principle doesn’t work when the background is in another color. That is due to the lower contrast. Using a text color that is similar to the color of the background is a much better way to de-emphasize text, and it also helps creating a better hierarchy. There are two effective way to achieve this effect when working with colored background:
- Lower the opacity of white text: if you’re keen on using white text, at least lower the opacity. This will allow the background color to show a bit through the text and effectively de-emphasize it without impacting the background.
- Manually choose a color similar to the background color: this will work much better than my first tip especially if your background is an image or a pattern, or when lowering the opacity makes the text appear dull. Choose a color that has the same hue as the background, then lower the saturation and lightness until it satisfies your eye (as show in the picture below)
3. Use less borders
When you need to separate two elements, try to resist the urge to immediately use typical borders and do the separation. White borders are, of course, an amazing way to make the separation obvious, but it sure is not the only one. Next time you need to make a separation without any white borders, try one of these two methods:
- Two different background colors: giving two different background colors is usually all you need to create distinction between two elements. If you already have two different background colors AND borders, the chances are pretty high that the borders are not needed, so try removing it.
- Add more empty space: another great way to emphasize the distinction between elements is to increase the empty space between them. Adding empty space will make an effective distinction, without interfering with the UI you’re trying to keep unchanged.
4. Don’t enlarge the icons that should be small
If you are designing something that would look better with bigger icons (for example, features section), you might instinctively reach out for a set of icons and start enlarging them until they fulfil your desired size on the web. They are vector images – quality is not an issue, so why should you resist this urge, right?
True, they are vectors, but the results of enlarging icons looks quite unprofessional. They are probably going to lack details and will feel not quite as right as small icons. If, unfortunately, all you have is small icons and you’re required to fulfil a larger space, try to put them inside a shape of your choice and make it one using two or three different colors. This will help you take advantage of your available resources and allow the space desired for icons to stand out. Here’s an example on our website:
5. Don’t use background color on every button
When there are more choices of actions a visitor can take on your website, you may make the mistake of designing a button for every single one of them. Frameworks, such as Bootstrap, may encourage you to implement as many as you want, simply because they look awesome. However, these buttons can easily make your website inefficient and impact the hierarchy. The importance of these buttons, as well as their functions, are an important part of their designing, but nothing’s more important than the hierarchy.
Every action on a page is placed on a specific position on the pyramid of importance, but the general rule is, one true primary action, two less valuable or secondary actions and a few rarely used tertiary actions. When designing buttons for these actions, it is of utmost importance to find their place in the hierarchy before you start.
- Primary buttons are obvious. Full and bold colors, high contrast between the text and the background works perfect for these buttons.
- Secondary buttons are clear, but not obvious. Outline lines and lower contrast between background and text is my perfect concept for these buttons.
- Tertiary buttons are present, but not too visible. The least important buttons are best in form of links.