Designing a blog: Prep, build and expand

Megan de Graaf
March 15th, 2021

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!

Step 1: Set yourself up for success

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.

Platform: WordPress vs. Ycode

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.

Domain name

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!

Step 2. Build your blog with the right web elements

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.

1. Elements for your overall blog structure

Homepage

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.

The Blonde Abroad travel blog map

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.

Studio McGee grid blog layout

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.

Oh Joy blog design screenshot

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.

Rice Potato blog design example

Navigation

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)

TIP

Learn how to style a navigation menu in Ycode here (we also talk about mobile menus).

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.

Paper & Stitch blog navigation bar

Sidebar

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)

  • Search bar

  • Social media links

  • Blog categories

  • Links to important pages

  • Optional: New video/podcast episode

  • Optional: Ads

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.

Sidebar on ethical elephant's blog

Blog categories

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

  • Most popular

  • The latest

  • Editor’s picks

The Honest Company blog example

Comment section

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.

TIP

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.

Salt in our Hair travel blog comment section example

Footer

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.

In blogs, the footer often also contains copyright information and links to your privacy policy, terms and conditions and use policy. Additionally, you can embed your newsletter signup form in the footer.

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.

Almost Makes Perfect footer blog design example

2. Smaller design elements that make your blog design sparkle

Logo

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.

TIP

Use a link block to add a clickable logo in Ycode. Read how to do this in our logotype documentation.

Typography

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!

Marie Forleo blog design example

Header

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

Collective Gen blog header design

#2 from Maptia

Maptia blog header design

#3 from Color Me Courtney

Color Me Courtney blog header design

#4 from Bucketlistly

Bucketlistly blog header design

Images

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

  • Designs

  • Vectors

  • Drawings

  • Stock photos

If you want to use free stock photos, good resources are Nappy.co, Pexels, Burst and Unsplash.

TIP

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!

Codeacademy blog images design example

Step 3: Expand with these future web elements

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 media

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.

Anywhere We Roam travel blog social media buttons example

SEO

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.

Email marketing

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.

Love Taza email marketing popup example

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.

Balanced Black Girl blog example

Ads

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.

TIP

When ads aren’t direct brand cooperations, most bloggers use Google AdSense for their ads. These paid advertisements are embedded into your website using Javascript. In Ycode, you can embed Javascript via HTML embed.

Happy blog building!

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.


Megan de Graaf

I'm a Senior Content Writer for Ycode and other companies of The Remote Company. In 2021, I want to earn a black belt in no-code, speak enough Spanish to fluently order enchiladas and travel like it was 2018. What are your goals?


Get your no-code fix

Join our monthly email with no-code insights and Ycode updates.
.
2019 - 2021 © Ycode. All rights reserved.
Terms & Policies