01) Start Here

Blog Design is the art & science of delivering a message and perhaps exchanging ideas with others via the internet.

The online world allows the narrowest interests to be shared with the broadest base of the world’s web users. And vice versa: there could be a few who have your wide range of interests, but their physical location is many timezones away.

In essence, a good blog design enhances communication, whereas a bad blog design could negate it completely.


Although there is value in good communication itself alone, if your purpose is to showcase a product or service that you wish to sell, then the better your blog captures the interests of potential customers, the more opportunity you will have to pursuade them of the value of making a purchase. This demands that you attract attention first, and that is where the visual (and perhaps audio) elements of your blog come into play.

If you choose the right colors (to set the mood) and the proper fonts (to let the meaning of your words flow through better) then landing on your blog becomes an increasingly comfortable experience for the reader. The next thing you know, updating your blog frequently with fresh posts becomes incentivised, i.e., all of your hard work begins to pay off.

Look at blog design from five different angles:

  1. The Purpose of your communication.
  2. The Content of your blog.
  3. Its Appearance in terms of arrangement & layout.
  4. Navigation: where you want the reader to go to next and from where.
  5. Aspects of Technology: what is done by the code to produce the web page and facilitate dynamic interaction.

You can use the acronym PCANT for Purpose, Content, Appearence, Navigation, and Technology.

These areas of concern intersect in varying degrees. For example, the appearence of the content should reflect the blog’s purpose, and navigation is most dependent on the technology of hypertext.

P - Purpose: For example, to promote your product or service; to spread the word about a just cause in order to attract advocates and/or contributors; to showcase your hobby; or simply to exercise your creative webdesign talents.
C - Content: Advertising, Blurbs, Charts, Comments, Diagrams, Drawings, Graphics, Icons, Images, Labels, Maps, Photos, Phrases, Pictures, Quotes, Sketches, Text, Titles, Words, etc.
A - Appearance: Alignment, Balance, Clutter, Color, Columns, Fonts, Footer, Header, Layout, Padding, Sidebar, Spacing, Weight, Whitespace, etc.
N - Navigation: From a menu, finding the link that takes you there; or use the search feature.
T - Technology: Action, Attribute, Boolean, Class, CSS, Division, Element, Fieldset, Filter, Hook, HTML, Input, Function, Hypertext, Javascript, Loop, Method, MySQL, Parameter, Permalink, Permission, PHP, Selector, Slug, Tag, etc.

Codex Glossary