Layout and Composition
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 website. Usually, a business card speaks volumes about a company’s identity and can be used as a design inspiration.
Anyone, no matter what level of artistic talent, 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. So let’s start with the basics, and before long you’ll have the foundation necessary to design gallery-quality websites. (WEB DESIGN)
The Design Process (WEB DESIGN)
If you were to ask me to design a bridge, I’d have a lot of questions. Is it going to span the ditch in your front yard or Lake Pontchartrain? Can I use concrete and steel, or does the entire creation need to be constructed with toothpicks? I certainly would stop short of taking your business card at a bar and promising you the Golden Gate before knowing more about who you are and why you think you need it. On the other hand, if you commissioned me to create a sculpture for your garden, I’d probably feel a lot more comfortable aiming to create a unique and artistic piece.
The process of designing a website falls somewhere between bridge-building and sculpture. Yes, we want to create an individual site that’s aesthetically pleasing, but our highest priority should be to meet the needs of our client. These needs may be lofty and elaborate, or they might just be about making information available. If we fail to listen carefully, though, the entire project will come falling down, along with our reputation. The technical details of developing, hosting, and maintaining a website or application can be, well, technical. The process of creating a design comp, however, can be boiled down to just three key tasks: discovery, exploration, and implementation.
The discovery component of the design process is about meeting the clients and learning what they do. This may feel a little undersign-like, but gathering information about who your clients are and how they run their business is vital in coming up with an appropriate and effective design. (WEB DESIGN)
Before you schedule your first meeting with a client, spend some time researching their business. If they’ve asked you to design a website, they may currently be without one, but google them anyway. If you’re unable to find any information about their business specifically, try to learn as much as you can about their industry before the first meeting. Whenever possible, the first meeting with a client should be conducted in person. Sometimes, the distance will dictate that the meeting has to occur over the phone; but if the client is in town, schedule a time to meet face-to-face.
Keep in mind that this meeting is less about impressing the client, selling yourself, or selling a website than about communication, and establishing just what it is the client wants. Try to listen more than you speak, and bring a pad of paper on which you can make notes. If you bring a laptop or tablet with you to talk about website examples, limit the time spent using it. Computers have screens, and people tend to stare at them; hence, 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, use an app like iTalk Recorder for iPhone or Voice Recorder for Android devices to record your conversation—with the client’s permission, of course. In my experience, though, a pad of paper is less threatening and far less distracting 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 established the answer 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 of developing a website?
- What information do you wish to provide online?
- Who comprises your target audience? Do its members share any common demographics, like
age, sex, or physical location?
- Who are your competitors and do they have websites?
Do you have examples of websites you like or dislike?
- What kind of timeline do you have for the project and what is the budget?
If the project is to redesign an existing website, I also like to ask:
- What are your visitors usually looking for when they come to your site?
- What are the problems with your current design?
- What do you hope to achieve with a redesign?
- Are there any elements of the current site that you want to keep?
- How do you think your visitors will react to a new site design?
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’s 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 before you have a chance to start thinking about the design yourself.
The next stage of the design process is to take the information you’ve learned from the client back to your laboratory for analysis, dissection, and experimentation. You want to gain a grasp on all the information, products, and services they have to offer, and play around with how these should be arranged. Put yourself in the shoes of the website visitors and ask yourself what these people are looking for. If you’re thinking about buying a product, what do you need to know before you buy it? If you’re signing up for a service, where would you learn about the different offerings and which level of service you need? What is the clearest title possible for page x, and how many steps does it take to reach page y?
In the world of web design, this is the beginning of a process known as information architecture or IA for short. For expansive websites and complex web applications, information architecture is a career unto itself, but the guiding principles of this field can provide a solid foundation for even the smallest websites. For the exploration stage of our process, we want to focus on organizing the content and flow of the website into a structure we can design around.
Two of the most essential tools for this task are scrap paper (or a whiteboard if you have one) and a big pad of sticky notes. Make a list of all the bits and pieces of the website and start arranging them into groups and subgroups. These are likely to move around quite a bit, and that’s where the sticky notes come in handy. If you make a note for every section, subsection, and page of the site, you can arrange them on a wall in the order they’ll appear in your site’s navigation. You’ll want to avoid overwhelming the visitors with too many options, but you also don’t want to bury information too deeply within the site; that is, too many clicks away from the home page. There are no hard-
and fast rules for this activity; just make the information as obvious and as easy to reach as possible.
Now that we’ve thought through how we want to organize the information we’re working with, the implementation step of our design process begins with creating a layout. Regardless of the project, try to avoid being caught up in the technology associated with building websites—at least at first. At this point, it’s unimportant 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 design and a blank sheet of paper. “Paper?” That’s right, paper. Did you really think I was going to let you go back to your precious computer already? No way. Here’s why: it’s easy to
lose focus on the design if you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, and focus on how you want the final product to look. Now you might think that all good designers carry around fancy hard-bound sketchbooks in which they use expensive markers and paintbrushes to design Da Vinciesque renderings of potential web page layouts. For my part, I use a 79-cent spiral-bound notebook and any writing instrument I can find on my desk that still works.
I start out by sketching a few possible layouts. After I’ve produced a few, I decide on one I like, jump into Photoshop, and use the rectangle tool to block out the areas I’ve marked down on my paper. Once I’ve defined my layout, I experiment with foreground and background colors until I have a solid color scheme. I continue twiddling the Photoshop knobs and pushing around pixels until, finally, magically, I have a comp to show the client.
Simple, right? Okay, perhaps I skipped a few steps in that brief description. Honestly, though, when people ask me how I do what I do, they usually receive a similar explanation. The truth is that there are bundles of now-subconscious information from my past experience and those old college design and art classes that have helped me to define my own design process.
Learning how to design is like learning how to program. Some people have a bit of a knack for it, but anyone can learn. Just as there’s good code and ugly code, there is a good design and ugly design. Learning some of the principles and conventions associated with design will help you to understand the difference between the good, the bad, and the ugly, moving you towards establishing your own design process.
This post contain the content of book The Principles of Beautiful Web Design by Jason Beaird