What do you think?
Rate this book
Web Style Guide: Foundations of User Experience Design
A classic reference book on user interface design and graphic design for web sites, updated to reflect a rapidly changing market
Consistently praised as the best volume on classic elements of web site design, Web Style Guide has sold many thousands of copies and has been published around the world. This new revised edition confirms Web Style Guide as the go-to authority in a rapidly changing market. As web designers move from building sites from scratch to using content management and aggregation tools, the book’s focus shifts away from code samples and toward best practices, especially those involving mobile experience, social media, and accessibility. An ideal reference for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
Consistently praised as the best volume on classic elements of web site design, Web Style Guide has sold many thousands of copies and has been published around the world. This new revised edition confirms Web Style Guide as the go-to authority in a rapidly changing market. As web designers move from building sites from scratch to using content management and aggregation tools, the book’s focus shifts away from code samples and toward best practices, especially those involving mobile experience, social media, and accessibility. An ideal reference for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
408 pages, Paperback
First published January 1, 1999
23 people are currently reading
160 people want to read
About the author
Patrick J. Lynch
12Ìýbooks3ÌýfollowersPatrick J. Lynch is an author, illustrator, photographer, and artist. Lynch retired from Yale University after 45 years as an interactive media designer, medical illustrator, biomedical and scientific photographer, video producer, and for the past 30 years a director of media and communications departments, and a designer of interactive multimedia teaching, training, and informational software and Web sites.
Lynch has won over 35 national and international awards for his medical illustration, publications, and software design, including a 2012 National Outdoor Book Award, the 2005 Pirelli INTERNETional Awards for Best Overall multimedia teaching site, and best site from higher education, the 1992 Best-in-Show Award from the Health Sciences Communications Association and a Gold Medal, Silver Medal and Award of Excellence in the international INVISION Multimedia Awards.
Lynch has authored and illustrated eight books, and over 100 professional papers, magazine articles, and book chapters. He has been a consultant and invited speaker on web design and web communications issues to many universities, government agencies, corporations, and non-profits groups, and regularly does talks, workshops, and professional papers on communications management, biocommunications, academic computing, medical illustration, biomedical visualization, and web strategy and production management.
In 2017 Yale University Press published his latest book, "A Field Guide to Long Island Sound," a comprehensive guide to the environmental history, natural environments, plants, and animals of the Sound.
In 2012 Yale University Press published "A Field Guide to the Southeast Coast & Gulf of Mexico," co-authored with Noble S. Proctor. In 2012 the Guide won the National Outdoor Book Award for field guidebooks. Previous National Outdoor Book Award winners include Farley Mowat, Robert Michael Pyle, David Attenborough, Roderick Nash, Richard Bangs, and Aldo Leopold.
In January 2016 Yale University Press published the fourth edition of the best-selling "Web Style Guide," co-authored with user experience and accessibility expert Sarah Horton, User Experience Strategy Lead at the Paciello Group. With over 225,000 copies of previous editions in print the "Web Style Guide" is one of Yale University Press’s best-selling books, and the Guide has been translated into nine international editions, including Czech, French, German, Italian, Japanese, Korean, Russian, and several Spanish-language editions. Reviewer Edward Tufte called the book "a style guide for the interface with real long-run value," and the New York Times called the "Web Style Guide" "an Elements of Style for the Web."
In 2005 Yale University Press published "A Field Guide to North Atlantic Wildlife," which Lynch co-authored and illustrated with his frequent collaborator, the late Noble S. Proctor. This classic field guide contains over 100 full-color plates illustrated by Lynch of over 300 species of ocean wildlife.
His book "Manual of Ornithology," co-authored with Noble S. Proctor of Southern Connecticut State University, was published by Yale University Press in 1993. The Manual has won several national awards for editorial and design excellence, and is one of the most widely used texts in undergraduate and graduate ornithology courses.
Lynch has won over 35 national and international awards for his medical illustration, publications, and software design, including a 2012 National Outdoor Book Award, the 2005 Pirelli INTERNETional Awards for Best Overall multimedia teaching site, and best site from higher education, the 1992 Best-in-Show Award from the Health Sciences Communications Association and a Gold Medal, Silver Medal and Award of Excellence in the international INVISION Multimedia Awards.
Lynch has authored and illustrated eight books, and over 100 professional papers, magazine articles, and book chapters. He has been a consultant and invited speaker on web design and web communications issues to many universities, government agencies, corporations, and non-profits groups, and regularly does talks, workshops, and professional papers on communications management, biocommunications, academic computing, medical illustration, biomedical visualization, and web strategy and production management.
In 2017 Yale University Press published his latest book, "A Field Guide to Long Island Sound," a comprehensive guide to the environmental history, natural environments, plants, and animals of the Sound.
In 2012 Yale University Press published "A Field Guide to the Southeast Coast & Gulf of Mexico," co-authored with Noble S. Proctor. In 2012 the Guide won the National Outdoor Book Award for field guidebooks. Previous National Outdoor Book Award winners include Farley Mowat, Robert Michael Pyle, David Attenborough, Roderick Nash, Richard Bangs, and Aldo Leopold.
In January 2016 Yale University Press published the fourth edition of the best-selling "Web Style Guide," co-authored with user experience and accessibility expert Sarah Horton, User Experience Strategy Lead at the Paciello Group. With over 225,000 copies of previous editions in print the "Web Style Guide" is one of Yale University Press’s best-selling books, and the Guide has been translated into nine international editions, including Czech, French, German, Italian, Japanese, Korean, Russian, and several Spanish-language editions. Reviewer Edward Tufte called the book "a style guide for the interface with real long-run value," and the New York Times called the "Web Style Guide" "an Elements of Style for the Web."
In 2005 Yale University Press published "A Field Guide to North Atlantic Wildlife," which Lynch co-authored and illustrated with his frequent collaborator, the late Noble S. Proctor. This classic field guide contains over 100 full-color plates illustrated by Lynch of over 300 species of ocean wildlife.
His book "Manual of Ornithology," co-authored with Noble S. Proctor of Southern Connecticut State University, was published by Yale University Press in 1993. The Manual has won several national awards for editorial and design excellence, and is one of the most widely used texts in undergraduate and graduate ornithology courses.
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 19 of 19 reviews
December 19, 2011
Web Style Guide is not a bad book by any means but there's little reason to read anything over a decade old on web design. While some pieces are timeless–I found the opening chapter on project management to be immensely useful, for instance–there's simply too many references to outdated technology or problems that mar the work's applicability. It would be wiser to consult the web itself or a more recent O'Reilly volume on the same topic.
December 18, 2010
Great info for novice website creators.
June 16, 2021
Not many books on topics related to the Internet are in their fourth edition. Around since the 1990s, Web Style Guide is an exception, and its contents illustrate why. It offers in-depth examinations of various elements of user experience. Much like traditional style guides like the Chicago Manual of Style, this work provides a comprehensive, one-stop treatment of what designers need to know to make use of websites.
While being comprehensive, this book profoundly offers readers with challenges that take a lifetime to master. For instance, within 35 pages, the chapter on typography contains a summary of the field over hundreds of years. Other chapters intelligently tie to traditional design concepts and illustrate why web design is slightly but importantly different than printed paper.
Understanding how and why things have evolved because of technology especially helped me as a software developer. Some books are too low-level in computer languages to grasp design trends. Likewise, other books on design style focus on artistic trends to the neglect of technological innovation. This book integrates the two and focuses on how the innovation drives the style. For instance, discussion on relatively new retina displays show how assumptions about screen size change visual planning.
Of course, the world has changed since 2016. I write this five years later in 2021 and notice that the last two chapters (respectively on images and video) are already somewhat out of date. I hope the publishers continue to update this guide in a fifth edition sometime to allow it to stay current.
This style guide is written in plain English for designers to take advantage of. Computer programmers still can benefit from understanding what others on the team are explaining. Also, those designers � who are not coders � can and should read this book as it provides a basic understanding of the technological trends driving the team of web designers. Artisans can also grasp how physical constraints can change the process of production.
This book fills a need for a style guide for the web. For the above reasons, editors, developers, graphic designers, and IT managers can all benefit from reading this guide. Websites are often put together in an ad hoc manner that, for better or for worse, imitate each other. Lynch and Horton provide some helpful and reasoned depth to the practice. This has the potential to grow into something evermore timeless, and I hope it succeeds in that task as it moves into its third decade in production. The web is here to stay, and Lynch and Horton make sure that style will be present as well.
While being comprehensive, this book profoundly offers readers with challenges that take a lifetime to master. For instance, within 35 pages, the chapter on typography contains a summary of the field over hundreds of years. Other chapters intelligently tie to traditional design concepts and illustrate why web design is slightly but importantly different than printed paper.
Understanding how and why things have evolved because of technology especially helped me as a software developer. Some books are too low-level in computer languages to grasp design trends. Likewise, other books on design style focus on artistic trends to the neglect of technological innovation. This book integrates the two and focuses on how the innovation drives the style. For instance, discussion on relatively new retina displays show how assumptions about screen size change visual planning.
Of course, the world has changed since 2016. I write this five years later in 2021 and notice that the last two chapters (respectively on images and video) are already somewhat out of date. I hope the publishers continue to update this guide in a fifth edition sometime to allow it to stay current.
This style guide is written in plain English for designers to take advantage of. Computer programmers still can benefit from understanding what others on the team are explaining. Also, those designers � who are not coders � can and should read this book as it provides a basic understanding of the technological trends driving the team of web designers. Artisans can also grasp how physical constraints can change the process of production.
This book fills a need for a style guide for the web. For the above reasons, editors, developers, graphic designers, and IT managers can all benefit from reading this guide. Websites are often put together in an ad hoc manner that, for better or for worse, imitate each other. Lynch and Horton provide some helpful and reasoned depth to the practice. This has the potential to grow into something evermore timeless, and I hope it succeeds in that task as it moves into its third decade in production. The web is here to stay, and Lynch and Horton make sure that style will be present as well.
October 8, 2018
Complete web-designer's theoretical manual on web usability, design, and analytics.
Delves into the nitty-gritty of the endeavor itself to uncover and teach its reader the iniquities of the web itself. This book is definitely not for beginners or the faint hearted, it does explain nuanced topics that, unless you have a familiarity with creating web pages or setting up website (i.e. Wordpress) are not very useful.
Contains many, many intensively beautiful diagrams and illustrations to bring to life the articles and data. Very nice book for the tech geeks of the world.
Delves into the nitty-gritty of the endeavor itself to uncover and teach its reader the iniquities of the web itself. This book is definitely not for beginners or the faint hearted, it does explain nuanced topics that, unless you have a familiarity with creating web pages or setting up website (i.e. Wordpress) are not very useful.
Contains many, many intensively beautiful diagrams and illustrations to bring to life the articles and data. Very nice book for the tech geeks of the world.
February 2, 2018
This is a good primer for those interested in getting into user experience design.
September 10, 2021
A practical, high-level resource that covers a wide variety of topics related to user experience (UX) design for the Web, including strategy, information architecture, site structure, page structure, interface design, graphic design, typography, images, and video. Because it addresses so many topics, it doesn't go very deep into any of them.
It explains both theory and practice, giving many examples. It cites many experts in web design, UX design, and content strategy.
Notes
Strategy
Project charter sections
� Purpose: what purpose does the product serve?
� Goals: what outcomes does it need to achieve?
� Target audience: whom does the product appeal to and work for?
� Success indicators: how will you know you have achieved project goals?
� Strategies: what approaches will help to realize the goals?
� Tactics: what activities might help to realize the strategies?
Attributes of good UX
� Learnability: first-time users can quickly learn how to use the site
� Ease of orientation: users can navigate easily
� Efficiency: users can quickly perform tasks
� Memorability: users can easily remember how to use the site
� Accessibility: users with disabilities can use most of the site
� Error forgiveness: users don't often make mistakes on the site, and the site is forgiving of them
� Delight: users typically enjoy using the site
"A concise, high-quality site is much better than a big contraption full of broken links."
Prefer the standard to the offbeat. Favor tried-and-true web conventions, and save creativity for content and features.
Do visuals last; form follows function.
Avoid gimmicky tech fads. Don't add them to make sight more interesting; use content and features to do that.
Make content easy to scan, with headers, subheads, lists.
Use active voice.
Process
2/3 of software features are never or rarely used.
Project development life cycle
1. Site definition and planning
� Define goals, objectives for site
� Define scope of content, functionality, tech
2. Content development
� Inventory existing content, identify needs for new content
� Create content
� "Content development is the hardest, most time-consuming, and most consistently underestimated the part of any website development project."
3. Information architecture
� Define organizational structure of site
� Build a small prototype of parts of site to develop and test navigation and UI
4. Site design
� Create graphic design standards
� Create graphic, audio, video content
� Create text content
� Develop code
� Optimize for search engines
5. Site construction
� Build pages, enter content
� Test with users
6. Tracking, evaluation, and maintenance
� Review analytics
� Regularly check visual and functional aspects of site
� Regularly check content
� Regularly check links
� Regularly back up site
Continually improve site with small, incremental changes, rather than periodic large redesigns.
"Simple is fast, simple is cost-effective, and simple is almost always easier to use and maintain."
Keep content as concise as possible, and aggressively prune unneeded or outdated content.
Information Architecture
Users prefer broad, shallow top-level navigation (more options) over narrow, deep navigation (fewer options).
"Hamburger menu" icon (�) is called "trigram" or "navicon."
Navigation inside bars usually go on the left, but can go on right.
Try to put critical info in the top 600 pixels (above "the fold"), but don't worry too much about it, because users scroll.
Homepage elements
� Identification
� Navigation
� Timeliness (or content focus)
� Tools (search, directories)
Users prefer menus of at least 5-7 links, and prefer a few pages of organized choices over many layers of oversimplified menu pages.
Interface Design
About 2/3 of users prefer to initially browse a site; about 1/3 prefer to initially search a site. 92% use search at some point.
"It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice."
Provide a clear path with self-explanatory labels.
Mega menus can be disorienting for impaired users, and don't work well on mobile devices.
80/20 rule applies to website features; 20% of features are used 80% of the time.
Typography
Some studies say serif fonts are more legible, and others say sans-serif fonts are. It depends on the specific font and its contexts.
Editorial Style
Underlining links in body text ensures that users who can't see color can recognize links.
Images
JPEG is best for photos and complex color illustrations, and PNG is best for line art, text, logos, icons (images with large areas of homogenous color with sharp transitions between colors).
It explains both theory and practice, giving many examples. It cites many experts in web design, UX design, and content strategy.
Notes
Strategy
Project charter sections
� Purpose: what purpose does the product serve?
� Goals: what outcomes does it need to achieve?
� Target audience: whom does the product appeal to and work for?
� Success indicators: how will you know you have achieved project goals?
� Strategies: what approaches will help to realize the goals?
� Tactics: what activities might help to realize the strategies?
Attributes of good UX
� Learnability: first-time users can quickly learn how to use the site
� Ease of orientation: users can navigate easily
� Efficiency: users can quickly perform tasks
� Memorability: users can easily remember how to use the site
� Accessibility: users with disabilities can use most of the site
� Error forgiveness: users don't often make mistakes on the site, and the site is forgiving of them
� Delight: users typically enjoy using the site
"A concise, high-quality site is much better than a big contraption full of broken links."
Prefer the standard to the offbeat. Favor tried-and-true web conventions, and save creativity for content and features.
Do visuals last; form follows function.
Avoid gimmicky tech fads. Don't add them to make sight more interesting; use content and features to do that.
Make content easy to scan, with headers, subheads, lists.
Use active voice.
Process
2/3 of software features are never or rarely used.
Project development life cycle
1. Site definition and planning
� Define goals, objectives for site
� Define scope of content, functionality, tech
2. Content development
� Inventory existing content, identify needs for new content
� Create content
� "Content development is the hardest, most time-consuming, and most consistently underestimated the part of any website development project."
3. Information architecture
� Define organizational structure of site
� Build a small prototype of parts of site to develop and test navigation and UI
4. Site design
� Create graphic design standards
� Create graphic, audio, video content
� Create text content
� Develop code
� Optimize for search engines
5. Site construction
� Build pages, enter content
� Test with users
6. Tracking, evaluation, and maintenance
� Review analytics
� Regularly check visual and functional aspects of site
� Regularly check content
� Regularly check links
� Regularly back up site
Continually improve site with small, incremental changes, rather than periodic large redesigns.
"Simple is fast, simple is cost-effective, and simple is almost always easier to use and maintain."
Keep content as concise as possible, and aggressively prune unneeded or outdated content.
Information Architecture
Users prefer broad, shallow top-level navigation (more options) over narrow, deep navigation (fewer options).
"Hamburger menu" icon (�) is called "trigram" or "navicon."
Navigation inside bars usually go on the left, but can go on right.
Try to put critical info in the top 600 pixels (above "the fold"), but don't worry too much about it, because users scroll.
Homepage elements
� Identification
� Navigation
� Timeliness (or content focus)
� Tools (search, directories)
Users prefer menus of at least 5-7 links, and prefer a few pages of organized choices over many layers of oversimplified menu pages.
Interface Design
About 2/3 of users prefer to initially browse a site; about 1/3 prefer to initially search a site. 92% use search at some point.
"It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice."
Provide a clear path with self-explanatory labels.
Mega menus can be disorienting for impaired users, and don't work well on mobile devices.
80/20 rule applies to website features; 20% of features are used 80% of the time.
Typography
Some studies say serif fonts are more legible, and others say sans-serif fonts are. It depends on the specific font and its contexts.
Editorial Style
Underlining links in body text ensures that users who can't see color can recognize links.
Images
JPEG is best for photos and complex color illustrations, and PNG is best for line art, text, logos, icons (images with large areas of homogenous color with sharp transitions between colors).
January 17, 2015
This is an excellent Web design book from the 20,000 foot view. For instance, it discusses CSS, and how using an external style sheet can make managing the look and feel of your sitd easier. But the authors give no instructions on how to code the CSS.
Overall, a highly recommmended 101 level Web design primer. Covers everything from page layout and usability to writing Web copy to I corporating multimedia.
Bottom line. This book will not make you an expert. However, it is a nice guide if you know the basic technology -- CSS, HTML and JavaScript -- but are building a consumer-side Web presence lime I am now. It gives you a big picture view so you don't get stuck in the details. Or if you are considering hirimg a Web designer, and want to evaluate thier work.
As a PS, this book is free online. I stumbled upon it via an opensource college text book site.
Overall, a highly recommmended 101 level Web design primer. Covers everything from page layout and usability to writing Web copy to I corporating multimedia.
Bottom line. This book will not make you an expert. However, it is a nice guide if you know the basic technology -- CSS, HTML and JavaScript -- but are building a consumer-side Web presence lime I am now. It gives you a big picture view so you don't get stuck in the details. Or if you are considering hirimg a Web designer, and want to evaluate thier work.
As a PS, this book is free online. I stumbled upon it via an opensource college text book site.
May 8, 2009
Though much of this book isn't necessary for someone building a website for their writing life or their freelance biz, it's an excellent introduction to the essential considerations of building an elegant site. Clear language and excellent graphics. This is a required book in my "Publishing Procedures" course in Pacific Lutheran University's Publishing and Printing Arts Program.
October 8, 2010
There are plenty of theories explained, like Gestalt psychology, Signal to Noise, Wayfinding and Rules of composition illustrated with very appropriate (info)graphics and photographs.
I really liked the Sidebars - which are kind of features of topics to dive into more thorougly.
Definitely a VERY GOOD READ! :)
I really liked the Sidebars - which are kind of features of topics to dive into more thorougly.
Definitely a VERY GOOD READ! :)
January 26, 2016
This great book is more than a book on webstyle or webdesign. It gives detailed informations on how to plan a website, on how to develop and manage a web project, on web teams and on interface design for the web.
I would recommend this for everyone involved in web projects, either designers, managers, content editors, etc. And both for seasoned developers as well as newbies.
I would recommend this for everyone involved in web projects, either designers, managers, content editors, etc. And both for seasoned developers as well as newbies.
Read
June 7, 2009Wonderful - succinctly describes the entirety of the design process without bothering to talk about specific technologies. Far superior to the second edition, which I've used for several years in a Web Design 2 class.
July 5, 2015
La bible du design web, que tout concepteur web qui se veut pro devrait avoir lue. Ce n'est pas un manuel du genre "how to" mais un guide détaillé des principaux concepts du design de sites web au tournant des années 2010.
December 27, 2013
This is a great resource for an introduction to building websites. It focuses on UID, info architecture, and such rather than HTML, which makes it a good resource to accompany web site building tools such as Google Sites. This is a graduate level book.
July 29, 2014
I want to read it again it had a lot of great information.
January 8, 2011
A little below what my current level of experience is, but overall a good skill refresher.
August 28, 2012
An excellent primer for basic web site design. Most of the principles still apply today, even with modern "Web 2.0" techniques.
April 16, 2014
Advice and examples are getting long in the tooth.
August 10, 2010
Every designer interested in doing websites must read this book.
December 15, 2011
Un compendio intelligente e generalista di un approccio consapevole alla progettazione web.
Displaying 1 - 19 of 19 reviews
Can't find what you're looking for?
Get help and learn more about the design.