Friday, September 18, 2015

17 of the Best Examples of Beautiful Blog Design

Bloggers are now the third most trustworthy source of information, following only friends and family, according to a U.K. survey. That’s right: Bloggers are trusted more than celebrities, journalists, brands, and politicians. But how do you get people to fall in love with your blog in the first place? (Aside from remarkable content, of course.)

Well, just as your website homepage is like the front door to your business, so too is your blog homepage the front door to your business blog. If you’re not attracting people visually, how will you get them to take the next steps to actually read (and hopefully, subscribe to) your content?

A lot of it has to do with how your blog’s designed. I mean, once you’re done creating the quality content that keeps readers sticking around for more, you still have the challenge of finding a balance between visual design and effective content presentation. Blogs are chock full of images, text, and links that need to be shown off just right – otherwise readers abandon your content because they can’t make heads or tails of what’s going on.

That’s why we’ve compiles some examples of blog homepages to get you on the right track to designing the perfect blog for your readers. Check ‘em out.

Download even more examples of beautiful blog design here.

17 Inspiring Examples of Beautiful Blog Homepage Design

1) Help Scout

Sometimes, the best blog designs are also the simplest. We love Help Scout’s unique but minimalist design, which limits the use of copy and visuals and embraces negative space. It uses icons as featured images for all its blog posts, set in front of bright, block colors that catch the readers’ eye. Everything about its blog’s design says “clean” and “readable.”

2) Microsoft Stories

This isn’t the first time we’ve gushed over Microsoft’s “Stories” microsite. What a way to revitalize an old-school brand: This blog homepage boasts beautiful, interactive, and inspiring branded content. Plus, the squares for each story kind of remind you of the Microsoft logo, don’t they?

3) PandoDaily

An important aspect of a well-designed blog is a consistent color scheme and style. PandoDaily is using three different fonts – that’s right, three! – that look great together when unified by the colors of the blog design.

4) Design Milk

Design Milk uses a very simple layout to highlight its blog posts. The sidebar to the right – which stays there even when you open and read a blog post – is perfect for showing off thumbnail images that draw readers to new articles. Plus, the social icons at the top are a pleasant addition to the overall look and feel of the site. (Read this post to learn how to add social media buttons to your blog’s homepage.)

5) Fubiz

Here’s an example of a really sleek blog homepage design that also includes some cool personalization. Near the top of the blog’s homepage, you can side-scroll through “highlighted” posts. Below that is the Creativity Finder, which lets readers actually enter in their persona (from art lover to architect), location, and the type of content they’re looking for. From there, readers can browse content specifically catered to them. 

6) Webdesigner Depot

Webdesigner Depot’s banner stands out with its bright colors and subtle details, all the while working itself seamlessly into the design of the entire blog. The color scheme, background, and fonts are all consistent – which keeps this blog looking professional –  while still distinct from the basic blog templates we’re all used to seeing.

7) Mashable

Mashable breaks its content into three noticeable sections on the homepage: New posts are listed on the left in the smallest sized thumbnails, the “What’s Rising” posts are displayed in the center column as large thumbnails, and the “What’s Hot” posts are shown to the right, also as large thumbnails. We also like that it includes the number of people who have shared an article in each post preview – a great form of social proof.

8) Brit + Co

We love the warm, welcoming color scheme on Brit + Co. The homepage is clean and free of clutter, which helps the reader digest the information better and makes it look extremely well organized. Its use of iconography is helpful for organizing the site, too: Check out the paw print icon for its "Pets" section, the dress icon for “Style,” and the chef’s hat for “Food.” There’s a little nod to Pinterest in there, too, with the pin icon representing the "Things to Make" (i.e. DIY) section.

9) Tesco Living

We love the colorful, consistent design of Tesco Living’s blog homepage – especially that the rhombus-like designs in banner on the top match the icons below each category. Check out the “saved items” option at the top, which lets readers save articles to read later (kind of like Facebook’s “Save” feature). Since many blog readers are often skimming or don’t have time to read all the articles they’re interested in, this is an awesome (and very user-friendly) way to encourage them to return to the blog.

10) Crew

Crew is another example of a minimalist blog design, but in a very unique way. Notice that, above the fold, it features one blog post with a large title, subtitle, and call-to-action to read more. Then, following this single featured blog post is a subscribe call-to-action. We love how easy Crew makes it for readers to subscribe.

11) Innocent Drinks

Not only are the folks at Innocent Drinks great copywriters, but the design of its blog is also a great reminder that blog designs don’t have to get super fancy. The colorful fonts are in line with the company’s uber-casual, playful voice. The archive links on the left also make it easy to navigate to older posts, and the social sharing links make it easy to share.

12) 500px

Like Crew, the 500px blog starts with one featured article and a big, bold, high-definition image to draw the reader in. The social links below the posts also help keep readers engaged with the content.

13) Girl Scouts of Northeastern New York

The Girl Scouts (yes, even the Girl Scouts can rock a blog!) let their local chapters create their own blogs. We particularly love the Girl Scouts of Northeastern New York’s blog, which uses an interesting three-column layout and sprinkles it with a personal touch that’s still on-brand for the larger organization. The header graphics and playful colors make for a very enjoyable reader experience.

14) Treehugger

Bold colors and fonts can do a lot to make a blog pop for new readers. Treehugger’s bright green bars and bold, black font help stories pop on the page.

15) Salvation Army

Who says nonprofit organizations can’t blog? Nay, they should – and the Salvation Army’s clean navigation, large slideshow, and colorful social buttons draw the reader to the important elements of this blog. The posts are also neatly positioned and easily accessible to readers. Finally, we love that the bright red “Donate Now” call-to-action button is prominently displayed. After all, many people who visit the blog would probably be interested in donating. Why not make it an easy next step?

16) charity: water

Keeping the nonprofit blogging train going is charity: water, which does an excellent job presenting high-quality images. We also love how it's organized the design for what readers are likely looking for: all posts, stuff happening at home, stuff happening in the field, and specific campaign updates.

17) Johnny Cupcakes

The folks at Johnny Cupcakes know a thing or two about brand consistency across channels. We love that its blog’s simple color scheme and matching fonts help create a unified user experience from shop to blog, all the while throwing in bold, colorful images to catch readers’ attention.

Which other blogs have excellent homepage designs? Share more inspiration with us in the comments.

Editor’s Note: This post was originally published in February 2013 and has been updated for freshness, accuracy, and comprehensiveness.

download 47 examples of beautiful blog design



from HubSpot Marketing Blog http://bit.ly/1NHHEOR

Mobile Marketing


from Tumblr http://bit.ly/1Kw5D1c

No comments:

Post a Comment