3. INTRODUCTION.81% of U.S. online consumers trust information and advice fromblogs. But how do you get people to be interested in your blog?We’ve mentioned before that your website homepage is like the frontdoor to your business. The same goes for your blog. If you’re notattracting people visually, how will you get them to trust what you’reblogging?A common issue we see with blog design is finding a balance betweenvisual design and effective content presentation. Blogs are chalk full ofimages, text and links that need to be shown off just right – otherwise itjust turns the reader away because they can’t make heads or tails ofwhat’s going on.That’s why we’ve put together a variety of well-designed bloghomepages to get you on the right track to designing the perfect blogfor your readers.
4. BUSINESS EXAMPLES.SHARE COLLECTION 4
5. PANDODAILY.An important aspect of a well-designed blog is a consistent color scheme and style. Pandodaily is using 3different fonts that look great together when unified by the colors of the blog.
6. START UP QUOTE.Start Up Quote does a great job at taking simple content and conveying it in an interesting and attractivemanner. The black background makes the colorful, tiled quotes pop and draw visitors right to the meat andpotatoes of the blog.
7. THE NEXT WEB.The Next Web makes great use of a two column design. They use the left side bar to showcase both“Popular” and “Latest” articles while displaying their top stories on the right with a variety of thumbnails. Thetext heavy layout gives room to include more keywords for your search optimization.
8. VENTURE BEAT.Never underestimate the power of image placement. When you first arrive on the VB website, youimmediately notice the five main articles at the top of the page. The contrasting black, white, and red makethe headlines stand out.
9. DESIGN EXAMPLES.SHARE COLLECTION 9
10. ABDUZEEDO.As a design blog, the use of thumbnails is key to keeping visitors satisfied and interested in the visualcontent. You’ll also notice the sleek, unobtrusive, social icons in the top right corner. Everything about theblog screams sleek.
11. AWWWARDS.Awwwards blog should be nothing less than amazing. And it is. You can see that the navigation, fonts, andlinks are all consistent in design and color. Evenly sized and spaced tiles makes it easy to scroll throughlarge amount of content.
12. DESIGN MILK.Aside from the creative logo, Design Milk uses a very simple layout to show off its blog posts. The sidebar tothe right is perfect for showing off thumbnails that draw readers into new articles. The social icons in the topright are a pleasant addition to the overall look and feel of the site.
13. GOMEDIAZINE.The blue and orange color scheme of Gomediazine work remarkably well with the light background and greyfont. Other than the ad on the right, this website is very clean of clutter and still avoids looking bland.
14. HELLO BAR.Everything from the background to the social media buttons spew character. Hello Bar did a fantastic jobtaking a simple layout and giving it a personality of its own.
15. LOOKS LIKE GOOD DESIGN.For visual heavy content, a layout similar to this design blog provides readers with a convenient way tosimply scroll through loads of posts. We have a dark background with bright links and light bordered tilesthat make everything stand out.
16. MODERNERD.You may not notice at first, but Modernerd has a subtle background design. This blog is an example of howless is more. We have text heavy posts, simple navigation buttons, and an even simpler logo. Minimalistblog designs are rare but greatly appreciated when done correctly.
17. WEBDESIGNER DEPOT.The banner of Webdesigner Depot stands out with its bright colors and subtle details while working itself intothe design of the entire blog. The color scheme, background and fonts are all consistent. This keeps theblog from looking like any basic WordPress or blogger template.
18. WE LOVE TYPOGRAPHY.We love typography! The simple, yet visually striking layout of this typography focused blog gives readersthe option of sorting posts based on color. You can also adjust the layout of the website by changing thearrangement of the grid.
19. ENTERTAINMENT EXAMPLES.SHARE COLLECTION 19
20. 500PX.This is another two column blog that uses the sidebar as an effective way to showcase a variety ofthumbnails. The stats, social links, and related article information on the right side of each post is perfect forkeeping readers interested.
21. COOL HUNTING.Cool Hunting has a slick navigation bar. These clean boxes with small font add to the overall look of the site.The top stories are also represented by three well sized thumbnails that draw the reader’s eyes.
22. GET ADDICTED TO.Get Addicted To has a simple, yet creative logo that stands out among all the white space. The largeslideshow and rows of small icons give the site a clean, clutter free layout.
23. GET THE FIVE.This site has posts set up in groups of five. The individual slideshows use five dots in the top right corners toindicate slide positions and subtle arrows on the left and right to navigate through the 5 slides. The tags inthe left sidebar give ample opportunity to include high ranking keywords.
24. I CAN HAS CHEEZBURGER.We’re sure you’ve stumbled upon this website at one point or other. The design aspect that stands out is thesimple set of social sharing icons at the top and to the right.
25. MASHABLE.Mashable breaks its content into 3 noticeable sections on the homepage. The new posts are listed on theleft in the smallest sized thumbnails, The “Next Big Thing” posts are displayed in the center column asmedium-sized thumbnails, and the “What’s Hot” posts are shown to the right as large thumbnails.
26. PICTORY.The black background showcases the featured articles in an aesthetically pleasing layout. Pictory useswhite and yellow font to create much needed contrast and keeps the site from looking too dark.
27. THE BURNING HOUSE.This blog feels a lot like an Instagram filter. The simple layout, small text, and rounded corners makes thissite a pleasure to navigate.
28. THE OATMEAL.Whether you enjoy the comics and jokes as much as we do doesnt matter. The design take away from thisblog is the overall consistency of the website. Everything from the colors, fonts, navigation buttons, andthumbnails is in tune with the brand.
29. THE OPEN PHOTOBLOG.It is very rare that a blog can pull off a “dark theme.” A design style that utilizes a color scheme on the darkside of the color spectrum has its problems. The issue with dark themes, is that font becomes harder to readagainst dark backgrounds and tends to strain the reader’s eyes. This, whoever, was done right.
30. LIFESTYLE EXAMPLES.SHARE COLLECTION 30
31. ADVENTURE JOURNAL.An attractive design feature of this blog are the articles displayed in the center column. Normally you’d findthe smaller thumbnails on either the right or left of a site, but hardly ever in the center. This makes it easierto spot and doesnt draw the reader too far from the main content.
32. APARTMENT THERAPY.The left sidebar is designed to showcase a large number of categories and articles without over stretchingthe page vertically. No one likes to scroll to the bottom of a page just to see some related articles.
33. BRIT+CO.First off, the color scheme is warm and welcoming. Second, the homepage is another great example ofclean and clutter free. layout One thing that many blogs don’t do enough of is including a profile image. Forpersonal blogs, it bolds well to introduce yourself to your readers.
34. DELICIOUS DAYS.Personally, I think it is difficult to avoid fonts like Helvetica, Tahoma, Calibri and the assortment of other newstyle fonts when the idea of Times New Roman brings you back to college term papers. Delicious Days findsa way to use a more formal style font by designing the layout to match.
35. DETECTIVE D DUBS.The design of this particular blog plays more on the interactive side. The sidebar doubles as the navigationbar and has a simple and integrated Twitter feed. All of the articles are displayed on the homepage inevenly-sized tiles that flip to reveal titles and text when hovered over.
36. DOOCE.Dooce makes great use of white space. The issue with many blogs is that the combination of images andtext in close proximity to one another create a very cluttered and confusing experience for readers.
37. DWELL.Dwell breaks its content into a few well-organized sections. The big space saver is the slideshow at the top ofthe page. You’ll notice that there are eight articles compiled into that slideshow for readers to browse through.
38. ECOKI.A textured background and angled header gives this blog a look and feel of its own. Although the particularlayout doesn’t differ from many others, the small details set it apart.
39. FOODILY.Aside from the appetizing background image, Foodily’s large search bar creates an amazingly convenientfeature for readers.
40. JOHNNY CUPCAKES.We’ve talked about brand consistency before and Johnny Cupcakes knows a thing or two about that. Theblog’s simple color scheme and matching fonts creates a unified user experience from shop to blog.
41. SVBTLE.In case you didn’t notice, SVTBLE has a clean and sleek look. One great feature is the subtle navigation barin the bottom left corner of the site. It’s almost as if it were designed with subtlety in mind.
42. THE SATORIALIST.The sidebar is simple and packed with well-organized content. Each section of the sidebar is evenlyseparated from one another while maintaining a consistent look throughout the site.
43. WE HEART.Every inch of the site is filled with colorful and attractive content without appearing cluttered. We Heart usesa variety of tiles and even spacing to pull off this complete look. Even the social media links have beenturned into tiles to fill in empty space!
44. NONPROFIT EXAMPLES.SHARE COLLECTION 44
45. CHARITY: WATER.The Charity: Water blog does a great job at presenting high quality images in a centered slideshow. The redtags give the blog flare while the subtle social icons keep it from being too distracting.
46. CURE.Another great example of a textured background and textured design elements that give this blog a distinctpersonality.
47. GIRL SCOUTS.The Girl Scouts take design elements from a three column layout and sprinkle it with a personal touch. Theheader graphics and wide range of colors make for a very pleasant reader experience.
48. SALVATION ARMY.The clean navigation bar, large slideshow, and colorful social buttons draw the reader to the importantelements of this blog. Posts are neatly positioned and easily accessible to visitors.
49. UNECO.This simple and interactive blog layout offers users a friendly and visual experience. Readers can use thesmall arrows to the left and right to navigate through posts. The small navigation bar and clean sidebar don’tdistract from the main content.
50. TECHNOLOGY EXAMPLES.SHARE COLLECTION 50
51. ENGADGET.For the most part, Engadget has a very basic blog set up. The design aspect that sets it apart is its slightlymore interactive top banner and the text heavy sidebar that makes headlines the main attraction and not thethumbnails. The layout design allows for longer headlines and links to improve SEO ranking.
52. GIZMODO.Gizmodo, unlike many other tech blogs, is not much for scrolling. When you visit the site, you’ll notice thatthe homepage doesn’t really scroll beyond the end of the sidebar. This is possible because the sidebaractually scrolls independently of the homepage which makes it easer for readers.
53. TECH CRUNCH.You can always tell you’re on Tech Crunch when you come across an article. This is because of their brightand sometimes obnoxious neon green text, icons, or logo. This isn’t a horrible thing when done withrestraint, and can set your site apart with a very simple design change.
54. THE VERGE.The colors! The Verge utilizes transparent color overlays to spice up their thumbnails and make thoseheadlines stand out like sore thumbs. The layout houses a large number of optimized links and headers toachieve better ranking in search engines.
55. TREE HUGGER.Once again, bright and sometimes obnoxious colors can bold quite well for a blog if done right. Treehugger’sneon green bars and white font sure pop on the page.
56. WIRED.What most people forget to focus on when designing a blog or even a website, is the importance of theirlogo. This logo not only acts as your “We’re Open” sign, but also seconds as a link to your homepage.People will always look for it when navigating back to the blog homepage. Just make sure it’s inviting!
57. CONCLUSION.As you can see in these examples, every blog has its owncharacter and personality. Remember to think about how yourdesign will reflect that character – and if your target readership isright for it. Ask yourself questions about your content such as:• “Is it text heavy or image heavy?”• “Will these colors make it hard to read my articles?”• “Can my readers see all the categories?”Designing your blog is less about the graphics, colors, and text,and more about the layout of your content for the readers.There’s no point having a great looking blog if readers are havingtrouble getting to the actual content, the content they trust. Withany design project, remember to do your research and have fun! SHARE COLLECTION
58. LOOKING TO BOOST TRAFFIC TO YOUR BLOG?Talk to a HubSpot expert about howyou can improve traffic to your blog.We’ll walk you through a step-by-step assessment of your blog, and help you optimize your strategy to drive more traffic to it. REQUEST A FREE CONSULTATION