Leon Paternoster‘s minimalistic sites have long been on my To Review list, and since then they even underwent a complete overhaul. Leon is an ardent crusader for accessible and readable web design, he’s keenly interested in typography and is irked every time he sees a web site with illegible text or where a chunk of text was saved as an image (I feel your pain there, Leon).

So it comes to no surprise to see his own sites with very minimalistic, stripped down to bare necessities, designs. He’s also released two minimalistic WordPress themes: Into the White (which was featured on Smashing Magazine) and Velouria.

Single page beauty

The style of his personal single page web site was greatly influenced by Franz Neumann’s elegant creation of Stories & Novels. But after the initial resemblance in the layout and minimalistic design, the similarities end.

Leon Paternoster's sophisticated minimalistic homepage

The use of Adobe Garamond for the body text on Stories & Novels makes me feel I’m reading a professionally scanned copy of a beautiful book online. Leon, however, chose to go with a safer font for Web: Georgia. In fact, with the exception of the Garamond for the fancy ampersand, the entire page is set in Georgia. And I actually prefer the clearness achieved by a gray text colour and bigger font size on Leon’s site vs. the black and small text on Stories & Novels, that make the latter one appear a bit blurry on my screen.

An interesting thing to note about the different design practices is the way that red/burgundy line was achieved on those two sites: an empty DIV with a red background and 2px height on Stories & Novels vs. the dark red line set to the HTML tag with a top 0.2em border on Leon Paternoster’s.

The only critical comment I have about Leon’s personal page is the slightly excessive use of white space. I do like to see designers practice the use of negative space in their designs, but because there are no images on Leon’s page, no major distractions (I don’t count the red link lines here), lots of white space feels a bit overpowering and unnecessary. I think by slightly reducing the space above and below the site title and the introductory paragraph and a tad tightening of the line-height in the Work area, all parts of the content would tie with each other more effortlessly. What do you think?

One thing that puzzles me a bit on Leon’s homepage is the absence of the red star symbol anywhere on the page, yet it was used as a favicon for the site? I wouldn’t really mind seeing that red star appearing somewhere in the content for some additional visual interest. Perhaps Leon could add a footer text with some copyright, credits stuff, preceded with that star icon? On the other hand, why not using the logo featured on the blog as a favicon?

Blogging Swiss style

The blog link from the homepage takes us to a completely different design of Leon’s blog. The first thing that catches the eye, besides seeing the almighty Helvetica everywhere on the site, is the post excerpt on the left, set in a huge (2.5em) font size that looks more like a quote than an excerpt, with the post’s title underneath looking more like the quote’s source. At first it got me confused, thinking that this must be Leon’s most recent post. But as it turns out, the featured excerpt comes from the latest Must Read post.

Leon's blog has gone sans-serif with lots of Helvetica, unlike its parent home page that's set in Georgia

The ‘Must Read’ theme continues throughout the blog: you can see the list of Must Reads on the homepage’s right sidebar, and the Archives are starting with the list of ‘Read these first’ posts before switching into the standard chronological order.

Saying No to images

Staying true to his minimalistic ideals Leon doesn’t believe in using images to support the design (you will still see the images within the content though), so even his logo is formed with a few simple CSS strokes: red background colour and padded white lowercase initials inside the square.

The colour scheme is super minimalistic as well: grey (various shades of it) for text and hover links, blue for links. And as I mentioned before Helvetica is the main font on the site, with the exception of Georgia in italic for certain phrases with an emphasis on them and the latest Tweet in the right side of the footer, plus Garamond italic is used to style the preposition “by” in the post’s author details.

The blog is based on two columns, with a minimal dynamic content on the right sidebar that changes depending on where on the site you are: on the home page (and Search results page) you see Must Reads and Recent Posts, on single post pages you see only Recent Posts, on About page you can learn a bit more about Leon, while on the Archives page you see only a list of tags.

Even the site navigation is reduced to the minimum: there’s no contact page, only email address, so you’re only left with unadorned list of three main pages—Home, About and Archive, displayed on the right side of the header below a simple search box.

Blog Critique

My critique is going to be as minimal and laconic as the design:

• I find Helvetica set to default 16px (100%) difficult to read in long paragraphs;
• I think the lists need some breathing space between the list items;
• Would love to see more colour on the site: perhaps re-using that same red from the logo/favicon on link hovers?
• Too much Helvetica can be overwhelming, some more typographic colour wouldn’t hurt either: perhaps more Garamond treatment, more font size variations?
• Not crazy about the date/author data styling above the post (hint: Garamond would look nice here not only with ‘by’);
• Once again puzzled about the use of the star symbol as a favicon, and not seeing that star anymore on the rest of the blog.

Overall it’s a pleasingly looking user-friendly blog, where the content is the site’s main feature with no competition from design. Over to you now: what do you think of Leon Paternoster’s homepage and blog designs? Would you recommend anything to improve the site’s architecture or style, or do you like the simplicity of it and wouldn’t ask to change a thing there?

The better approach would be to find out what’s the maximum allowable width for an image to fit nicely in your content area, and set/resize your images to that width. For example, on Inspiration Bit the safe width is 400px, so I try to set my images 400 px wide. There are cases though, when you don’t want or can’t end up with such a long image, then it’s best to set it to half or third of the maximum width and then align those images to the left or right of the content, letting the words to flow nicely and wrap around the image. Randa Clay has put together a very helpful tutorial on how to style images and how to align them with CSS. Finally, if you’re showcasing series of thumbnails, then set up multiples of them in rows of the same height, and equal widths.

Of course you can also let your imagination fly and come up with unusual ways to present your images. A BriefMessage, for examples, features a big image not only as a main element of each post, but the entire site as well. Displaying post’s metadata on top of the image seamlessly integrates the pictures with the overall design of the site. Jason Santa Maria aligned a huge image, 495 x 863 px to the left of the content on his recently re-designed site.

As part of my meticulous design series, I now present you with eight different ways to style images in your site.

1. CSS Drop Shadows

Ads Of The World is a site that’s all about visuals, so it’s not surprising that it pays attention to how the images are presented to viewers. All images here are wrapped in a frame with a drop shadow at the bottom. There is an extensive tutorial on A List Apart that teaches how to add flexible CSS drop shadows to your images. Ads Of The World has done it a bit differently: 3×3 px shadow.gif is tiled horisontally, and applied to the A tag, while the image itself is styled with borders, background colour and padding. Notice how the colours change when you mouseover the image.

.node-image .image a {
background:transparent url(images/shadow.gif) repeat-x;
}

.node-image .image img {
background:#E4EEF7;
border-color:#D9D9D9;
border-style:solid;
border-width:0pt 1px;
padding:12px;
}
.node-image .content a:hover img {
background:#FFE8CC;
}

2. Background image

SimpleBits approach is very simple yet effective and expandable: it’s using a tiled background image and padded picture. SimpleBits’ choice of the background image is hardly noticeable, looking more like a solid colour, however it doesn’t mean that you can’t experiment with more daring images to be used as a background.

div.photo img {
background:#E0E0D5 url(../img/bitstream/noise-earth.gif) repeat;
padding:1em;
width:49em;
}

3. background+border-top/bottom+padding

Nitram+nunca has come up with an interesting touch with its presentation of images: it’s displaying only the top and bottom borders in addition to the background colour and padding around the image. Different colours for the two borders make the pictures look embossed to the site.

