One of the biggest mistakes with new blogs—even with some website refreshes—is that people want to jump right into the fun (and way less mentally taxing) part of creating a website: visual design. The problem with this approach is that many people get “designer’s block.” Basically, they get hung up on colors and fonts and all the choices related to how their blog should look, delaying their website actually getting off the ground.
I highly recommend that before you tackle the steps mentioned in this post, you first have a good understanding of your blog’s focus and have already created your first blog post.
Once you have initial content in your site, it makes it so much easier to create a design and lay out the look and feel of your site.
So presumably by now you have some content and are ready to move forward. If you already have a blog, you can follow these suggestions to refresh your current design.
First, we want to note, there are a lot of blogging platforms out there, but I’m focusing on how to design a WordPress blog, because we believe it’s the best, and it’s the platform we build all our client websites on. In this post, we’ll review the basic concepts of visual web design including choosing your colors, fonts, logo, layout, and setting up core pages.
Keep in mind that your goal is to make it really clear what your site is about to a first-time visitor. Clashing or too many colors, hard to read fonts, or websites with more visual effects than substance can detract from your message and overwhelm the user.
You cannot go wrong with a clean blog design that’s true to your brand and puts your best content at the forefront.
Brand Identity
How do you want your target audience to perceive you, your products, and your business?
Your brand identity is going to be the manifesto for all your marketing materials. It will help shape your message and carve a path for future goals. Your brand identity will become the bucket for colors, typography, logos, blog design, and your overall tone.
Once you’ve established these key brand identity systems, all your marketing materials are based on that guide, and it’s smooth sailing from there. Think of some of the biggest companies out there—Google, Apple, Starbucks, Nike, Yeti—you know these brands, what they look like, and their price point. How? Brand recognition. Whether you have a big or small business, stick to your brand and your customers will remember you.
Choose Your Colors
A good color scheme is key to capturing your potential audience’s attention. You can’t just throw random colors you like together on your site or it will look messy and jarring. Choosing the perfect color palette to fit your site’s content takes a lot of thought and planning. Not to worry though! Here are a few tips to get started on picking the right colors to wow anyone who visits your site.
Take color psychology into account.
Color psychology is the science of how color affects human behavior. For example, bright red can trigger aggression but blue can bring tranquility. Blue is on the “cool” side of the color spectrum along with purple and green. Red is on the “warm” side along with orange and yellow. That’s not to say that any of those colors will cause positive or negative feelings in everyone and that you should never use warm colors. While red can evoke aggression, it can also evoke a sense of power and passion. Color is important, but it’s the way all the elements of your site blend together that paints the full picture. Psychology is just something to consider when choosing a color scheme.
Know your audience.
Use colors that suit your content and consumer base. If you are marketing to parents for children’s products you don’t want to use dark colors like black and brown, and you also don’t want to make it look too business-like with blue and grey. For example, a website that sells custom stuffed animals based on kid’s drawings might use bright and fun colors to appeal to children (and their parents).
On the other hand, high-end product businesses use black and white to exude elegance. Professional companies often use blue and white. This is because blue is also considered a “trustworthy” color that exudes confidence. Blue is also a popular color for social media platforms like Facebook and Twitter because it’s a color that can keep a person scrolling through content for hours.
But don’t think you can use blue for everything. It’s not a color you would want to use for anything food-related. Dieters have been known to use blue plates to make them eat less, and there aren’t many blue foods to associate with. Green is associated with the outdoors and healthy living, so it’s great for promoting anything to do with gardening, nature, and wellness. Red is a good call-to-action color so it’s good for campaign and charity sites. Many fast-food industries use vibrant colors to get you in, happy, and out the door quickly.
Don’t go overboard with color.
The primary color for any site should be white. It’s easiest on the eyes and any other background color will be a strain, especially for reading text against. The main color for the font should be black, once again, because it’s easiest on the eyes. Having a strong color contrast between your background and text colors is also important for accessibility, and it’s also the law.
Colors come in for logos, headings, sub-headings, links, side-bars, borders, and menus. For these, you only want to use one or two colors. Maybe three for a site geared towards children, but no more. Most of the color on the best websites come from photos and graphics. Too much color from anything on your site, including photos and graphics, can cause sensory overload and confusion to consumers. Simple, yet tasteful and aesthetically-pleasing (but still representative of your brand) colors are best for creating a site that people will want to visit frequently.
If you must use additional colors, using a secondary palette for softer tones will help you balance your primary colors. These should be neutral colors, like greys, that are used for information such as text, solid color backgrounds, and icons. These tones convey callouts without competing with your message or primary brand colors.
Download the How to Start Blogging Guide
Explore this FREE GUIDE to take a deep dive into how to start blogging to make money. Get a PDF version of this guide right to your email followed by weekly news and blogging tips.
Decide on Your Typography
Another important visual feature of a blog is the typography or font combinations. You might be tempted to use a pretty swirling font or to use a bunch of different fonts to stand out. Neither of those ideas will get traffic to your site because they would make your content hard to read. A simple font is best for practical and visual purposes. Let your content be the hero; don’t use fonts that distract the audience from your message. Here are a few things to consider before choosing a font.
Not all fonts are created equal.
Not every computer has the same fonts installed automatically. This is especially true of Macs and PCs. If you use a font that isn’t installed on someone’s computer it will default to a font that might not look right on your site. It could shift words and disrupt the entire arrangement of the page, or it might just look really off-brand. It’s best to choose a “web-safe font” such as Lucida Sans, Tahoma, Arial, Verdana, or Microsoft Sans Serif.
If you choose to load fonts or icons kits, be sure to check your page speed. Quite often the trade-off for extra special fanciness in your blog design results in a really slow website. Your page load times and site speed could really suffer.
Readability comes first.
The two types of fonts are serif and sans serif. Sans serif fonts are best because they don’t have the little “feet” or “hooks” at the ends of each letter. These “hooks” can get blurry depending on the screen’s resolution and can make it harder to read the content. However, serif fonts are perfect for material that is meant to be printed such as magazines, journals, or flyer content. This is also true of documents that are meant to be downloaded. No matter what style of font you use, the main body size should be no bigger or smaller than 12 to 16 points. The main body font makes up the bulk of the copy on your site. This does not include headings, which certainly can (and should) be larger.
Also note that headings should be used as just that, headings or chapters of content on your web page. Don’t use headers for strictly stylistic purposes.
Simplicity is usually best.
Keep the pretty designer fonts in the logo (and possibly a header or two). It’s also important to be consistent with your font. Don’t use different fonts on different blog posts or pages. Pick one font for headings and one font for body text, and stick with them for all marketing materials. Use this free font generator to see what looks best. Check out some font combinations to achieve a memorable header and body font contrast.
Design Your Logo
Your logo is what’s going to define your brand so this is where you can really get creative with colors and typography. This is what you want to stand out more than anything. Think of how many companies come to mind instantly just by looking at their logo, it’s very important for your logo to be memorable. Here are some of the best ways to make sure your logo, and brand, stands out to customers (in a good way).
Research trends.
You want your logo to stand out as much as possible, so you don’t want to use a design that a lot of others are using. Look at what the design trends are either online or by paying attention to the signs outside of businesses and companies in your area. You should also research design trends to see exactly what works and what doesn’t. You also want to know what’s being overused lately so you don’t end up copying what everybody else is doing. There are a few specific logo design cliches that you may want to avoid. “Trends” are just that, trendy. They’re cool for those who are advanced, but the ability to customize brings more value and supports long-term growth. If it’s not unique it can’t be brandable.
It doesn’t have to be elaborate.
Simplicity can work for a standout logo as much as bright colors and a custom font. Take the Apple logo, for example, it’s just a black or white apple with a bite taken out of it. That one detail of the bite (or byte, because it’s a tech company) makes it memorable. The Nike swoosh is also a very simple logo design but they have a catchphrase “Just Do It” that everyone remembers, and it goes hand-in-hand with the logo to make their brand iconic. The YETI logo is simply their name. The thick, bold font and fact that it’s all caps are enough to express that their brand is all about strength and toughness. It’s all in the details with a minimalist logo. Sometimes less is more.
Maybe use a visual double entendre.
These can be very clever and aesthetically pleasing. This is the look of having two images wrapped into one through an interpretation of the site’s or business’s name. A good example of a conceptual logo design comes from a restaurant called Swan & Mallard. The swan creates an ampersand shape, while the duck lives in the negative space of the sign.
The FedEx logo is also super famous for having an arrow inside the letters. It’s subtle, but once you notice it, it’s so obvious, and the meaning it carries (speed and transport) is also really significant to their brand identity.
Make it mean something.
Give your logo meaning that’s relevant to your content or brand. Making it look nice is always a good thing, but if you want to go that extra mile to make it memorable it should tie into what your brand is about. Apple has the “byte” in its logo, and Amazon has the arrow that looks like a smile pointing from the A to the Z because they deliver “everything from A to Z with a smile.” Meaning is a great way to make your logo design brandable.
You should also think about how it will look on printed materials like t-shirts, hats, water bottles, etc. Be sure to consider color contrast and embroidery. For example, a black logo won’t turn out well on a black t-shirt. And a rainbow gradient is not easy to embroider, not to mention the more colors you have, the more expensive it is to print. Moreover, envision possible marketing materials and design for them, or be willing to compromise when the time comes.
Choose a Layout
A great website layout is a difference between easily consumed content and an ugly, confusing mess. The layout is key to making your site both aesthetically pleasing and organized to create a lasting impression that will entice potential customers. It’s meant to improve overall visual readability and maintains a rhythm throughout your site. Different WordPress themes are going to provide different layout options, so make sure this is something you consider when choosing a theme. Premium themes typically offer many more layout options than free themes.
The ultimate goal is a layout that keeps your readers engaged and allows them to easily navigate through your site. Your layout should create cohesion. If people can’t find what they’re looking for, they’re going to get frustrated and bounce. We like to keep it simple when it comes to website layouts, and this holds true to our themes, which are minimal, to the point, and are performant and fast.
When in doubt, use a grid.
The grid system is the easiest way to make an organized design. There’s a reason it’s been used by newspapers, magazines, and just about every online publication. A grid provides consistency across all screens that content would be viewed on. The grid design also leaves plenty of white space for the best readability.
We believe less is more. Grids help keep content aligned and consistent with minimal effort. Moreover, refrain from going crazy with your design, you might unintentionally lose that precious grid system. Mai Theme uses a 12-unit grid that behaves responsively on all platforms from desktop to smartphone.
Use a card layout.
The grid is your layout’s base. After you make your base, you have to make the surface of your site’s design. This could look like a card (think a trading card). This design is organized and easy on the eyes so it’s easy to see why it’s so widely used. It should be vertical with a few key elements to draw consumers in. This is so your site is optimized for mobile platforms while still looking good on a computer.
The key elements for posts are a featured image, blog title, blog author, post date, an excerpt of the post, social media share links, and a read more link. The key here is a hierarchy, which can be easily achieved with HTML. What do you want your audience to read first? The title and featured image should be the attention grabbers and the excerpt should highlight the key point of the post while making the reader want to know more.
Highlight your best content.
You need to highlight specific content that draws traffic better than most and it should be on your homepage. This could be due to SEO, high-ranking keywords, or a lot of social shares. Regardless, this content showcases your expertise best. The most popular content should be at the forefront of your new blog. Your homepage and core pages should have both static and dynamic content. The static content will be the concrete pieces that describe your blog. Remember to periodically add new dynamic content, like popular posts, upcoming events, and calls-to-action. This ensures that your blog remains engaging to both new and loyal readers.
Make content easy to share.
Social media shares are how the word about your blog gets out. Links to Twitter, Facebook, Pinterest, and email are the most vital. Add a share button at the bottom corner that follows as you read, or share links at the top or bottom of the post. The key is that they are visible so that you can use social media to drive traffic to your website to enable your great content can reach as many people as possible.
Core Pages
There are several pages on your site that are critical for presenting the basic information about who you are, how you (or your products/services) help people, and how to get in touch with you. These are your core pages.
Homepage
Your homepage is actually typically your second (or even third) touchpoint with a new visitor. That’s because most visitors organically reach you from another page/post first because they are typically looking searching for something specific. For example, they may search “how to choose a domain name” and be brought to a blog post of yours on that topic. Once they read the post, then they may decide to click over to your homepage to learn what you’re about.
Regardless of when exactly in their visit people are seeing your homepage, it still needs to make a stellar impression. The homepage should be your “best of” content and it should lead to where you want your potential customers to explore on your site. The homepage should include:
- A clear, but attention-grabbing tagline that describes your blog in one or two sentences
- A little about you and why visitors should care about what you have to say
- Links to your best content or most popular posts
- Links to your most recent posts
- Testimonials or brands you’ve worked with
- An email opt-in for visitors to sign up for the latest news about your site.
Other Important Pages
These pages are also essential to helping visitors learn more about what you have to offer. They should appear within your main navigation menus (except maybe landing pages).
- About: This is where you will tell readers about yourself and your background.
- Contact: Use a business number, email, and physical address for this information. You can also include a contact form so your readers can message you, ask questions, and request more information
- Legal Pages: Boring, but necessary. This is where all the terms of service, privacy policy, etc. would go.
- Services: Showcase what you do, what services or programs you provide, and how people can learn more.
- Blog page: Post archive = blog page. Enable your new posts to dynamically populate at the top to emphasis that you keep your blog current.
- Landing pages: Removes all navigation and widget areas—useful for pages where you want to discourage users from leaving. For example, an upcoming event or program with a signup form.
Closing Statements
Starting a new blog website can be overwhelming, but it doesn’t have to be frustrating. Stick to the basic color, font, logo, and layout concepts to establish a really solid website.
What do you think is an essential part of designing your blog?
