Reviews Of Blog Designs In The Wild

Like any designer, no website is without its merits and flaws. It is through critical analysis and thoughtful conversation that we grow as individuals. If we do not talk about our work and the work of others, then we will not grow as creatives.

We have evaluated each website in this review based on the following criteria:

• Consistency,
• Composition,
• Hierarchy,
• Balance,
• Color,
• Feel,
• Typography,
• Usability and experience,
• Form vs. function,
• Forward-thinking,
• Graceful degradation,
• Common sense.

While not every area is discussed in depth for each website, we will note areas worth highlighting, whether for praise or criticism. It is through the lens of these fundamental design values that we critically look at, think about and discuss blog designs as they are today, in the wild.

"An art whose medium is language will always show a high degree of critical creativeness, for speech is itself a critique of life: it names, it characterizes, it passes judgment, in that it creates."

– Thomas Mann

Blog Designs In The Wild

Ultranoir

Ultranoir is a wonderful example of well-executed design for an editorial website. The typography is solid, although the body copy could benefit from a bigger size for added readability.

The bold Old English-style logo adds a wonderful touch to the top of the page, without distracting too much.

Functionally, the website is smooth and put together well. The zoom effect on the images when you hover over items adds a nice sense of movement and visual interest. And the simultaneous pop-up effect keeps your attention focused on the currently active item. All of the subtle functionality is made possible with JavaScript and a bit of CSS3, wrapped in a layer of HTML5 goodness.

This is a website from which editorial-oriented websites should borrow a thing or two.

Decorated Playlists

The first thought that struck upon visiting Decorated Playlists was that it is classic Simon Foster. And a quick scroll to the byline at the bottom confirmed this.

If his name is new to you, definitely check him out.

Functionally, the website is dead simple and straightforward, which speaks volumes about Simon’s illustrative and design style.

What makes it a real treat is that each playlist is given its own page. These custom playlists are unique spaces where both musical and visual composition play a part.

A look at the source code reveals neat mark-up that takes advantage of HTML5’s audio capabilities, along with @fontface-served fonts.

From the choice of type to the subtle texture to the simple delivery and message, nothing is out of place here.

Pelican Fly

Pelican Fly immediately draws your attention to its logo, which consumes entirely too much real estate for its function. Yes, the title is important, but once you're here and know where you are, it should recede to the periphery and not keep staring at the users. A better approach would be to decrease its size and to position it higher up. Where it is, it competes with the first post and the mission statement.

Something about the layout and vast amount of white space has an old-school art-board feel. White space is critical to design, but in this case it is slightly lacking in balance. It almost feels as if it might swallow some of the elements like an ocean, rather than neatly separate the content.

Scrolling down, the page really clears up and allows for more focus on the actual content. Individual posts are displayed in a simple, bite-sized, almost Tumblr-like format, aligned to the right of the page. The left side feels a bit too vacant and creates another compositional imbalance. One easy way this could be remedied would be to allow the list of articles to scroll down the page with the content. This would restore the balance while adding functionality.

The approach here feels minimal, and the designers could have borrowed a few compositional tips from Ultra Noir, and even Decorated Playlists, if they wanted to maintain simplicity. The design isn’t a failure. It remains visually interesting, but much of it straddles the fence between too much and too little.

The code is a neat bit of HTML5, using the shim. One bit of interest was the use of the figure and figurecaption tags, which I haven’t seen used in a production environment before.

Drawar

While Drawar has never disappointed in its quality of content, its design has been lacklustre. The website doesn’t fail in functionality at any great level, but compositionally it really lacks the details, particularly with regard to spacing, and focus. The 'sticky' transparent top nav at its core seems like a good idea, but in practice provides a strange distraction from the content as it is transparent enough to see the below content, but isn't clear enough to differentiate it from the content without some degree of tension. The easy way to fix this, don't make it transparent. The center-aligned content feels strangely aligned and hard to divide. Articles are hard to draw divisions between, and are not easily browsed through a use of proper organization or archival practices. Social-media buttons are particularly difficult to work with, but that attention to detail pays off, and one would expect it from a website with such high-quality content. Just giving the Google +1 button the same amount of spacing on the left as the Twitter and Facebook buttons would have added a great deal of cohesion. Under the hood, there’s nothing special. The source is declared as HTML5, but it doesn’t employ any new tags or bold semantic arrangements. There are a couple of divs where a span would have made more sense (for example, the date). Pairing quality content with a quality design breeds user trust more than either does alone. While is a change from the previous design, its not really a step forward, more like a step sideways.

