The conception, birth, and first steps of an application named Charlie

Subscribe: Atom or RSS

The Craft of Web Design

by Alister Jones (SomeNewKid)

I would like to talk a little about the craft of web design. Well, I’d actually like to talk a lot about the craft of web design, but I will try to get my point across and then stop.

To start with, let’s distinguish craft from design. To paraphrase [name removed—see end of entry], we can say that design is the process by which we make tradeoffs to arrive at a solution. Poor design comes from making poor choices in the tradeoffs. Good design comes from making good choices in the tradeoffs.

To add visual interest to this weblog entry, let’s take the example of creating an advertisement for a new Marilyn Monroe movie, the title of which is An Office Affair. The design aspect of creating the advertisement involves making tradeoffs. The ad should be big, so that it can be seen. The ad needs to be small, to minimise its placement cost. The ad should provide lots of text, so the customer can determine if he or she wants to see it. The ad should provide little text, so the customer is intrigued. The ad should feature a large photo of Marilyn Monroe, as she is the bankable star. The ad should feature a small photo of Marilyn, to leave room for the text. These are all tradeoffs that must be made.

Let’s look at what must surely be a poor design, because it has made poor tradeoffs.

Let’s now look at what we might consider a good design. For the purposes of this weblog entry, it does not matter whether it is in fact a good design. Let’s just presume that it has made good choices in the tradeoffs, and is therefore good design.

Remember now, it is not important whether this actually a good design. We are just presuming that this is a good design, which is to presume that it makes the right choices regarding the size of the advertisement, the size of the photograph, and the amount of text.

While the above is good design, it is still not a good advertisement. While the right tradeoffs have been made, the result looks crappy. Why?

A fairly common sales pitch by advertisers is some variation of the statement, “First we make it right. Then we make it wonderful.”

Craft is what will move the above “right design” to the final “wonderful design.” Let’s have a go at crafting this advertisement without changing any part of its design (we do not change the size or placement of the photograph or the text). What I hope you will notice is that craft can make a significant difference to the advertisement, without changing its fundamental design.

First, let’s change the photography from being blocked to being etched.

Let’s now make the background black.

The photo now looks quite flat against the black ground. Let’s give it some oomph.

Next up, let’s change the typeface to one that is more classical.

To make the typography more graceful, let’s introduce the required ligatures. If you are not sure what a ligature is (and you did not click on the preceding link), the following image shows the changes.

With the support of ligatures, we arrive at the following.

Finally, let’s kern the letters.

Compare this final advertisement to the original.

Notice that the design (the size and placement of the photograph, and the size and amount and placement of text) has not changed at all, but the craft has changed the …

You know what? This is a terrible example. It is so bad that I have removed the name of person I was attempting to paraphrase, as the above example is a disservice to his description of what design is, and what it is not. However, this weblog entry taken me so long to put together that I don’t have the heart to trash it.

Can we just say that I put an enormous amount of value in the craft of web design? No detail is too small to be important. Fortunately, that vaguely ties in to the following weblog entry.

by Alister Jones | Next up: Lessons Learned

0 comments

----