“Designing sucks.”
You must have heard or thought it yourself many times before. Lot of people who manage websites and create great content but think they have no design taste.
Utter Nonsense!
I believe anyone can sharpen their designing skills, provided they could find a little help. In this tutorial, you’ll find 5 basic design principles I have found to be worth applying. You can also apply them to everything you do with you blog design. I’ve compiled these tips to be as actionable as easy to implement on your blog. Come back and consult this list whenever you need to make changes in design of your blog and I am sure the result will be a little more asthetic and beautiful.
Let’s start with…
1. Blog design - Don't use Coloured Text
Coloured texts tend are hard to read. As a thumb rule, make your text black or white with dark background. If you’ve got coloured text on your website, you should opt to use color in contrast instead.
Here’s what I mean.
Example - 1
You may love some colored text in a post because you want it to stand out, like this one:
But this text doesn’t look great because it’s blue!
There are better ways of making your text stand out aesthetically and get attention with color. Also, certain colors ( like blue or red ) make plain text look like a link in the website. For example making the text white and the background blue will also get attention :
This looks good, but there is a lot of colour, advised to use it sparingly.
You can reduce the saturation level to make the background pale and make the text black for a more subtle look like this:
This is a good way of inviting attention.
You can also try to combine a background colour with a border:
This is also looking good with a subtle background
Example - 2
This button has blue text and a light gray background. It looks flat and the text kind of undermines the shape of the button:
If I flip the colors using the blue for the background and light text, it certainly looks much better:
And while we’re talking about buttons…
If you give your button a colored background, it’s almost always going to look best with white text. Black text tends to look very bad on background color unless that color is really pale or just a lighter gray as seen below:
Now change the colors using the blue for the background and light text, it looks much better:
I can summarize the rules on colored text as under:
Use a coloured background or a coloured border around text instead of changing the color of the text. Also, white always looks better on coloured backgrounds unless the color is extremely light.
Now let’s pick out the colors you’ll be using. You can add borders already with Elementor widgets included in BlogR platform.
Try Using a color palette
Choosing colours on-the-fly is a big rookie mistake. Whenever you apply color to your website, you should always choose a color from your palette.
By using a palette, you can simply select from your existing colors and you know the result will look nice and “on brand” without any effort.
And here’s the thing…
I’ve been a web designer for years and I still struggle with creating nice colour palettes. I never create my own color palettes. Instead, I find a gorgeous color palette that’s already been made and then I tweak it to meet my design needs.
My favourite resource for finding colour palettes is Color Hunt.
This awesome website has a community of members who create and share color palettes they design.
If you browse the homepage you’ll find an endless list of beautiful palettes to choose from. Clicking on any palette will take you to its page where related palettes are listed below.
There are also pre-defined keywords available like “warm” and “cold” for finding suitable palettes. Once you select a palette you like and implement the colors on your site, you’re going to be amazed how much of a difference it makes.
The first tip should trick your visitors into thinking you’re a color-wielding design master.
Now let’s talk fonts!
2. Only use one or two fonts:
You should select one or two fonts and then reuse them for everything. Oftentimes, when WordPress users learn how to change fonts on their site, they suddenly want to use them all!
For example, I’ve seen people change the font of one paragraph to make it stand out in a post. That’s a bad idea. If you need text to stand out in a post you can: Increase the font weight (bold) Increase the font size, Add colour. When it comes to fonts, you should pick one or two for your entire site, and if you think you need more than that, consider this…
Google designed the Roboto font (which you can use too – it’s on Google Fonts), and they use this font everywhere. They use it for Google.com, Youtube, Gmail, Google Docs, Chrome – literally all of their products use this one font for all of the text.
So if you’re convinced you need more than one font for a beautiful website, think again!
3. Use one of the popular sans serif font:
I’ve got another shortcut for you.
Instead of browsing hundreds of fonts, I recommend you choose from the most successful fonts on the web. This approach basically guarantees your site will look good.
To do this, visit Google Fonts, and you’ll find the trending fonts listed on the homepage.
To refine the results, click on the Categories dropdown and deselect every option except for Sans Serif.
If you pick any of the fonts listed now, your site will look awesome.
Keep in mind, the majority of the text on your website shows up in your posts and so the most important quality of the font is that it’s easy to read. All of the most popular sans serif fonts are popular because they are both readable and attractive. And in case you were wondering…
This is what I do too!
When designing new themes, I usually go to Google Fonts and search the trending fonts for inspiration. When I want to add a little more character into the design, I use this next tactic.
This website also uses one popular sans serif font called system-ui which is available with Adobe Typekit.
Use a display font for your site’s headings.
If you’re happy with one font then you can skip this tactic. But if you feel like your creativity is a bit hampered by such a simple selection, here’s what you can do…
The first font you selected was designed to be read at small sizes, but a display font is specifically designed for large sizes (like large displays, get it?). The thing is, display fonts are often very stylish so overusing them can make your site look garish. Headings are the perfect place to use display fonts because:
- They’re always large.
- They’re used sparingly
If you want, you can reuse the display font for your site title too (or logo). To find a display font for your site, visit Google Fonts again, but this time, change the categories to only include display fonts, like this:
You’ll see right away from the trending fonts how much more variety there is with display fonts.
There are about 300 display fonts on Google Fonts as of now, so have fun browsing, and remember to only choose one! The above was another text-based design tip that will make your website more beautiful.
4. Use One-word menu items:
The menu items are proportionate and evenly spaced which makes it look nice. When creating your menu, you should make every menu item one word. The reason comes down to spacing.
For example, look at how evenly spaced the menu items are on News18 website.
It’s easy to browse the topics and tell each one apart. When you add more words into a menu item, it disrupts that spacing. The menu item becomes much longer than the others and the spaces in between the words create an unevenness in the design.
While single-word menu items work best, it is okay to occasionally use a second word if you have to. Just make sure there is a lot more space between menu items than in between words in the menu items.
Byju’s uses two words in menu items and it looks good because there is so much space between the menu items:
5. Balance text with media
If you want your site to look amazing, the content itself needs to be beautiful. Study the content of popular websites like Buzzfeed, the Washington Post, or Bloomberg Businessweek and you’ll find the same patterns.
They constantly break up text with images, maps, videos, quotes, Tweets, and other visual elements.
When editing your posts, make sure to include a visual element about every 4 paragraphs. The goal is to keep the content visually interesting so it doesn’t get monotonous and boring as readers scroll past plain paragraph after paragraph. Visual elements also make the content more informative and fun to read.
With practice, you’ll learn how to do this naturally while writing, but you can always skim your post after it’s done and find places to include new visuals. To break up a long series of paragraphs, you can add:
- Images
- Blockquotes
- Videos
- Embedded Tweets
- Advertisements
- Tables
- New headings
- Lists
It’s also a good idea to apply bold to important parts of your text to get attention and create more visual interest. And just so it’s clear: you don’t have to include a visual element exactly every four paragraphs. That’s just a good approximation to use while you master this technique.
Since I’ve just told you to include lots of images in your posts, here’s a tip for doing that the right way.