Blog essentials and design

During my redesign of the DailyDrip website, I had to think about what makes a visually pleasing and user-friendly blog. This is what I came up with!

Keep it simple—only the essentials! Don’t dump everything on the page. Make your blog easy to read. That is the point, after all! Pair a dark font with a light background, use type hierarchy, follow a grid. Don’t forget consistency within your design. Throwing in a different color or font out of nowhere will confuse everyone and just look bad. Use a set amount of colors and fonts throughout your entire website. Good blogs are also easy to navigate—UX done right makes everyone happy! Menus, links, and other navigation should be easy to find and use throughout your entire website. And finally, memorability: will your brand/blog be remembered after leaving the site?

What elements should be included?

Marvel blog Marvel blog: Post image, post title, and metadata

Post Images

People are attracted to visuals—the more interesting and relevant, the better! This image should be the first or second thing seen.

Post titles

This should be seen either before or after your blog post image. Remember design hierarchy from the intro paragraph? That just refers to the order that you see things on the page: the most important thing is the most prominent, and so on down the line. We can achieve this using size, color, and font weight.

Metadata

Include the publication date, post author, and categories/tags. Make sure these blend into the design and aren’t the first thing you see.

Typography

There are many options for web typography, so I’ll stick with the easiest. Google Fonts has 800+ typefaces to choose from. Choose a font that’s easy to read, but consistent with the rest your brand. Here’s a wonderful resource on combining Google fonts.

Wired magazine blog Wired magazine beautifully combines four different fonts.

Subheadings/pull quotes

Break up the monotony of text and add interest to your post by adding subheadings, asides, or pull quotes that highlight your content.

Break up the monotony of text and add interest to your post by adding subheadings, asides, or pull quotes that highlight your content.

The Verge blog The Verge’s pullquotes and links use bold color and lines to stand out.

Don’t forget to link to other content on your website, cite sources and contributors, and promote what you’ve been reading lately on the interwebs.

Bullets

Bullet points are another great way to:

  • break up chunks of text and

  • make things visually interesting

Social Areas

Don’t forget to convince people to share your content! Put the social sharing links in a convenient location: at the bottom or to the side of your post.

Medium blog Medium's formatting is simple and beautiful. Note the bullets and share icons.

Subscribe

In order to grow your fan base, you’ll need a newsletter signup area. Put this somewhere easily seen.

Local Milk blog Local Milk blog: easy to find the subscription and search fields when you look for them.

Search field

Give your readers the ability to easily find what they’re looking for.

A great way to keep people on your site for a while is to link related posts at the bottom of the page (or within the post via links).

Invision blog Invision’s blog is a great example of well-designed post author bios and related posts.

Post Authors

This was mentioned in the metadata section, but don’t forget to have the post author’s name somewhere! Short author bios always add interest and help the reader connect with the blog.

Comment Areas

Feedback is a good thing! It also provides a place for people to connect with you. Make sure this is nicely designed and easy to use. Disqus is one of the easiest ways to add comments to your blog posts.

Disqus Where better to go for comment examples than the Disqus blog? Bonus: that link will take you to a tutorial on embedding Disqus"

And a Few Extras:

Cayenne Creative blog Cayenne Creative’s blog has an understated, but tasteful breadcrumb trail.

If your blog has lots of categories and posts, breadcrumbs provide excellent SEO and navigation. Make sure they take a backseat in your design. You don’t want readers to notice them unless they are specifically looking.

Pagination

You’re going to have a lot of content. Right? So, pagination is a must! There are several options: the traditional numbered version, older/newer buttons, or a 'load more' button.

Google blog Google's 'Load More Stories' button

Drop Caps

Drop caps are another fun way to add visual interest and type design into your posts.

Jessica Hische blog Jessica Hische is a lettering artist and author—naturally she makes beautiful drop caps.

There you have it! And, please—if you find that our blog doesn’t match up with all of these, don’t hate on us too much! We’re always working on improving our website 😉.

Until next time!

—Amy