Do you have amazing visuals to show? Knowledge to share? Advice to give? A blog is a great way to share your ideas with the world, connect with people and build your own brand.
With a head full of blog content ideas, it’s time to create your new virtual space!
In this article, we’ll explain how to design a blog — from preparing the foundation to using the right web elements to growing your reach with a solid blog strategy.
Let’s dive right in!
Before you start doing, let’s decide on how you’ll bring your blog design to life. Will you use a blogging platform or build your own blog? And what will your blog be titled? We’ll elaborate below.
Wondering whether you should create a blog in WordPress, Blogger or another blogging platform?
If it’s your first time as a blogger and you want the process to be quick and easy, a blogging platform is a good choice. Especially for WordPress blogs, where there are ready-made templates and plugins available. Just import a blog template, make a few tweaks and you can start adding your blog content.
That said, if blog design, flexibility and scalability are high up on your wishlist, then building your own blog is a much better solution.
With a no-code builder like Ycode, you’re in total control of the design and usability of your new blog. It’s easy, you don’t need any prior HTML or CSS knowledge. Just use the drag & drop builder and connect APIs to use and show external data.
Granted, it might take you a little longer to learn and build your own blog, but once you do, you can easily scale it. And you’ve learned a new skill that’ll be highly valuable for decades to come.
Did you decide on how to build your blog? We hope the answer is: Yes, with Ycode!
The next step is to choose a domain name.
When you create a new web project with Ycode, our no-code builder automatically generates a public URL. It works fine, but it’s not that pretty (xyz.ycodeapp.dev).
For a more professional look, it’s best to buy a domain name and set it up as a custom domain within Ycode. You can easily order domain names on websites like GoDaddy, Namecheap, Bluehost or any other registrar. When you buy the domain name, don’t worry about paying extra for hosting, Ycode takes care of the hosting!
Though each blog is different, good blog layouts have a few web design elements in common.
We’ll discuss both smaller design elements and ones related to the overall structure of your blog.
A blog homepage is like an ever-changing art gallery wall. As the exhibition keeps changing, it’s best to keep the wall and its environment simple, so the pieces really pop. A neutral background, some striking frames and an exhibition tagline is all you need.
This is how you should design your blog layout too.
Give each element on the blog homepage enough room to breathe (through white space). When deciding on your color scheme, make sure it works harmoniously with a variety of blog images. Be cautious about using background colors or header images, as they can turn your homepage into a funfair when paired with the blog images.
When deciding on homepage web elements, pick the essentials and refrain from any extra fluff. With blogs, it’s tempting to fill the page and sidebar with widgets like galleries, recent posts and social feeds. But are they all necessary? It might only distract and confuse readers.
On the other hand, do think out of the box to see what website design elements would fit your blog.
For example, the virtual travel map on The Blonde Abroad’s travel blog is super relevant. It offers a great user experience and is a fun way for visitors to explore different destinations.
And finally, it’s important to know how you will present your content. Will you use a grid layout, go for an online magazine look or opt for a simple blog layout? Will pictures or text be more important?
Studio McGee uses a grid layout, which works really well due to the minimalist blog layout and serene blog pictures. Though there are a lot of new posts promoted in one single view, it’s far from chaotic.
A great example of a blog home layout where the images get all the attention is Oh Joy. The vibrant, high-quality images that are playfully scattered over the homepage make this blog layout super engaging to scroll through.
When your blog is less about images and more about your writings, this homepage from travel Rice Potato is a beautiful example. Though the text takes up most of the space, the logo on the right and the compact menu on the left give the website a very artsy feel.
The navigation bar helps visitors to find what they are looking for, understand your website’s logic and swiftly navigate through all the pages.
Though blogs have loads of blog article pages, they typically don’t have many website pages.
On a new blog, you can link to an About and Contact page from the top navigation. As you write more blogs over time, you can link to blog categories, guides or other content you’ve created.
How do you design the ideal navigation bar? We’ve got some ideas.
Design principles to adhere to:
Keep it simple
Add hierarchy. Mention the most important categories and work with subcategories in a dropdown menu if you want to link additional items
Shorten titles as much as possible (“Blog” vs. “Read our blog”)
Keep the navbar consistent throughout the entire website
Design a more compact menu version for mobile views
Use the footer menu for pages that don’t fit in the main navigation
Optionally: Add a search bar (though this element is also often seen in the sidebar)
Here at team Ycode, we love seeing navigation bars like the one from Paper & Stitch. It’s compact, minimalistic and as a visitor, you can immediately pick your favorite subject (general or more specific in the dropdown menu) and start reading.
Like a navbar, the sidebar is also a web element that helps people navigate your blog easier. On blogs, a sidebar often contains more information about the author, a search bar and post recommendations.
To do blog sidebars right, you just need to remember one thing: Don’t go wild on widgets.
A blog sidebar often contains these elements:
Author introduction (with a link to the about page/post)
Social media links
Links to important pages
Optional: New video/podcast episode
It could also be a lot less, or a lot more. Just design the sidebar with your audience in mind. Ask: Is this content relevant for my blog readers? The fewer items, the more chance of them being seen.
Furthermore, you can use just one sidebar or have two, one for the homepage and one for individual blog post pages.
A good example of a blog homepage sidebar can be seen on the ethical elephant blog. There’s a small about text, a support me message, social subscribe buttons and cruelty-free resources.
Make it easier for your blog visitors to navigate through blogs and find content that could interest them. Blog categories are tags that can be assigned to articles to group them together.
You can show the categories on the top of the blog page, as a tag on the blog post or in the sidebar (or all three options!).
On The Honest Company blog, the categories and mentioned at the top. We love the blog’s design, with its easy navigation and the calming, well-ordered landing page.
Scrolling down, you’ll see that the main blog page is divided into clear sections:
Explore by category
Where’s the fun in posting blogs when there’s no one to interact with them? Engage with readers by adding a comment section to your blog.
Though you can build your own blog comment section, an easy solution is to use the Disqus plugin to allow comments on blog articles. It’s easily inserted using Disqus’ universal embed code. Via the web app, you can moderate comments and filter out spammy guests.
In Ycode, you can also customize and insert your own simple form by using a data form type and then displaying the results from the database. In this video tutorial, we’ll show you how to set up a local database in Ycode.
On the travel blog Salt in our Hair, there’s a little line under the blog comments that refers to their Facebook community. If you run an online community (like our Ycode community), the comments are a great place to promote this space.
In web design, it’s courtesy to end every web page with a footer. This section often contains important blog links, or links that didn’t fit into your main navigation. Or any additional information you’d like to let people know about.
We like this simple footer from the interior design blog Almost Makes Perfect. It has an embedded Instagram feed, search bar, social media links and copyright and privacy information.
And see the disclosure? Once your blog grows and you start using affiliate links, disclaimers like these might be useful for your blog too.
The first thing visitors will most likely see is your blog logo. Flaunting right at the top of the page, it’s the image that helps with your blog’s brand recognition. Therefore, make it memorable.
You can have a blog logo made by a graphic designer. An easy way to hire freelancers is by using platforms like 99 designs, Fiverr or Upwork. If you want to get crafty yourself, you can use DIY logo-creating tools like Canva or Tailor Brands.
Since people visit blogs to indulge in engaging reads, you want to make sure all copy has great readability. Opt for clear fonts (e.g. sans serif or serif fonts), a good amount of line spacing and large enough font sizes (ideally, 16 px for text).
If you want to combine fonts, keep your mix to a maximum of three.
We enjoy reading Marie Forleo’s blog articles, as the graphic design is on point. Note how the text is large and spacious, but also how she uses boxes, quotes, videos and tweets to make articles more engaging (like in this blog). Oh and, how sleek are those link indicators!
Your blog header is the first thing people see when entering your blog homepage. It’s a place to reflect your branding and lure in visitors, both with your imagery and writing. Blog headers can set the tone and entice readers to scroll down for more content.
With blog headers, you’ve got options. Because your blog articles will be the focal point of your layout, it’s not required to go all out with the header design. Though, of course, you can.
A header can be compact or large, centered or left-aligned, contain social sharing buttons or not. To give you some inspiration, here are four examples of blog header designs.
#1 from Collective Gen
#2 from Maptia
#3 from Color Me Courtney
#4 from Bucketlistly
This one is not exactly a web element to embed, but your blog hero images are worth a mention. Define the vibe for your blog beforehand, so it’s easier to select blog header images and have them look coherent when joined together on one web page.
For images, you can use:
Original pictures you (or a photographer) took, like we do at Ycode
If you want to use free stock photos, good resources are Nappy.co, Pexels, Burst and Unsplash.
Looking for a way to display images a bit differently on your blog website? Why not insert an image slider. We’re talking about how to insert website carousel sliders in this blog.
Looking to create your own blog headers? Take inspiration from Codeacademy’s blog images. In fact, not just their images but their entire blog design is authentic, sleek and beautifully designed!
Once your blog is up and running, you might want to look into adding the blog elements below to grow your audience and gain more traction. Here’s how to go from a personal blog to a small business.
Social buttons always belong in your blog design. As soon as you’ve reserved your handles, you can add the links in your header, footer, sidebar — anywhere that seems fitting!
Once you’ve added a good amount of content on Instagram or Twitter, you can also choose to embed your latest posts in your web design. Many blogs have embedded their Instagram feed somewhere on the homepage or in the footer part. This promotes follows, but also adds more imagery to your blog design.
In the example below, you can see how the travel blog Anywhere We Roam dedicated an entire section to promoting both their Instagram and newsletter subscriber list.
While Search Engine Optimization (SEO) isn’t an element to embed while building your website, it is an important blog aspect to take into account when you’re looking to grow and expand your reach.
To gain more organic traffic and rank better on search engines, you’ll need SEO. For your blog, it’s best to start with on-page SEO. This entails everything from finding the keywords you want to rank for, creating blog content around those topics and optimizing existing content.
In MailerLite’s beginner’s guide to SEO, you’ll learn all the basics of performing SEO for your blog.
A great way to build a following is by having a newsletter. This allows visitors to leave their email and become email list subscribers. You can then send them a newsletter, or automatically notify readers when there’s a new blog post waiting for them.
To turn visitors into email subscribers, you’ll need to promote your newsletter. Most blogs do this by embedding a signup form in the header, sidebar or footer — or a combination of all three.
In the blog example below from personal lifestyle blog Love Taza, a catchy pop-up is used to ask website visitors to become email subscribers.
Make sure to write your copy in a way that entices people to sign up. What in your email makes people go “yay, I want this”, not “ugh, yet another newsletter”? Think about the value you offer and write your copy around that.
Sometimes people need a bit more motivation, in the form of an incentive. Incentives are like freebies or bonuses people receive when they subscribe. For a web designer, it could be a WordPress theme discount, photographers could gift mobile presets and copywriters could offer writing tips. Let your creativity run wild!
The example below shows a freebie on the Balanced Black Girl blog. By signing up for the newsletter, subscribers receive a free guide to creating a simple self-care practice.
Wanting to monetize your blog is completely normal. Who wouldn’t want to get paid for the content that you provide and the effort you put into growing your blog?
Most blogs use ads to grow their blog. One tactic is to place ads in your blog’s sidebar or above the feed. Make sure to embed ads neatly into your blog design so they look like they’re part of the design — this will increase click-throughs.
That’s it from our side. Now it’s up to you to start building that long-awaited blog. You now know what to prepare, which elements to design and what steps to take after your blog has launched.
Comment below with your blog designs (bonus points if you’ve (no-)coded it yourself).
Oh and, if you liked this blog, you might also enjoy our article on how to build your own portfolio website. In a similar style, we’ll explain which design elements you need to build a great online portfolio.