.main .entry img {
background:#D9CFBD;
border-bottom:1px solid #FEFEFD;
border-top:1px solid #C9C5B3;
padding:5px 6px 6px;
}

4. Decorative Image Captions

DesignIntellection initiates a new way in using image captions with a semi-transparent layer at the top of the image. First of all, the DIV container with the class “post-image” is set with a position: relative, which allows an absolute positioning with the “title-date” span inside that DIV.

.post-image {
position: relative;
}

.post-image span.title-date {
background:transparent url(images/tnsp-black-65.png) repeat scroll 0pt 50%;
color:#FFFFFF;
font: 11px/16px Helvetica,Arial,sans-serif;
margin:5px 0pt 0pt;
padding:5px 10px 5px 74px;
position:absolute;
left:0pt;
top:0pt;
}

#main .post-image p img {
border:5px solid #E7E2DF;
}

5. Dashed borders

Image styling on Antiphrasis is not at all complicated, but combined with a few delicate details it looks very effective. The images itself are simply padded with a dashed border, but because the majority of pictures there are transparent PNGs, they look very impressive, especially when you mouseover them and the background “flashes” at you with a different colour and the light dashed border turns orange and solid.

.article-img {
border:1px dashed #9EA8A8;
padding:10px;
}

.article-img-link:hover img {
background-color:#506262;
border:1px solid #F07800;
}

Cameron Moll also uses a dashed border on his site, with no frills — just a padded image on a white background.

.picC {
background:#FFFFFF;
border:1px dashed #999999;
padding:4px;
}

6. Book-like image captions

Kyle is using various techniques to style different kinds of images on Warpspire: featured post image is prominently displayed in the site’s header; some images in the posts have no accompanying captions, while others appear with book-like captions.

.figure {
background:#F5F5F5;
border:1px solid #DDDDDD;
line-height:0pt;
margin:19px 0pt 1em;
padding:2px;
text-align:center;
}

.figure small {
background:#DDDDDD;
color:#666666;
display:block;
font-size:10px;
line-height:12px;
margin:2px 0pt 0pt;
padding:5px 7px;
text-align:left;
}

You can get inspired by more images with captions over at Elements Of Design.

7. Images with Fixed Backgrounds

If you can prepare and always resize your images with the same width, you could apply a fixed fancy background image underneath. CarnivaleDuVin, for example, is showcasing the images in an ornate frame.

.entry img.hdr {
background:transparent url(../images/hdr-img.jpg) no-repeat;
margin:-8px 0pt 0pt -12px;
padding:24px 25px;
}

The Ernest Hemingway Collection on the other hand is featuring pictures framed like photos with shadows.

Recently Nick La posted a comprehensive tutorial on how to style images with CSS and set them within some very impressive frames.

8. Digital Image Editing

You can also go with a completely different route and style your images not with CSS but in any digital editing image software that you can get your hands on.

Jacob Caas cleverly crops all main post images in a shape of a pencil, similar to the one in his logo. John Boardley beautifully decorates the images on iLoveTypography with white on black captions.

Looking at all those original ideas helped me to choose how I would be styling images on Inspiration Bit after the re-design. Have you seen some other interesting ways in formatting images on the Web?

A traditional web site design process always starts with laying out a sitemap and wireframes. Why should the blog’s design be any different? In most cases the site’s information architecture will actually dictate the direction for the site’s design.

There were definitely changes in the way people organize information on their blogs. The readers are no longer limited to the standard about-contact pages, blogrolls, categories, archives, the most popular-recent posts/comments and ads. More and more blogs nowadays display side posts with their bookmarks and latest activities from social networking sites. Some blogs even bring readers on board to contribute the best articles from all over the blogiverse. Two of the most notable examples where community was invited to be a part of the site’s content are Quipsologies (from the Community) and Noupe (DesignNews).

Nobody can deny the fact that there is lots of information that we want to share with the rest of the world or use as a promotion, so it is very important to pay an extra attention to how we structure our blogs without adding a clutter to the site.

In organizing the information architecture of a blog it is also important to know how readers behave when visiting an unknown site, and think outside of being the authors of our blogs.

One of the most frequently displayed links on blogs are categories and archives. I too have them on my sidebar, though won’t be keeping them in my blog’s new design anymore, thanks to Chris Pearson’s enlightening article on What Every Blogger Needs to Know About Categories, where he warns us that:

By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis.
…
As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins.

Pearson’s article makes a lot of sense, and he supports it with his own blog’s information architecture: the sidebar contains only four lists with the Latest Articles, Must Reads, Improve Your Blog and Worth A Look, while the Topics(categories) and Monthly Archive are kept on a single page—Archives.

Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow.

1. Creative Curio

Lauren has just launched her blog’s fresh new design. It looks amazing, so make sure to visit her site and share your thoughts and opinion on her blog’s new look. She’s still working on adding more features to her site and polishing a few details, but I already like how she added her social networking links in the footer, and displaying the Related posts, along with the calls to sharing and subscribing to her blog at the end of each article. Lauren has also spent a considerable amount of time putting together a very helpful Graphic Design Glossary which she links to from her main navigation menu.

2. DesignView

Andy Rutledge is a brilliant designer, no doubt about that, and his design articles contain so much value that there’s no need to advertise the RSS feed on his blog with big icons or fancy styling. Andy places only two simple links to his Articles feed—at the beginning of his huge triple footer and at the bottom in the Colophon section, along with the author’s short bio, contact and link to his company site. There are lots of small, but memorable details like the decreasing font size in the excerpts for the three most recent posts on the home page; various bits of articles from the Web in a section, cleverly titled as Ephemera; minimalistic but highly user-friendly and space-efficient switching tabs in a large footer that features Andy’s articles on various topics. Nothing distracts the reader’s eye when reading an article on the site, as there are no sidebars, at the end of the post visitors can browse through the same tabbed Archive we saw on the homepage.

3. HellYeahDude.com

Patrick Algrim’s site design is all about grids, organization, minimalism. Some of the interesting details that stand out are the small navigation in the search box area, the fact that Patrick’s photo along with a short bio appears only when previewing a single post (something to consider for blogs with multiple authors), the comments area is aligned with the rest of the large footer section, making it look more as a part of the site’s overall information architecture rather than a continuation of the post. On the home page the Discussion section is replaced with the Most Recent posts from the Archive. Even the ads placement on the blog was carefully calculated: small images with sponsor ads look more like portfolio thumbnails, and at first I haven’t even noticed that there are TLA ads in the left bottom section of the site.

4. AIGA

If even for some smaller sites an efficient Information Architecture can present a challenge, how do large sites with a complex data structure like news sites, portals, deal with it? American Institute of Graphic Arts (AIGA) has managed it masterfully. There are a few organizational tricks that even smaller web sites can find valuable and applicable to their structure. AIGA’s homepage is filled with tons of information: a featured most recent article is followed with four previous articles along with short excerpts, five most recently commented and popular posts appear after, design jobs, design archive and a calendar of events complete the left section of the page; while the login area, search bar, news and sponsored ads are all displayed in a sidebar. Once we click to read an article all the extra curriculum data disappears, including the footer, and is replaced only with the information relevant to the particular article—Related Images, Content, Event, and a small tabbed section with the recently commented and popular posts.

5. Jontangerine

