Category Archives: Blog Design

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

06) Navigation

Navigational Menus – position in the header or along left or right-hand side, or even in the footer of the site.

Street signs: Up & Horizontal

Who wants to talk to you?

Page Name should match what was clicked.

Scope of Search

  • whole site
  • part
  • whole Web


Breadcrumbs

about.com

Tabs: Every browser has them; how about your theme?

wordpress.org/themes/search/tabs

Dropdown Menus / Pulldowns: Good (conserve real estate) & Bad (too twitchy!)

EVALUATE

  1. Site ID?
  2. Page name?
  3. Welcome Blurb?
  4. Major sections/subsections?
  5. Local navigation?
  6. Location indicators?
  7. Search?

08) Cats & Tags

 

Arid Gardening

Categories are assigned to a post in a methodical, organized, and structured way.

Tags are a more casual way to relate these otherwise arbitrary posts to each other. Tags have no hierarchy; there’s no relationship from one Tag to another.

09) The Loop

virgin.zapmap.com

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
         get_template_part( 'content', get_post_format() );
   endwhile;
endif;
get_sidebar();
get_footer(); 
?>

twentyfifteen

10) Post Styles

For the purpose of an example, look at how the four themes display their posts in different ways.

First, the order of the elements are different:

sequence of post elements
sequence of post elements

And, the font styles are different:fourposts* To get the categories to show in 2014, it was necessary to add a new category. When all the posts are UNCATEGORIZED, no category will appear on any of the posts.

 

11) Purpose

Target Audience

  • Demographic
    • age
    • ethnicity
    • gender
    • income
    • location
    • marital status
  • Psychographic
    • attitudes
    • behaviors
    • hobbies
    • interests
    • lifestyle
    • values

BOUNCE RATE

  • abandon a very slow website
  • website froze or crashed
  • purchase could not complete on first attempt
  • tried to access a website that was down temporarily
  • purchase, apparently completed, actually didn’t go through

define, build, measure

iterate, iterate, iterate, etc., etc…

Shift your thinking from the requirements of the system & business to the experience of the user. ~Jared M. Spool