I have had blog design on my mind for a few days in lieu of having the time to actually design something for my impending move to Wordpress. I came up with some wild, wonderful and complicated ideas only to end up reminding myself of the KISS principle - Keep it Simple Sue. I brought myself back to earth and reverted back to more basic web design principles and the particular needs of a blog site.
These concepts apply whether you are designing a blog from scratch or trying to choose a pre-made template.
Keep it Scope Sensitive
- 1. Consider your blog's goals and target audience, what is its purpose and focus.
- 2. A personal blog tends to have more design leeway than a business blog which often needs to follow certain professional conventions.
- 3. Consider the age and sex and interests of your audience whichcan influence the whole tone of your page with regard to color, image and layout .
Keep it Styled Simply
Reading on the web is not particularly easy on the eyes. A design take account of styling for readability .
- 4. Choose fonts, font sizes and colors that are easy on the eye. To state the obvious, a blog page contains a large amount of text and each page, be it archive or post pages, are the same. Blogs do not have the luxury of being able to use splash pages or images to catch and keep readers attention, the words are paramount.
- 5. One thing that amazes me is that as screens get larger and resolutions higher there is a tendency for smaller text. This is more noticeable in blogs that have an eye on making money online and advertising. Wanting to follow SEO recommended techniques for which elements should be in the optimizd position, they cram as much as possible into the top page area that does not require scrolling. There are some good reasons for this 'fold' area, in regards to how the eye scans a page, but go overboard and readability suffers. The quality of your posts is the drawcard to keep readers interest and to bring them back. Keep your content interesting and readers will happily scroll to read your posts.
- 6. Use white space to help guide the eye rather than confuse it with clutter. Space out lines and paragraphs, do not crowd them
- 7. Columns are used in newspapers and books for a purpose - to allow your eye to scan lines easily, without causing undue strain. Wide content areas do allow more of your post to be visible without scrolling, but the difficulty in reading may not keep your eyes, or your mind, focused for long.
Widescreen monitors and full width flexible layouts increase the problem. You do not have to have your windows maximised of course, but having to change window size can be offputting. I personally find that having other windows, or even my desktop background showing, behind a reduced sized window is distracting. In general spend significantly less time on full width sites than others.
On the other hand 800x 600 screens are becoming outmoded, making it less necessary to use the narrower layouts. A good stats utility will show you what resolutions your readers are using. You can use the extra area allowed by wider window sizes to add a third column to your blog rather than make your post area too wide.
Keep it Sensibly Systematic
Consider the placement of individual page elements:
- 8. Follow blogging conventions so that readers intuitively know where to find things.
- 9. Study other blogs so that you can develop a picture of this, particularly in regard to your sidebar.
Archives, categories or tags, subscription and contact options should be easy to find. Place them in a prominent position in your sidebar. Work out what other things readers of your blog may be interested in. For example, you may have other blogs or sites that they like to visit too. Don't make your readers hunt for these, as they are likely to give up and head off somewhere else.
- 10. A current trend is to make greater use of the footer. Ensure that long sidebar content does not make important information hard to find on individual post pages, where the footer may be well below your content. Anchor links to your footer placed near your post may be a way round this
- Take care with the proportions of site elements ensuring your content does not get lost. Look at the size of headers, sidebars and sidebar elements in relation to the overall layout.
- Ensure easy navigation around your blog pages, making everything as easy to find as possible.
Keep it Simply Stunning
Taking account of readability, blog conventions and sensible layout, your blog design concept will be now be plain but well organized. Now you can think of adding styling elements that will distinguish your blog and mark it as yours; but do not compromise your basic planning principles.
- 11. Browse showcase and blog directory sites for ideas - take screenshots or bookmark them for later reference. If you wish to discover how certain elements are styled, use a utility such as the Scrapbook extension for Firefox to do a quick download of the page or look at the sites source code.
- 12. Always remember that you are designing for a blog and unless you are aiming for a young, My Space kind readership, avoid gaudiness glitter and glare.
- Use your heading and logo to make your blog distinguishable but do not make it so large that readers need to scroll too far to reach your top post.
- 13. Keep in mind that images in posts are attractive and help break up the large amounts of text in your content area. Keeping the rest of your design clear and clean means that these images draw focus and interest to your posts. You have more freedom in post image, color and size as you don't have to worry about clashing with surrounding images and colors.
Keep it Smartly ShadedConsider your colors carefully taking account of:
- 14. Readability - text color should clearly stand out
- Use strong color contrast for text and text background - use darker text on light backgrounds or vice versa
- 15. Consider the preferences of your audience and what fits with your blog's purpose.
- 16. Delineation of Page Elements - Different colored backgrounds text can divide your page up; to draw focus to areas you with to highlight. Take care that colors do not draw attention away from your content.
- 17. On centered designs keep the background color or image toned down or in harmony with your other background colors.
- 18. Gradients used carefully can jazz up a page without taking it over; the darker color in line with your heading, the lighter color with your post content.
Keep it Search Engine Savvy
- 19. Choose a site title that is relevant either to your topic or identity.
- 20. Consider which keywords to use as metatags, in your title, description, sidebar headings, navigation menus and category lists.
- 21. Add "alt" (descriptive words) to your site images.
My graphical representation
of the Googlebot
Keep it at Supersonic Speed
- elements that are absolutely necessary - Work out which social networking and subscription sites that require you to place code on your site are really of use to you and leave the rest off. Jazzy image effects may be visually appealing but can slow a page down considerably.
- 23.Take care with the amount and size of images used in your template and posts.
- 24.Use image size reducing tools to create graphics that are as small as possible in pixel size while retaining their quality. (Article to follow on this one)
- 25. Consider creating a seperate page for some slower loading elements - eg create a page for your award images. This unclutters your sidebar as well as improving page load time.
Have I taken all of these factors in consideration with the design of the blog as it is now? Not completely. This is my aim for my upcoming makeover.
- useit.com: Jakob Nielsen's Website has many useful articles. I found his study on how the eye scans a page particularly interesting. F-Shaped Pattern For Reading Web Content
- Mark Boulton - covers "Design thinking, Web Delivery"
- Problog Design gives a good coverage of blog design, layout and useability.
- The Graphic Design Blog
- Pro Blogger Design Archives
- Web 2.0 How to Design Guide - gives examples of good design principles combined with the more modern look.
- Andy Budd's Well Designed CSS Sites
- Dev Lounge Design Articles
- Showcase sites - good browsing material for ideas. Take care here, although a design may be very visually appealing it may not suit the requirements for a blog. To save me entering a long list here please look at my del.icio.us bookmarks - Sueblimely Showcase
- LogoTwo - a dedicated Web 2 Showcase of logo designs
- Search Engine Watch
- Five Simple Steps to designing with colour Part 1,- Part 2, - Part 3 by Mark Boulton. This site is a also a wonderful illustration of using a clean simple blog theme and colorful, graphics in posts. The graphics are not only complementary to the subject matter of the posts but give the whole page its design appeal with no distraction from the content.
- The Value Of White Space by Netmechanic. A good explanation of active and passive white space and how to use it to good effect.
- Put Your Best Foot Forward: 19 Gorgeous Website Footers
- The Right Width for Your Blog by Michael Martin from Pro Blog Design on Problogger
- How to Create a Search Engine Friendly Website
- Making a Site Link Friendly- The turn-ons and turn-offs of a design.
- 45 Excellent Blog Designs from Smashing Pumpkin Magazine.
- How C.R.A.P is Your Site Design? by Mike Rundle on Vitamin