Curly Braces

Curly Braces is another simple Tumblr-like approach to design, more so even than Pelican Fly in its presentation of articles. The static logo maintains the brand’s identity even as the user scrolls, and the accompanying glowing effect on hover adds a bit of visual interest.

The navigation at the top is icon-based, but clear.

Other than the very small body copy, the website is simple enough and pleasing with its sparse composition and subtle texture. However, a look at the source reveals semantically incoherent div-itis: a lesson in what not to do when writing layout code, boys and girls.

Marlon Medau

The mixture of typefaces creates tension on Marlon Medau’s website. The serif logo and the page title script complement each other, but the choice of font for the headings feels a bit off. It clashes with the logo font, like two different shades of black clothing. While both are serif fonts, they don’t blend enough.

The overlapping circles for the date and comment count are enjoyable. They add visual interest to otherwise mundane information, while setting off the beginning of each post.

The footer is just delightful. The “Back to top” squirrel graphic and the Twitter bird add a bit of whimsy to this otherwise modern design. The tree graphic, though, leaves something to be desired. Are the circles that surround it leaves? Or stars? Hovering over one makes it fall off the page. Perhaps they are a fruit of some sort?

Also, the contact box is too small. The average user is not going to compose a message in so small a text area. A better use of the space would have been a summary of contact information with an email address.

A good bit of HTML5 has been thrown into the source, with a fair amount of unnecessary divs. Large chunks of code related to posts have been commented out, rather than being omitted from rendering. Sticklers for page-loading speed would not be happy with those precious lost milliseconds.

Idea Exhibit

There aren’t many ways to make this Idea Exhibit any simpler. The optional keyboard navigation makes for a delightful atypical horizontal experience. The composition of posts is elegant and suiting. One noticeable flaw is the small body copy, which can be forgiven because of the lovely white space and balance.

The title of the website is appropriate, in that the content and feel are very exhibit-like.

The source declares HTML5, with a few tags thrown in for added semantics. As with many websites, several divs would be better off as spans.

Middle Mojo

Middle Mojo’s layout is, if nothing else, visually pleasing in its geometry, but the presentation of content is a little suspect. For example, the bottom row starts with teaser for an interview article, then goes to navigation, and then back to another teaser.

The placement of the remaining content is unconventional, but would be a little puzzling to the average user.

Deeper pages are not as clean and orderly, and feel very crowded. The leading is set too low, the headings don’t have enough weight, and the white space is off across the board. The sidebars feel like they are smothering the content.

The creativity on this website needs to be reigned in, and the presentation of content tightened up for the user.

Meta Markets Group

Meta Markets Group’s website definitely has a corporate feel, primarily because of the small sans-serif font for the body copy.

The lead-in headline and image, along with the meta content, work well and fill out the page. But the line length is slightly uncomfortable to read, as is the font. Also, the Twitter and Facebook buttons have too much weight; though not sure what the solution is, but it seems to be a growing problem among many blogs, perhaps due to the limited flexibility of third-party buttons, no thanks to Twitter and Facebook.

The abstract shapes in the background strongly delineate where a new post begins, but they distract from the feature images slightly. This could have been easily fixed by making them grayscale instead of vibrant. Perhaps the placeholder images in the mock-up didn’t have enough color, and so the designer added the background shapes. This, of course, is merely speculation, but something to keep in mind. If you design with real content, and not filler, you won’t run into such problems.

Think Quarterly

