Table of Contents
Are there any web design tips to make your website radically better? Yes. The problem is that many of these web design tips are difficult to implement. Very often, you need to have some knowledge of web design. If not, these tips are useless. I hope this mini series will be different. I will give you seven quick web design tips anyone can use. Still, I hope these tips will be useful for web designers as well. In this part, we will discuss improving the visual side of your website. So, let’s begin.
Tips 4–7 are in part 2.
No.1: Use high-quality fonts
Let’s start this article on web design tips with my favorite subject. And, that is typography. This is also one area where you can improve the design of your website very fast. One of my web design tips is using only fonts that meet certain standard. You may not want to buy and use a fancy font for every project. Also, I understand that some fonts can be quite expensive and not fit your budget. However, this doesn’t mean that you should settle with any font you find on Dafont.
The problem with many free fonts
I’m not saying that all these free fonts on this and similar websites are bad. I too used some of the well-designed fonts in that past. The reason for including this on among my web design tips is following. Many of these fonts are not tested properly. Authors also didn’t design these fonts with the intention to use them on the web. As a result, some fonts can behave badly in different browsers and on different devices. You have no guarantee that the font will work as you want.
Many of these fonts are the result of people trying new hobby or side project. In addition, there is no support. Meaning, if you find some visual problem in the font, you can’t request fix. Well, you can, but the author is not obligated to do that. Or, he may do it, but not right now because he has some other work. You can try to edit the font and fix it by yourself. The problem is that this “customization” may be forbidden by the author. Also, you need to know how to fix that issue.
Another option is to accept it as it is and just let it be. This may work to some degree depending on how visible the issue is. Still, even if the issue is almost invisible, you know about it. You know that there is one thing causing damage to the web design. The last option is to replace the font. Web is full of fonts. And, chances are that you will find one that looks similar. It is up to you to decide if you will tolerate some slight difference or visual flaw. It is not the goal of these web design tips.
Not all good fonts cost a fortune
What we discussed above cannot be said about commercial fonts. When you create a font for commercial use, you do this under certain conditions. What if some customer finds a flaw in the font? Then, you have to either provide support or refund that customer. Well, this might be true only partially. It depends on the place where you are selling the font. Also, different marketplaces may have slightly different conditions. However, support and refunding is common practice.
Still, there the problem with price which would make this tip usable only in some cases. This is not my goal. I want to make these web design tips usable in every situation. Luckily, there are fonts that are both, affordable and well-designed. Yes, I am talking about Google Fonts. Here, you can find dozens if not hundreds of beautiful serifs and sans-serifs (here is an explanation of these terms). I have to say that Google Fonts is my favorite place for getting great fonts.
I use fonts form this website in almost every project. Typekit is another place where you can find high-quality fonts. True to be told, not all fonts on Typekit are free. Unlike Google Fonts, Typekit requires registration and subscribing to one of the three plans. Still, you can use this service for free. This gives you access to limit amount of fonts.
This is all I can tell you about Typekit. I don’t have an account here and I never tried this service. So, as you can see you don’t have to pay a fortune if you want to use great fonts (legally).
Replace bad fonts in the right way
Let’s say you decided to follow these web design tips, especially the one we are talking about now. Then, make sure to replace the bad fonts in the right way. Every font has less or more different properties. When you replace one font with another, it can cause some troubles. So, before you ship the web design, make sure that new font doesn’t break anything. Double-check typographic elements that use the new font, such body copy, headings, lists, etc.
When you are done with that, move to other elements that use the new font. These elements can be buttons, tabs, navigation links, inputs etc. If you are not using any front-end framework, chances are that new font will work like a charm. If you do use some framework, this switch may not be as easy and quick. I experienced this in one react-based project where I had to make the switch from Helvetica to Calibre. In a short, buttons and form inputs didn’t like the change.
So, if you use some front-end framework, here is a short list of CSS properties to watch for. Font-size, font-weight, letter-spacing, line-height, text-indent, vertical-align, word-spacing. Another property to check is height. Some frameworks use fixed height for some form elements and buttons. And, this height is calculated for the default font. So, when you decide to change the default font, it can break some of these elements.
Aside from these side-effects, just make sure that the font conveys the same mood and style. Don’t replace one font with some that is completely different. As this will also alter the experience and the message of your web design.
No.2: Decrease the number of fonts
The second item on the list of the web design tips is also related to typography. Decrease or limit the amount of fonts you use. It is okay to use dozens of fonts if you work on website such as Google Fonts. Otherwise, stick to just one or two. Some of you may disagree with this advice. More is better, right? Well, this is not true in every situation. In the terms of fonts, the opposite works much better. In other words, you should aim for using fewer fonts rather than more.
You can apply some of the web design tips we will discuss here in other design areas as well. This, and the previous one, are two of them. One of the keys for creating a really good design is making sure that its look is consistent. And, this where the number of fonts enter the scene. Using too many fonts is bad for a number of reasons. First, you will probably need to include more assets. This will slow down loading of your website, even if you use CDN.
The second reason is inconsistency I mentioned above. If you use one font here and different one on another page or place, you will never achieve consistent experience. In addition, you may confuse your users. Inconsistency or confusion never leads to trust. Without a trust design can’t succeed. Establishing trust is one of the goals of these web design tips. Third, is that fonts can collide with each other. This is especially true for more fancier fonts. The result is often tension.
You can do a lot with just one font
I’m sure there are other reasons. However, I think that these three are enough. So, how many fonts should you use? In the majority of project, two fonts will be enough. Really good designer can do a lot with just two fonts. In a fact, you can get away with only one font. All you need it to choose the right one. What you are looking for is a font with number of styles (or weights). You need to establish clear hierarchy for the typography. This will make the content more readable and legible.
When you think about it, this is often why you want to use different fonts. You want the heading to look a bit different from body text. The same is true for quotes and citations. However, that doesn’t mean that you need to use completely different fonts. As we discussed, this leads to inconsistency and it can cause collision between fonts. You can achieve this without risking any problems by using different styles or weights.
Let’s say you have font with four styles – light, normal, semi-bold and bold. Then, you can use the boldest style for main heading. Semi-bold is good for subheadings. Normal is the usual choice for body copy. And, what about the light style? You can use it for quotes and citation. As you can see, you can create beautiful hierarchy with four styles. One font is also my favorite choice. I used this approach with success in many projects. However, what about some web design tips for two fonts?
How to work with two fonts
Let’s say that one font is not enough, for whatever reason. Font pairing can be quite difficult, especially if your knowledge of typography is limited. If you want to make this easier, I would suggest sticking to following strategy. Choose one simple serif and one simple sans-serif. Don’t go overboard with too fancy fonts if you are not good in typeface anatomy and font pairing. Simplicity is often the best way to go. Still, any web design tips for fancy fonts?
The first thing is choosing only one fancy font. The second one should be very basic. Both, serif and sans-serif will usually work. You will use the fancy font to give your web design some character and personality. This font will set the overall mood and emotions you want users to feel. So, think about what experience you want to create. Should it be something funny, serious or vintage? Your answer is the best tool to determine what type of fancy font you should use.
I should mention that fancy fonts are best for headings and large pieces of text. Save fancy font only for these elements. Doing so will help you avoid problems with legibility and readability of the text. Text that uses fancy fonts looks great, if you use big font size. However, it can be barely readable otherwise. So, make sure to use fancy fonts only for bigger typographic elements. Use the fancy font as the focal point of your web design. Avoid using it for the copy.
Some web design tips for the second font? Keep it simple. Users should barely notice it. This also means that the secondary font needs to be legible and readable. Users should read the content without any troubles. Use this for the body copy and the majority of text.
No.3: Simplify your color palette
Enough of web design tips on typography. Let’s talk briefly about colors. In a short, using too many colors is usually bad for design of your website. The reasons are similar to what we discussed in previous two web design tips. Using too many colors creates inconsistency and confusion. When you really overdo it with colors, you can end up with chaos. Like fonts, colors too convey specific mood and evoke specific emotions. Mixing too many colors is like mixing too many emotions.
You can avoid this by simplifying your color palette. Reduce the number of colors to three choices. I call these choices background, base and accent color. Let me give you a quick manual to use these colors. First one is the background color. You will use this color the most in your web design. This is the color that sets the general tone and feel of your web design. The second color is base. You will use this color to break up the background, to separate and distinguish layout elements.
Base color is usually somewhere in the middle. It is not too boring nor too flashy. Meaning, it is not invisible. You can think about it as the glue that holds your web design together. The last color is accent. You will use this color to bring personality into your web design. Accent color should have a high contrast to both, your background and base color. Accent is typically the boldest color in your palette. The only exception can be if you use monochromatic color scheme.
Some additional web design tips on colors
Related to colors, I have three more web design tips. First, make sure color of the text has enough contrast so the text is readable. If your background color is too close to the color of text (in contrast), the text will be harder to read. Content of your website should be readable from various distances. This doesn’t mean that people should be able to read it from when they are three meters away from the screen. They just shouldn’t have to glue their eyes on the screen.
My second tip is about the opposite of the first. Don’t use colors that are too flashy or have too much of contrast. This can be as disrupting or annoying as using color with almost no contrast. If you want to use really flashy color, don’t use it often. Also, use it for smaller elements in the layout. This color should be like a cherry on top, nothing more. Flashy colors are definitely a good choice for any text longer than a few words. Again, it will only disrupt people reading the content.
Some tools and resources color for management
Let’s end this first part of web design tips with something that doesn’t require too much knowledge. I want to give you few suggestions for interesting tools and resources for working with colors. The first one is Color. This tool will help you create color palette based on a variety of options. Use analogous, monochromatic, triad, complementary, compound colors, or shades to create interesting schemes for your web design. You can also use custom colors.
Another tool that is similar to Color is Paletton. This tool will also help you create color palette based on the principles of color theory. It also gives you the freedom to use custom color. What if you don’t have any idea for your colors at all? You might be looking for some inspiration. If you are interested in single colors or color palettes, COLOURlovers is a good place to start. It is a community-based website offering abundance of palettes, patterns and color ideas.
Something very similar, and one of my favorite websites, is colorhunt. Colorhunt is a curated collection of beautiful colors palettes and these palettes are updated daily. Both, Colorhunt and COLOURlovers, offers lists of hot and most popular color palettes. Designspiration is a bit different. Here, you can find examples from various design disciplines by using keywords or specific color. There is also a list of most popular designs.
The last tool I will share with you is pictaculous. This tool is quite useful when you want to create color palette based on specific image. You upload your image and let pictaculous do the heavy lifting. As a result, you will get a number of colors. Also, you will some suggestions from Color and COLOURlovers. You can also download the palette in the form of swatch file.
Closing thoughts on web design tips
This is all I have for you for this first part of article on seven simple & quick web design tips to improve your website. In this part, we focused on two easiest ways of improving the visual side your website. Sure, there are many web design tips I could mention. White space is one example. Knowing how to work with white space can improve the design as fast as using the right fonts and colors. However, we already discuss how to master white space.
Sure, you can argue that the same can be said about typography and colors. And, you would be right. Still, I believe that bad font and color choices more common than issues with white space. Also, it is often easier to replace color or font than to fix the white space across the whole website. These are two main reasons for dedicating this first part of this web design tips article to colors and fonts. If you disagree with me, please tell me what topics do you think deserve more attention.
What will be the subject of the second part? We will also talk about some more web design tips for improving the visual side of your website. However, the main focus will be on the performance. Performance is important part of perfect user experience. And, creating perfect user experience is one of the keys if you want to create great website. So, in part two, we will take a look at some simple ways to take the performance of your website on another level. I hope you will enjoy it.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
