Kurt McKee

lessons learned in production

Hey there! This article was written in 2007.

It might not have aged well for any number of reasons, so keep that in mind when reading (or clicking outgoing links!).

Header design

Posted 24 February 2007 in design and website

I've been thinking about website design, and what kind of header I would want to have for my website. In the process of doing so, I've worked to identify what I think looks good on other websites, and how I could work to create a similar design.

Here are some examples of sites whose header design I enjoy (generally they are in order from least complicated to most complicated):

  • Callum McKenzie - A sparse (yet striking) text-only header.

  • Andy Wingo - Another sparse, text-only header.

  • Alvaro Lopez Ortega - The header and navigation elements are linked together well.

  • Chris Lord - A header with a small photo of himself superimposed.

  • Aaron Bockover - The most beautiful header, in my opinion, and one whose design I would like to have elements of. Uncomplicated and beautiful.

  • Matt Mullenweg - Although well done, the header is enormous and visually complicated. It forces the content completely out of sight at lower resolutions.

I decided to try and create a waveform like what appears on Aaron Bockover's site using Inkscape. I actually gained some new knowledge of Inkscape from just that effort. This is what I came up with:

A wave-like tendril with a slight
gradient

So those are some of my thoughts about a visual redesign of my site.

Update - Here's something I whipped up, although it's certainly not suitable as a header (yet?):

An example of a header I might use in the
future

I still have several shortcomings: I have no taste in color, and I have even less ability to choose acceptable fonts.