Blog Design: Making a Good First Impression with a Style Guide (Part 1)
- 1 Hey, Guess What? It’s Design Time!
- 2 Blog Design: Why It's So Important For Your Brand
- 3 Create an Eye-Catching Blog: Brainstorming Your Design Elements
- 3.1 It's Time to Record Your Blog Design Ideas
- 3.2 The Top 5 Design Factors to Consider
- 3.2.1 1. Audience
- 3.2.2 2. Color
- 3.2.3 3.Tone
- 3.2.4 4. Images
- 3.2.5 5. Fonts
- 4 Why You Need a Style Guide and How to Create One
- 5 Design to Your Heart’s Content
Hey, Guess What? It’s Design Time!
We are about to get down to blog design, but have you done your homework yet?
Your assignments were to pick your niche, think of a domain name and register it, and finally, select a platform and a host!
You're probably thinking:”Boy, that seems like a lot of work!”
Don’t worry! If you haven’t completed these tasks, we can help you easily get caught up and on track. Check out our first two guides below:
Now, If you are up to date you can just sit back and relax….
Remember: Creating an amazing blog design is going to require hard work and dedication.
The next chapter in your journey of becoming the world's next greatest blogger is about design and how you can make an excellent first impression on your audience.
It’s not the most intuitive process. However it’s nothing to fret about, because with our assistance you’ve got this all under control.
Building a brand around your blog requires a handful of specialized skills. That’s what we’re here for! We’re here to help you grow into the best blogger you can be by providing you with the essentials that you need.
Blog design can be tricky, but with this guide, you’ll find that you have it in you to build something that resonates with your audience and really brings out the best your blog has to offer.
It’s all about being creative in a strategic way that allows you to portray what you and your blog are all about, what your expertise is in, what your attitude is, and what you want your audience to know about you.
Your Design Needs to Be Good Lookin’ and Functional
Deciding on what the aesthetic and functionality of your blog will be is both fun and a little grueling at the same time. While you get to be creative and do whatever you want it’s still challenging to incorporate multiple factors into your design that will work for you in both the short and long run.
What we mean here is: First impressions (short) and your brand’s ability to flourish into something successful (long).
You want to make sure the functionality of your site is prioritized as well. Make sure your user interface and navigation are smooth and easy to use. Make sure information is easily accessible, and the important stuff is found quickly without a billion clicks. By doing so, this will ensure that people will be on your page longer and are more likely to return because of the look and feel of your blogging site.
This guide will be part 1 out of 2 discussing Blog Design. In this guide, we will focus on the style and branding factors of your blog. While part 2 covers how you can maximize the functionality of your blog through design.
With these two guides, you’ll have the knowledge to design a blog that will attract your readers and keep them coming back.
So, kick back and enjoy part 1 of our guide on blog design….
Blog Design: Why It's So Important For Your Brand
Designing your blog requires careful consideration and understanding of what you want your brand to be and how you want your audience to perceive you and your blog.
We believe: The key to a successful blog design is to view it from another perspective — your readers!
It is all about them after all. You want them to have a positive experience when they visit your site; you don’t want them to take one look at it and immediately hit the ‘x’ in the corner because you just harassed their eyeballs with your poor website design.
With an aesthetically beautiful, straightforward and easy to use website with great functionality your audience will view your blog as credible.
Don't Convince People Your Legit, Show Them!
I’m sure this has happened to you. You visit a website, and it looks like it hasn’t been updated since before the internet was even created. It’s ugly, cumbersome to navigate, disorganized and unprofessional.
Would you trust this website? Your answer is probably a resounding “hell no”, as it should be.
You have to build trust with your audience and earn that validation by designing a blog carefully, creatively, and with your audience in mind. You shouldn’t have to internally scream “please believe me, I’m legitimate” when trying to get your audience to visit your website. Your brand should be able to do that all on it’s own through the backbone of your website design and functionality.
Always remember: First impressions are everlasting, as we’re sure you have all experienced at multiple points throughout your life.
It’s All About the Branding
Designing or redesigning your blog doesn’t have to be a punch-yourself-in-the-face feeling!
Think it as putting time into your website so it can ultimately be more successful. It’s important to regard your blog as a brand instead of just a website where you publish your content.
A huge part of branding for your blog revolves around how it’s appearance affects the minds of your readers.
Basically, you have to take into consideration what do they think when they visit your website? Their opinion has a direct impact on the level of success your blog will have.
Understand that your internet presence and your brand are directly affected by the design of your blog. This means, you need to figure out how to communicate your core message through visual presentation.
Don't Forget to Design with SEO in Mind
You’ll notice that a common theme in this guide is to think about how to design a blog in a way that can benefit you and your blogging career long-term.
While you may want to consistently develop your website to keep up with trends, new design ideas and updates in the world of design, it’s important to realize that design comes and goes.
If you take a look at current trendy websites, you’ll notice that a lot of them have 1 page that is never ending, meaning you don’t have to click around to get to other pages, you just scroll and scroll and scroll…
This is called a parallax design. While this trend is great for readers and website builders alike, it’s not so great for search engines.
The parallax design eliminated the traditional structure of a website that allows these search engines to crawl effectively. Not to mention the fact that over one URL you’re loading up an entire website’s worth of keywords. This is just one example that shows how your design will drastically affect how search engines rank your site.
Always keep in mind: The design of your website will make a difference to the quality of SEO your blog will have, so choose wisely.
What is a Conversion Rate and How It’s Affected By Your Blog Design
A conversion rate is a calculated percentage of visitors to any given website that takes the desired action. Typically speaking, this percentage is a number of visitors to your site that actually buys something while browsing your website.
For example: Your website was visited by 50,000 people last month, and a total of 2,000 people actually bought something from your site. This means that your conversion rate is 4%.
You're probably wondering: “How do you figure out your conversion rate?”
All you have to do is take the (total number of people that bought something) divide that by the (total number of people that visited your site) then multiply it by 100. This will give you you're conversion rate. It’s that simple!
In our case it was 2000 ÷ 50,000 x 100 = 4%
So, let's say you want a higher conversion rate and we know you do! How do you go about ensuring that yours is at the peak of the scale?
We’ve discovered there are a few design principles that can help you with this.
Here are the three major design factors that contribute to your conversion rates and what they mean for you and your blog:
1. Color: The word of color is so vast and complex you’ll need a degree in it to actually yield the long-term results you want for your blog design, so you're going to need to study hard. We will delve deeper into this further down in the article.
However, here are a few ways color effects conversion rates: Going with text that is bold, large, and vibrant in color is the best when dealing with headlines. This will help with keeping people on your page, leading to your viewers reading you content and finding your call to action buttons.
Meanwhile, deeper colors like navy create a feeling of familiarity and ultimately trust when it’s applied to call-to-action buttons. Which will then lead to your reader possibly making a purchase of some sort.
2. User Interface and Navigation: This is a no-brainer. When visiting a website whether it’s to get the latest scoop on the news or to look up a recipe we want to be able to navigate the website with ease. Don’t make your readers lose interest in your website because of challenges they face trying to use it. Make your site simple and clear for higher conversion rates.
3. Choice: Using words like ‘free’ or ‘limited time’ will raise your conversion rating by a significant amount. Do your research and try to incorporate words that can boost the conversion rating of your blog.
Alright! You now have a general idea of why good blog design is important, now we are going to show you how to create a beautiful blog that will keep you audience engaged.
Create an Eye-Catching Blog: Brainstorming Your Design Elements
By this point, you probably have an idea in your head of what you want your blog design to look like. Yet, you most likely don't have the exact dimensions or schemes yet.
That's not a problem!
We are going to show you how to choose the correct elements for your blog and then how to make a style guide to keep your design details organized.
And it all starts with a good old fashioned brain storming session…..
It's Time to Record Your Blog Design Ideas
We want to help you with narrowing down your your blog design options.
To do that your going to need to start a new document in a program like Google Docs or something similar. You really just a place to brainstorm and put down all your ideas.
Okay, choose your program of choice, open a fresh document, label it “Blog Design Ideas” or something similar and let's get down to work!
The Top 5 Design Factors to Consider
These are the top 5 design factors we deem the most important for our bloggers when they take on the task of building a website. While there are plenty more, you’ll find that these are the ones to really take into consideration when starting your project.
As we go through these factors, you will need to make a section in your document for each factor. We will guide you as to what needs to go in each section, however remember this is a brainstorming sheet. If there is something you feel will help you come up with your final design elements throw it in.
Like your niche, discovering who your audience is will be one of the most important tasks of your blogging career.
It is crucial to know who you are talking to and why they are visiting your website and reading your work. Once you know who your readers are, this will allow you the opportunity to brand better and tailor your blog to their needs.
It’s not enough to just say you want to blog about “eCommerce”. You need to narrow down your topic and give your audience a value they can relate to.
For example: Your blog is about “Providing eCommerce advice to young aspiring entrepreneurs looking to start their first business”. Know what the demographics of this audience and familiarize yourself with what they’re looking for so you can design a site that is better suited for them.
Let's Find Your Target Audience
Your going to need to answer who, what, why, when and where to get the bottom of finding your audience. However, that's pretty tough to do when you don't have a functioning website to draw information from….
..or is it?
Actually it's not, if you know exactly what your niche is, all you have to do is find blogs that are similar and use their data.
We suggest: Diving head first into these blogs, as well as there social media channels. Take a look at who is commenting, sharing, re-tweeting, liking, etc… Facebook is especially helpful in this scenario because you can often click on a persons profile and find out a lot about them.
Let's take a look at top online marketer Neil Patel's Facebook page:
We did a quick run through and instantly noticed from his comment section that most of his readers were males in their late 20's to early 40's.
As we scrolled over and clicked on some of the profiles in the comments, we were also able to find out that many of his viewers are college graduates or entrepreneurs with a career in marketing, web development and business. Most of them were not married and didn't have children.
Then only thing we really couldn't pin point is where most of Neil's readers are from, it seems as though he has quite the worldly following!
Do the same thing for a few websites in your niche and you will eventually start to see a trend in the type of person viewing these blogs.
Record Who Your is Audience?
Make an “Audience” section in your document and record your findings there. Be sure to include this information about your readers:
- Class or Salary
- Marital Status
Pro Tip: Take a screen shot of the home page and record the link to of each of the websites you research in your niche. The screen shot will be helpful in comparing the sites, you may start to see similarities in their designs. There's mostly likely a reason they've all done things the same, consider choosing similar elements for your blog.
This is probably the most important aspect of blog design. Colors convey emotion and tone that will affect your brand.
Pick a color scheme that reflects the mood you want your blog to have, but don’t go crazy here. If you want your website to be energetic, don’t go all out with bright reds and neon yellows and deep purples. It’s going to look too hectic and your audience won’t stay on your site long enough to read your content.
We could spend all day talking about color psychology, unfortunately we've got to keep moving! Here are a few common tips to help you get started:
- Women prefer blue, green and purple, and they dislike orange, grey and brown.
- Men prefer blue, green and black, while they dislike brown, orange and purple.
- Blue is one of the most used website colors, this because it sends a message of trust.
- Bright primary colors are best for your call to action. They produce higher conversion rates.
- White is one of the most useful colors for any blog or website. It brings a feeling of space and freedom to your site.
If you want to really dig into color psychology, we highly suggest reading over this article from Quicksprout on how color can impact your blog.
Try not to get too caught up in color psychology, it's not the only factor that goes into choosing a color scheme:
• Since you’ve recognized who your audience is, you can also use that to your advantage. Start thinking about what type of website they would be drawn to.
• Checking out the color schemes of the sites your researched earlier is helpful too. They've probably done there research a figured out what colors work best for your demographic.
Choosing Your Color Scheme, It's Easy!
Settling on colors for your blog may seem difficult. Maybe you only have one color you love or have a few too many in mind….
Neither of these things are a problem. There are color scheme generators that can help you come up with some ideas.
In this example: We picked orange as our main color to create a color scheme around. We then went to Coolors.com and adjusted the first color to an orange that we liked. Then clicked on the lock button that is just above the color code.
This locks the color in and it's the only color that won't change when generating different schemes. If you have more than one color, just set them up and lock them in as well.
From there it's a simple as clicking your spacebar and voila, you have you first color scheme…
Hit you spacebar again and like magic, you have another color scheme….
You can click the space bar as many times as you would like and it will continue to generate schemes.
When selecting your colors, you should: It’s best if you stick to just 2-4 colors maximum. If you use the generator it will give you 5 colors. Use you discretion and eliminate the least effective colors.
You'll also need to get to know the Hex Codes for your selected colors so you can ensure that your website is uniform. The nice part about the generator is that they give you the code right on the color, be sure to record this.
Stop Scheming and Write Your Colors Down
Okay, it's time to add to your “Colors” section of your sheet. Get the color generator fired up and put down a few color schemes that your prefer and think work for your audience.
Don't worry about settling on one just yet, you will do that later on.
The tone of your website is directly related to your brand. Whether it’s in the quality and characteristics of your writing, the aesthetic of your website design, or the content of your writing, your tone should resonate with your audience to keep them captivated.
Is the tone of your site conversational? Playful? Educational? Controversial? Entertaining?
This is something you really need to think about and remember your blog doesn't have to be one note. Therefore,you can have a blog that is educational, while at the same time humorous.
Selecting Your Tone
Once you’ve selected a tone you can start to build a blog that reflects that. Your outline for the tone of your blog doesn't have to be anything too detailed when starting out.
The first thing your should do is….
Try coming up with a list of adjectives that describe the voice you want to share with the world. There are many different adjectives you could use, here are a few ideas to get the ball rolling:
- Light Hearted
Tone it Down and Note Your Tone Now!
Once you have settled on your adjectives, add a “Tone” section to your brainstorming document and place all your words there.
If you feel like there are certain philosophies or beliefs that you would like felt through out your content, put it down as well.
For example: If you have a site that teaches people how to blog and you believe that creating good habits is the best way to be a successful blogger. Write it down, that way you are sure to remember to make sentiment is felt in the content you or your writers create.
It doesn’t matter if you’re the next Shakespeare, people want pictures. Use images in your blog to entice your audience and engage them in your work.
That being said, make sure the image you use is actually useful to your website or the point you’re trying to make with your blog, don’t just throw in photos left right and center because you think your audience wants to look at them.
Your photos should be cohesive with your website design and of high quality.
Keep your pictures consistent: Meaning, do not have one black and white photo and then a bunch of high-res color photos and a couple of sepia photos. That would look like a mess, but you already knew that didn’t you?
Images for your main blog posts should be uniform and brand-strengthening. If you overlay your blog title on one post image, you need to do it for all your posts. If you put your logo on one main post image, you need to do it for every post…. you get the idea.
Yet, your secondary post images can be different and created as you see fit for each post.
What about social media?
Think carefully about your social media. This is a huge part of your brand! Which platforms will you use? Will you use your logo as a watermark? Are you going to use the same filters for every post? Do you know what dimensions are required for each platform?
Whatever you do, ensure your social media is as uniform as your blog and works together with you blog images. Therefore, this will help in creating a strong brand.
Decide and Capture Image Styles For Your Blog
Flip back over to your document and create your “Image” section.
Start by looking at sites with main image styles you admire. Write down what you like about them and take a screenshot of they ones you really like, this will help you in choosing a final style later.
Some styles you can choose from are:
Crisp Image with Text Overlay
Shape with Text Inside
Faded Image with Text Overlay
Remember these are only examples, there are tons of other main images styles to choose from.
Once you have some main image styles down, you can skip secondary images because like we said they can change from blog post to blog post in most cases. Move onto your social media images.
Do the same thing as you did with the main image styles and find some styles that you like for your social media platforms of choice and add them to your document.
Be sure to also record the dimensions required for posting on each platform as well.
The two key factors here are text and headings. The text contains all the meat of your website whereas the headings are what most people actually read.
Be honest, you’ve skimmed this guide yourself and just read the headings didn’t you?
See, these things are important!
Size Matters When It Comes To Fonts
Make your website’s readability heightened by following these key principles when building a website:
• Size: Think of Goldilocks and her quest to find the perfect font size. You don’t want a font that’s huge, but you don’t want it too small either. You want one that’s juuuuuust right!
Just like in middle-school for those of you who went when computers were born, the general rule of thumb is to have a 12-point font size. Though this is optimal, there is some wiggle room but don’t get carried away here
• Headings: These should be much larger than your regular text. They should be anywhere from 15-25 points and have a darker text with a light background.
Make sure your headings are short, bright, and clearly visible since, again, most people just look at a website at a glance on the first go. Your goal here is to keep the reader intrigued long enough for them to actually read the text.
• Sub-Headings: This helps your blog’s readability for those who lose interested looking at a big hunk of text. It catches their eye and keeps them intrigued.
Your audience will be able to scan your work and pick up any key points that stick out to them. Sub-headers should be smaller than the heading font, but larger than the regular text.
You Need to Have the Best Font Style
Recently, non-standard fonts are approaching the scene with popular and successful blogging websites, which shows just how important a factor like typography is and how it has developed into something increasingly more important.
While this is great, there are a few rules that will help when choosing a font style:
- Pick a font that looks good no matter what size it is.
- Choose 2 to 3 fonts maximum. One for your headers, one for your subheadings and one for your text. You can then use those fonts for the rest of your blog text as well, you don't want to use to many fonts on your site it will start to look messy.
- Use a font that lines up with your blogs tone and brand. If your blog is playful, then choose one of your fonts to match that.
- Pair up fonts that contrast with each other. Thick and thin always look nice together, as you can see with these fonts we got from the design program Canva:
- Fonts from the same creator work well together because they have been designed to look good together. How do you know if they are from the same creator? They'll have a similar name, like these ones:
Type Out Your Blogs Fonts
It's time to fill out the last pat of your brainstorming document. Let's setup your “Fonts” section now, you will need to cover your ideas for your headings, subheadings and text.
Try doing what we did above and match up some different fonts with each other until you find a few that you really like. Put the ones you think will work best for your blog, you'll choose your final fonts in the next step when you create your style guide.
Pro tip: Make sure you head to your blogging platform of choice and check out the fonts that they offer, you don't want choose fonts that you can't have. It is possible to add custom fonts to most platforms, but you would have to be a little techie.
Remember: Something as simple as your font can build character for your website and strengthen your brand significantly.
While there are rules, they’re not set in stone and you do have some wiggle room. They’re just set up for you as a guide, do what you deem appropriate for your blog. Therefore, don't be afraid to be diverse and creative, you are trying to set yourself apart from the rest!
Awesome! You've finished your blog design brainstorming session, the next step is to take that info and turn it into a professional style guide.
Why You Need a Style Guide and How to Create One
In terms of branding for your blog, creating a style guide is a sure-fire way to get started on the right foot. As your blog begins to grow, your brand will be more established. It’s important to understand how a style guide can help you benefit and follow your growth.
What Exactly is a Style Guide?
Style guides encompass everything you could possibly require to design the content you want to make for your blogging website. It’s an effective way to boost the functionality of your blog and to ensure your audience is pleased with their experience when they visit your site.
Creating a style guide solidifies your brand and keeps your designs cohesive and consistent as your blog begins to flourish.
Are you working alone or do you have a partners in crime?
If it’s the latter then style guides are increasingly more important and useful to you. This way everyone is on the same page and will be able to create content that looks and feel the same.
When you create a style guide, you’re essentially ensuring the repetition of the same logo, fonts, colors, and images throughout your website.
Repeat readers will appreciate this!
It increases user familiarity with your brand, thereby strengthening it and making it more successful. As a result, your audience will have a resounding sense of security when they visit your site and ultimately, they will be more loyal to your brand.
Don’t Have a Style Guide? Create One!
It's only going to take three simple steps to complete this task!
Earlier we discussed what you need to take into consideration when designing your blog and made a brainstorming document.
Open that document up!
It's time to choose you final design elements, put them into a style guide and use it to your benefit.
Step 1: Pick Your Final Design Elements
Choosing your final blog design elements will come down to personal preference.
We have helped your narrow down your options to all usable ideas that will work in making you blog stand out. It's now just a matter of going through your brainstorming sheet and picking the elements that you believe will work best together for your brand.
Use you best judgment here!
First of all, try to visualize your final design and the elements you choose. Go through each one and ask yourself questions like this:
- Does this color scheme work well for my audience and the tone of my blog?
- Will these fonts be able to convey the tone I'm going for?
- Do these fonts work well together?
- Is my header image style working with the overall feel of the blog?
Blog design is tricky, just do your best in picking elements that work together. Most of all, make you blog place where people want to be.
Step 2: Record Your Design Elements
Now that you know which elements you want, you will be able to create you style guide.
Your style guide will be comprised of various charts and information to help you organize the design of your website. Keeping these updated continuously as your website and brand develops is key here, don’t get lazy! Your charts will help you stay on track to a strong, recognized, and successful brand.
You're probably wondering: “What does a great style guide look like?”
Of course you are!
Lucky for you, we have created a style guide template complete with instructions on how to fill it out. Just click the image to head to the free template and get your blog's guide set up in no time.
Step 3: Put Your Guide to Good Use
Now that you have a style guide you will be able to start designing your blog and building your brand on the right foot. Make sure you use it as a reference when you design your blog initially and every time you add new content in the future.
If your blog becomes a great success over time and your team grows, be sure to share this document with them and you will never have a problem with continuity.
Finally, don't forget to update it as you grow and things change, cause let's face there will be changes. Nothing is perfect from the start, especially in design.
Design to Your Heart’s Content
Most of us don’t really have this innate ability to design a beautiful blog. However, we're sure we all want our blog design to be perfect!
Even if you’re not a graphic designer or have an overly artistic side, you still have it in you to create an aesthetically beautiful and functional website for your blog that will keep your target audience invested in your work, trusting your brand, loyal to your site, and constantly coming back for more.
In conclusion, trust your instincts and create a design that will achieve the end goal you’ve set for your blog!
This guide was created for you to understand what you’ll need to consider in terms of design and branding for your blog; we want you to be equipped with the skills and tools required to create a masterpiece you can truly be proud of.
It's time to set forth and design the greatest blog the world has yet to see! You’ve got it in you to, you just have to be confident and dedicated to the task at hand.
Happy blogging friends!
Don’t forget: This is a 2 part guide. Check out next month’s guide on how to maximize the functionality of your blog through design.
Thanks for checking out our guide on blog design. Design can be complicated, if you're still having trouble we are here to help. If you have any questions or feedback on the article, don’t be afraid to drop us a comment below. We love hearing from our readers!