Wednesday, November 3, 2010

The Principles of Beautiful Web Design - Part 01

By Jason

article copied from - sitepoint.com



For many web developers, myself included, the most intimidating part of the design process is getting started. Imagine for a moment that you're sitting at your desk with nothing other than a cup of coffee and the business card of a potential client who needs a basic corporate web site. Usually, a business card speaks volumes about a company's identity, and could be used as design inspiration.

Unfortunately, that's not the case with the card for Smith Services in Figure 1.1. It's black and white, all text, no character, blah. Talk about a blank canvas! So, where do you go from here? You need a plan ... and you need to contact Mr. Smith. With some critical input from the client about what his company actually does, and by gathering information about the content you have to work with, you'll be able to come up with a successful layout and design.

1563_businesscard

Figure 1.1: A bland client business card

Anyone, no matter what level of artistic talent he or she has, can come up with a design that works well and looks good--all it takes is a little experience and a working knowledge of some basic layout principles. The book from which this article is excerpted, The Principles of Beautiful Web Design, covers each of these principles in turn, showing even the least design-oriented of us how to create beautiful, elegant, functional designs -- see the Table of Contentsdownload this article -- Chapter 1 of the book -- in PDF format to read offline. So let's get started with the basics and before long you'll have the foundation necessary to design gallery-quality web sites. for details. You can

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 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?
  • 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.

No comments:

Post a Comment