Designing a header

Posted October 22nd, 2008. Filed under Sandbox

For the purposes of this article, I am defining the header here as the top-most portion of the blog stretching from left to right across the entirety of the browser.  The header represents a site’s dashboard — this is where users will turn for the major static navigational elements they expect to find on every website.  A header should facilitate, in a very general way, the goals of a site while satisfying visitors expectations.  So, we have to ask the questions — what do we want to give our users?  What do we want to get back from our users?  My answers to these questions follow:

I want to give: relevant content on demand; easy and self explanatory yet attractive design

I want back: frequent and interested visitors and readers

Content on demand

My number one goal is delivering quality content to my visitors.  The first and most obvious way a blog delivers content to visitors is via actual blog posts.  Posts are the vehicle by which a blogger expresses something to a reader.  Many visitors, however, arrive at a blog not to passively listen (read), but to demand a piece of content.  This demand is usually met in one of two ways - archives and searches.

Archives are a topic I will cover in some depth later.  For now, I will just say that I do not think archives belong in the header of a blog design, so we can move on…

…to search.  Searching is the primary method visitors will use to locate content.  As such, a search box should feature prominently towards the top of a site’s design.  Jumping ahead a bit, the heat map image found a bit further along in this post suggests that the search box may be the only part of the header that visitors look at frequently.  (Teaser: I have an interesting idea on maximizing the utility of a header search box.) Styled search boxes are extremely popular, and while I do like many of these, I feel a search box needs to be instantly recognizable to visitors.  Remember, we are after simplicity and intuitiveness.  Therefore, for this design, I will slightly stylize the search box, but nothing extreme or radical.

Attractive design

Header images are, again, popular.  Properly used, a header image provides character and a sense of branding.  Header images do not, however, lend themselves to simplicity.  In addition, I am actually looking to minimize the use of graphical elements as design elements.  I will not use any major images or backgrounds in the header.  Text is preferable but can be a boring.  The compromise I will make is a small text image in the header.  Using an image instead of straight text will allow me to add a bit of character.

The decision to use only a small graphic in the header will allow me to honor another personal preference - maximized screen real estate dedicated to actual content.  I will shrink the header to as small as I can get it without sacrificing accessibility and whitespace.  Another advantage of a minimized header is that I can squeeze a little more of the content area into the all-important upper bar of the F-pattern.

F-pattern heatmap

F-pattern heatmap

Notice, the heatmap suggests most users don’t even look at the header in any meaningful way.  This is another good reason for a minimalistic header design.  I suspect visitors tend to ignore the header because they have expectations about what is in the header.  Familiarity allows for less attention to detail.  A good comparison is driving — when driving on unfamiliar roads, you tend to pay more attention to roadway signage; closer to home, you tend to ignore signs since you know what to expect (My father, an insurance agent, told me once that accidents tend to happen closer to home because of this same lack of attention to detail caused by familiarity with one’s surroundings).

Building a readership

I find it useful to measure readership through two metrics — hits (visits) and subscriptions.  Without speculating on exactly how many people actually use RSS, I’d like to think that hits happen because of a combination of quality content and a solid base of subscribers.  Since subscribers are such an important metric to me, I will feature subscription links and options in several locations.  The header will be one such location.

Updates

I’m working now to make changes to the design of http://sandbox.kwjr.com based on these ideas.  I’ve already applied the color scheme discussed in a previous post.

Note: This is the fourth in a planned series of posts detailing the step-by-step development of sandbox.kwjr.com.  For all such posts, follow this link.

Selecting a color scheme

Posted October 17th, 2008. Filed under Sandbox

I feel that color scheme selection should happen fairly early in the development process.  Many other design decisions are partially informed by color scheme selection - selection of other graphical elements, typeface and style, and use of whitespace are all decisions influenced by color scheme.

What’s your favorite color?

This is usually a great place to start.  Blogs are a very personal medium, and as such, your color scheme should reflect your personal preferences.  My favorite color is green (as anyone who has seen my desk will confirm).  Despite this, I somehow manage to always steer clear of greenish colors when designing.  Blue somehow seems a more natural and pleasant color for web design.  It’s also worth mentioning that in combination with its natural complimentary color, red, green design tends to feel overly-festive.  For this theme design, I’m actually going to go out on a limb, though, and use a green color scheme.

Greens galore

Greens galore

Next, of course, is which green to choose.  Choosing will require another design decision - what color accents and backgrounds do I intend to use?  I am quite fond of the dark gray / graphite color that has more-or-less replaced black in modern web design.  I will be using a graphite color here and there.  Concerning backgrounds, I am a definite advocate for light-colored backgrounds free of distracting patterns and fades.  White is generally a safe choice, but I find black text on a barely noticeable gray background to be quite readable and easy on the eyes.  Contrast, too, is important.  I find the popularity of gray text on a white background (and other such low-contrast combinations) in modern web design a disheartening trend.

Compare this short fragment of a sentence…

… with its continuation just below.

The darker text is absolutely easier on the my eyes (to be fair, this is a bit of an extreme example, but you get the point I’m sure).

So - we’ve got black text on a slightly gray background with graphite accents.  If this sounds pretty boring and monotonous, it’s because it is pretty boring and monotonous.  We’re missing the all important splash of color.  If you’ve ever watched HGTV, you know that the splash of color is absolutely essential to pulling a room together.  In this case, the room is a sandbox, the base color is green, and the color splash will be a shade of my sisters favorite color - purple (I did say I was going out on a limb here, didn’t I?).

color scheme

color scheme