Fairly certain this is the second iteration of Google’s Think Quarterly design. Google has really slimmed down the interface and given the articles higher stature. The navigation on the left looks similar to a printed table of contents, which reinforces the whole periodical motif.

Hovering over an article in the table of contents shows a quick preview, for added usability. And the type is wonderfully readable.

The website is a prime example of how to merge two media without compromising quality or functionality. It’s a magazine that feels like a magazine, but playing by the rules of the Web.

Fashion Sketchpad

Fashion Sketchpad features material and textures in the background, setting the mood appropriately. The geometric shapes in the header area guide the eye from the logo to the main navigation, but then guide it back to vacant space near the logo. This could have been better handled. Even the implied sight line of the illustrated figure moves the eye to that vacant space.

A better use of the shapes would have been to lead the eye from the logo to the navigation and then to the content.

The sidebar becomes an eye sore the longer one looks at it, with its cramped spacing and out-of-place script for the headings.

Despite the compositional flaws, the website feels appropriate to the subject matter.

Curiously, only the most recent blog post is visible, and there is no means to navigate to previous posts. One can only speculate that only one post has been written so far. As with all things, time will tell.

Owltastic

First thought upon viewing Meagan Fisher’s blog Owltastic was that it is typographically crowded. The website has so many fonts, in so many different sizes, and in so many different places, all screaming for attention.

The color scheme makes for an aesthetically pleasing environment, but it does little to structure the content. The shapes are simple, which keeps the website from getting too busy, but the overall composition is anything but simple.

The best way to make the website feel less busy would be to make the sidebars less imposing, perhaps by lowering their opacity values until the user interacts with them. Collapsing some content might also clean up the composition and put more focus on the main content.

You have to love the owl, despite the fact that he appears to have stumbled over a swarming hive of text.

DawgHouse Design Studio

DawgHouse Design Studio pulls off a kind of simple-vintage aesthetic. But once again, the devil is in the details. The toe nails make the logo look a bit cramped. The serif and sans-serif fonts are not blended well, despite the appropriate line length and spacing.

The typography suffers from a few spacing issues and the choice of navigation font, but overall the line height and length work well.

The HTML5 under the hood is a step towards the future, but older browsers are not supported either by a separate style sheet or some form of shiv. Nonetheless, nothing obvious stands out that would break in older browsers; the website’s functionality is very simple, which was the intention.

Rainy Pixels

Rainy Pixels has a lovely header that gives it real weight. Along with the background texture, the header is appropriate without being overwhelming. The style definitely feels like a mash-up of Decorated Playlists and Idea Exhibit, with a dash of Think Quarterly thrown in for text handling.

The navigation is simple and straightforward and looks “editorial” in style. Clever use of spacing allows each section to fit the design while maintaining its own space within the whole. Full articles are well leaded, with appropriate line lengths, keeping the content as the main focus.

The commenting and Twitter areas next to the date are too crowded and could do with a bit of spacing, but I like how simply they are executed.

Semantic HTML5, iPad and iPhone compatibility, and functionality in the absence of JavaScript help push this website forward.

Web Designer Wall

Capturing the essence of creativity, the header graphic on Web Designer Wall is both beautiful and suitable. It and the logo and the font for headings are highly effective.

However, the ads, article images and buttons make the website a bit busy at the top and create tension rather than flow. In this regard, the spacing or hierarchy could have been better handled. Ads are obviously important, but the way they’re executed tarnishes the reading experience.

As mentioned in the entry for Owltastic, one needs to be able to focus. In this case, the varied colors, shapes, images, ads and so on make it almost impossible to focus on the content.

Google Fonts, HTML5 and the HTML5 shim push this website forward. Seem to be seeing more websites these days using Google Fonts. In this article it’s almost a 60/40 split between Typekit and Google Fonts—a good indication of Web font adoption.

Matchstic Blog

The layout, logo and color scheme on Matchstic are all clean and simple. The only things that are not so clean are the glossy social-media icons, which stick out like a sore thumb. As I’ve said countless times, “Details, people!” A cohesive composition is the key to good design.

