Fresher Styles for Web Designers: More Eye Candy from the Underground

217 Pages·16.305 MB·English

by  Cloninger, Curt

Fresher Styles
for Web Designers
More Eye Candy
from the
Underground
by Curt Cloninger
Fresher Styles for Web Designers
More Eye Candy from the Underground
Curt Cloninger
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at www.newriders.com.
To report errors, please send a note to [email protected].
New Riders is an imprint of Peachpit, a division of Pearson Education
Copyright © 2009 by Curt Cloninger
Project Editor: Rebecca Gulick
Editor: Jill Marts Lodwig
Production Editor: Hilal Sala
Compositor: Kim Scott, Bumpy Design
Indexer: Jack Lewis
Cover Designers: H I T Studio (Lina Grumm and Annette Lux)
Interior Designer: Mimi Heft
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec-
tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub-
lisher. For information on getting permission for reprints and excerpts, contact [email protected].
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has
been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any per-
son or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the
instructions contained in this book or by the computer software and hardware products described in it.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the
designations appear as requested by the owner of the trademark. All other product names and services iden-
tifi ed throughout this book are used in editorial fashion only and for the benefi t of such companies with no
intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey
endorsement or other affi liation with this book.
ISBN 13: 978-0-321-56269-2
ISBN 10: 0-321-56269-0
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
For my children, Caroline, Jordan, Robin, and James.
God has marvelous plans for you—plans to prosper you and
not to harm you, plans to give you hope and a future.
Y’all are precious to me and I couldn’t be any prouder.
This page intentionally left blank
Acknowledgments
Thanks to everybody who worked on this at UNC Asheville for perpetually challenging
book. Special thanks to my editor Jill Marts and inspiring me. Thanks to my wife, Julie, for
Lodwig who kept the book from becoming an being so freaking sexy. Finally, thanks to all the
academic treatise while still allowing it to be designers and artists whose work is featured in
clever. Thanks to my colleagues and students this book. You make the web a place I still want
in the Multimedia Arts & Sciences department to be.
v
Contents
01 Fresher Styles for a Changing Web . . . .3 04 Psychedelic Minimalist Style . . . . . . . . .71
Why Stir Things Up Again? . . . . . . . . . . . .11 Influences . . . . . . . . . . . . . . . . . . . . . . . . . .72
Permanence vs. Evolution . . . . . . . . . . . . .13 1960s Psychedelic Color Schemes . . . . . . . .72
A Different Approach to Teaching Design 14 The “Less Is More” Minimalist Mantra . . . . .72
The Myth of Pure Originality. . . . . . . . . . . . . .14 Characteristics. . . . . . . . . . . . . . . . . . . . . .73
Why Taxonomies? . . . . . . . . . . . . . . . . . . . . . .15 Bright “Screen” Colors for Navigation
The Myth of Function-Driven Design . . . . . . .15 Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
About The Styles. . . . . . . . . . . . . . . . . . . . . . .16 Cyan, Magenta, Yellow, and Black. . . . . . . . .78
Avoiding Parochialism and Inbreeding. . . . . .18 Neon Patterns as Ornamental Architecture. .83
Influences, Characteristics, and Uses. . . .19 Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
02 No Style. . . . . . . . . . . . . . . . . . . . . . . . . . .21 05 Dot Matrix Style . . . . . . . . . . . . . . . . . . . .89
Influences . . . . . . . . . . . . . . . . . . . . . . . . . .22 Influences . . . . . . . . . . . . . . . . . . . . . . . . . .90
Conceptual Art . . . . . . . . . . . . . . . . . . . . . . . .23 Characteristics. . . . . . . . . . . . . . . . . . . . . .91
John Cage’s 4’33’’. . . . . . . . . . . . . . . . . . . . . .25 Monospaced Type . . . . . . . . . . . . . . . . . . . . .91
Examples. . . . . . . . . . . . . . . . . . . . . . . . . . .25 Dashes and Dots for Borders and Visual
Texture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94
Indexhibit: A Tool for Transparency . . . . . . . .31
Compressed Layout . . . . . . . . . . . . . . . . . . . .97
We Make Money Not Art: The (un)Logo . . . .36
Animated, Dotted Logotype . . . . . . . . . . . . .99
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
03 Late(st) Modern Style . . . . . . . . . . . . . . .43
06 1996 Dirt Style. . . . . . . . . . . . . . . . . . . . .107
Influences . . . . . . . . . . . . . . . . . . . . . . . . . .44
Influences . . . . . . . . . . . . . . . . . . . . . . . . .108
Modernism. . . . . . . . . . . . . . . . . . . . . . . . . . . .44
1996 Personal Homepages. . . . . . . . . . . . . .108
Wolfgang Weingart . . . . . . . . . . . . . . . . . . . . .45
Custom Cars. . . . . . . . . . . . . . . . . . . . . . . . .110
Characteristics. . . . . . . . . . . . . . . . . . . . . .48
Bling Fashion . . . . . . . . . . . . . . . . . . . . . . . .110
Visible Hints of the Invisible Grid . . . . . . . . . .48
Characteristics. . . . . . . . . . . . . . . . . . . . .110
Geotectonic Typography . . . . . . . . . . . . . . . .56
Increased Hobbyist Control . . . . . . . . . . . . .112
Minimal Palettes . . . . . . . . . . . . . . . . . . . . . . .65
Modularization and Syndication. . . . . . . . . .117
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Glittery GIF Animations, Outer Space,
Tron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
vi FRESHER STYLES FOR WEB DESIGNERS
07 Corkboard Sprawl Style . . . . . . . . . . . .123 09 Hand-Drawn Analog Style . . . . . . . . . .167
Influences . . . . . . . . . . . . . . . . . . . . . . . . .124 Influences . . . . . . . . . . . . . . . . . . . . . . . . .168
Analog Corkboards. . . . . . . . . . . . . . . . . . . .124 Expressive Line Illustrations . . . . . . . . . . . . .168
Origami . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125 Hand-Drawn Vernacular Lettering . . . . . . . .169
Characteristics. . . . . . . . . . . . . . . . . . . . .125 Sketching and Doodling. . . . . . . . . . . . . . . .170
Unbounded Layout . . . . . . . . . . . . . . . . . . . .126 Characteristics. . . . . . . . . . . . . . . . . . . . .170
User-Modifiable Layout . . . . . . . . . . . . . . . .130 Illustrations and Embellishments. . . . . . . . . .170
Unfolding Layout (Spatial Flash). . . . . . . . . .133 Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 Wayfinding Markers. . . . . . . . . . . . . . . . . . . .174
Analog Textures. . . . . . . . . . . . . . . . . . . . . . .176
08 Fullscreen Fashion Style. . . . . . . . . . . .141 Animated Drawing. . . . . . . . . . . . . . . . . . . . .177
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Influences . . . . . . . . . . . . . . . . . . . . . . . . .142
Glossy Glamour Magazines . . . . . . . . . . . . .142
10 Style Matters. . . . . . . . . . . . . . . . . . . . . .181
Surrealism . . . . . . . . . . . . . . . . . . . . . . . . . . .142
Characteristics. . . . . . . . . . . . . . . . . . . . .143 The Web Still Awaits Invention. . . . . . . . .182
Fullscreen Photography. . . . . . . . . . . . . . . . .143 Web Designers Matter . . . . . . . . . . . . . . . . .182
White or Black Negative Space . . . . . . . . . .145 Usability Experts Don’t Always Matter. . . . .184
Unobtrusive Text . . . . . . . . . . . . . . . . . . . . . .151 Style Makes Life . . . . . . . . . . . . . . . . . . . . . .184
Shallow Site Depth . . . . . . . . . . . . . . . . . . . .154 The Craft of Web Design. . . . . . . . . . . . .185
Surrealistic Landscapes . . . . . . . . . . . . . . . .156
Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Endnotes . . . . . . . . . . . . . . . . . . . . . . . . .186
Figure Credits. . . . . . . . . . . . . . . . . . . . .188
Sites Featured in This Book . . . . . . . . .192
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
CONTENTS vii
THERE’S A DESTINATION
A LITTLE UP THE ROAD
FROM THE HABITATIONS
AND THE TOWNS WE KNOW
A PLACE WE SAW THE LIGHTS
TURN LOW
JIGSAW JAZZ AND THE
GET-FRESH FLOW
—BECK
01 FRESHER STYLES FOR A
CHANGING WEB
In 2001, I wrote a book called Fresh Styles interactive TV model)? I argued that the
for Web Designers: Eye Candy from the web would become both of these things
Underground. At the time, the dot-com and a dozen more that we could not yet
bubble was still relatively intact, band- envision, and of course it has.
width had increased enough to make
Macromedia Flash a viable web design During this time, I proposed that 10
option, and wars were raging in the design styles (Figures 1.1 through 1.10)
web design community over which best were pushing web design beyond the
practices would prevail. Would the web conservative, duotone, brochure-ware
become a minimal, text-centric channel approach of most corporate web sites.
of effi cient information delivery (the web These styles ranged from the hyper-
as database interface model), or would conservative HTMinimaLism (Figure 1.8)
it become a high-bandwidth interac- to the hyper-anarchic Pixelated Punk
tive entertainment channel (the web as Rock (Figure 1.6).
3