![](https://csdnimg.cn/release/download_crawler_static/4641834/bg11.jpg)
2 The Principles of Beautiful Web Design
Layout and Composition 3
The Design Process
In a web-programming book I read recently, the author introduced a fictional scenario
to explain why readers needed to design a page layout and create a style sheet for the
example application. He basically said that the company web designer was off getting
inspiration from somewhere and wouldn’t be back until later in the year. It sounded as if
he was implying that designers are prone to flake out and go on vision quests for months
at a time, but I’m going to assume the author made that comment in an endearing way, and
introduce the same scenario.
Here are the hypothetical details of this scenario: Jim Smith of Smith
Services needs a web site. We have his business card and he’s eager to get
started. Unfortunately, the designer is out of town … wait, that’s not a
good excuse. Let’s say he was injured during a freak dairy cow stampede
while attending the South by South West Interactive (SXSWi) festival in
Austin, Texas. Yeah, that’s believable. Anyway, he’s out for a few months, and
you’re on your own. So where do you start? The actual process of developing
an entire site or web application includes a lot of steps, but the process of
creating a design comp boils down to only two tasks: discovery and
implementation.
Discovery
The discovery component of the design process is about meeting the clients and
discovering what they do. This may not feel like a “designy” task, but gathering
information about who your clients are and how they run their business is the only way
you’ll be able to come up with an appropriate and effective design.
Before you schedule your first meeting with your clients, take a few minutes to figure out
what they do and how they do it. If they’ve asked you to design a web site for them, they
may not currently have one, but Google them anyway. If you can’t find any information
about their business specifically, try to learn a little more about their industry before the
first meeting. Whenever possible, the first
meeting with a client should be an actual
person-to-person meeting. Sometimes, distance
will dictate that the initial meeting will occur
over the phone, but if the client is in town,
schedule a time to meet.
Keep in mind that this meeting isn’t about
impressing the client, selling yourself, or
NOTE What’s a Comp?
The word comp is an abbreviation of the phrase
comprehensive dummy, and is a term that comes from
the print design world. It’s a complete simulation of a
printed layout that’s created before the layout goes to
press. In translating this term to web design, a comp is
an image of a layout that’s created before we begin to
prototype the design in HTML.
NOTE What’s a Comp?
The word comp is an abbreviation of the phrase
comprehensive dummy, and is a term that comes from
the print design world. It’s a complete simulation of a
printed layout that’s created before the layout goes to
press. In translating this term to web design, a comp is
an image of a layout that’s created before we begin to
prototype the design in HTML.
TIP Client Meetings don’t
have to Take Place
in an Office
Even when I worked for a company
with a big office, I had some of my most productive
client meetings at a coffeehouse or over lunch. The
feasibility of this approach depends on the client. If
your contact doesn’t seem like the informal meeting
type, don’t suggest it; in many cases, though, it’s a
good way to make a business meeting more personal.
TIP Client Meetings don’t
have to Take Place
in an Office
Even when I worked for a company
with a big office, I had some of my most productive
client meetings at a coffeehouse or over lunch. The
feasibility of this approach depends on the client. If
your contact doesn’t seem like the informal meeting
type, don’t suggest it; in many cases, though, it’s a
good way to make a business meeting more personal.
selling a web site. The initial client meeting is
about communication. Try to listen more than
you speak, and bring a pad of paper on which
you can make notes. Do not bring a laptop.
Computers have screens, and people tend to
stare at them. If the client isn’t staring at the
screen the whole time, you will be as you write
your notes. If you must drag some technology
into the meeting, bring a voice recorder. In
my experience, though, a pad of paper is less
threatening to the often not-so-tech-savvy client.
Here are a few of the questions I like to ask in initial client meetings even if I’ve already
answered them myself via a search engine:
What does the company do?
What is your role in the company?
1
Does the company have an existing logo or brand?
What is your goal in developing a web site?
What information do you wish to provide online?
Who comprises your target audience? Do its members share any common
demographics, like age, sex, or a physical location?
Who are your competitors and do they have web sites?
Sometimes I start off with more questions than those listed here—use your imagination
and try to come up with some creative queries that will really give you more insight into
the client organization. If you’re a programmer, avoid the tech jargon. If you’re a designer,
avoid talking specifically about design. Sure, that may be all you’re thinking about, but
semantic markup, fluid and fixed layouts, and color schemes will likely mean very little to
the client. Worse still, these types of conversations can bring misguided design opinions
your way even before you get a chance to start thinking about the design yourself.
Implementation
The next step in the design process is to take what you’ve learned from the client and use
it to create a design. Regardless of the project, try not to get caught up in the technology
associated with building web sites—at least not at first. At this point, it shouldn’t matter
whether the site is going to comprise straight HTML, a template for a content management
system, or a Ruby on Rails application; the bottom line is that we have an interface to
1 This question is especially important if this person is going to be your main point of contact.
3561 20.0 Design1 3 27/2/07 3:02:58 PM