Great guide for blog basics. Definitely learned a couple of things, especially how blog titles match up to search results. Thanks!
Information Design: Beginners Blog Design
Today, blogs are one of the most effective and used online communication tools. Blogs help large and small companies communicate directly and transparently with their customers in a way that is direct as well as offering an exhaustion and confrontation pipe for topics ranging from politics to technology.
Photo credit: Stefano Bianchi - Proposta di design per MasterNewMedia.org
Blogs can be tools of personal reflection, journey logs or tools for the publication of new online magazines and grassroots publications providing very low maintenance costs and maximum ease of use.
But for a blog to be effective, its design and "look and feel" must not reflect the personal aesthetical preferences of the author but should rather provide a very rational and well-thought-out solution that characterizes the site while making it very accessible and easy to read and navigate.
To design a blog means to sit down and plan the blog "look and feel", that is the most superficial and immediately visible of this new tool of digital communication.
But how do you go about it?
Nonetheless we have all gotten accustomed to think that design is a creative and irrational process, the best way to design a killer blog is really very little connected with finding new creative ideas while being deeply intertwined to the contents organization rational and from the ease of access to the same.
How rapidly can I see what this site is about and what are the best things I can find inside of it?
Photo credit: Nathan Shredoff www.nathan.com
Unknown to most, but decisive for anyone who wants to make her visual communication approach effective, basic Information Design principles can be used to plan the layout of any serious professional blog without risk of loosing time.
Information Design suggests to look at the design of information in terms of efficiency and accessibility (readability - comprehension). To make information highly legible, accessible, navigable and easily understood is the goal of the Information Designer who radically breaks away from the traditional graphic design approach of making things look "nice".
Blog Design Elements
Overall page layout
The most important thing to do on this front is the one of making the visual organization of your blog page in a way that can best facilitate the reader into finding the following essential content components:
- Your blog's name
- Your blog topic
- The blog author's name - and info about her
- Content themes and topics covered by the blog
- How to contact the blog newsroom (email, Skype, phone, fax, etc.)
- Where you are located on planet earth
- Most recent, most popular content
- Search box facility
- Subscription box to get your news automatically via email or RSS
It is important that these components do not fight with each other for visual supremacy on your blog page, but that they are arranged in a way that makes them behave as educated, discrete and easy to find blog components.
Color - background
On this front, it is always a good idea to start in a humble, moderate fashion, by focusing your best efforts into making your blog pages appear simple, well organized, clean and easy to navigate.
Backgrounds that utilize photographic images, visual decorations or other graphic elements must be firmly avoided.
Using appropriate color matching combinations, you may also find some strikingly impactful color solutions, but be aware that most popular blogs are almost always written with black text on a white background.
Remember: the cleaner, and the more legible, the better.
Photo credit: Edward Tufte - Envisioning Information. Clicca sul'immagine per allargarla.
Probably unnoticed and not even marginally considered by most traditional site designers, here is one of the most critical variables to determines the effective legibility of content on a page: line length.
Once you go beyond ten or twelve words per line, reading your content becomes increasingly difficult for the reader. The longer the line length is the harder it is for the reader's eye to go to the next line once she reaches the end of a line of text.
Short line length looks good, easy, unintimidating, and makes reading on-screen as good or better than reading on paper.
Fonts - typefaces
The choice of which typefaces or fonts to be used in the design blog should again be driven by usability and accessibility factors.
It is in fact more important that all your readers can correctly see your blog pages, just as they were designed, rather than using special fonts or typefaces that a significant part of your web readers will not be able to see as you had planned (mostly because their computer does not have the same fonts, browser or operating system you yourself have).
To overcome such issues it is a good idea to start designing your blog while using rather standard and highly popular and compatible typefaces such Arial, Verdana or Times which are widely supported by almost all devices connected to the Web.
The key to make blog pages look clean, elegant and well organized is most often novice designers greatest nightmare. Page layout is a difficult art, and unless you have been trained at it, your best efforts will always fall short of anything barely acceptable.
To avoid this, one simple approach to blog page design is one of distributing weights evenly across the page while making sure that each and every page component is properly aligned with one or more elements of the page. The more elements on your blog page are aligned across common invisible margins the more clean and well organized your blog page will look.
Chunking is an approach to the formatting of the text that strives to "modularize" contents into the greatest number of meaningful text blocks possible. Similarly to what is done in poetry, each concept and idea is given greater space to be read and understood. There is no packing of paragraphs into long blocks of text that know no pause. There is no saving in having less digital screen space used.
Both traditional blogging and the new burst-messaging tools like Twitter reflect this efficiency expressed by short bursts of information delivered just-in time and with the maximum ease of access.
And so differently from traditional books and magazines that often publish multi-paragraph contents in one unbroken text block, your intent will be the one of separating in clearly separate elements all those ideas and concepts that provide a valuable information unit.
The "rationale" behind this approach is research which shows that online readers have a very reduced attention span and that they do not read pages like traditional newspaper articles or books, but they rather prefer to scan rapidly the left margin of the content provided looking for interesting content hooks which may or may not confirm the relevance of the article to their specific interests.
A must-abide to rule to use when wanting to chunk content effectively is the one of never going to the next line after a period. Either you proceed on the same line with the following sentence, or you leave an empty line and start a new paragraph below.
Bolding and linking
In order to facilitate readers scanning page contents, it is a great idea to use some "bolding" to highlight the first three or four words of content paragraphs that are particularly important.
In contrast then with traditional editorial and formatting approaches where bolding is used in the middle of sentences to emphasize relevant content elements, my personal suggestions is to use bold to again highlight opening words of critical paragraphs.
It should be rather obvious that this approach need to be used with moderation and editorial intelligence, as applying it to each and every paragraph would it make it absolutely useless.
In place of the above approach to bolding it is sometimes possible to use links, which are also very effective in highlighting short set of keywords at the beginning of relevant paragraphs while providing extended info, reference and support for what is written.
One thing that should never be done is to use the "underlining" style for any web content, since this formatting style has become a standard in communicating to the user that the words underlined are in fact a link. Therefore the use of underlining for purely formatting purposes is a mortal sin that should be avoided like a disease.
Titles and titling
Titles are without a shadow of doubt one of the most powerful tools an online publisher has to influence traffic, visibility, relevance and conversions.
Unfortunately very few online publishers have yet arrived at the full understanding that the web is like an infinity library of information, which unless it is very properly labelled, it will be read only by your close circle of friends. To learn the science of titling determines the difference that exists between blogs used as personal diaries from those used for professional communication.
To learn the foundations of how to write effective titles for the web, everytime you will need to write a title for as blog post I strongly suggest you to follow this rather simple test. Use the first three or four words (not more) of your title to do a search on Google. If the Google search results you obtain are in line with the topic you are covering in your blog post, you did a good job. If, on the other hand, the search results that show up have nothing to do with the topic you are writing about, go back to square one and try again.
Content spacing is another important factor in increasing the legibility and accessibility of your blog content while helping it look more professional. What is important to do in this respect is to keep the different sections of an article clearly separated one from the other. In other words, this means that subtitles and section headers need always to be placed in asymetrical mode, leaving significant more space above any section title so that these are visually matched to the contents that follow them, instead of floating ambiguously in between two separate sections.
Since most blog publishing tools and services do not provide a reliable facility to hyphenate text on blog pages it is highly recommended to set a "ragged" justification in order to avoid unnatural and ugly-looking spaces between words in your posts.
In other words, your text should not be "justified" on both the left and right margin, like some books and publications do, but should leave the right side of the text to be a bit longer of shorter on each line.
The beauty and elegance of your blog will be determined much more by rational and pragmatical "legibility" choices, like many of then ones I have listed here above, than by your esoteric search for "creative beauty".
It is only through a very high attention to details and to the sensitivity of the user that the beauty of your blog will emerge spontaneously.
I know, there would be so much more to say, for example relative to the use of images, or to the size of fonts, but for now it will suffice to say that the above are only the foundation components over which to take immediate control on the path to effectively designing a blog.
If your goal is to leverage the ease of use and publishing power of blogs to create a professional communication tool on the web that gives credibility, visibility and maybe, further revenues, start working on these foundation principles until you are in full control of them.
Be smart, be independent, be good.
- Jakob Nielsen
- Edward Tufte
- Clement Mok
- Karen Schriver
- Diventa Boss Di Te Stesso
Originally written in Italian by Robin Good for 7th Floor magazine - revised and extended edition here published by Master New Media on April 27th 2007 as: "Information Design: Beginner Blog Design"