Jon Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are uncluttered and contain only a short bio on the left and a collection of “Curious Asides” with a last link that takes to another page that displays “Stubs via Del.ico.us”, “Moments via Twitter”, “Photos via Flickr” that we can all subscribe to. Both homepage and single post’s page feature a large three-columns section above the footer with interchanging sections: the featured articles, comments, conferences and “Snippets from the Silo” with some very helpful design tutorials/articles are on the homepage, while the latest posts, comments and blogroll on the single post page. Article’s page is once again uncluttered: Jon displays some post-related meta data at the top of the sidebar and once in awhile an auxiliary related data, appears on either sides of the article, making the experience similar to reading a textbook.

6. Astheria

If you thought of Andy Rutledge’s and Jon Tan’s sites being very minimalistic, check out these next two blogs. Astheria is designed by Kyle Meyer, who explained the reasons behind his blog’s super minimalistic design being the result of frustration when “every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content“. On Astheria the content definitely gets the royal treatment: the homepage features the most recent post, with a huge font size set in 4.4em, two columns with five latest articles and posts (not sure though how does Kyle determine what is what), a single line footer with the subscribe link, a very simple menu (with a link to archives that features all articles in a chronological order) and even a simpler logo. The single post’s page once again starts with a huge headline and ends with a collection of Related Reading links and social bookmark — no sidebars, no footers in sight.

7. Andrew Ricmann’s Perspectives

If Kyle has placed a tiny logo on Astheria, Andrew decided that the HTML title of the blog is sufficient for readers to see the blog’s name. He also ruled against having a dedicated homepage on his blog, and greets visitors with a full article, completed with a comment form and readers’ comments that start somewhere in the middle of the post in a right sidebar. The navigational menu comes with a drop down list for archives and categories. A similar drop down appears in the post’s breadcrumbs.

8. Warpspire

Kyle Neath’s impressive tricks start with a usage of an image underneath the Featured Article, which can be swapped with the Blog’s Archive, or Experiences or links from Interwebs when you click on the menu items in the “30 Second Tour” section below the banner-like image. I also like how you can switch between listing Tips/Resources, Reviews and Marks—very space efficient. When viewing a single post, the reader can check out the Hot Topics on the sidebar or visit Kyle’s other projects.

9. I Love Typography

What can be said about John Boardley’s beautiful site that hasn’t been said yet. Recently John updated the look of iLT’s main navigation to make it more prominent amongst the site’s rich information architecture. ILoveTypography is one of a few sites that display a complete list of all articles ever written on a sidebar. With twice per week posting schedule John has managed to publish over 100 posts in less than a year of iLT’s existence. However, not everyone can get away with such a long list of past posts on a sidebar, unless you tend to publish very long articles that are so characteristic for iLT. John even created a long list with his favourite typefaces on the second sidebar of the site that’s updated with new type names/links every month.

10. A List Apart

Of course, everyone knows this mecca for all designers and developers, but it’s worth taking a second look at ALA’s information architecture. If this site has managed to handle elegantly its vast amount of articles and pages, then no personal blog has any excuse for a poor site structure and navigation. There are four ways how a reader can navigate A List Apart: viewing a complete list of articles by clicking on the first menu item—Articles; clicking on Topics provides us with a short list of the site’s main topics (that also appear on the sidebar) along with a description and links to subtopics; clicking on linked topics in the breadcrumbs of a particular article we read; searching ALA via search box.

11. Bearskinrug

Kevin Cornell’s site is not only pleasing to look at, but also a joy to browse and explore. The content area of the homepage is split into three columns: the first column is reserved for the actual article, the second column features three latest articles, the last column starts with a ravishing search box, followed with the list of Recent Links where Kevin shares interesting snippets from the Web. On a single post page, the content in the last two columns is replaced by Comments in the middle, and on the far right the Recent Articles are presented as little thumbnails with post’s title and date placed into ALT and TITLE attributes of the corresponding image. Also make sure to check the tabbed section on the right of Bearskinrug’s Store section—such an artful solution to display tabs as illustrations.

12. Rob Goodlatte

Rob Goodlatte’s stunning web site utilizes various navigational elements—top menu, right sidebar and big footer area. The most recent posts gets the spotlight on the homepage and is followed by four previous posts split into two columns. The content of the sidebar changes depending on whether you’re on the homepage or reading a post. The footer always displays the latest tweets, features three posts from four categories and links to Rob’s social activities. I really like how he displays three most popular posts on the single post’s sidebar—the text links are indented with “-9999px” and instead replaced with the images of well-crafted magazine-like titles.

13. Designing The News

Dave Bowker’s elegant site sports a three-column layout with a very minimalistic middle column, where he displays only a limited post related meta data, which give lots of breathing room to articles on the site. The last column showcases links to other sites divided into five different sections. I especially like the way Dave’s portfolio page is organized.

14. Veerle

Veerle’s blog is one of the most well-known web sites on the Web. She’s got lots to offer to her readers: art projects, tutorials, articles, workshops, job ads. There’s certainly lots of information on the site, but Veerle has victoriously dealt with the complex structure by integrating various navigation options for her readers and visually separating the main content of the site from the auxiliary data. As soon as you switch to the single post view the complex structure is replaced with a simple user-friendly layout, where the article gets the prominent spotlight on the site.

15. Design Adaptions

Recently Charity’s site has received a fabulous makeover. I really like her implementation of the data organization on her blog. Depending on whether you’re on the homepage or reading an article on the single post page, the surrounding navigation aids you in finding a relevant and valuable information and keep you glued to the site, exploring it. The homepage features a horisontal row with the photos from Flickr, followed by the set of external links that encourage visits to other sites. Even though the tabbed section stays on a single post page, Charity complements it with the “possible related” posts. The footer links are changed as well, and turned into a showcase of the most popular posts from three different categories.

16. RA Project

When browsing RA Project you can sense that Ronald Huereca has put a considerable amount of thought into improving a user experience on this site, after all the site’s purpose is to place readers first. The homepage features an excerpt from the most recent article, that’s complemented with the list of five recent articles on the right. AJAX carousel is a geeky and quick way to present readers with a whole bunch of recent articles that they can easily browse. Three articles from different categories are featured below with the list of related posts. The footer presents readers with a short about section, del.icio.us links and Readers First award recipient. Since it is a multi-authored blog, Ronald cleverly displays the author’s short bio before each post, followed by a number of links from the same category as the post, and more articles from the same author.

What other sites would you include to this list? How do you browse other blogs as a reader? What are the first things you look at after reading the post that you liked? What do you find most frustrating when browsing an unknown to you site for the first time? What would you like to see on a web site that you visit regularly?

With this post I’m starting from the area of a blog that’s often left ignored — headline, date, author data and number of comments. Take a look at the 16 exquisitely crafted headlines below. It’s obvious that the designers have put lots of thought and payed a very close attention in getting them to perfectly fit the design and add a distinct character to the site’s look and feel.

I called them “dramatic” because some of them indeed appear rather theatrical though not being too showy, others seem to be emerging from antique pages of books or magazines, while others simply manifest themselves with a bold statement without the use of Impact.

1. BEARSKINRUG

Talented illustrator and designer Kevin Cornell most probably loves theatre, just check out his Shakespearean comic and, of course, the site’s design that looks more like a washed out old poster where every little detail was carefully thought out.
I also really like the way he displays the site comments in the adjacent to the post column.
Both the post’s heading and the date are using Georgia, although the title is displayed in a much larger (font-size: 160%) size and italicized. With just a little touch like adding an “elaborate” divider as a background image to the paragraph with the date, he makes it stand out among regular looking headlines on other blogs. Add to that a special treatment for links to previous and next posts: first, Kevin is not displaying those post titles, second, because of that he can safely replace the text with image links that glow on mouse hover (note that he’s still keeping the text link alternatives by moving them outside the windows area: text-indent:-9999px;).

