Dickson Fong

I’ve noticed that a lot people accompany their new websites with explanations about the design. So, here’s my own behind-the-scenes look at how dicksonfong.com version 1.4 was created. Some steps have been omitted for brevity, but you’ll get the gist of my work process.

Research

I believe the best work begins with a meaningful discovery and research process. But, to be honest with you, I questioned the value of this when creating my own website. I’m my own client, and the majority of my target audience is, more or less, similar to me. I read a lot of other designers’ blogs, and I’ve noticed that we’re all a bunch of geeks with similar computer habits who are interested in the same topics.

Of course, I’m also looking for a job, so I needed to make my site accessible and informative for hiring managers and private clients. I’m no expert in either audience, so I had to do my research. Putting my ethnographic skills to work, I interviewed some people and observed while they navigated several benchmark sites. My results were rather surprising, and, as always, I learned a few things about how content and design can affect users’ expectations. The research ended up not being a waste of my time at all, and it guided the rest of my design and development.

Human factors design

Depending on the amount of research data available, I might consolidate my data using affinity diagrams. For the purposes of this project, I decided not to use affinity diagrams or any other data consolidation techniques. The amount of data I collected wasn’t large enough to warrant the time, effort, or sacrifice of Post-It notes.

So, I went ahead and created my user profiles:

Some of you might know them as “user personas.†I prefer to make a distinction between profiles and personas, but it’s really just a matter of semantic preference.

Next, I created the global sitemap:

Rather than plan my sitemap with paper sketches, my sitemap began as a bunch of Post-It notes, each note representing an individual page. These notes were then freely arranged by hand until I had created an intuitive and efficient hierarchy of pages. This was then transferred to OmniGraffle and refined into pretty geometric shapes.

Graphic Design

Wireframes are an essential part of my toolbox. They help me save time. Without them, I’d be monkeying around in Photoshop and chugging out crappy layouts for the first several days. Here’s the wireframe of my blog’s homepage:

Five distinct wireframe layouts were created in OmniGraffle, spanning ten separate page categories. Unlike many websites that use vertical multi-column layouts, I decided to make my layout predominantly horizontal. This establishes a natural vertical rhythm by reducing noise and disjointed information. The computer is a horizontal presentation environment, and the design reflects this medium.

With the spatial layouts completed, I fired up Photoshop and began my comps of each major page category. I’ll show you three of the more notable revisions of the homepage design.

In revisions 1.0.x, the wireframe layouts were applied to an eight-column vertical grid.

The proportions of the header were determined by the Golden Ratio, as was the placement of the left-hand border of the four-column block of primary content. I had to make sure the content fits the layout.

In revisions 1.1.x, the early signs of typographic hierarchy have popped up.

Inspired by the ethos of the Swiss Typographic Style, I decided to use Helvetica and limit myself to three font sizes. I kept everything black and white so that I could focus on the relationships of form and space between elements.

In revisions 1.2.x, the design started taking on a distinct personality.

Revisions 1.3.x were pretty boring, so I’m skipping them. No soup for you.

The final version of the site is based on the Revision 1.4 series. Layout, typography, and color was further refined, and the text was aligned to an 18-pixel baseline grid. This baseline grid was selectively followed and broken depending on the vertical spacing between borders, headers, and body copy.

Development

This site uses WordPress 2.3.3 2.5 as its CMS. I usually begin with my own stripped down version of the Classic theme. However, Elliot Jay Stocks must have read my mind because he released his own stripped theme, Starkers, just several days before I began development. I decided to give it a try, and I think it made for an excellent starting point. Kudos to Elliot and much thanks!

I use several WordPress plugins to enhance the functionality and aesthetic of this site. They include:

The layout and typography is 99% em-based, so changes in text size will cause the layout and images to scale proportionally. Some em-based websites specify a max-width to avoid horizontal scrolling. Depending on the audience, I disagree. With widescreen 30-inch monitors running at 2560 × 1600 pixel resolution, I think it’s unreasonable to enforce a maximum width appropriate for a 12-inch 1024 × 768 screen. If someone wants to enjoy an unmolested layout in full 2560-pixel width, the design and structure of the website shouldn’t prevent them from doing so. Usability mavens might scoff at me, but, considering my primary target audience, I think the pros outweigh the cons.

As a final word, I believe strongly in web standards. Although code validation shouldn’t be a “measuring stick for greatness,†I do my best to use meaningful and lightweight XHTML and CSS, and this site is no exception. As usual, Internet Explorer hurt my feelings, but I’ve gotten used to the pain over the years.

I think that’s just about it. Maybe I’ll explain my process in further detail sometime in the future. In the meantime, I’d love to hear your feedback!

End

RSS comments for this post Previous post Next post Permalink