Table Of Contenti
The Principles of Beautiful Web Design, 4th Edition
Copyright © 2020 SitePoint Pty. Ltd.
Product Manager:Simon Mackie
Editor:Ralph Mason
Cover Designer:Alex Walker
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 to be 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.
Level 1, 110 Johnston St,
Fitzroy VIC 3065
Australia
Web: www.sitepoint.com
Email: [email protected]
ISBN 978-1-925836-36-3 (print)
ISBN 978-1-925836-37-0 (ebook)
Printed and bound in the United States of America
2 The Principles of Beautiful Web Design, 4th Edition
About the Authors
Jason Beairdis a designer and front-end developer with over ten years of experience working on
a wide range of award-winning web projects. With a background in graphic design and a passion
for web standards, he’s always looking for accessible ways to make the Web a more beautiful
place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing
his passion for the Web with others. He writes about his ideas, adventures, and random projects
on his personal site,jasongraphix.com1.
James Georgeis a professional web designer from the United States, who is passionate about
the field of design. He loves connecting with other designers and developers. James enjoys
working closely with clients and businesses to create powerful, beautiful web design solutions.
You can find him onhttps://twitter.com/creativebeacon/Twitter2.
Alex Walkerhas directed SitePoint’s design thinking for two decades through front-end design,
50+ book covers and over 200 articles. His dream is to one day use CSS and SVG to create cold
fusion (the process, not the language). You can find him from time to time onTwitter3.
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visithttp://www.sitepoint.com/to access our blogs, books, newsletters, articles,
and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile
development, design, and more.
1.http://jasongraphix.com
2.https://twitter.com/creativebeacon/
3.https://twitter.com/alexmwalker/
Table of Contents iii
Table of Contents
Preface
.........................................................................................................................xii
Who Should Read This Book?...................................................................................xiii
Conventions Used............................................................................................................xv
Supplementary Materials.............................................................................................xvi
Chapter 1: Layout and Composition
.......................................17
The Design Process.........................................................................................................18
Discovery...................................................................................................................19
Client Meetings Don’t Have to Take Place in an Office........................19
Exploration................................................................................................................21
Implementation......................................................................................................21
Defining Good Design.....................................................................................................22
Users Are Pleased by the Design but Drawn to the Content...........23
Users Can Move about Easily via Intuitive Navigation.........................24
Users Recognize Each Page as Belonging to the Site........................25
Web Page Anatomy.........................................................................................................26
The Containing block...........................................................................................27
The Logo....................................................................................................................27
The Navigation........................................................................................................28
The Content.............................................................................................................28
iv The Principles of Beautiful Web Design, 4th Edition
The Footer.................................................................................................................28
Whitespace..............................................................................................................29
Grid Theory..........................................................................................................................29
The Rule of Thirds.................................................................................................32
CSS Frameworks...............................................................................................................34
Balance..................................................................................................................................37
Symmetrical Balance..........................................................................................37
Asymmetrical Balance.......................................................................................40
Unity........................................................................................................................................44
Proximity....................................................................................................................44
Repetition..................................................................................................................46
Emphasis...............................................................................................................................47
Placement.................................................................................................................48
Continuance.............................................................................................................48
Isolation......................................................................................................................49
Contrast......................................................................................................................50
Proportion.................................................................................................................51
Bread-and-butter Layouts...........................................................................................54
Left-column Navigation.....................................................................................54
Right-column Navigation...................................................................................56
Three-column Navigation.................................................................................57
Navigationless Magazine Style.......................................................................59
Bare-bones Minimalism....................................................................................60
Table of Contents v
Break the Mould Layouts...................................................................................61
Web Trends..........................................................................................................................63
Video Backgrounds..............................................................................................64
Masonry Layouts....................................................................................................65
Parallax Scrolling..................................................................................................66
Finding Inspiration...........................................................................................................66
Using a Morgue File.........................................................................................................67
Responsive Design..........................................................................................................68
Screen Resolutions.........................................................................................................69
How Do @media Queries Work?....................................................................70
Responsive Web Design Principles..........................................................................70
Always Design for “Mobile First”....................................................................70
Don’t Jam Elements into the Mobile View................................................71
SVG Is Your BFF......................................................................................................72
Responsive Frameworks...............................................................................................72
The Project: Trashmonger............................................................................................75
Assets..........................................................................................................................75
Requirements..........................................................................................................76
Sitemap..................................................................................................................................77
Wireframes...............................................................................................................78
Chapter 2: Color
...........................................................................................82
The Psychology of Color...............................................................................................83
vi The Principles of Beautiful Web Design, 4th Edition
Color Associations................................................................................................83
Red...............................................................................................................................84
Orange........................................................................................................................84
Yellow..........................................................................................................................85
Green..........................................................................................................................86
Blue..............................................................................................................................87
Purple.........................................................................................................................88
White..........................................................................................................................89
Black...........................................................................................................................90
Color Temperature...........................................................................................................91
Chromatic Value................................................................................................................92
Saturation..................................................................................................................92
Color Theory 101...............................................................................................................93
Red, Yellow, and Blue, or CMYK................................................................................96
The Scheme of Things..................................................................................................98
A Monochromatic Color Scheme..................................................................98
Monochromatic Color Scheme in the Real World................................99
An Analogous Color Scheme........................................................................103
Analogous Color Scheme Examples........................................................104
A Complementary Color Scheme..............................................................106
Complementary Color Scheme Examples.............................................107
Common Complementary Pitfalls................................................................111
Split-complementary, Triadic, and Tetradic............................................113
Table of Contents vii
Other Variants........................................................................................................116
Creating a Palette...........................................................................................................117
Hexadecimal Notation......................................................................................117
Color Tools and Resources........................................................................................118
Paletton....................................................................................................................119
Colormind...............................................................................................................120
Adobe Color...........................................................................................................121
COLOURlovers......................................................................................................121
Colour Contrast Check......................................................................................122
The Application: Choosing a Color Palette.........................................................123
Chapter 3: Texture
...................................................................................127
Point.....................................................................................................................................128
Line.......................................................................................................................................130
Shape....................................................................................................................................131
Designing in CSS..................................................................................................137
Rotation and Angles..........................................................................................138
Directing the Eye................................................................................................139
Putting It Into Practice.......................................................................................141
Volume and Depth.........................................................................................................142
Perspective.............................................................................................................143
Proportion...............................................................................................................143
Light and Shadow...............................................................................................144
viii The Principles of Beautiful Web Design, 4th Edition
From 3D Renders to Flat design...................................................................145
Flat Design.............................................................................................................146
Is UI Design Still a Flat Earth?........................................................................147
Photoshop Filters...............................................................................................148
Pattern.................................................................................................................................148
Building Texture: Vintage, Patterned, Worn, and Nostalgic Styles.........153
Paper Grain.............................................................................................................153
Paints, Pencils and Other Traditional Media..........................................156
Faded Memories..................................................................................................157
The Digital Retro Look.....................................................................................158
Halftone and Ben Day Dots...........................................................................158
DIY Halftones........................................................................................................160
Starting Your Own Textural Trends............................................................162
Application: Adding a Design Motif Using SVG Patterns............................162
Using a Pattern as a Motif..........................................................................................164
Chapter 4: Typography
......................................................................166
Taking Type to the Web..............................................................................................169
Self-hosted Web Fonts.....................................................................................171
Web Font Services..............................................................................................172
Anatomy of a Letterform.............................................................................................174
Text Spacing......................................................................................................................177
Horizontal Spacing..............................................................................................177
Table of Contents ix
Vertical Spacing..................................................................................................179
Text Alignment................................................................................................................180
Typeface Distinctions....................................................................................................181
Serif Fonts..............................................................................................................183
Sans-serif Fonts...................................................................................................187
Handwritten Fonts.............................................................................................189
Fixed-width Fonts...............................................................................................192
Novelty Fonts.......................................................................................................194
Dingbat Fonts.......................................................................................................197
Finding Fonts....................................................................................................................199
Free Font Galleries.............................................................................................200
Commercial Font Galleries............................................................................200
Individual Artists and Foundries..................................................................201
Choosing the Right Fonts...........................................................................................201
Establishing a Typographic System......................................................................204
Typical Body Font Sizes...................................................................................205
Scaling Your Type..........................................................................................................205
Type Scaling in Practice..................................................................................206
Mobile Considerations.....................................................................................207
Vertical Baseline Rhythm...........................................................................................209
Vertical Baseline Rhythm Is a Tool, Not a Religion..............................214
The Takeaway...................................................................................................................215
The Project: Building a Type System.....................................................................215
x The Principles of Beautiful Web Design, 4th Edition
Creating a Basic Typography Style Guide...............................................217
Adding a Visual Grid..........................................................................................218
What Now?........................................................................................................................220
Chapter 5: Imagery
.................................................................................221
What to Look For...........................................................................................................223
Question 1: Is It Relevant?...............................................................................223
Question 2: Is It Interesting?..........................................................................224
Question 3: Is It Appealing?...........................................................................225
Legitimate Image Sources........................................................................................227
Take It or Make It.................................................................................................227
Stock Photography............................................................................................229
Getting Professional Help...............................................................................241
How Not to Impress......................................................................................................243
Google Ganking...................................................................................................243
Hotlinking...............................................................................................................243
Clip Art.....................................................................................................................244
Image Presentation.......................................................................................................245
Creative Cropping..............................................................................................245
Image Adjustments............................................................................................251
Filters........................................................................................................................257
File Formats and Resolutions...................................................................................262
Creative Image Treatments.......................................................................................264