2. VIGET-INSPIRE

First of all, I hope that designers from Viget Labs will one day write a tutorial on how they achieved such perfect watercolour drawings for their site. They continued with the watercolour theme and even “washed out” the pictures of the authors.
The author’s name, along with the categories, cleverly listed as “on the topic of…”, are displayed in 0.85 em all caps Georgia with letter-spacing: 3px, and look very different from the post’s title that uses the same Georgia face, though sized as 1.8 em. The date and the number of comments are displayed in Verdana.
The gentle lines underneath the title, authors and dates section actually all come from a single image, that’s called from the DIV after the title’s H2 tag, but raised with a negative margin so that the title too shows up above the understated dividers of the background.

3. DESIGN*SPONGE

If for some reason you haven’t visited this site yet, please, do yourself a favour and spend at least 15 minutes there. I guarantee you’ll get hooked with those DIY projects, sneak peaks at other people’s room decors, before & after transformations, and so much more.
A rather interesting approach on using HTML tables for building the structural carcass of the site, and only then going with DIV tags for further details. Once again we see one attractive background image underneath the category/date/title/ sections. An interesting detail is that there are eight different background images (as far as I could deduct) that alternate (according to an unknown to me formula). Everything is displayed in Georgia, but in different sizes and styling — uppercase for the categories, but lowercase and italic for the larger titles.

4. KHMERANG

Thankfully, Mr. Khmerang has written a tutorial on how he achieved that worn type for the headlines. Rather than using sIFR where Flash is replacing the text, the text stays untouched but is “covered” with a worn image.

5. TYPESITES