Matchstic’s articles occupy a good chunk of space, which works well for the content. However, the articles tend to run together and would benefit from better spacing.

The absence of hover effects for links on most of the website is bad for interactivity and kills a bit of the oomph in this design. Overall, the design doesn’t betray its simple aesthetic, and it pulls things off effectively.

Web Standard Sherpa

The illustrations here are obviously appropriate to Web Standard Sherpa. They add dimension and give the website a sense of place rather than just leave it as a page of information. Texture is used extensively and used well, from the background to the illustrations.

Typographically, the discussion section feels crowded and could benefit from better use of space. The slideshow appears a little jerky and slow to load at times. That could have been better handled with some image compression or JavaScript streamlining. It’s also possible that the transition speed is just too slow.

HTML5 is under the hood and works without JavaScript (except for the slideshow, of course). The footer is clean and effective and just works.

This is another example of a website staying relevant to its mission. Web Standard Sherpa might have a few details to iron out, but its style is sound.

Instrument

Instrument has a simple straightforward website. It presents only as much as it needs to and no more. The background texture and strip in the header are subtle and keep things from falling flat. The logo feels like Rainy Pixels was run through a simplification machine and spit out the other side.

A mobile-aware HTML5 underbelly, alongside Cufon-served fonts, aid in the execution of this minimal style.

The masonry grid layout relies on JavaScript to function. And other than a few fonts not rendering, the website largely functions without JavaScript (albeit with slightly jagged edges).

As with Idea Exhibit, which is similar in approach, the text could be slightly larger.

IconEden

Wonderful textures and an illustrated-realistic style make the IconEden blog solid and consistent in design, from the header to the comments section.

The illustrated style establishes an identity for this blog, while still tying into the theme of the parent website.

However, the website suffers from the same ailment as Meta Markets Group: the text area spans the full length of the page, making for an uncomfortable line length.

The design benefits greatly from some CSS3 goodness, good use of sprites, an HTML5 structure and Typekit-served fonts.

Fast Company Co.Design

An unusual left-justified layout helps Fastco Design stand out a bit from the center-aligned trend. However, the prominent ad at the top of the page dominates. Banner ads at the top of a website is bad design, period. Yes, it’s prime real estate, but putting the ads higher up in the totem pole than your content does a disservice to your readers and may drive many away.

Individual posts here have a clean display and are divided well. The accompanying large images hold interest and set off the content well. However, the left sidebar, while minimal, feels somewhat crowded and could use more padding.

Typekit-served fonts underlies the effective approach to typography.

Drupal is running the website, but not enough code was cleaned up in the theme, which has left it a little non-semantic and suffering from unnecessary divs. Despite the messy code under the hood, the design (below the top ad) is quite effective.

Overall, this website feels like it was intended as a translation from print to Web, but it hasn’t quite hit the mark as well as others (particularly Think Quarterly, Ultra Noir and Rainy Pixels).

Ivan Asetiawan

Ivan Asetiawan’s background texture and gradient add depth and interest, although the gradient lurches to black and could be a bit smoother.

The logo is lovely, although the header feels just a tad cluttered. Still, it suits the overall design.

Seeing a real trend in this showcase with readable type. The typography gets the job done, but could do with a bit of polish in spacing, size and font choice.

HTML5 and WordPress, with some help from HTML5 shiv, help make this website progressive in approach.

Do Lectures

Wonderfully simple describes Do Lectures well. Minimal in approach, the website demonstrates proper use of white space and typographic hierarchy. The subtle texture, handwritten text and hand-drawn images work together effectively to add some intrigue to this otherwise simple website.

Disabling JavaScript will not cripple this website’s functionality. And with its healthy frame of HTML5, this website is definitely looking forward.

Oohmoon

The whimsical illustrative feel of Oohmoon ties in well with the artist’s style. The content areas could do with a good deal more of breathing room, especially the sidebar, which either has too much content or just needs better spacing.

