These days, you can set up a blog in just a few clicks. Install a theme, add a few widgets, and there you have it. But if you want your site to stand out visually, and people to take your blog seriously, it’s key to understand the principles of web design.
Whether you plan to do all the work yourself or hire a web design agency – sometimes it’s important to know when it’s time to bring in the pros – knowing what makes a good site from the get-go will lead to a better outcome. If you want to leave a good first impression on your readers, these fundamental tips will help.
Reduce Your Blog’s Page Bloat
The average web page is about 1900 KB according to the HTTP Archive. This doesn’t sound bad, but let’s not forget that medians only focus on the middle of the distribution. We start to see problems when we look at the bigger picture. For instance, about 10% of all web pages are bigger than 6 MB.
Because they cause larger bandwidth costs and slower performance, large web pages are bad for both site owners and site visitors.
The bigger the page size is, the longer it takes to load. According to Google, about half of all mobile internet users will leave a page if it takes longer than 3 seconds to load.
Images are one of the most common causes of slow performance. For instance, high-resolution images on your blog will load slowly when low-bandwidth devices access your site. This increases your bandwidth cost.
To prevent this from happening, you can use online scripts such as Adaptive Images. This tool detects the screen size of your visitors’ devices and re-scales the images on your site accordingly. The tool allows you to set the image quality and browser-caching.
To compress your blog’s resources, you can use gzip. Check whether there are any redundant elements on your blog. For example, you can remove social sharing buttons from pages that are highly unlikely to be shared on social media.
Maintain Consistency in Your CTA
To help your readers find what they are looking for, maintain a consistent design in CTA (call-to-action) buttons. If a reader sees the same CTA button a few times on a page, they will realize that they should click on it. Make sure all of your CTAs are styled exactly the same. This is especially important if your blog is promoting your business.
Use Two to Three Colors, Max
Your blog should have a call-to-action color, a shade of grey, and a primary color. As your CTA is the color you want visitors to look for when they’re deciding on their next action, you should use it sparingly. Warm and aggressive colors such as orange create a call to action.
To subtly emphasize certain aspects of your blog, use a shade of gray. The first color you want readers to see and the last one you want them to remember is your primary color. For example, Facebook’s primary color is blue.
The same goes for fonts—you only need a few of them. You can use one for your body content, one for your headlines, and one for your logo. Your blog will look messy if you use more than three different fonts.
Along with limiting your color scheme, you need to make sure that your CTA color and your primary color complement one another. When picking colors for your site, it helps to study color theory a bit.
Embrace White Space
White space is just as important as the colors you use. White space allows you to effectively use margins and padding. Getting rid of everything that doesn’t contribute to your blog’s goals is the best way to embrace white space.
You don’t really need that tag cloud, they’ve become obsolete. Instead of using such distractions, use white space. It will help draw the reader’s attention to your CTA buttons.
Simplify Navigation
Would your visitors know where to go if they wanted to see posts about a certain topic? What if they want to see posts from a specific date?
Your site navigation should feel intuitive. There should be breadcrumbs that guide your visitors to the content they want to see.
When it comes to navigation, your blog should have the following components:
- Menu
- Contact page
- About page
- Archives page
- Search box
Internet users expect certain things from certain website components. For example, they will intuitively click on your blog’s logo when they want to return to the home page. Imagine that you are visiting your blog for the first time. How would you react to the interface?
Anticipate what things your readers may be looking for. Is the content hierarchy on your blog too complex? Maybe your site could use a drop-down menu.
Declutter Your Site
Way back in 1997, a respected researcher on usability, Jakob Nielsen, found that very few people read web pages word-by-world. Most of us only scan the pages we come across. Because of this, the total impression readers get from your blog matters a lot.
Think about how much you hate seeing too many ads when browsing the internet. Pay attention to the ad-to-content ratio on your site. All the ads on your website should subtly blend in with everything else.
Use subhead hierarchies in your posts. Subheadings, coupled with short body copy, make it easier to move down the post. They make your posts more scannable and easier to consume.
Design With CSS
Learning CSS requires more effort, but it will make it easier to maintain and customize your blog’s design. In essence, CSS and HTML allow you to take images from a Photoshop file and incorporate them into your blog’s design.
If you have lots of intricate background ideas, your website may become slower after you implement them. By designing the simple details with CSS, you can get around this problem. You can use CSS to add elements such as:
- Rounded corners
- Box shadows
- Text shadows
- Frames
- Borders
When you improve your CSS skills a bit, you will also be able to create font-faces, animations, transitions, gradients, etc.
Use the Right People in Pictures
Whether we are talking about real life or the internet, people like to connect to other people. Photos of people on your site do more than direct attention—they help users connect with your blog. But it’s important to feature real people in your photos.
Avoid using stock photography. Stock photos are too generic. Most of them rely on cartoonish, clichéd characters. Real faces and smiles, on the other hand, will make your blog look authentic.
