Design Critique: Nothing But Bonfires

February 1, 2012

There are so many blogs out there about design, website development, and coding that I almost feel bad when I’m reading something that isn’t improving my skills as a web developer. But this blog, despite the content’s total uselessness in my continuing education (it’s about random parts of a girl’s life…but the writing is funny), has a great design.

Nothing but bonfires website 1

Ads in Her Layout

Nothing too special on the basic layout. We’ve got the top bar, the left main text area, but two sidebars on the right. Interestingly, she chose to add an entirely different sidebar to the right for the ads (and one on top), instead of just inserting them between posts. I haven’t noticed this before; the jury’s still out as to whether it’s better or worse. I will say that the ad at the top, before her content, actually really annoys me. Her site is so beautifully designed and that Staples ad just really sucks.

Navigation & Colors

I love the top bar. No, really, I LOVE it. The color is gorgeous! I’m really into pink right now, but that color is definitely winning me over. And let’s be honest, I love traveling, so any map behind anything makes me happy! But if you look closely (or at the actual website), she’s got this great texture. While lots of websites are going more sparce or “clean”, the one thing everyone seems to be adding is texture; it makes a good thing, great.

Now she could have left that top area open, but instead she put the main categories for her website (or at least categories for her website) with pictures to fill that area in. The buttons themselves are done fabulously – the faded edges for a 2D look; the titles on the bottom of each button. And if you hover over the button, more goodness arises. The pictures become colorful and the title gains a subtitle. It’s beautiful work.

Even the standard link bar on white is done with flair. A “hover” over the link gives a nice teal circle highlight with a little 2D magic thrown in.

Sidebar Navigation

In the sidebar, she obviously keeps that beautiful teal color and also creates nice 2D banners. She also adds the grey outline around each “div” with the link on the bottom. That outline does a great job of holding together each area.

Nothing but bonfires website 2

Showing Blog Posts

I really just included that picture to show a different idea for displaying the home page blog posts. Usually, the choices are show one full post and links at the bottom, or show multiple excerpts of tons of posts. I like what she did with the combining of the two ideas. The main post is fully displayed, but after it ends, she’s got navigation that switches between the Recent Posts, Random Posts, and the Recent Comments. It’s a genius idea…one I might just copy.

Nothing but bonfires website footer

Bottom Bar

Nowadays, a website isn’t complete without some kind of bottom bar. And, like the rest of her site, this one is designed beautifully. She’s got a nice “Break Bar” that sets off the RSS feed and the Search bar (which I would have wanted at the top, personally). And then she added the city outline to the background. Just so you know, it’s really wide. It goes all the way to the edge of the massive screen I’m using right now. And she also includes all the normal archives and category links that are “required” on blogs.

The twitter/picture is great. It really let’s you get a sense of who she is and displays her tweets in a humorous way, which seems to match with her personality and the blog well.

Design Take-Aways

So a few lessons to take into the next job:


Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>