Like the creation of any successful artifact, a web site needs to evolve. It involves planning and preparation, and takes shape over a period of time. The more planning and forward-thinking we can do as designers, the better. Preparation helps us sort a project into nice, neat, orderly piles—defining specific goals along the way—and assists in foreseeing any potential problems that could set us back. In general, it’s safe to say that planning out the site’s creation process in detail makes everyone’s lives easier. Happy designers. Happy developers. Happy clients. All of them happy people, if not slightly shiny.
With our research complete, and a collection of sources of guidance and inspiration, it’s time to start planning. But where do we start? Stay away from that computer! Seriously—go and sit away from a computer (there are such places), get some paper and a pen, and start scribbling.
The structure of a site should come freely, with as little restraint as possible. In the beginning, keep it loose, and approach the task without being encumbered by exact technical concerns. They’re worth considering, it’s true, but the decisions at this stage should be based on what the site can become—rather than worrying about how specific form elements should be displayed.
As the plan for the site gradually evolves, you can begin focusing on certain areas. What should be the key message that hits the user when the site loads? What is the primary call to action? How many pages should there be? What should be on each page? What elements should be on all pages? How does each element relate to the goals of the web site? Each of these questions relate to information architecture; in terms of the Web, this is the science of organizing information in a useful and logical manner.
There are debates about how much of this we should do as designers, and indeed, Information Architecture is often a job in itself. However, as so many projects require us designers to pick up some of the reins of an information architect, it’s important that we get a grounding in the practice.
In my wild, heady days of web design youthfulness, I regularly made the mistake of starting a site design by jumping straight into Photoshop. In my defense, this was a case of the circumstances at hand: the company I was working for at the time often sprang projects on us that had almost no time frame.
Tone, Mood, and Atmosphere
Rounded corners and gradients might look great on some sites, but terrible on others. Your messy, grungy background image might sit well on a site for a heavy metal band, compared to, say, a dental practice. So we’ll be exploring the various moods and atmospheres we can create using changes in visual style.
On any web site, the goal of the visual style is to evoke a feeling in the end user—a feeling that ties in with the concepts and values of the company (or individual) the site is trying to promote
There’s very little you can do on a web site without involving some form of interaction. Reading through information still involves scrolling through the text, and fairly much everything above that involves interaction on a more complex scale: pushing buttons, submitting search queries, opening menus, navigating through multiple pages … the simple act of visiting a web site invariably means
that you’ll be engaging in an interactive experience.
What’s the most important thing on a web site? Well, the content, I suppose. But the content needs to be found, and here the user is aided in that most complex of missions by navigation elements. In this sense, then, the navigation is the most important interactive element of any web site. Navigation comes in many forms. The visual style applied to navigation can signify a type, as well as demonstrate a hierarchy to the user; and that hierarchy could be within the navigation itself, or
how it relates to other navigational forms on the page. We’ll look at different navigation styles in detail, such as hyperlinks, menus that collapse and expand, drop-down menus like the kind you’d find in your operating system, lists of pages, tabs—all helpful devices in guiding a user effectively
Forms can be extremely tedious to style, but taking the time to apply some polish so they look right—like Mint, can really make the difference between a slapdash job and a great design. It’s more than about changing the colors to match your site’s palette; aspects such as aligning input fields’ widths and positions to the grid can allow the user to scan through the form elements and find out how best to fill in the information. Taking inspiration from some of the best examples on the Web, we’ll design forms that use inline messages to give extra information to the user, guiding them through the form completion process. We’ll look at everything from the humble search form, to the newsletter sign-up, right through to the registration process on a more.
Audio and Video
With the popularity of sites like YouTube7 and MySpace,8 audio and video players have become commonplace on the Web. Although often restricted by the interaction systems they’ve inherited from offline media. Use sites like http://youtube.com/, http://myspace.com/, http://www.vimeo.com/.
In the grand scheme of things, computers have only been around for a minimal time. But the Web’s been around for an even shorter period, so most of our web interface basics have been inherited from the desktop applications to which we’ve become accustomed. As web applications become more complex, we’re finding online experiences that closely resemble desktop behavior: dragging and dropping, image viewing and manipulation, and—in the case of web sites at the cutting edge— experiences that don’t even feel like they’re happening inside a browser. Such as Microsoft PowerPoint and http://www.280slides.com/.
Let’s face it: this is the fun part. You’ve planned your project, prepared your research, sorted out your wireframes and information architecture.
Not only is this phase the most satisfying to every designer’s inner artist, but we really can relax a little and have some fun; we’ve planned everything up to this point so that we have a clear idea of the framework on which we can work our design magic
Layout and Composition
People talk about web design as a young medium, and while in many senses that’s true, they’re disregarding the immense history of design practices that the new mode inherits; hence, the key principles of web design are exactly the same as those of print. Traditional graphic design concepts such as layout, typography, and color theory remain just as relevant on the Web; all that’s changed is the constraints under which we work.
One key difference between design for print and design for the Web is the nature of the medium. A printed brochure has fixed dimensions, and every copy looks exactly alike. For the Web, the dimensions and layouts can vary—for example, the size of the browser window or the capabilities of the device they’re using—and the possible combinations are different for every user. Are they viewing the site on a 30-inch Apple Cinema Display or a mobile phone? What fonts do they have on their system? Are they running the latest version of the Flash Player? Can the user even see the web site, or are they relying on a screen reader to convey the site’s content? The truth is we’re unable to control exactly how our web site is experienced, and this point is reinforced to me every time I embark on a new project. But rather than treat this as an obstacle, we should embrace this flexibility as the chance to use the medium to its full advantage.
The Artistic Layer
Here’s another unfortunate truth: a lot of people see what web designers do as utterly pointless. Why bother creating a seamlessly repeating, background-image texture when you could have a flat color? Why add a subtle shadow beneath your content boxes when a simple 1-pixel border will do? Well, because we know how much difference it can make! That’s one of my main passions when it comes to design: adding that extra touch of TLC to a project can really improve a site’s look, regardless of how subtle it is. Attention to detail goes a long way towards creating a visually rewarding experience for people: it can be the distinction between good and great design.
In recent times, typography on the Web has developed a bit of a cult following, having been largely ignored by designers in the Web’s formative years. Relatively new techniques—such as image replacement, Flash text replacement, and CSS3’s improved support for including typefaces in your style sheets—are slowly opening up more methods for displaying type on the Web. We’ll be exploring some of the tricks we can use in our design to create fantastic effects, as well as what we can achieve with the most common, web-safe fonts for great looking type. Here we’ll examine traditional typographic techniques that are easy to implement, yet can help spice up some ordinary text. But rest assured, our focus extends beyond usability; there’s room for experimentation here, and I intend to use it.
It’s possible to achieve great design on the Web without the use of any imagery: well-structured grids, mindful use of color, and typographic treatments can be enough to create a beautiful look without an image in sight. However, imagery does play a key role in conveying a sense of atmosphere.
An image can take many forms: a photograph of a person for an About page, or an illustrative diagram to explain a concept on a blog post—these kind of images add visual value to content. But then there’s the presentational, or decorative aspect: for instance, an image might simply be a box shadow or a rounded corner—the kind of thing that enhances the visual styling of the page. Since this is a book about design, presentational images will be our main focus.
Convention versus Innovation
You know what really winds me up? Boring web sites. No, hang on—that’s wrong. What really winds me up are web designers who settle for the mundane, rather than attempt an uncommon path. It really is easy to design a great-looking web site that incorporates a few bold, original elements to set it apart from the crowd. I’m going to show you how having a little bit of courage to be different— despite how small—can really go a long way. It’s more than just about breaking the mold, though; after all, conventions are there for a reason.
While innovation helps to push things forward and move trends along, convention provides a framework of proven concepts that work; that is; systems that people recognize.
When you finish designing a web site and prepare for its development phase—whether it’s to be handled by you or another developer—what exactly is it you hand over? Your final design comp—short for comprehensive artwork—is your completed design, ready for a developer to build.
It’s not just files, though. Often it’s useful—and sometimes essential—that we hand over style guides along with the finished design. Style guides are also associated with brand, identity, and logo design, and are used to ensure that the brand is carried across all of the paraphernalia produced by a business, but they’re equally important in web design. Mostly, this is because you might be handing over the design to a third party who’ll actually be building the site—but on web sites where there are thousands of pages generated dynamically, style guides are like page templates: indications of how certain sections of the design can be applied to a page, regardless of the variable content. When it comes to interaction, style guides can also help describe a non-visual process.