Since forever I wanted to re-design Inspiration Bit. The two main reasons why I haven’t done that yet are time and indecisiveness: too many ideas and styles are floating in my head and too little time I have to experiment with all of them. I was contemplating about sharing my thoughts and sketches with my readers, but on the other hand I didn’t want to spoil the surprise with the launch of the new design. Yet Lauren’s decision to document the process of re-designing her blog CreativeCurio has convinced me that recording my own design process on Inspiration Bit will be mutually beneficial as well.
The two fundamental blocks in designing a site are the style and the layout. Sometimes the style dictates the layout, other times the structure of the site, its grid, influences the future theme of the site’s design. I will talk about various web site styles next time, today I’d like to tackle one of the new directions in blog’s layout that I consider using in my new design – it’s the trend of featuring only the latest article on the homepage while providing an easy access to a number of previous articles. I don’t know if this drift in the blog’s traditional design, where the readers are accustomed to seeing several posts all lined up in orderly fashion on the homepage, has a name, but I like how it makes a blog looking more like a regular web site than a journal.
To illustrate my point I’m presenting you with 16 blogs with this unconventional layout, which seems to be slowly overtaking the mainstream blog’s structure.
1. Warpspire by Kyle Neath
Kyle is the creator of a very popular and beautiful WordPress theme Hemingway that features the excerpts from the two most recent posts and provides links to the rest of the blog’s content from the large footer. I like how on Warpsire Kyle accentuates the latest article with the post’s excerpt displayed on a big header image. Make sure to check out how Kyle is showcasing all other posts on his blog: by default ‘Everything’ is displayed below the header, the clicks on ‘Tips/Resources’ or ‘Reviews’ or ‘Marks’ bring us down to the corresponding posts.
2. jek2kdotcom by Nicolò Volpato
This gorgeously illustrated blog’s design is based on Hemingway, however Nicolò is featuring only the newest article and listing all other articles in the footer’s section ‘Recently’. I like how the site’s structure changes very little when switching to the Single Post layout when viewing the actual post.
3. No Ones Listening by Yasser Dahab
Yasser is a creator of another non-blog looking theme titled Kiwi that promotes the latest post. On his own blog he artfully features recent articles as four images in the header section (try mousing over them and follow the “star” icon going up and down the articles list in the middle column), and highlights his Newest article in a separate block. Too bad it’s been a long time since Yasser has updated* his blog.
*Edit: Looks like his blog no longer exists…
4. mezzoblue by Dave Shea
Dave is the co-author of the book “The Zen of CSS Design” and the creator of the site CSS Zen Garden that made thousands of designer to fall in love with CSS. So it’s not surprising that his attention to details on mezzoblue is so high. Browse his archives to see how his site is changing the hues and images in the header every couple of months. He’s featuring the 6 most recent entries in the header section, followed by the latest entry, which he ends again with the excerpts and links to three previous articles.
5. Left Justified by Andrew Krespanis
As the title suggests this website is left justified, with the fixed width of 763px. Its exquisite retro design features the snippet from the latest entry, and grabs our attention with the book-like content with the links to the Recent Entries. Be sure to click on the article to read the rest of the content and look at how cleverly Andrew organized the auxiliary data in the left sidebar.
6. Design by Comfort by Daniel Mall
Another left aligned web site with a clean and minimalistic design. The last five articles with the linked titles are displayed below the first paragraph of the latest post. It’s interesting to note that despite being the co-creator of swfIR, a client-side image replacement technique, the only images Dan Mall used on his personal site are the blog and section titles.
7. Rob Goodlatte by Rob
I absolutely love the style and the layout of this web site – a superb attention to details, a soothing colour scheme, an excellent use of Typography, including the use of sIFR for the titles. Notice the date implementation on the blog: the latest post was “Published 2 days ago, in the early morning under Apple, Design”, the previous article was “Published last year, at the end of December”.
8. North x East by Collis Ta’eed
It’s quite impossible not to notice the newest article on this blog – framed in a distinct box with the huge font size used for the title, accompanied with the arresting image, it substitutes the usual header section and immediately grabs our attention. The previous articles, displayed in a 23px Georgia font size, are not hiding in the shadow either.
9. 456 Berea Street by Roger Johansson
If even Roger Johansson, a renowned advocate of web standards, has chosen this non-traditional look for his blog, does it mean that soon we’ll be seeing more sites following this path? His “Slightly older articles” are displayed with linked titles, short descriptions and supplementary data like the number of comments, categories and the date.
10. Veerle Blog by Veerle
What can be said about Veerle’s blog that hasn’t been said already? She also chose to feature only the newest article on her homepage, while providing the links to the Recent Articles in the lower part of her sidebar.
11. Design Adaptations by Charity
As you saw from the previous sites most of them display only an excerpt of the latest article, with a “read more” link leading to the rest of the post. Charity on the other hand displays the full content of her newest article, with the search engine like list of “Recently Featured” articles below. I like how she cleverly implemented the display of the Most Popular, Recent, My Favourite and Top Commented posts all in one compact section in the footer with a quick and easy access to all of them through tabs.
12. Svenigson by Bence Kucsan
I’ve already praised Bence’s blog design in my last year’s article about the sites with the unique navigation. The latest article along with the designer’s photo are the main attraction of the homepage until you scroll down and find amazingly displayed previous articles in evenly shaped rectangles with the notebook paper background and interestingly formated dates, like “4 months, 1 week ago”.
13. Bartelme Design by Wolfgang Bartelme
Wolfgang’s WordPress theme Dark Theme is another bloggers favourite. Each section of the blog – navigation, logo, latest post, recent entries and comments, sidenotes and Flickr stream – are all displayed in horisontally separated segments with different background colours, making them all stand out.
14. Tim Kadlec by Tim
Tim’s grudge styled site features the Recent Posts twice: first time right below the fragment of the latest post, with the more detailed view that includes image thumbnails, titles and some auxiliary data; and once again in the footer where they stay even when you’re landed on the single page, reading the full article.
15. PR Blogger by Stephen Davies
Despite such a striking resemblance of this blog’s title with another prominent blogger, Stephen’s site design is very different. Notice the vertical titles for Recent Articles and footer sections. It’s been designed by Matt Brett, whose blog also features the latest article and provides links only to the “previous entries”.
16. The Apple News
This site’s design obviously resembles one of a newspaper, with the list of recent posts displayed twice as Recent News in the left sidebar next to the Featured Article and once again in the footer in the form of Recent Entries.
So what do you think of this different approach in the blog’s design? Would you mind seeing something like that on Inspiration Bit?
I’ll be examining more web site features in my upcoming articles as well as let you behind the scenes of Inspiration Bit’s new design. So if you don’t want to miss all this, be sure to subscribe to my RSS or get email updates.