How To Design A Better Blog? Break Down The Rules
- 31 March 2010
- Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (76)»
Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. It was a website, an on-line publication, very useful to spread personal content for a close audience.
Nowadays a blog is a particular genre of website with features and elements that allow a complete and well-constructed publication of articles on the Web. There are many different types of blogs with different characteristics, from the personal blog to the corporate blog, from the monothematic blog to the blog-magazine. They are different not only in the topics and in the type of content, but above all in the way in which they deliver articles and information.
Each blog is part of a big and working ecosystem, the Blogosphere; understanding the connections among the elements of this system, it’s possible to build a good presence on-line in order to improve our activities or our business.
It’s ridicolous, now, to define a blog like a simple and personal diary (sure, it might be also a diary on-line), because a serious, well-done and updated blog is a valid source of information in any field.
If you have to share fresh and good contents with a community, the blog surely is an opportune way to do that; and if you want to get benefits from blogging, trust me, you should have an unique and distinctive blog design.
Below we will take a look at some crucial points on which we should make some considerations designing a blog, starting from an overview on the typical elements of a weblog.
Elements And Components Of The Classic Blog
In many cases it’s a good thing create a simple scheme that synthesizes the most important parts of our project and, designing a blog, we may start from the typical layout for this type of website. The weblogs, historically, tend to follow a simple two-columns scheme: header, main content, sidebar and footer.
Many blogs use also a three-columns layout with a double sidebar, this solution is used when there is a lot of information to show.
The blocks, that we’ve just seen, are the container for articles, links and other stuff that the blogger wants to share with his readers. A working blog should display to the users all elements, useful to learn more about the topics and the minds behind the website, in the best-possible place. I think that only the experience of the designer/blogger and the study of the decisions taken by famous blogs in the years can provide valid information on how to design and “fill” the blocks. However I’ll try to bring out a list of most used items for each block.
Header
The header is the top of the page where, generally, the designers love placing a nice logo and the primary navigation menu. Sometimes in this part there is the space to display, in creative way, links and clickable icons to subscribe the RSS of the blogs or to follow the updates on Twitter (or other social networking websites). Besides highly-skilled designers love creating nice, artistic headers to engage the visitors. Designing your header you may consider to add some of the following elements:
Logo: a well-designed and clever logo is essential for a website, generally it is placed on the top-left corner of the page;
Primary Navigation Menu: primary links, like “About us,” “Contact” and so on, should be clearly distinguishable from secondary page links and placing, a well-designed navigation menu in the header could be a good idea to emphasize primary links.
Subscription options: links, icons and information to subscribe RSS or to follow the updates of the editors of the blogs on the social networking website;
Search form: the search function is very important for a blog and often designers use the header to provide a ready-to-use form for looking for something into the blog;
Advertisement: do your blog has a decent traffic (visitors)? You can add an ads to monetize, but make sure that the banner doesn’t destroy your design. Bloggers generally prefer horizontal banners for the header: 468×68 px, 720×90 px and so on.
Main Content
The core of a blog, where there is the stream of the post. For the WordPress lovers this space is for the loop, in general it is the real dynamic part of the blog that changes its status depending on location (home page, single post page, etc.).
Posts and articles are the most important things for a blog, how many times have we said “content is the king?” True, but a naked king is dreadful. So, you have to design a working block container for your content in order to emphasize you article. A balanced structure and a good typography for headlines, paragraphs and meta information (comments, tags, date, author and so on) are essential to present posts – in a nice way – to the readers.
We have to divide two macro-section designing the main container for a blog: home page and single page.
Into their home page many weblogs include the stream with the last posts, and for each post details for the comments and other meta information like authors, tags and categories.
The single page presents the entire post and on the bottom of the post-page usually we can find links and buttons for sharing the article on social media and the comments of the users.
Sidebar
In two-columns layout it is usually placed on the right, but sometimes we can find also a left-sidebar. The sidebars tend to be used for statistics and to improve navigation on the blog and in fact a well-designed sidebar should include items, such as navigation, popular posts, most commented posts, external widgets from social media, blogroll, to improve interaction of the users with the website.
Take a look below to understand what kind of items you can add into your sidebar.
Advertisement: in this case to monetize the content of your blog you can add a block of banners (125×125 px, 250xX px etc.), for a better CTR the top of the sidebar is the best place for ads spots;
Search form: the sidebar could be a good place for the search form. Obvious, if you have placed the search from on the header it’s not a good idea re-place it on the sidebar;
Subscription options: you can create a nice widget for your sidebar with a list of all subscription options for your blog (RSS, Twitter and other social media);
Recent posts: a list of 10-15 last posts to presents what’s new on the blog;
Most popular posts: a list of 10-15 last posts to presents the popular entries on the blog;
Recent comments: a list of 10-15 recent comments to encourage the discussions;
Authors: for a multi-author blog you can use the sidebar to present all authors to the users;
Blogroll, resources, friends and partners: a list of links to suggest interesting resources or to present friends and partners to your readers;
Footer
The bottom of the page, the ending for your web design job, the final section. This is footer. The part of the site that, in a traditional interpretation, is only for the copyright and some links. But, as I explained in the article “Trends and Examples in Recent Web Design: Big, Informative and Creative Footers,” in modern web design, fortunately, designers and developers are saying “No!” to boring and standard footers. So, we can often find elements such as recent comments or popular posts into the footer.
Well, Now How Can I Design A Better Blog?
Hard question. But my experience suggests me to work scraping the traditional layout and the classic interpretation of the blog. We should start from a fact: “content is the king.” For this reason we have to design emphasizing the content mixing in an unique and creative way the different design elements. At this point I want to ask you: which attribute, peculiarity, of the art of blogging is ever the same since the beginning?
I’ve asked myself this question for a long time and, in my opinion, the key (to answer) is in the first definition of “Weblog”: it’s a personal, private website where sharing exclusive content for a close audience.
As said, nowadays we have several types of blog, and each of them has different characteristics, but all these modern blogs are created to provide high-quality (we hope) content for folks who are interested. So the essence of a blog is the same, today as yesterday, and the main goal is to share exclusive posts with a specific type of users, with a community who follow definite topics. It is not important if the reader is your brother and you’re writing personal things about your life or if you’re writing an interesting article about web design for your community, the main idea of blogging is not changed. For this reason the standardization of the web design for a blog could be a dangerous friend.
My suggestion is: break down the rules of the standard blog design!
Be creative, be unique, be damn special!
That doesn’t mean “build crazy layout for a blog.” I just want to say that there are many ways to be creative. You don’t need to break down all traditional rules working on a project, but only that you have to let work your fantasy to add something of special, personal and creative in your design.
The general structure (header, main content, sidebar, footer) is always a valid start, and you should keep it in your mind; but a personal touch for some elements, which deviates from the traditional interpretation, can make precious you work.
Tips For Designing An Unique Blog
How many words… but now some practical tips and examples to understand how we may be creative designing a blog.
Creative Design
The users appreciate, at a first glance, the quality of the design in web pages that they scan. The first impact with a website is very important to engage visitors and an high-quality illustration or a detailed big logo or, simply, a stunning background can make “credible” and harmonious the blog without the need of reading the content. It’s clear that’s a good thing if on the blog there are also quality and useful articles.
Web Designer Depot is one of the most important design-related blog on the web. It has a very simple layout, but its illustrations for header and footer make the blog unique and rare.
All For Design has an attractive textured design with a creative background for the header and a nice logo, which is “strangely” placed on the right side.
Lord Likely is a blog with a stunning retro look that makes the difference in the couldron of the blogosphere.
N.Design Studio, we don’t need to discuss about this web design, we only have to see this fantastic artwork of Nick La.
Small Touches To Be Unique
In her article “Small touches for great designs” on WebIsLove.com, Michela Chiucini shows us the power of high-quality, small details to create harmony in a web interface.
Below you can see some examples of detailed particular which make very precious and unique a web design.
Run Addicts use a three-columns standard layout but the designer has added some little touches that exalt, and make explicit, the purpose of the website. First of all the logo is in foreground, and the good use of transparency create a “fresh” effect (thanks to the water-splash), then we have to say that the headline of each post is genial with the background image and the custom title.
24 Ways is “the advent calendar for web geeks” and its web design is a perfect example of simplicity and effectiveness. But the real peculiarity of this blog design is the great use of transparency that becomes evident in the header, where logo, menu and search form create a great effect.
Koodoz has a nice and well-designed menu that make more dynamic the website.
Fresh01 has two gracious bubbles that change their status, providing information to user, during the scrolling of the page.
Great Use Of Typography
Typography-based blog designs are pretty rare, maybe beacuse they require a really hard work to create a balanced layout and to mix effectively headlines, text and white space. But the final reult could be really unique, below some examples.
Elysium Burns is a dark blog-portfolio design, it is elegant and highly-communicative thanks to the great use of the typography.
A List Apart don’t need presentation, we all know this great magazine and we all know that its layout is clean and beautiful thanks to the clever use of typography.
Multi-Column And Grid-Based Layout
Many blogs use a standard two-columns layout, but recently it’s frequent to find blogs with grid and multi-column layouts. They are a clear manifestation of order and precision and allow a more consistent organization of the content.
An Idea has a big well-organized multi-column layout to display the posts.
The Swish Life is a well-structured blog with a clever layout.
Creative Depart is the perfect example of grid layout for a blog.
Unconventional Layout
There’s no header, there’s no main content, there’s no sidebar, there’s no footer. There are only two goals: emphasize the content through a nice layout and create and unique and special web design. There is a blank sheet that you should fill with your innovative ideas.
Sometimes this type of approach can bring to great results.
Cold Heat has an unique, left-aligned, layout.
Weblog Cynosura has a minimal and typographic design with a clever and unconventional organization of the different elements.
Jason Santa Maria in his home page show only the last post, he use a custom design for each article on the blog. An innovative approach that makes real unique his personal website, a real pioneer.
Do You Really Need A Header?
We do not always need an header. Sometimes the header section adds only a delay between reader and content.
The Darling Tree is a blog-portfolio where the core of the layout is the “featured projects” container, it doesn’t have a real header section and the logo is placed on the top of the left sidebar.
The CSS Awards Inspired is the official thecssawards.com blog, where, to make available at a first glance the content, the designer bypasses the header section.
Do You Really Need A Sidebar?
We do not always need a sidebar. It is a section useful when we want to enhance interactions with the user, and to improve the navigation. Sometimes, in order to simplify the reading of the content and the navigation, we may avoid using the sidebar.
Elliot Jay Stocks in his blog use only a main container for the stream of the posts. A way to emphasize the content.
Big, Creative And Informative Footer
It’s becoming a massive trend, but it is a trend that works. I have explained why I love creative and highly-informative in the following article: “Trends and Examples in Recent Web Design: Big, Informative and Creative Footers”
Boag World has a big, well-designed, creative and complete footer with useful information for the readers and an awesome illustration.
Design Attractive Custom Blog Posts
As Chris Spooner says in his article on Line25, “Designers have began to inject increasing levels of creativity into their blog posts and articles, throwing out the traditional and generic style of blog posts in favour of a much more attractive layout that’s themed specifically to the content.” The art of design a custom blog post. A very recent trend, made famous by Paddy Donnelly with the article “The Death of the Boring Blog Post” on Smashing Magazine, that open a new prospective for modern bloggers, a custom design for the most important posts. Below some examples.
What The World Needs
What’s Brand
Life Below 600 px
Showcase Of Creative Blog Designs
Below a massive collection of beautiful and unique blog designs. They might be a good source of inspiration for your next works. Enjoy it!
All For Design
Fringe Focus
RunAddicts
TCA Inspired Design
Simon Collison
The Wayward Irregular
UX Booth
Workawesome
tehCpeng
Lokalisten Sprechblase
The Art of Non-Conformity
Line25 Web Design Blog
The Astonishing Adventures of Lord Likely
ANidea
Tutorial9
Boagworld
Blog.SpoonGraphics
24 ways
I primi dieci
Design Log of Ayaka ito
The Darling Tree
Douglas Menezes
Owltastic
Kupferwerk Blog
Gary Nock
Web Design Ledger
Aext.net
Elliot Jay Stocks
The Klog
Questionable Characters
Web is Love
MyInkBlog
Colorcubic
FreelanceSwitch
FRESH01
N.Design Studio
Art in My Coffee
Tyler Thompson
SimpleBits
The Swish Life Magazine
Garamiz blog
204 Beech Avenue
Ecoki
The Official Squarespace Blog
Daily Payne
Wedding Photography Resource Blog
Iubeste Clujul
Urbex photography
Crayons Life
Surfstation
CreativeDepart
Cynosura
Reform and Revolution
Jason Santa Maria
Nocturn
Elysium Burns
Christian Mucke
Branded07
45royale Inc.
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
Great article Piervincenzo!
I really enjoy reading it. Great job.
thanks dear Nikola, I’m glad and honored that you like it!
What do you think of my blog ? I would say it is more a microblog..but still the main idea was to be different
Wow! Really nice design, I like the light effect, it is simple and effective… two great merits for a web design.
10x :)
Great article I am going to implement some of your ideas on to my blog. My blog seems very dull after looking at your article!
Nice Article Piervincenzo! It is very helpful to me becoz im working on my blogs theme. I will try to implement your ideas :)
You pointed out some interesting details
Love the “Do You Really Need…” part, sometimes it can be the right question to do
Hey, thanks for this info. I also had a hard time finding the right template. But i finally did.
wow, this is a great collection and break down of every major part to a unique and powerful blog. Good job!
Awesome post bud, really liked the in-depth critique and the sites you displayed.
Creativeoverflow also has a pretty catchy header :)
Cheers mate.
J
You made the points, mate! Thank you for mention my design here! Much appreciated! One more blog design that should be mentioned here is from TutorialZine. I agreed with you about AListApart, they are awesome and the typography is very clever!
BTW, some bloggers when writing showcase, they always forget themselves. Your design should be included in this showcase, shouldn’t it?
Great job!
Awesome article, and a great roundup too! I love this stuff, it fuels me for the day.
Very nice collection and great set of suggestions. Falls nicely in line with Wordpress’ format as well. Thanks for putting this together! – J
Damn that is impressive
Thank you for publishing RunAddicts in the list!
I really enjoy reading it. Great job.
Loved it ;)
Thanks guys. I appreciate all your comments.
very nice read. thnx piervix for sharing this great article.
Beautiful and kick-ass resource Pier! Plenty of eye-candy here and nicely written :) Thanks so much!
Great article.
great collection
nice tips and thanks for your advice efforts :)))
Very usefull!!!
Great post.
Great step-by-step guide.
I featured this page as one of my three links for today’s Design Thought blog:
http://designthoughtfortheday.blogspot.com/2010/04/04-13-better-blog-vintage-fonts.html
All the best, Ted
It is very helpful to me becoz im working on my blogs theme.
I appreciate all your comments.Home Design
uhm I really need to improve my blog, thanks for the tips
Great article! Thanks
Thanks for the thorough article on designing a better blog with some great examples as well!
This was a really helpful post. I like all the resources at the end as well.
Great written piece with truly beneficial tips. Thank you for placing the idea together.
Advice from the Internet to earn money. Ways to earn money on the original papers
I apreciated your writing here, you are helping web people with great writing!
Also see my page in http://www.freepokermoneynodepositbonus.com/ about Free Bankrolls
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
poglejte si tole [url=http://www.vsezasport.si/vodni-sporti/veslanje/colni/gumotex]Gumotex kanuji[/url]
Знакомства для одиноких парней и девушек, которые хотят
найти себе партнера на одну ночь или на всю жизнь
УСТАЛИ ОТ ОДИНОЧЕСТВА ? [url=http://ruxxx4dating.ru]ЗАРЕГИСТРИРУЙТЕСЬ ![/url]
НАЙДИТЕ ПАРТНЕРА ДЛЯ СЕКСА ФАНТАЗИЙ ОБМЕНА ЭРО ФОТО!
Тысячи парней и девушек уже нашли друг друга у нас на сайте!
Найди и ты свою вторую половину! После регистрации, Вам будет
доступна возможность переписываться, обмениваться фото, назначать
встречи и смотреть видео трансляции наших участников.
Толькое реальные анкеты и никакой рекламы!
[url=http://ruxxx4dating.ru][img]http://ruxxx4dating.ru/foto/1.jpg[/img][/url][url=http://ruxxx4dating.ru/foto/index.htm][img]http://ruxxx4dating.ru/foto/10.bmp[/img][/url]
[url=http://ruxxx4dating.ru/top100][img]http://ruxxx4dating.ru/foto/11.bmp[/img][/url] [url=http://ruxxx4dating.ru/top100][img]http://ruxxx4dating.ru/foto/5.bmp[/img][/url]
Сайт интим знакомств http://ruxxx4dating.ru – Найди партнера для регулярного секса, секса на 1-2 раза, или подругу жизни
Спортивное питание по низким ценам [url=http://dopingsport.com]DopingSport ![/url]
[url=http://dopingshop.ru][img]http://dopingshop.ru/published/publicdata/ZATRAT/attachments/SC/products_pictures/proviron_front.jpg[/img][/url][url=http://dopingsport.com][img]http://dopingsport.com/published/publicdata/ZATRAT/attachments/SC/images/matrix5.0.gif[/img][/url] [url=http://dopingsport.com][img]http://dopingsport.com/published/publicdata/ZATRAT/attachments/SC/products_pictures/muscletech-anator_thm.jpg[/img][/url]
poglejte si tole [url=http://www.vsezasport.si/sporti-na-prostem/pohodnistvo/nahrbtniki/millet]Nahrbtniki MILLET[/url]
I am really enjoying the theme/design of your site. Do you ever run into any web browser compatibility problems? A few of my blog audience have complained about my blog not working correctly in Explorer but looks great in Firefox. Do you have any suggestions to help fix this issue?
I savor, lead to I found just what I used to be looking forYou have ended my four day long hunt! God Bless you manHave a nice dayBye
I would like to show some thanks to this writer just for bailing me out of such a incident. As a result of searching through the internet and getting tips that were not productive, I figured my entire life was gone. Living without the presence of answers to the issues you’ve sorted out by means of your guideline is a critical case, and the kind which could have adversely damaged my entire career if I had not noticed your web page. That skills and kindness in touching all the things was invaluable. I don’t know what I would have done if I had not come across such a thing like this. It’s possible to at this moment look ahead to my future. Thanks a lot very much for your high quality and amazing guide. I will not be reluctant to refer your blog post to anybody who wants and needs guidance about this situation.
Acai Berry Pill Question? I am taking the GNC Acai Berry Capsule, the brand is Amazonia Acai-The Purpleberry. Around the bottle it says take at least six per day, so i am taking 2 during the early morning, two within the afternoon, and two while in the night. Nevertheless it doesn’t say no matter whether I should really consume it prior to or right after eating a meal. So which one particular is it? and how prolonged do i’ve to wait previously or just after eating?
I appreciate the info shared here. Please keep up the good work. Best wishes to you..
I thought you were going to chip in with some decisive insigth at the end there. Not leave it with ‘we leave it to you to decide’
Hi, this blog is very usefull and i like this blog so much.i’ll share this blog on my facebook page.
free [url=http://www.001casino.com/]aussie casino[/url] be verified not on the all the expound casino games at this all up to assignation [url=http://www.playatonlinecasinos.com/]free online casino games[/url] significant with unburden [url=http://www.playatonlinecasinos.com/]casino[/url] perk and [url=http://www.playatonlinecasinos.com/casino-games.html]free casino games[/url] like slots, roulette, blackjack and more [url=http://www.playatonlinecasinos.com/]free casinos[/url] games.. at this [url=http://www.playatonlinecasinos.com/]online aussie casino[/url].
As a Newbie, I am always searching online for articles that can help me. Thank You.
I recently found this website that I want to share with everyopne as they were a great help when I was
working on a recent project. I needed to know how to do some stuff in PHP and they were able to provide
a tutorial sepcifically tailored to my needs. It was very helpful.
[url=http://teamtutorials.com]TeamTutorials[/url]
I recommend you hit them up and check them out if you need assistance.
This actually answered my drawback, thank you!
I like that blog layout. How was it prepared? It’s pretty good!
do you apply my reply?
hei, what’s going on here?
Thank you taking the time to write this!
You made some first rate points there. I regarded on the internet for the difficulty and located most individuals will go along with with your website.
My favorite treadmill list. Knowledge
It is extremely interesting for me to read that post. Thanks the author for it. I like such topics and everything connected to them. I definitely want to read a bit more on that blog soon.
Joan Swenson
milan escort girl
I recently found this website that I want to share with everyone as they were a great help when I was
working on a recent project. I needed to know how to do some stuff in PHP and they were able to provide
a tutorial specifically tailored to my needs. It was very helpful.
Türkiyenin SanaLRadyosu Rekorfm
Thanks … wonderful
I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get bought an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.
Thank you for another wonderful article. Where else could anybody get that type of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such info.
I needed to know how to do some stuff in PHP and they were able to provide
a tutorial specifically tailored to my needs!!
If you’re still on the fence: grab your favorite earphones, head down to a Best Buy and ask to plug them into a Zune then an iPod and see which one sounds better to you, and which interface makes you smile more. Then you’ll know which is right for you.
I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, it is rare to see a nice blog like this one today..
Cosy to need methods that categorically gala, acknowledgement again!
Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but other than that, this is wonderful blog. A fantastic read. I will definitely be back.