Sexy Web Design ebook free download
SEXY WEB DESIGN BY ELLIOT JAY STOCKS
Summary of Contents
SEXY WEB DESIGN BY ELLIOT JAY STOCKS
iv Sexy Web Design
by Elliot Jay Stocks Copyright © 2009 SitePoint Pty. Ltd.
Expert Reviewer: Jina Bolton Editor: Kelly Steele Expert Reviewer: Dan Rubin Indexer: Fred Brown Managing Editor: Chris Wyness Cover Design: Alex Walker Technical Editor: Raena Jackson Armitage Technical Director: Kevin Yank Printing History:
First Edition: March 2009
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by
any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical
articles or reviews.Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information
contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor
its dealers or distributors, will be held liable for any damages caused either directly or indirectly by the instructions contained
in this book, or by the software or hardware products described herein.Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, Victoria, Australia 3066
Web: www.sitepoint.com
Email: business@sitepoint.com
ISBN 978–0–9804552–3–6
Printed and bound in Canada
v About the Author
Always aspiring to create a unique look that’s out of the ordinary, Elliot Jay Stocks’s design is frequently featured
in online and offline publications. His work is showcased on various design inspiration web sites, where it’s
used as an example of how accessible web design can still look beautiful. Elliot's portfolio includes Automattic,
The Beatles, Blue Flavor, Twiistup, EMI Records, and Carsonified. Elliot is also known to write about design trends, issues, and techniques for industry-leading publications such as Practical Web Design and Computer Arts Projects. He can be seen regularly at design conferences around the globe taking to the stage as both a speaker and a workshop host. Elliot’s site can be found at http://elliotjaystocks.com/.About the Expert Reviewers
Jina Bolton resides and works in San Francisco as an interaction designer at Crush + Lovely. Jina is a co-author
of The Art & Science of CSS (Melbourne: SitePoint, 2007); she has also written articles for publications including
A List Apart, .net Magazine, SitePoint, and Vitamin, and has spoken at conferences around the world. Sheenjoys traveling and learning Italian, and digs sushi and robots—and it’s no coincidence that you’ll find her
website at http://sushiandrobots.com.
Dan Rubin is an accomplished user interface designer and usability consultant. He has over 10 years experience
as a leader in the fields of web standards and usability. Dan is a sought-after public speaker and author, most
recently penning Pro CSS Techniques (Berkeley: Apress, 2006) and Web Standards Creativity (Berkeley: friends
of ED, 2007). He was an expert reviewer for The Art & Science of CSS (Melbourne: SitePoint, 2007), and blogs
at http://superfluousbanter.org.About the Technical Editor
Raena Jackson Armitage made her way to SitePoint via a circuitous route involving web development, training,
and speaking. A lifelong Mac fangirl, she’s written for The Mac Observer and About This Particular Macintosh.
Raena likes knitting, reading, and riding her bike around Melbourne in search of the perfect all-day breakfast.
Raena’s personal web site is at http://raena.net.About the Technical Director As Technical Director for SitePoint, Kevin Yank oversees all of its technical publications—books, articles,
newsletters, and blogs. He has written over 50 articles for SitePoint, but is best known for his book, Build Your
Own Database Driven Website Using PHP & MySQL. Kevin lives in Melbourne, Australia, and enjoys performing
improvised comedy theatre and flying light aircraft.About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit
To Samantha—partly for your patience,
understanding, and support while I wrote evening
after evening, but mostly because you’re my source
of happiness and inspiration!
To Mum and Dad—you nurtured my creativity
from a very early age and you’ve always
encouraged me at every step along the way.
To the citizens of the Internet—who would’ve
thought a network of computers could allow me
to meet so many great friends, travel the world,
expose my work to millions of people, and indulge
in my passion for art on a daily basis.
Table of Contents
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
x
xi
xii
Chapter 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Deliverables Design Comps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Organizing Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Exporting Our Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Presenting Mockups in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Style Guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Motifs and Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Type and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Development Matters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Anything Else? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
xiii
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Foreword I like sexy things.
Now, hold on a moment—you can lower that eyebrow. I’m talking about objects that are beautiful and exciting—and that are quite removed from sex. I like it when I have a head-turning, jaw-dropping, breathtaking reaction from an item—whether it’s a 1957 Corvette Stingray, a MacBook Air, or the elegant flourish of a beautiful typeface’s ampersand. I’m talking about objects that are so well de- signed and downright stunning in both functionality and aesthetics that I stop and think, “Whoa—that’s sexy!” I’d like to just make one point clear. “Sexy” may be a four-letter word. But it’s a good four-letter word. An item that’s sexy is exciting. Appealing. Intriguing. Slick. It’s an Eames lounge chair. It’s that smokey bar jazz song. It’s the upscale sushi lounge with soft, dim candle lights accompanied by the raspy, dramatic crooning of Portishead. Whatever it is that you find to be sexy, pay attention to it. Why do you find it sexy? Is it simply how it looks or is crafted? Is it how it works, too? Chances are, if you think an object is sexy, it’s more than a pleasure to look at: it’s a joy to use as well.
“Whether you’re designing a book, a software application, a piece of hardware, or a web site … think sexy.”—Kathy Sierra So, what about sexy web design? That is, after all, the title of this book. Well, the way I see it, sexy web design is all about the details—every intricate, delicate particular. When I see a web site that pairs great typography with a solid, well-designed grid, and makes use of stunning imagery and ornamentation, I just have to check it out. And as a designer for the Web, this is precisely the kind of reaction I want for my own work. That’s where Mr. Stocks comes into play. Elliot is a consistent maker of objects that are sexy, when it comes to the Web. In April of 2008, I was flown out to London for an unique opportunity: it was a live, onstage Photoshop battle for the Future of Web Design conference put together by Carsonified. The girl’s team, consisting of Hannah Donovan (Creative Director at Last.fm) and myself, was against the boy’s team of Jon Hicks (Hicksdesign) and none other than Elliot Jay Stocks. While I was certain that Hannah would totally rock this competition, I was a little nervous at the thought of being in a Photoshop battle against Elliot. Thankfully, my nerves were calmed a bit thanks to the Belgian beer that Elliot provided for the four of us during the contest. But Elliot’s great taste extends beyond beer. Look at his online portfolio; you’ll see quite a range there—everything from gorgeous band and musician web sites to web industry-related conference sites; he’s even produced print design work, iconography, and illustrations. Though his portfolio is diverse, throughout his body of work you’ll find some common themes; elegant typography, in-
xvi
style. These web sites are both visually beautiful, and user-friendly. Elliot has an attention to detail that inspires many web designers around the world, including myself. Oh yeah, it’s sexy, too.
“The visual image is a kind of tripwire for the emotions.”—Diane Ackerman If you’re looking to begin creating sexy web sites yourself, then you’re in luck. In this book, Elliot takes you through a holistic web interface design process. He helps you understand what interface design means, and he goes over the research needed to create a product that is of the highest quality. Then, he takes you through important layers in web design: the structure, interaction, and aesthetics. Finally, he gives tips for great design deliverables to ensure that the design is built and maintained properly. Again, it’s all about attention to detail. Following Elliot’s process, you’ll create a great- looking, great-working web site … one you can call sexy. I hope you’re as excited as I am about this book. I feel so very fortunate to have been involved. It’s the book I wish existed back when I was starting out in web design a decade ago. Watching this book grow and develop from concept to outline to draft reminds me of the very design process written about within these pages. There’s a joy in watching an idea come to life. And when that web site or application idea becomes something beautiful and sexy—that’s when joyful creation becomes a truly thrilling passion.
Jina Bolton
Preface
One of the great things about the Web is that virtually anyone can become a web designer: the tools are relatively cheap, the creation is instant, and the exposure is global. Of course, this is both a blessing and a curse, the title designer being brandished too easily in some instances. Web design is a craft, and creating a site that is truly beautiful, usable, and—most of all—enjoyable, requires skill, knowledge of design principles, and a mind open to exploring new techniques.
Who Should Read This Book?
What makes a web designer? Can a beginner with their first copy of Dreamweaver qualify? Or does it have to be an industry professional with an established reputation in design? The answer is both, and everyone in between. If you’re responsible for the look, the feel, or the mood of a web site, you’re a web designer—and this book is for you.
Whether you’re completely new to web design, a seasoned pro looking for inspiration, or a developer wanting to improve your sites’ aesthetics, there’s something for everyone here. How? Because instead of trying to cover every possible area of creating a web site, I’ve focused purely on the design stage; that is, everything that happens before a single line of code is written.
However, great design is more than just aesthetics. Long before we open our graphics program of choice, we’ll be conducting research, dealing with clients, responding to briefs, sketching out sitemaps, planning information architecture, moving from doodles to diagrams, exploring different ways of interactivity, and building upon design traditions.
But ultimately, we’ll be finding out how to create web sites that look drop-dead gorgeous.
The SitePoint Forums 1 are discussion forums where you can ask questions about anything related to web design, development, hosting, and marketing. You may, of course, answer questions, too.
That’s how a discussion forum site works—some people ask, some people answer—and most people do a bit of both. Sharing your knowledge benefits others and strengthens the community. A lot of fun and experienced web designers and developers hang out there. It’s a good way to learn new stuff, get questions answered in a hurry, and just have fun. design critiques. It’s free to sign up, and it takes just a few minutes.
xviii This Book’s Web Site
No book is perfect, and we expect that watchful readers will be able to spot at least one or two mistakes before the end of this one. The Errata page on the book’s web site will always have the latest information about known typographical errors and updates. You’ll find the book’s web site at http://www.sitepoint.com/books/sexy1/. If you find a problem, you’ll also be able to report it here.
The SitePoint Newsletters
In addition to books like this one, SitePoint publishes free email newsletters, such as SitePoint
Design View, SitePoint Market Watch, and SitePoint Tech Times, to name a few. In them, you’ll
read about the latest news, product releases, trends, tips, and techniques for all aspects of web de- velopment. Sign up to one or more SitePoint newsletters at http://www.sitepoint.com/newsletter/.
Your Feedback
If you can’t find an answer through the forums, or if you wish to contact us for any other reason,
books@sitepoint.com
the best place to write is . We have a well-staffed email support system set up to track your inquiries, and if our support team members are unable to answer your question, they’ll send it straight to us. Suggestions for improvements, as well as notices of any mistakes you may find, are especially welcome.
Conventions Used in This Book
You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items:
Code Samples
Code in this book will be displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>
If additional code is to be inserted into an existing example, the new code will be displayed in bold:
body { background: #336699;
}
xix
A vertical ellipsis is used to highlight remarks inside the code examples:
<body> ⋮ This code remark doesn't need to be entered </body>
Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ➥ indicates a line break that exists for formatting purposes only, and should be ignored.
background: #FFFFFF url("../resources/headers/logos/ ➥banner-logo-600px.png") top left no-repeat; Tips, Notes, and Warnings Hey, You! Tips will give you helpful little pointers. Ahem, Excuse Me …
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as
extra tidbits of information.Make Sure You Always … … pay attention to these important points. Watch Out! Warnings will highlight any gotchas that are likely to trip you up along the way.
xx Acknowledgements
Thanks to everyone at SitePoint for making this book possible and for asking me to write it in the first place—especially Raena, who kept me focused and inspired with her great ideas and insight. Thanks to Jina and Dan for their expert reviews and for their continued friendship, even though they had to plough through my early drafts! Thanks to the magazine editors, event organizers, clients, and employers of the world who’ve helped raise my profile to the extent where I’m being asked to write books. I’m honored. Thanks to the talented designers working magic out there on the Internet; your wonderful work provides a constant source of inspiration, and has helped to make this book what it is. And, as hinted at by the dedication message, thanks to my wonderful girlfriend, Samantha, who put up with me writing the book on many a long evening, and gave me huge amounts of support, praise, and cups of tea.
Chapter
1 Interfaces are Sexy
I’m going to be honest. The reason I’m a designer is a simple one: I like making stuff look pretty.
There, I said it. You know my secret. I’ve laid myself bare and that’s a fair way to start a book. But web design goes beyond making things look pretty. It’s also about making them work. Rather than just concocting passive visuals, web designers create interfaces, systems that allow a person to interact with an object or system to achieve a goal. The best web designs give clear visual signals on how to go about the task.
Web sites—by their very nature—are all interfaces, even though some look more like plain, practical —like —are more decorative.
2 Sexy Web Design
2 Figure 1.1. The clean, simple interface of 37signals’
Figure 1.2. The 2008 Future of Web Apps MiamiInterfaces are Sexy
3 So what are we hoping to achieve when we design a web site? Well, my aim is to create an interface
that people find genuinely enjoyable to use. And although a web site—by its interactive nature—has to be used, I’m also interested in how it’s viewed. After all, we’re web designers, so we need to concentrate on the look. Functionality will form a significant part of the book—but the main focus will be on creating interfaces that look great while engaging the user.
Interfaces Interfaces are all around us, and once you know how to spot one, you’ll start to see them everywhere.
Think of you—the user—and an object that you need to control, or a goal that you want to achieve. In between the object and ourselves we have the interface: a simple method of achieving our goal. Although it’s not true to say that an interface is always simple, it’s true that an interface’s role is to simplify a task.
Users are People Too!
By the way, while we’re sitting here comfortably, right at the beginning of the book, let me add a
brief note on the term user. It’s one that fails to particularly appeal to me, given how it seems so
tech-centric. Keep in mind that a user is simply a human being, an average Joe, a passerby on the
street who might be a web-savvy tech-support guru, or an elderly lady who’s only just started using
a computer. People use web sites, so it’s a handy term, but just try to keep in mind that we’re talking
about regular humans, rather than some kind of machine-operating robot.Interfaces in the Real World
Before we leap on to the Web, let’s think about interfaces around us in the real world. This will help to coax us into the habit of analyzing the processes of interaction. We’ll start with a simple example: a plug. (Oh, and I wholeheartedly confess that I started with a plug because it was the
It can be helpful to break an interaction apart into its components: the user (this can be an object), the interface itself, feedback, and the goal.
User Interface Goal Feedback Laptop plug On and off switch on the Socket connected to mains On indicator wall power
I click the switch down, electricity surges through the cable to my laptop, and I’m able to carry on writing for another hour. Lucky me!
4 Sexy Web Design
usually have a little red indicator which appears when the power is turned on; you can see this in
Figure 1.3. Therefore, I know I’ve achieved my goal (if it’s not too big a term to call it that) because of the feedback provided by the indicator on the top of the depressed switch.Figure 1.3. The ON indicator shows me it’s on.Let’’re about to take a photo, there’s a bit more going on here in terms of interface. In fact, I’d say that my camera’s interface is built up of three mini interfaces: the function buttons on the hardware, which allow me to change the settings
■ ■ the LCD screen, which provides me with information on the camera’s settings
the shutter button, which is clickable, and provides me with audible feedback when I press it
■
Yet this more complex, layered interface still fits neatly into our system: User Interface Goal Feedback Me Function buttons + LCD screen A photo Sounds + visual indicators; the
- shutter photo is displayed
Interfaces are Sexy
5 Figure 1.4. Your standard digital camera (Photo: Canon) Interfaces on the Web
Now that we know how to break down an interaction into its parts, let’s look at some interactions on the Web. ou want the user to fill in your form, but you don’t want them to submit it without filling in the required fields. What’s more, you want to show and hide certain fields depending on what they input (for example, if someone answers that they have a car, you might want to show a drop-down menu that lists car manufacturers). The form interface provides us with feedback in the guise of a message or indicator.
User Interface Goal Feedback Me Required form fields + Optional form Form submission Submission message
6 Sexy Web Design
Figure 1.5. A form in actionIt’s not all about bare-bones functionality, though. Remember: this book is about sexy web design, so we’ll be looking at ways to build interfaces that are stunning as well as useful.
Web Design Goals
Let’s face it, the Web is often a fairly barren landscape: just think of its dull, text-based roots. In many respects, progress has been limited in the short time that’s passed since the Web’s conception. Web technologies have evolved and improved, but they’ve hardly been radical changes; the core elements of HTML are still at the heart of what we do, and as such there are myriad constraints in which we have to work. Even if you forget design centered on web standards and consider Flash, factors such as the limited viewport, or screen size, variable connection speeds, and restricted hardware capabilities suggest there’s major scope for improvement. Like all goals, successful and engaging web design is as much about overcoming technical challenges as it is about creating an attractive product. But technicalities shouldn’t hinder you from achieving your goal: to create a site that’s a joy to behold.
What Your Site Does
Web site designs are often presented as static images in the design stage, but by their very nature
Interfaces are Sexy
7 This sobering thought also reminds us that we should hold off from firing up Photoshop for a moment
and invest some time into the logic behind our web site. I’m not talking about logic in a technical, code-heavy sense; just that we should consider the processes involved in using a web site. At its basic level, that means questions like: “What is the major call to action for this site? What do we want the user to do?” At the other end of the spectrum, we have factors such as where to place elements or which photo to use.
How Your Site Looks
Let’s establish one standard rule here: The more attractive an item looks, the longer people will want to look at it.
Yes, that’s right: design an appealing-looking website and users are more likely to receive your client’s message, buy their product, engage in their community, or do what you want them to do. What’s 3
Now, there’s a reason to care about great design (and probably more valid than my “I like to make stuff look pretty” mantra).
Figure 1.6. The absolutely beautiful Fall For Tennessee web site8 Sexy Web Design Usability and Accessibility
With the Internet allowing our work to reach a global audience, we have to try and cater for a massive range of people: blind users, elderly users, underage users, users with slow Internet connections or older, unreliable machines, users with little knowledge of the way web sites work, technology enthusiasts who expect nothing short of cutting edge … the whole spectrum.
While part of a web site’s accessibility depends on the markup, quite a lot of it is governed by the design. Throughout the book, we’ll be taking both accessibility and usability into consideration throughout the design phase. If you keep your users in mind at all times, then the road to usability nirvana will be an easy one.
Design Process
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.
Research
Research is a stage that’s often misunderstood and often overlooked. When a project’s budget is tight, the research phase is almost certainly one of the victims, usually because it’s less tangible than the stages that make up the finished product. But it does still make up the final product! Without research, we’re flying blind: we’re jumping straight into the creative process without fully understanding the context in which we’re creating.
If you’re feeling a little daunted by this research concept, relax. It’s a stage that only needs to use up a small amount of time, and a lot of the preliminary client and designer discussions that happen all fall under the umbrella of research. The most common form research takes is asking the client to name web sites that he or she likes and dislikes. Questioning the client further, asking why they like or dislike those web sites—or elements of those sites—is even more helpful. In fact, in many instances, I’ve even found this to be as informative as a design brief! If the client can then explain how those preferences relate to their own brand values that they’re trying to portray—or the functionality they want their own customers to experience—then you have a design brief right there.
Interfaces are Sexy
9
of research that you can apply to your projects, but they’re all interchangeable. Keep it loose, keep your mind open, and prepare for the project in any way that feels natural and helpful to you, your colleagues, and your client.
Structure
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 shows you one of my very rough, early diagrams.
Figure 1.7. Very rough!10 Sexy Web Design Information Architecture
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 inform-
ation 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 Ar- chitecture 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.
Wireframing
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. The brief arrived in the morning and they needed the site live by the evening … of the previous day. But whereas some of these turned out to be relatively successful web sites, I would recommend that you first draw up decent wireframes—blueprints for your design—on paper before heading straight into creating full-blown designs. Sure, you can use Photoshop to create your —but I’d recommend starting off with good ol’ fashioned pen and paper. In the W’ll take you through a variety of techniques, starting with pen and paper, and finishing with some neat, computer-generated diagrams, ready to form the basis of your actual designs. We’ll be using Photoshop to create these, but if you’d rather use another application like Fireworks or OmniGraffle, that’s fine—choose whichever production process best suits your workflow!
Interfaces are Sexy
11 Figure 1.8. Wireframes start to take shape 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. We’ll look at what approaches to take, when to use them, and when to use alternatives. On any web site, the goal of the visual style is to evoke a feeling in the end user—a feeling that ties
12 Sexy Web Design
almost subliminal manner
Figure 1.9. The relaxed and elegant site for Dara’s GardenInteraction
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.
Navigation
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
Interfaces are Sexy
13
around your web site. Y
Figure 1.10. A variety of navigation styles on the Erratic Wisdom web siteForms
Forms can be extremely tedious to style, but taking the time to apply some polish so they look 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 complex web application.
14 Sexy Web Design
Figure 1.11. The preferences panel inside Mint illustrates the attention given to creating great-looking formsAudio and Video audio and video players have become
commonplace on the Web. Although often restricted by the interaction systems they’ve inherited from offline media, we’ll look at how these can work very effectively. We’ll also try to maximize the potential of these particular interfaces: how to make them as unobtrusive as possible and let 9
Interfaces are Sexy
15 Figure 1.12. The minimal but informative interface on the Vimeo player Desktop Behavior
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. The interface of as Microsoft PowerPoint.
16 Sexy Web Design
Figure 1.13. A desktop-like experience in the browser from 280 SlidesAesthetics
Let’s face it: this is the fun part. You’ve planned your project, prepared your research, sorted out your wireframes and information architecture … now it’s time to crack open the tins of paint and 11 start throwing colors at the canvas, Jackson Pollock style! 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. I must admit that I’ve sometimes been a little too eager to jump into fully-fledged Photoshop mockups without doing the groundwork. But it’s definitely worth the wait!
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 12 packs in plenty of information without becoming overwhelming or cluttered.
Interfaces are Sexy
17 Figure 1.14. Volunteer Lawn’s site layout has lots to see without getting lost amidst clutter 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 di- mensions 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 rein- forced 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. After all, my grandmother is unable to increase the font size on her local paper, but she can enlarge it on her newspaper’s web site. Working on the Web is our chance to serve up content flexibly, in a way best suited to our users.
A Change of Scenery
Designing for all kinds of different displays and capabilities can be quite a challenge. If you need
some respite, I heartily recommend that you do some print design every now and then. Compared
18 Sexy Web Design 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, re- gardless of how subtle it is. Attention to detail goes a long way towards creating a visually rewarding , such as the fabric patterns, stitched motif, and the neat display of a range of information. It really is that subtle!
Figure 1.15. Lots of visually pleasing enhancements on the Decor8 siteWe’re going to explore how we can apply these little touches to our web sites. How does your choice of color reflect the message you’re trying to convey? How can we evoke the right atmosphere with our design? Let’s consider how Art principles—yes, with a capital A—influence design. We’re going to give designs soul, personality, and character! Most importantly, you’re going to see how it’s possible for these artistic ideals to sit alongside web- centric concepts like functionality and usability. At times it’s inevitable that the two must compete, but we’ll be striving for the common ground. We’ll be looking at how contrast can improve legibility, how color and pattern can form consistency, and how mood and tone can be set through careful attention to the details.
Interfaces are Sexy
19 Typography
In recent times, typography on the Web has developed a bit of a cult following, having been largely 14 ignored by designers in the Web’ are at the forefront of this reinvigorated interest in the art form, and designers like Jason Santa Maria, whose
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 dis- playing 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. Because believe it or not, the concepts of sexy type and accessible text aren’t necessarily mutually exclusive! And why stop there? Let’s look at the exciting artifacts that have been produced by print designers and see how far we can take those on the Web.
15 Figur continually changing use of bold typography Images
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.
20 Sexy Web Design
Another example of imagery used frequently in web design is, of course, iconography. In a way, iconography is a combination of content and presentation: it adds meaning to content while dressing it up in a visually pleasing manner. Given that so much of a web site’s visual style can be controlled by imagery, and because images can be broken down into so many subgroups that perform different functions, we’ll be spending a significant amount of time in this area of web design.
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 differ- ent—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.