- •Taking Your Talent to the Web
- •Introduction
- •1 Splash Screen
- •Meet the Medium
- •Expanding Horizons
- •Working the Net…Without a Net
- •Smash Your Altars
- •Breath Mint? Or Candy Mint?
- •Where’s the Map?
- •Mars and Venus
- •Web Physics: Action and Interaction
- •Different Purposes, Different Methodologies
- •Web Agnosticism
- •Point #1: The Web Is Platform-Agnostic
- •Point #2: The Web Is Device-Independent
- •The 18-Month Pregnancy
- •Chocolatey Web Goodness
- •’Tis a Gift to Be Simple
- •Democracy, What a Concept
- •Instant Karma
- •The Whole World in Your Hands
- •Just Do It: The Web as Human Activity
- •The Viewer Rules
- •Multimedia: All Talking! All Dancing!
- •The Server Knows
- •It’s the Bandwidth, Stupid
- •Web Pages Have No Secrets
- •The Web Is for Everyone!
- •Swap text and code for images
- •Prune redundancy
- •Cache as Cache Can
- •Much Ado About 5K
- •Screening Room
- •Liquid Design
- •Color My Web
- •Thousands Weep
- •Gamma Gamma Hey!
- •Typography
- •The 97% Solution
- •Points of Distinction
- •Year 2000—Browsers to the Rescue
- •Touch Factor
- •Appropriate Graphic Design
- •User Knowledge
- •What Color Is Your Concept?
- •Business as (Cruel and) Usual
- •The Rise of the Interface Department
- •Form and Function
- •Copycats and Pseudo-Scientists
- •Chaos and Clarity
- •A Design Koan: Interfaces Are a Means too Often Mistaken for an End
- •Universal Body Copy and Other Fictions
- •Interface as Architecture
- •Ten (Okay, Three) Points of Light
- •Be Easily Learned
- •Remain Consistent
- •Continually Provide Feedback
- •GUI, GUI, Chewy, Chewy
- •It’s the Browser, Stupid
- •Clarity Begins at Home (Page)
- •I Think Icon, I Think Icon
- •Structural Labels: Folding the Director’s Chair
- •The Soul of Brevity
- •Hypertext or Hapless Text
- •Scrolling and Clicking Along
- •Stock Options (Providing Alternatives)
- •The So-Called Rule of Five
- •Highlights and Breadcrumbs
- •Consistent Placement
- •Brand That Sucker!
- •Why We Mentioned These Things
- •The year web standards broke, 1
- •The year web standards broke, 2
- •The year web standards broke, 3
- •The year the bubble burst
- •5 The Obligatory Glossary
- •Web Lingo
- •Extranet
- •HTML
- •Hypertext, hyperlinks, and links
- •Internet
- •Intranet
- •JavaScript, ECMAScript, CSS, XML, XHTML, DOM
- •Web page
- •Website
- •Additional terminology
- •Web developer/programmer
- •Project manager
- •Systems administrator (sysadmin) and network administrator (netadmin)
- •Web technician
- •Your Role in the Web
- •Look and feel
- •Business-to-business
- •Business-to-consumer
- •Solve Communication Problems
- •Brand identity
- •Restrictions of the Medium
- •Technology
- •Works with team members
- •Visually and emotionally engaging
- •Easy to navigate
- •Compatible with visitors’ needs
- •Accessible to a wide variety of web browsers and other devices
- •Can You Handle It?
- •What Is the Life Cycle?
- •Why Have a Method?
- •We Never Forget a Phase
- •Analysis (or “Talking to the Client”)
- •The early phase
- •Design
- •Brainstorm and problem solve
- •Translate needs into solutions
- •Sell ideas to the client
- •Identify color comps
- •Create color comps/proof of concept
- •Present color comps and proof of concept
- •Receive design approval
- •Development
- •Create all color comps
- •Communicate functionality
- •Work with templates
- •Design for easy maintenance
- •Testing
- •Deployment
- •The updating game
- •Create and provide documentation and style guides
- •Provide client training
- •Learn about your client’s methods
- •Work the Process
- •Code Wars
- •Table Talk
- •XHTML Marks the Spot
- •Minding Your <p>’s and q’s
- •Looking Ahead
- •Getting Started
- •View Source
- •A Netscape Bonus
- •The Mother of All View Source Tricks
- •Doin’ it in Netscape
- •Doin’ it in Internet Explorer
- •Absolutely Speaking, It’s All Relative
- •What Is Good Markup?
- •What Is Sensible Markup?
- •HTML as a Design Tool
- •The Frames of Hazard
- •Please Frame Safely
- •Framing Your Art
- •<META> <META> Hiney Ho!
- •Search Me
- •Take a (Re)Load Off
- •WYSIWYG, My Aunt Moira’s Left Foot
- •Code of Dishonor
- •WYS Is Not Necessarily WYG
- •Publish That Sucker!
- •HTMHell
- •9 Visual Tools
- •Photoshop Basics: An Overview
- •Comp Preparation
- •Dealing with Color Palettes
- •Exporting to Web-Friendly Formats
- •Gamma Compensation
- •Preparing Typography
- •Slicing and Dicing
- •Rollovers (Image Swapping)
- •GIF Animation
- •Create Seamless Background Patterns (Tiles)
- •Color My Web: Romancing the Cube
- •Dither Me This
- •Death of the Web-Safe Color Palette?
- •A Hex on Both Your Houses
- •Was Blind, but Now I See
- •From Theory to Practice
- •Format This: GIFs, JPEGs, and Such
- •Loves logos, typography, and long walks in the woods
- •GIFs in Photoshop
- •JPEG, the Other White Meat
- •Optimizing GIFs and JPEGs
- •Expanding on Compression
- •Make your JPEGS smaller
- •Combining sharp and blurry
- •Animated GIFs
- •Creating Animations in ImageReady
- •Typography
- •The ABCs of Web Type
- •Anti-Aliasing
- •Specifying Anti-Aliasing for Type
- •General tips
- •General Hints on Type
- •The Sans of Time
- •Space Patrol
- •Lest We Fail to Repeat Ourselves
- •Accessibility, Thy Name Is Text
- •Slicing and Dicing
- •Thinking Semantically
- •Tag Soup and Crackers
- •CSS to the Rescue…Sort of
- •Separation of Style from Content
- •CSS Advantages: Short Term
- •CSS Advantages: Long Term
- •Compatibility Problems: An Overview
- •Working with Style Sheets
- •Types of Style Sheets
- •External style sheets
- •Embedding a style sheet
- •Adding styles inline
- •Fear of Style Sheets: CSS and Layout
- •Fear of Style Sheets: CSS and Typography
- •Promise and performance
- •Font Size Challenges
- •Points of contention
- •Point of no return: browsers of the year 2000
- •Absolute size keywords
- •Relative keywords
- •Length units
- •Percentage units
- •Looking Forward
- •11 The Joy of JavaScript
- •What Is This Thing Called JavaScript?
- •The Web Before JavaScript
- •JavaScript, Yesterday and Today
- •Sounds Great, but I’m an Artist. Do I Really Have to Learn This Stuff?
- •Educating Rita About JavaScript
- •Don’t Panic!
- •JavaScript Basics for Web Designers
- •The Dreaded Text Rollover
- •The Event Handler Horizon
- •Status Quo
- •A Cautionary Note
- •Kids, Try This at Home
- •The Not-So-Fine Print
- •The Ever-Popular Image Rollover
- •A Rollover Script from Project Cool
- •Windows on the World
- •Get Your <HEAD> Together
- •Avoiding the Heartbreak of Linkitis
- •Browser Compensation
- •JavaScript to the Rescue!
- •Location, location, location
- •Watching the Detection
- •Going Global with JavaScript
- •Learning More
- •12 Beyond Text/Pictures
- •You Can Never Be Too Rich Media
- •Server-Side Stuff
- •Where were you in ‘82?
- •Indiana Jones and the template of doom
- •Serving the project
- •Doing More
- •Mini-Case Study: Waferbaby.com
- •Any Size Kid Can Play
- •Take a Walk on the Server Side
- •Are You Being Served?
- •Advantages of SSI
- •Disadvantages of SSI
- •Cookin’ with Java
- •Ghost in the Virtual Machine
- •Java Woes
- •Java Woes: The Politically Correct Version
- •Java Joys
- •Rich Media: Exploding the “Page”
- •Virtual Reality Modeling Language (VRML)
- •SVG and SMIL
- •SMIL (through your fear and sorrow)
- •Romancing the logo
- •Sounds dandy, but will it work?
- •Promises, Promises
- •Turn on, Tune in, Plug-in
- •A Hideous Breach of Reality
- •The ubiquity of plug-ins
- •The Impossible Lightness of Plug-ins
- •Plug-ins Most Likely to Succeed
- •Making It Work: Providing Options
- •The “Automagic Redirect”
- •The iron-plated sound console from Hell
- •The Trouble with Plug-ins
- •If Plug-ins Run Free
- •Parting Sermon
- •13 Never Can Say Goodbye
- •Separation Anxiety
- •A List Apart
- •Astounding Websites
- •The Babble List
- •Dreamless
- •Evolt
- •Redcricket
- •Webdesign-l
- •When All Else Fails
- •Design, Programming, Content
- •The Big Kahunas
- •Beauty and Inspiration
- •Index
152 WHO: Riding the Project Life Cycle: We Never Forget a Phase
Analysis (or “Talking to the Client”)
In this phase, you will meet with the client as often as necessary to fully understand what the client wishes to achieve with the project, to determine the best ways of meeting those needs, and to sell those solutions to the client. You’ll also continually interface with fellow team members to make sure these solutions make sense and can be executed.
Even before sitting down to brainstorm with the team, you must help the client articulate and clearly define the site’s goals. Is the site selling something? If so, what is being sold and to whom? Is the site intended to serve as a portal—if so, a portal to what and for whom? How will this portal differ from its competitors? If the idea stinks, don’t be afraid to say so. (First, of course, do enough homework to be certain that the idea really stinks and be prepared to offer the client a better idea.)
These responsibilities are not the web designer’s alone. Project managers, information architects, and marketing folks will be all over these meetings, but the web designer plays an essential part.
Indeed, the web designer is often the only person in the room who even thinks about the end user. The project manager is scheming ways to get the project done on time. The programmer is itching to try out some new technology or lazily conceiving ways to reuse code from the previous project. The technology director is fretting about server farms. The junior designer is nursing a hangover, and the client is lost in fantasies of market domination.
The web designer must help the client articulate objectives, both broad and narrow, to begin delineating the project’s scope. If this work is not done up front, it will haunt the project (and the whole team) later on.
In these early meetings, the web designer should be prepared to discuss possible site structuring options, technological baselines, and related issues. Even if these ideas change later in the process—and they will—the web designer must be comfortable articulating possible solutions “on the
fly.” This begins establishing a client comfort level, which will be essential throughout the process. If the client does not trust the web designer in the beginning of the cycle, the project will begin to self-destruct further down the line.
Taking Your Talent to the Web |
153 |
To summarize what we’ve just said: It is essential that the web designer possess the ability to understand a client’s marketing goals and to discuss potential issues and solutions with regard to design, site architecture, and technology.
To assuage your fears, the only part of this that is new (from your perspective as a professional designer) is that technological issues have been added to the equation—much as ink, paper stocks, and such are part of the traditional design equation. You will learn what you need to know in this book and on the job.
The early phase
Earlier, we urged you to get involved at the very beginning of the process. There is one phase in which you cannot participate. That is the client’s own analysis phase. You will not meet with your clients until they’ve sat down
first to figure out their needs. Ninety-nine times out of ninety-nine, those needs will change once you’re involved in the process.
How does the analysis phase operate? Just as in traditional design projects, it typically begins at the highest levels of detail and works its way down. In initial meetings, the focus is on broad strokes (such as, “We’re a community for young women.”). As the project progresses, lower-level decisions emerge (such as, “Should we put buttons or text labels on tertiary search results pages?”).
Though most of us are happiest alone in our cubicles, staring at our monitors and though many of us would rather undergo gum surgery than face another meeting, in many ways this phase is the most critical and creative part of the job. The movement, over successive meetings, from the general to the particular takes place on many levels and extends beyond issues of graphic design and technology.
Many times, even the most sophisticated clients have only a rudimentary and confused idea of what they wish to achieve. In their own realm, they are kings. On the Web, they are lost little children. If your background includes marketing experience and if you have made yourself knowledgeable about the Web, you can guide your clients away from vague or even nonsensical plans and toward worthwhile, achievable goals.
154 WHO: Riding the Project Life Cycle: We Never Forget a Phase
Take a simple project. Your client wants to sell videotapes online. He has lined up a supplier and a fulfillment house, and after a full two hours of online experience, he is convinced that his site will be “the Yahoo meets AOL of online videotape e-tailing,” whatever that means. Because his daughter, an art major, showed him the Monocrafts site (www.yugop.com), a brilliant and beautiful work done entirely in Flash, he figures his site should have “something like that” as well—oh, and a chat room. He read about those in an airline magazine while flying between Seattle and New York last year. He then describes the in-flight movie.
We wish we were making this stuff up, but it happens all the time. Not that this client is necessarily an idiot—he may be brilliant in his accustomed sphere of business. He may even read French literature and know fine wines. It’s just that the Web is a mystery to him, and he’s not used to admitting ignorance on any subject, even to himself. With tact and kindness, you and your team will guide him toward a workable plan. Six months from now, if you do your job well, he may have a fine site that includes movie reviews by Roger Ebert, streaming video clips of selected films, and a thriving movie lovers’ discussion area. But it can happen only if you work with him during the sometimes painful early analysis phase.
Defining requirements
Before all else, the web team must define two types of requirements:
■Technical. These include anticipated performance, bandwidth, security issues, and so on.
■Business. These include needs and constraints (having to accommodate first-time web users), as well as overall marketing objectives.
These requirements are summarized in documents with impressive-sound- ing names such as “Functional Spec,” “Requirements Document,” or the ever popular “Use Cases Document.” And the fun doesn’t stop there: parent documents beget baby documents—all of which will be used to guide initial development, and none of which are carved in stone. The more stuff you figure out, the more you realize you have yet to figure out. Digital projects kill more trees than the Daily News. You will be buried in paper. Read it, absorb it, and set it aside.
Taking Your Talent to the Web |
155 |
Happy families are all alike, but every web project is different. Generally, though, the purpose of early analysis is to define goals, determine constraints and requirements, and establish trust. Without goals, constraints, and requirements, it will be impossible to know if the project is on target. Without trust, you are looking at months of sheer Hell. With trust in place, you may still be looking at months of sheer Hell, but you have a better shot at enjoying the process and creating something useful.
If this sounds familiar, it should. The only difference between analysis in traditional design and analysis in web design is the medium itself. Instead of die-cuts or film transfers, you’ll be discussing bandwidth and browsers.
How it Works: Analysis in Action
Dishes Plus is a regional chain of successful retail outlets, known for its reasonable prices, wide variety, and “break proof” guarantee. Dishes Plus has decided to sell its product online. Naturally, you learn about the company’s existing business, its competitors, and its brand image before the meeting. You and your team help Dishes Plus define large goals (selling dishes), small goals (branching out into soup tureens), and in-between goals (establishing a bridal registry division).
You find out about the company’s audience (mostly women/mostly men, young/old, urban/rural) and sketch the impact that may have on technological and design considerations. If Dishes Plus has a loyal audience of people over 50, tiny type is out, and plug-in based multimedia is probably out as well. If selling is key, technological considerations leap to the forefront and should be examined carefully.
How many clicks from expression of interest to final sale? If the inventory is vast, a search engine will be needed. If Dishes Plus shoppers tend to spend hours poring over the goods, artificial intelligence may be called into play on searches (“If you like the Dixie Deluxe Classic Set, you’ll love the Colonel’s Tea Service”).
Does Dishes Plus anticipate an overseas market? You might need to consider building the site in several languages and using iconography to facilitate navigation by non-English speakers. Do details matter? You can’t assume that the client’s photography is up to snuff. You may need to budget for a good shooter, conversion from photography to digital images, and a database to store and serve the relevant images.