Typesites is a new blog (launched in January, 2008 by Kyle Meyer) that offers a “weekly showcase of websites with interesting typographic design”. I’ve discovered this site only a couple of weeks ago, after my own “investigations” on sites with exquisite web typography. Kyle used Helvetica Bold for the headlines and Helvetica Neue in a much smaller size for all the byline details like the date, author’s name and the number of comments. He achieved a very dramatic effect by displaying them on an almost black background (#181818), with the text set either in white or bright yellow (#FFD200) — so simple, yet so effective.

6. I LOVE TYPOGRAPHY

Of course, it is expected to see type magic in action on a site that belongs to none other but Mr. Typography himself. Aside from the outstanding content, John’s superb eye on typography and focus on details cannot leave us disappointed. The post’s title is set in large Georgia, while a clever addition of a byline, à la 2nd title, set in Lucida Grande with an elegant branch divider in the background image, makes the articles look designed more for a book than a site.

The date treatment is very simple, yet attractive with the bigger number in red (#CC0000) and so perfectly aligned with the comments are. The trick used to display the comments is quite ingenious — the raised numbers with the opening curly brace are set inside the SUPerscript, the closing curly brace is displayed in a big size, while the word ‘comments’ inherits the parent style:

<span class="bigdate"><sup> {74</sup></span>
comments <span class="bigdate">}</span>

7. GROW COLLECTIVE

Grow Collective was designed by Jon Tan, whose personal site was featured in my series on going behind the scenes of exquisite Web typography. So it’s not surprising to see beautiful type treatment on Jon’s company site.

Everything is set with lots of breathing room that makes the beginning of every article very open and inviting. The title is set in Georgia, in a rich coffee colour (#331100), the summary below is displayed in italicized grey (#999999) Georgia. The rest of the auxiliary data (author’s name, comments, categories, tags) is set in small Verdana.

8. A LIST APART

I’ve already dissected this stunningly designed site in my behind the scenes of web typography series, so I won’t be repeating myself on how to achieve the headline effects of A List Apart, but I just couldn’t omit listing this site here as well.

9. BLISSFULLY AWARE

Designed by Joshua Lane, this site looks more like a menu of a high-end restaurant, so the use of decorative elements fits the style very well. All text in the post header is displayed using Georgia, and is distinguished with the use of different sizes and styles. An interesting detail here is that to achieve the pale, fading text effect Joshua is using CSS property opacity rather than picking a pale font colour. For the previous/next entry links he specified text colour to be white, but with opacity:0.25, however the entry’s byline (with the author, date and comments) is not using the opacity feature anymore, it’s set with colour: #E6D9BF.

10. ROB WEYCHERT

As Rob Weychert himself confessed, the design of this site was inspired by his love of “the densely ornate editorial layouts from the late nineteenth and early twentieth centuries”. Despite relying on only one font, Georgia, Rob’s use of different colours (#000033 for the title and #993333 for the date), styles (all caps vs. normal), sizes and an unusual alignment (the date is set with a specified width and floated to the left, allowing the content to wrap around it), made the header section of the posts highly attractive. When you mouse over the prev/next links, the title of the linked posts will popup, so you can see what they link to.

11. CAMERON MOLL

If you rather go with something simple, you would appreciate a classic look of Cameron Moll’s style. Add a decorative divider above the title, stick to Georgia, use letter spacing to control the look (letter-spacing:-1px; was used for the headline) and add special characters before/after the date. One thing I’m missing in Cameron’s headline treatment is the absence of a link — I have to scroll all the way down to find the permalink or click to read the comments.

12. MATT NORTHAM

Matt is playing with two fonts — Times and Verdana — to style the post’s header. The decorative swooshes before and after the date are separate images. The date text itself is set with letter-spacing:0.33em, all caps Verdana in bold. The headline is displayed in a bold big lowercased Times. All the additional meta data once again is set in Verdana.

13. COUDAL PARTNERS

Even though Coudal Partners is not a blog, the way Coudal has styled the headlines can be easily adopted for blogs. The difference in sizes between the two titles is striking. Interestingly enough, H4 was used for the large headlines, while H1 is used for the smaller additional title, displayed in Gill Sans. I also liked the use of two colours in the top title.

14. LADY OMEGA

Can you find a more dramatic site than this one? To achieve a similar effect on your blog you should set the title in Georgia, in dark pink (#EA3690) on a black background, add some cute icons before/after all the auxiliary data below the post, float the date to left and style it as you like.

15. WEB DESIGNER WALL

Even though it’s a very popular site and most of you frequently visit it, I had to feature it here as well. A simple watercolour brush stroke in the background makes the header look artsy, and the comments cloud only adds the magic feel to the site.

16. SHAUN INMAN

It is impossible to talk about the type treatment for headlines and skip sIFR (Scalable Inman Flash Replacement) technique. And what a better site to show as an example than Shaun Inman’s (the originator of sIFR) own blog. Shaun uses Univers 59 Ultra Condensed typeface in the Flash replacement, with a striking alteration in colours for the words in headlines. I’m not too crazy about the disappearing headlines on mouse over, but I do like the minimal modern look of the site.

Hope you found those examples inspiring. What other sites would you add to this list of dramatic headlines?

Ever since I started thinking of going solo (even before putting it down in writing), I was collecting various ideas for effective integration of my design business with my blog. To give you an update, in less than two months I’ll be running my small design studio full time, so I need to be thoroughly prepared for that.

There are many designers who managed to successfully establish an online business presence and gain authority and clients from all over the world. And what is a better way to learn than from the pros? I’ve interviewed six prominent designers to get the insider info on how to effectively blend blogging with business.

Essential puzzle pieces for business promotion online

Choosing the right name for the business is probably one of the hardest decisions we have to make. Do we use our own name for the business and blog or come up with a different one? And what if we already have a blog, but only later decide to promote our services online – do we just add our portfolio to the existing blog, or start a new one?

Aaron Russel recently launched a new blog/site to promote his freelance work rather than using his existing blog. “miLienzo.com was never intended as a platform from which build my freelance activities — it was only ever intended as my geeky experiment into the world of blogging”, explains Aaron. “Whilst miLienzo.com has become a successful blog in its own right, it kind of serves no purpose and a lot of my posts tend to be a bit random or personal — it’s certainly not optimised as a ‘selling’ blog. With the new site, rather than just opening up and writing what I feel, I think to myself ‘what do I want to achieve?’ and I construct posts based on that objective. It’s all just a bit more strategic and serious.”

Of course, the most important piece that every designer needs to add to his site is Portfolio. Prospective clients must know what are we capable of. However, there are a few other things that should be taken into a consideration as well when constructing your business presence online.

“Feature selected work in blog posts, talking about different aspects and challenges of the project. Add testimonials to the sidebar. Thumbnails of recent work in the sidebar are a nice idea too”, suggests Randa Clay, who successfully juggles her design career with blogging and motherhood.

David Airey, the blogger whose name is quickly becoming synonymous with Logo Designer, cleverly included Hire Me and Testimonials pages to his blog. “Portfolios are great for showing the work you’ve done in the past, but for future projects, establishing trust and gathering project details are of great importance”, cautions David. “My ‘hire’ page includes a logo design questionnaire that starts every new project on the right foot. My ‘testimonials’ page puts a public face on those client quotes that are all too often fake in appearance.”

Many businesses started to recognize a great potential in blogs that allow them to add something very important to their web sites that was lacking before. Tara from a popular Graphicdesignblog quickly noticed that and advises others to follow her steps: “What is useful about a blog, for prospective clients, is that not only do they get to see your work but they get to see a slice of your personality — from both how you write and how you respond to comments. I like to show my design case studies now and then as this shows my thinking process to clients. By showing how I work from my own initial sketches (generally not shown to the client) to concepts, to final design prospective clients can get a feel for how their design project would progress. This is especially useful for clients who don’t generally commission design”.

Another useful tip that designers who blog can adopt is to have a business “frontpage” for their site as a starting point instead of the recent blog post. Check out Aaron’s new site as a great example of this approach, who calls his homepage a ‘shop window’:”I’ve dedicated the homepage to selling my services. The design tries to funnel visitors through a path of targeted content and ultimately to my client questionnaire contact form. Blogs are great for slowly building an ‘authority’ and positioning yourself as an expert, but ultimately if someone who has never heard of you is searching for your services and lands on your site through an organic search result, they will want to land on a page outlining what you do and why they should hire you, not your latest blog post.”

Blogging is perfect not only for established designers but for students as well. It is probably the quickest and least risky way to try out some freelancing on a side while you’re still studying your craft. Jacob Cass from Just Creative Design can serve as a role model here. In just a few months this design student from Australia has already built a name for himself not only as a creative young designer but also a prolific blogger with a high traffic blog and over a dozen of memorable guest blogging appearances on several prominent blogs.

“I blog about my design process and teach others what I have learnt”, shares Jacob, “I also have a hire me and portfolio pages. I recently added a testimonials page to show what others think about working with me, which is another great way to gain trust in your new potential clients. To narrow it down to just one point: you should practice what you preach.” On the other hand Jacob admits that “there are so many different ways to promote yourself and each does it in their own different ways so what may work for me may not work for someone else.”

Jon Tan, a respected designer who is well-known for his superb eye for Typography and as an avid supporter of web standards, gives an excellent summary of what are the better ways of promoting one’s design services via his/her blog: “I think it depends on context, audience persona, and business objectives but in a nutshell: Share your knowledge to be employed to implement it.”

How to build a skillful and imposing portfolio

Having an impressive portfolio will definitely boost your credibility and demand as a designer, but what if we were too busy working or studying full time and haven’t had a chance to score that many interesting projects that we could proudly display in our portfolio section?

“Do some pro-bono work, or just make up some dummy companies and design for them and put those items in your portfolio”, recommends Randa Clay, “Title the portfolio that is available something like ‘Samples of My Work’, even if it’s everything you’ve ever done. This is not meant to be a deceptive step, but there’s no reason to advertise the fact that you have a limited body of work.”

David Airey is another supporter of pro-bono work: “Patience is key, and I’d highly recommend pro-bono work for those with ‘thin’ portfolios. Contacting local non-profit organisations and offering your services is great for a number of reasons. It builds confidence, creates local business contacts, offers real-world experience (including valuable feedback), and should also be for a worthy cause.”

Students-designers should definitely check out Jacob’s portfolio to see how he integrated his personal works with the real-world examples. “You should always try to build up your portfolio”, encourages Jacob, though he recognizes that “there are a number of problems behind doing this (i.e. no computer skills, cash problems, etc.)”, so he wrote an article on where to get paid design work for students.

How to differentiate feasible clients from impractical ones?

The first question that comes to mind when getting a business inquiry is how do you decide whether someone who approaches you with a potential design work is a viable and committed client. Everyone has his/her own tactics in spotting when something or someone is too good to be true. Often it’s only a matter of time and experience when we learn how to turn down an offer that we don’t feel too good about.

You might follow Jacob’s advise: “You never know for sure so you should treat all clients with the same respect and then you will start to build a relationship up with them. Ever heard of the 80/20 rule? 80% of your work will come from 20% of your clients.”

For David it’s a simple matter of clients doing their research before contacting him: “Addressing me by my name is a great start. You’d be surprised how many emails I receive that sound cold and abrasive. It’s a common courtesy to start an email with ‘Hello David’ (or something similar). It’s not like my name is hidden away. It’s easy to differentiate a hastily written email from a professional one, and if someone rushes through what they’re saying, chances are good they want a cheap and fast identity design.”

First impression can definitely predict the outcome of an inquiry, as well as the transparency of those who request a quote on a project that we’ve never heard about before.

“It’s easy to get frustrated and bogged down trying to work with people who are not good clients. I rely heavily on the way that they first communicate with me, as well as who referred them to me”, observes Randa, “For example, when I get an e-mail from someone calling themselves ‘Slider’ simply saying, ‘I need a blog design- what do you charge?’, it does not give me the impression they will be a good client to work with. Someone who is likely to be a good client will have a ‘real’ name, communicate their needs well, and have at least a general idea of what they’re looking for in a design. A good client will also not balk at the idea of paying a percentage of the design fee up front. This demonstrates that they are committed to me as a designer and that they understand the value of a designer’s time.”

So looks like we’ve established the two key components that every client should have: they should know our real name, and they ought to sign the email with their own real name, as well as the name and the nature of their business. What else?

Tara takes the initial communication one step further: “When I get asked to quote a design job via my blog I generally send back a list of a few questions about their requirements. Some people don’t bother responding to the questions. If they aren’t prepared to spend the time answering a few questions it’s not worth pursuing. I will sometimes also ask if they have a budget to try and cut out people who want a $50 logo. Once I have the information I need I send a quote to the potential client and have been lucky that the new clients I have made from my blog have been good to work with and pay on time.”

Having a ready to be sent client questionnaire on your site is a quicker alternative to speed up the process of filtering the clients and getting the right and complete list of project requirements in the first place. This is an approach that makes Aaron’s life of a designer much easier: “By asking potential clients to complete a questionnaire form you will automatically filter a fair amount of these less committed clients, but other than that it’s down to intuition. To be honest I think it’s fairly easy to spot the genuine enquiries, but what is less easy is to act on your gut instinct and say ‘thanks but no thanks’ – especially so if you are going through a baron patch when the temptation to take on any work is strong.”

#1 tip for the efficient integration of blogging with business?

I’ve asked my interviewees to give their best tips on effective blogging with business in mind. “Practice what you preach”, eloquently put Jacob.

Once you decided on using your blog as another marketing tool for your business, try not to neglect it and update as much as possible. “The benefit of this is that Google loves WordPress blogs and your site will come out higher in searches”, discloses Tara, “My blog is currently number 2 for Google UK for the term ‘graphic design’ which is something I would never have achieved with a basic website.” Now this is definitely something to be proud about, isn’t it?

“Blogging does consume huge amounts of time”, admits Aaron, “No matter how organised you are, by committing to write a blog you are committing to many hours of work a week. When you add it up this can amount to half a working day to even an entire working day. However, blogging can be a very powerful marketing/publicity tool and best of all it doesn’t really cost anything. Therefore as busy freelancers juggling several projects at once, we need to accept the value of blogging and with that accept the time commitments. Put time aside to strategically think about what your next week’s posts will be, dedicate time to write and proof your articles, and publish them to a schedule.”

Giving a “face” to your business is a strategy that proved to be successful for many designers. “People like to work with people they feel they know and like”, reveals Randa, “Put your picture on your blog, either on your front page or ‘about me’ page. Be personable and likable in your post writing. Use your blog to network with and get to know other designers and potential clients.”

It can never be stressed enough that networking to business is like water to fish — your business can’t survive without networking.

On the other hand, don’t make your business blog too personal. “Keep it relevant”, cautions David, “That’s not to say you shouldn’t add some personality to your blog, but if your business is design, don’t write articles about the local council’s new sewage policy (unless they’ve created a swanky new logo).” From myself I would add that having a good sense of humour can never hurt your business, but only enhance it.

An important concept in any business is to adopt whatever works for you the best. Sometimes narrowing down and focusing on specific services will make you stand out in the competitive world of designers. At first David Airey was offering a broad range of services, but then decided to focus on “logo / identity design”, and that’s when he became a sought after graphic designer. When I asked him whether or not he would advise others to follow his path, he gave an honest answer: “The truth is, logo design is what I enjoy most, so it makes sense to narrow my focus. Advice for others? Do what you love, and put all your effort into it. Spreading yourself thin can lead to project outcomes that undersell your true skills.”

For students-designers Jacob gives this advice: “I know a few student design bloggers, however they post more of just their work, which really doesn’t provide anything for the person reading it, it is mere an eye candy. If you provide your readers with more, such as your design process or some tips or how you went about doing things, then this provides them with something they can learn from.” To see his advice in action check out Jacob’s post on Font Flags Specimen Sheets. By turning this article into a resource, he got it ranked #1 on Google for “font specimen sheet” keywords.

Designer challenges

As in every profession designers face lots of challenges. The best thing that can happen is we learn from our mistakes (and hopefully others as well), the worse case scenario is we keep doing them over and over again until one day we get wiser.

For Jon Tan the most challenging things in design & blogging are “Time, learning and the last 10%: Our business moves so quickly, and covers such broad and deep areas of expertise; Finding time to research and write in depth, as opposed to a quick skim of the blogosphere and a bookmark or two, is a problem. I often read material that is not well researched, but audience-hunting or link bait. Properly researched material is a joy, but takes time to absorb, and publish. Our business is 80% science and 20% art. There are a lot of articles published that concentrate on the art, but I’d love to have more time to study the science, and add to it myself. The last 10% refers to polish. In combination with time spent researching and prototyping where the best ideas are born, the last 10% is where they truly come to life. That, and the final 10% is the art, and require more time and serenity of thought than is often available.”

“Trying to get an accurate brief from a client” is one of the most challenging tasks for Tara. “Some clients are great and provide lots of information, others are incredibly vague (even if you send them a questionnaire) and give you very little idea what they want.” Another hard decision to make for Tara, as well as many other designers, including myself, is providing the right quote: “sometimes it’s really hard to judge how long creative work will take, you don’t want to charge too much but also don’t want to undersell yourself.”

It almost became a common problem for every designer: we’re so busy working on client projects and dealing with various business-related tasks on a daily basis, that we hardly find time for our own sites and projects. So many times I’ve witnessed the fact that a successful designer has scrambled to find time only for his/her own web site to have only one page with coming-soon-here-are-my-contact-details info.

“Finding time to work on my own projects” is a challenge for David as well. “I enjoy working with clients, but I don’t intend to do it forever. Ultimately I want to set up some projects that bring in passive income, but I have a way to go yet. Sometimes I just have to tell prospective clients I’m too busy, in which case I’d refer them to another designer.”

Aaron confesses that “new challenges present themselves all the time”. “From a freelancer point of view, one month the challenge might be finding where the next piece of work is going to come from, whereas the next month the challenge is organising your workload due to the sheer volume of work. Then from a designer point of view there are practical challenges like learning new applications, technologies and skills, or often the challenge is wondering where your inspiration has gone and combating self doubt.”

So how should we overcome those difficulties on a daily basis? “All these challenges are dealt with by being adaptable and believing in yourself”, convinced Aaron. “Being a freelance designer requires the wearing of many hats, and to be successful at whatever you do for a living requires a confident and assured approach to your work.”

Over to you, my readers, now – what tips do you have for others about some of the ways that you personally found working in building your online business presence?

It’s pretty obvious what is symbolized by ch’i on a website: if a reader gets a nice user experience from visiting and exploring the site, if the site colours don’t hurt the eyes, the navigation doesn’t cause a confusion and the carefully constructed typography doesn’t cause a headache, then we can safely say that this web site has a very good Feng Shui. In other words, in the world of Web:

Feng Shui = Usability + Design

Now, that we’ve managed to decipher and see how important it is to have a good feng shui on a web site, and since blogs are fast becoming the most popular types of web sites, let’s go through some DOs and DON’Ts in blog Feng Shui.

DO pay an extra attention to the homepage – even for a blog it is still the most important page of the site. Despite the fact that people usually land on one of the blog’s articles from search engines or following links from other sites, most of us always check out the homepage afterwards. Be sure to check Jacob Nielsen’s Top Ten Guidelines for Homepage Usability, though some of those guidelines apply to the blog’s overall layout, not just the homepage.

DON’T interrupt the positive ch’i with links that don’t say where they lead to, or open new windows, or present readers with a PDF document without a warning. We’ve all seen articles with links that say “read here and here“, or several linked words in a row – all to different sites. Every time I see such links, I mouse over and look at the status bar, trying to determine from the URL where that hypertext is linking me to. But what if the permalink is not user-friendly, or people are less tech-savvy than I am and don’t have all the time in the world to follow all the outbound links from that article. If you have to use a short and not very descriptive links, be sure to include them with the title attribute that creates tooltips that display the original title of the article when mousing over that link.

DO keep in mind how people read on the Web – they are not just scanners, they are “savvy selective scanners“. Write not just eye-catching but meaningful titles, break long paragraphs into several shorter ones, intersperse your main text with highlighted words (links, typeface variations, in a different colour), make it more attractive with appropriate images, write a gripping content.

DON’T overlook the power of colour. Colour is one of the most effective and easiest ways to affect someone’s mood or energy flow. In Feng Shui each colour expresses one of its five essential elements: Earth (stability), Fire (high energy), Water (abundance and purity), Metal (clarity) and Wood (growth). Since Feng Shui colours are comprised from all colours of the spectrum — “yang ch’i – from red to yellow and orange, yin shui – from green to violet-black”, the important part is to learn how to design your site with a harmonious colour combination.

DO put more effort into understanding the principles of a good typography on Web. Be careful when combining typefaces on your blog. Cater your text size to users with different preferences, don’t limit them with having to read a tiny (or overly large) text on your site, avoid specifying font size in pixels or points (absolute size), use one of the relative font size options (em or percent) instead, so that its size can be increased by users if needed. A List Apart has posted a great tutorial on How to Size Text in CSS last November, so it’s still very much relevant today with people using different browsers to read our sites.

DON’T neglect your old treasures, use different ways in promoting your old articles, be it with adding Recent and Popular articles sections, or creating a separate Archives page, or displaying Related articles at the end of the post, or make a list of your personally recommended articles from the past, deep link to them from your recent articles, or you can do all of the above, and perhaps come up with something extra, to give a better guidance to your readers in exploring your site.

DO prepare printer-friendly versions of your site with CSS. There is nothing worse than having to print an article and ending up with dozens of pages with numerous page ads and broken pages due to the large graphics. Ronald has put together a quick how-to guide for Creating a Printer Friendly StyleSheet in WordPress, and A List Apart has a great article on how to get our websites ready for Going to Print.

DON’T break the consistency – one of the essential principles of usability. People are already used to seeing clickable blog titles, don’t substitute those linked titles with some additional buttons or links and expect readers to guess how to get to the full version of that page. Never underline your text if it is not a hypertext. One of the reasons why it’s not recommended to open links in a new window is because the default link behaviour is to replace the current page with the linked one – people love Back buttons, they make us feel more secure – we can always retreat down the same path that brought us to where we are now. Be consistent with your navigation, colour scheme and essential elements throughout all pages of the site. Don’t move around content blocks, layout structure and design of your blog too often: if I’m used to seeing your search textfield at the top of your blog I expect it to stay there during my consequent visits, without having to wonder where did you move to your Search bar this time. Make your new found readers wanting to come back and your old readers feel “at home” with a good Feng Shui.

Blog Branding

We’re surrounded by brand names since the day we’re born: brand diapers, brand cereals, brand clothing, brand strollers, and the list goes on. In fact we get branded ourselves with the names that parents give us, but only a few of us turn those names into powerful brands (Martha Stewart, Seth Godin).

The mastermind and marketing genius for Nike and Starbucks, Scott Bedbury, once confessed that “A great brand raises the bar — it adds a greater sense of purpose to the experience, whether it’s the challenge to do your best in sports and fitness or the affirmation that the cup of coffee you’re drinking really matters”. If you read my look at some of the Most Brilliant Advertising Campaigns you will notice the similarities between them – they were all selling not the product but the image, the brand essence, the lifestyle.

How can branding be applied to blogging? The answer to that lies in response to another question: What are the driving forces of a flourishing Brand? Competitiveness, uniqueness, inventiveness, personality, emotions, packaging, ideology, design consistency. Carefully study all those shaping blocks of a great brand to get on the successful path of turning your blog into the one that’s recognized and remembered among the millions of other sites in the blogiverse.

Here are some DOS and DONT’S to jot down while wrapping the branding concepts around our heads.

DO create a brand personality by perfecting your About page. Talk as much or as little about yourself as you want but keep in mind that readers like to know who they deal with, it helps to establish one of the crucial elements of a successful brand — trust. If it’s a collaborative blog, then talk about its authors, if it’s a business site, do talk about the nature of the business and who’s behind it, if it’s a mysterious aura you’re after, don’t reveal some details – let the readers build myths whether you’re a male or a female, engaged or available.

DON’T forget to chose a unique image that will visually enhance your brand personality in the readers’ minds. Ralph Lauren never sold any horses, but what image comes to your mind when you think about this fashion mogul and his trendy empire? Take a look at the Instigator Blog’s new design – from now on, I’ll be always associating Ben Yoskovitz with those orange boxing gloves.

DO chose a consistent theme for your blog, define a focal point in all your blog’s topics. With Coco Channel it’s all about elegance and class, with iLT on the other hand it’s all about SEXy type, spread the LOVE of type & Rock’n'Roll your type knowledge. Everything and everyone on this site are soaked with type: the weekly features (Sunday Type, Type Faces), creative terminology (TypeNuts, Typestatique, Typelicious), site elements (exquisite typography, monthly fonts).

DON’T neglect the visual side of brand packaging: a unique logo, distinctive colour combination, noteworthy choice of type, meticulous attention to details. These are the essential tools in any packaging, why your website should be any different?

DO promote your brand’s awareness, expand that brand beyond your blog. Have you given some thought to how you present yourself and your site when commenting on other blogs, what to use as your avatar? Be aware of your own brand, recognize what is relevant and what does not to your image, become that brand before making others to take notice of it. Strengthen and build on your brand by taking it to the next step, other ventures. FreelanceSwitch stopped being only a blog for freelancers – there’s a JobBoard for freelancers, a forum, radio podcasts, there’s even a book for all the Rockstar freelancers out there.

DON’T fail to recognize the power of an identifiable name for your blog, get it right from the very beginning. Decide on your blogging goals: if it’s a personal brand you’re after, use your own name as the site’s domain; if you’re planning on running several blogs, or selling that blog sometime in future, or simply starting a new brand, then be creative and choose a name that is as memorable as it is unique. No matter how many other blogs Darren Rowse is authoring he will be forever associated with ProBlogger. His image hasn’t changed much since his minister days – he’s still making a living by preaching, but this time he’s preaching blogging to all us, mortals.

DO learn more about branding in general before building your own, learn from the pros, research the case studies of companies who managed to build a successful brand. There are many online resources for branding and Google can take you to most of them. But there is one book that I simply must recommend to everyone – it’s Naomi Klein‘s book NO LOGO. “There’s a bad mood rising against the corporate brands. No Logo is the warning on the label.” To wet your appetite here’s an excerpt from the book that you can read online.

DON’T destroy your brand by slowing down, or retreating to shade after a favourable outcome of all your hard work. Not only expect, be prepared for success, but don’t let it fool you either. It lasts as long as the taste of a magnificent wine and then all that’s left is a distant memory of how sweet it was. Ever wondered why such powerhouses as Coca Cola or Mercedes are still spending millions of dollars in promoting their brands? The answer is simple: competition and children. Every year hundreds of new companies, new products enter the war of Brands trying to brainwash us into choosing them over their competitors. People forget, and people rarely stay loyal to one brand forever. What’s more, millions of babies are getting born every year – they are the gold mine, the future buyers of that brand. Thousands of new readers flock to Web, you don’t want to miss a chance of having them to discover and subscribe to your blog, do you? Thousands of new blogs are created every day, stop turning your brand wheels and your readers will switch to another site that managed to take on where you have left.

Your Feedback

It is your turn now to share with all of us your notes on DOS and DON’TS of Blog Branding. What are your thoughts on Branding? I’ll summarize all your feedback and add to this post, for a more complete reference on aide-mémoire to Brand.

Add to that the ever rising number of subscribers on this blog. By looking at my feedburner shot you can see that the feed count started to increase drastically in summer and fall of 2007.

But what about all those posts published in winter and spring prior to the rise in popularity? How many of us are diligently exploring the archives of the blogs that we only recently discovered? I’m the first one to admit that I do like digging into the past articles of the blogs that made a big impression on me, but if there are hundreds of such articles, I just don’t have enough time to read them all.

To help highlight otherwise buried old articles some bloggers feature them on a monthly basis. I was thinking of doing the same, but then I was concerned about my devoted readers getting bored with having to read those monthly post reviews. On the other hand something definitely needs to be done to direct new readers to our old articles. I’m curious to read your thoughts on this issue and I’ll be dedicating a post on this as well in a week or so. For now I’ve decided it’s a good idea to feature some of my better articles from the last year. Check them out, perhaps even some of the long-time readers of this blog will discover something that they’ve missed, or wouldn’t mind reading again, and hopefully this showcase will help the new readers to dive deeper into the waters of Inspiration Bit and unveil some hidden bits.

As for the new plans for Inspiration Bit in the year 2008, I’ll be starting a new regular feature on a weekly basis: DOS and DON’TS that will cover topics on different aspects of design, blogging, relationship and life. There will be also another new monthly feature titled CONVERSATIONS where I’ll be conversing rather than interviewing a number of people who inspire us with their talent or accomplishments. I would also like to define a better focus for Inspiration Bit and I would really appreciate your input here:

1. Which past articles on Inspiration Bit were the most memorable for you?
2. What type of posts do you favour the most, what topics would you like me to focus on more?
3. What topics/posts are your least favourite?
4. What changes/additions would you like to see on Inspiration Bit, in terms of its content, structure, focus? (I’m not asking about the design, as I can predict there will be lots of requests, and I am still working on a new design, so please be patient with me on this one)

And now, without any further ado, here are the best or not bits of Inspiration Bit in 2007:

Inspiration:

• Inspiration Sources for Inspiration Bit
• The Importance of Values, Goals and Encouragement
• 5 ways to get inspired
• Captivating Photography Bits
• 8 Bits Of Evolution In Perception, Promotion And Values
• 8 Bits Of The Most Brilliant Advertising Campaigns
• How Crazy Are You?
• 8 Bits Of The Historic Byte

Design:

• Horisontal website designs
• 8 Clever Logos
• Spark Your Imagination with 16 Stunning Bits of Liquid Design
• Web Design Dissected Into 8 Bits
• Focus On Details And Get Inspired
• 8 Finest Bits Of Free Stock Photo Sites
• 8 Bits Of Perfect Geometry In Classic Logos
• Icon Resources and Tips For Styling Bulleted Lists

Typography and Colour:

• Mixing Typefaces Cheat Sheet
• 16 Best-Loved Font Bits In Web Design
• Get Inspired by 8 bits of Exquisite Typography
• 16 bits of Exceptional Typography Resources
• 8 bits of Colour Inspirations
• 16 Dates With Inspiration
• When Is It Wrong To Call A Typeface Font

Blogging:

• 8 Strenuous Steps To Get The Ideal Name
• Outstanding Posts Are Not Bestsellers
• 8 Things I Wish I Knew About Blogging
• 8 Bits of Truth About Blogging
• First Rule Of Writing On Inspiration Bit
• Blogging Mistake That I Still Tend to Make
• How To Build Lasting Relationships With Your Readers
• 8 Thought-Provoking Questions From Blogiverse
• Digg vs. Reddit vs. StumbleUpon vs. del.icio.us
• 8 Smarter Ways To Blog

Miscellaneous:

• 8 Bits You Now Know About Me
• Famous Logos Converted to Web 2.0
• What Can Be Done In 15 Minutes?
• Internet Is The Devil In Disguise
• M.C. Escher in Photography

Happy new year of blogging to everyone. I look forward to getting your input on what are your most memorable Inspiration Bits and general feedback.

1. Failure to Communicate

   Designing a web site means delivering the client’s or project’s message. So a clear communication is the key factor here. It’s also about finding the right solutions for the project’s tasks and needs. When the client says he/she wants a fun website, with some movements, it doesn’t necessarily mean that the entire site has to be done in Flash. Often the client doesn’t know any better, at first the Flashy animation might be welcomed but later on the same client may be facing many problems down the road when his visitors start complaining about the lack of content, slowly loading pages or poor usability of the site. It is important to have the communication going both ways – the Client tells the Designer what are the site goals and needs, the Designer educates the Client about the possible and better ways of achieving these targets.

2. Usability = Success

   Usability is all about making your website visitors feel at home when browsing the pages, searching for some information and actually finding one, it’s about making them feel welcome and encouraging to come back again and again. It’s like when friends are coming over to your place and asking for a cold beer: “Where do you keep it?” Your answer would be none other but “Where else, in the fridge”. The navigation on any website should be as obvious and easy to use. Sometimes it’s much better to compromise the design for usability rather than having a website with a stunning design but a nightmare to use.

3. Meticulousness is the sign of Professionalism

   If there’s something that stands out in any web site’s design it’s the attention to details to the point of achieving the perfection. It’s the right combination of colours, typography, content, content labeling, graphics. Antoine de Saint-Exupery was absolutely right when he said that “You know you have achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away”.

4. Accessibility and Standards

   Every web designer’s wish is to see that one day all web browsers on any platform will render and interpret websites exactly the same way. But until that wish comes true, we must pay a special attention to the accessibility and follow the standards. I don’t want to sound as a parrot, repeating the standard dogmas, so I link you to Andrew Rickmann’s article that explains it all.

5. Typography

   Just like everyone notices a quality paper and easy on the eye layout when we flip magazine or newspaper pages, the same way a good typography unobtrusively adds the high caliber craftsmanship to a website. I’ve previously listed 16 bits of Exceptional Typography Resources that should help everyone to get it right.

6. Colour

   I was surprised that none of the 35 interviewed designers mentioned anything about the significance of the Colour for Web. We all heard about the importance of making a great impact during the first few seconds when landing a new visitor to your site – in my opinion the right colours, colour combinations will be the first things that grab people’s attention. Don’t miss the 8 bits of Colour Inspirations

7. Content is crucial

   If a website has no content, what is the point of having a website? Not every website should have lots of textual data, however the content should represent the essence of the site, talk to visitors and explain what this page is all about. It can be achieved either by well-written articles, or well-presented media (images, video, music). Meanwhile, there’s a new type of sites that emerged in the last several years – blogs, and that’s where it’s crucial to have an outstanding written content, that can be cleverly accompanied with some interesting media elements.

8. Trademark Style

   Web and Graphic designers are not artists, not in a traditional way. A painter never becomes famous without developing a unique sense of style, an instantly recognizable trademark. Van Gogh, one of the prolific painters of all time, created numerous masterpieces. I haven’t seen all of them, but I can immediately identify if a painting belongs to Van Gogh, because of the master’s unmatched talent to get people see the world through the artist’s eyes. There’s a one of a kind Van Gogh style that can be spotted by everyone in anyone’s painting. With Web/Graphic designers it’s a different story – if they use the same style, same techniques they bring nothing new to every project they work on, and most importantly no individuality. The website should represent the client, the project, not the designer.

What do you think about the above-mentioned 8 principles of Web design? Which aspects of web design do you consider paramount?