Typekit serves the lovely fonts and sets off the delightful color scheme. Structurally, the website is built on the standard theme of Todaymade, keeping the code as semantic as possible.

Vi Company

On Vi Company, basic typography and white space define the content space. This and the simple three-color scheme keep things from getting too complicated.

The posts could be spaced out more effectively. It’s hard to see where one ends and the next begins at first glance.

The content will load without JavaScript, but the “More content” button won’t work, so functionally is a bit handicapped in that respect. The designers make up some marks here for using some lovely HTML5, despite the dependency on JavaScript for core functionality.

A Negative Narrative

A Negative Narrative couples an utterly simple structure with atypical horizontal navigation for the posts. The color scheme works well, but the geometric and hand-drawn elements tend to clash and break the flow quite often.

The simple color scheme is effective, although it homogenizes the hierarchy and content sections a bit much, making it tough to differentiate between content types and areas.

HTML5, HTML5 Boilerplate, and a mobile-friendly approach keep things progressive under the hood.

Premium Pixels

Premium Pixels’s whole layout feels very Dribbble-inspired. But it maintains its own identity with simple styles and font choices throughout. Gradients and textures are absent, helping the content stick out.

Strangely, this website uses the HTML5 declaration but none of the new HTML5 elements. Perhaps this is the first move in its progressive enhancement?

Hakim

Hakim pulls off its simple grid layout with JavaScript, which hurts in the graceful-degradation department. But the compression effect on elements is a nice detail.

While simple, the grid layout also makes it a little harder to navigate chronologically, and it slightly crowds the posts together.

CSS3 goodness and an HTML5 underbelly keep the website semantic and progressive, despite the JavaScript drawback.

This by Them

The lovely texture and the fantastic illustration at the top accentuate the minimalist feel of This by Them. The main content gets the point across while remaining both concise and true to its ideas.

The wonderfully executed footer illustration complements the header and avoids unnecessary complication.

Delightful fonts set off the textures and illustration. The elements give the blog a uniqueness, while maintaining its connection to its sister websites.

The comments and social media areas are interesting, but not visually heavy (which is a problem that other websites seem to be plagued with).

Rob Edwards

The carnival/broadway feel of Rob Edwards is, if nothing, unique. The multiple font styles fit together well, including those in the navigation in the fixed sidebar area.

The content sections are well defined, but the slightly crowded content could do with a bit more leading and spacing.

The website could also do with more focus. The areas surrounding the posts draw too much attention away from the content. There is too much focus on the layout in general. This weakness in compositional structure cannot be easily fixed without a new design approach.

HTML5 is declared, but new elements are only sprinkled here and there. Several divs would have semantically functioned as section or article elements.

The execution isn’t the strongest, but it is at least unique. The website seems to derail slightly in being more about the design itself than about the content it contains. Every designer is guilty of this at some point.

Last Clicks

We’ll close on two final sources of inspiration, neither of which are blogs, but both worth thinking about in your future creative endeavors.

Team Viget

Team Viget has created a forward-thinking user experience with its design. It definitely needs to be experienced.

It’s a little slow and jerky with transitions at times, but forgivable because of the unique approach.

While the website is amazing in both style and approach, its parent website, which is linked to often, pales in comparison, which somewhat kills the mood.

Remember to keep the whole experience in mind when doing something like this, even if it means updating your other websites to make it work.

Teo Skaffa

Teo Skaffa offers another unique approach that is more of an experience than a plain presentation of content. It takes a moment to get used to, but it quickly becomes fun.

Playing sound is usually a gamble, but in this case it is very appropriate.

The lesson to draw from these last two websites is to not just create a space to post your blog articles. The content and the experience of that content should be enjoyable.

A conversation is not one-way. With this sentiment in mind it is hoped that the opinions and insight expressed in this article become a catalyst for others. Your opinion is as important to the continued growth of design as my own. We owe it to our clients to discuss our peers’ designs, to critique and praise them. Because who better to do so than those who know the craft?

(al)(rb)