Here’s our result.  #487048 (green), #5C4871 (purple), #2F302F (graphite), #EDEDED (gray).  Four colors, keeping in mind my goal of simplicity, is enough. Slight variations on these foundation colors will give me an ample pallette with which to work.

Edit: I won’t pretend I’m not nervous about that purple…

Note: This is the third in a planned series of posts detailing the step by step development of sandbox.kwjr.com.  For all such posts, follow this link.

Layout and design decisions

Posted October 14th, 2008. Filed under Sandbox

This is a quick list of the layout and design elements that need to be tackled during the development process.

I will be making decisions about each of these elements with the following three ideas serving as a foundation: every element of the design should be self explanatory, obvious, and intuitive; always consider the F-Pattern; simplicity is king.

  • 404 error page
  • Advertising
  • Badges, pins, icons, emoticons
  • Block quotes
  • Color scheme
  • Copyright
  • Date stamps
  • Footer
  • Fonts/Typefaces
  • Forms
  • Images
  • Menus and navigation
  • Mobile layouts
  • Pagination
  • Post meta data
  • Print layouts
  • RSS
  • Tag clouds
  • Tables
  • Textures and backgrounds

I’ll tackle these one at a time, though not necessarily in this order.  I’m drawing inspiration from other sites that I consider well designed and highly usable.  I will post screenshots and links where necessary to credit these sites and designers for their inspiration.

Note: This is the second in a planned series of posts detailing the step by step development of sandbox.kwjr.com.  For all such posts, follow this link.

First steps

Posted October 13th, 2008. Filed under Sandbox

In this post, I will discuss the preliminary design decisions involved in setting up a WordPress-powered blog.  I will not, however, take the time to discuss “WordPress Dashboard 101”.   If you’ve never seen or used the WordPress dashboard, here is a great place to start.

Why WordPress?

For me, step 1 was installing WordPress via the fantastic Fantastico script.  For most, the 5-minute installation will do the trick.  In either case, WordPress should be installed with all of the default options and the default theme enabled.

Every blogger has very individualized reasons for choosing one blogging platform over another.  I started blogging with Blogger, moved on to WordPress.com, Tumblr, and finally WordPress.org.  For me, a self hosted solution with the power and flexibility WordPress provides was the ideal solution.  So, WordPress is installed and ready to go.  Now to move from a “Hello World” installation to a blog.

Theming WordPress

Kubrick, WordPress’ default theme, is quite nice.  It is simple, minimalistic, and it presents text posts in a very legible and pleasant fashion.  Unfortunately, as a default, Kubrick was once overused in the extreme.  While this is no longer the case (Kubrick blogs are pretty rare in my opinion), very few bloggers make the concious decision to stick with Kubrick.  The vast majority of bloggers make Step 2 of the WordPress process the hunt for the perfect theme.  A small percentage of those theme hunters make the decision to install one of the many Sandbox themes and build something unique and personal essentially from the ground up.  It is with these brave few that I’m hoping to classify myself.  My Sandbox is here.

Planning

The WordPress codex suggests following this basic formula for planning a blog.

Answer the following questions:

  1. What am I going to do with this?
  2. Who is going to read this?
  3. What kinds of information will I be posting?
  4. Why am I doing this?
  5. Who am I doing this for?
  6. How often am I going to be posting and adding information?

Now, compile this information into a paragraph so it looks like this:

This website will be dedicated to X, Y, and Z, and cover the topics of A, B, and C. The audience will be __________ ________________ _______. I will be adding posts every _____________ about ________ _______ ______________.
I am doing this because _____________ _____________ __________________.

Here are my results:

This website will be dedicated to the things that interest me and things that I’m working on and cover the topics web design, open source software projects and communities, and things of a more personal nature such as my favorite music, movies, websites and blogs, etc.  The audience will be friends, coworkers, colleagues in various communities of which I am (or will be) a member, and users of the websites and software projects in which I am involved.  I will be adding posts as often as seems necessary to remain relevant and on-topic without posting filler and fluff.  My hope is that this means posting at worst 5 times a week about all of the aforementioned topics.  I am doing this because I am involved at a core level in projects that I will post about and I, therefore, hope to have valuable and timely information to share.  I am also doing this because it is a means of sharing with my friends and colleagues what is going on with my personal and professional pursuits.

This mission statement of sorts will likely become my “About” page.

Configuring WordPress

My first configuration step will be creating Categories.  I intend to devote a separate post to this topic, but for now, here is some good reading material.

Spam prevention is step two for me.  I’m going to put up a few test posts, and even though they are only test posts, I don’t want them tainted by spam.  WordPress comes with the Akismet plugin installed by default.  Akismet is certainly effective and many users tend to stick with it.  Spam Karma 2 is the other popular spam catching plugin.  Akismet is occasionally accused of generating false-positives, so I’ll go with Spam Karma 2.  Either choice is fine, though.  Some bloggers choose to use both.  I see this as overkill, but it certainly won’t hurt much beyond comments taking slightly longer to successfully submit.

The next major consideration is deciding what other plugins to install.  The anti-spam plugin is important enough that Akismet is the only functional plugin that comes preinstalled with WordPress (ignoring Hello Dolly, of course).  There are over three thousand other plugins that can be used to add virtually any desired functionality to a WordPress installation.  My approach to plugins is that they should only be installed as needed to facilitate a specific design decision.  I have not yet reached the “design decision” stage, so I will install no further plugins for now.

Other settings are completely a matter of personal choice and taste - blog title, tagline, permalink style, etc.  After setting up these basics, you are all set and ready to blog!

Note: This is the first in a planned series of posts detailing the step by step development of sandbox.kwjr.com.  For all such posts, follow this link.