This second edition of The Principles of Beautiful Web Design is the ideal book for people who can build websites, but are seeking the skills and knowledge to visually enhance their sites.
This book will teach you how to:
- Understand the process of what makes "good design," from discovery through to implementation
- Use color effectively, develop color schemes, and create a palette
- Create pleasing layouts using grids, the rule of thirds, and symmetry
- Employ textures: lines, points, shapes, volumes, and depth
- Apply typography to make ordinary designs look great
- Choose, edit, and position effective imagery
And lots more...
This revised, easy-to-follow guide is illustrated with beautiful, full-color examples, and leads readers through the process of creating great designs from start to finish.
It also features:
- Updated information about grid-based design
- How to design for mobile resolutions
- Information about the future of web fonts including @font-face
- Common user-interface patterns and resources
The Principles of Beautiful Web Design......Page 4
Table of Contents......Page 10
Preface......Page 16
What’s in This Book......Page 17
The SitePoint Forums......Page 18
Acknowledgments......Page 19
Tips, Notes, and Warnings......Page 20
Layout and Composition......Page 22
Discovery......Page 23
Implementation......Page 25
Defining Good Design......Page 26
Web Page Anatomy......Page 29
Grid Theory......Page 31
The Rule of Thirds......Page 32
960 Grid System......Page 34
Symmetrical Balance......Page 36
Asymmetrical Balance......Page 37
Proximity......Page 40
Repetition......Page 41
Continuance......Page 43
Contrast......Page 44
Proportion......Page 45
Bread-and-butter Layouts......Page 46
Left-column Navigation......Page 47
Three-column Navigation......Page 48
Finding Inspiration......Page 49
Using a Morgue File......Page 50
Navigationless Magazine Style......Page 51
Expansive Footers......Page 52
Resizing: Fixed, Fluid, or Responsive Layouts......Page 53
Fluid Width......Page 54
An Alternative: Responsive Layouts......Page 55
Screen Resolution......Page 57
Application: Southern Savers......Page 59
Getting Started......Page 60
The Psychology of Color......Page 64
Color Associations......Page 65
Color Temperature......Page 71
Saturation......Page 72
Color Theory 101......Page 73
Red, Yellow, and Blue, or CMYK......Page 74
The Scheme of Things......Page 76
Monochromatic Color Scheme Examples......Page 77
An Analogous Color Scheme......Page 80
Analogous Color Scheme Examples......Page 81
A Complementary Color Scheme......Page 83
Complementary Color Scheme Examples......Page 84
Common Complementary Pitfalls......Page 86
Split-complementary, Triadic, and Tetradic......Page 88
Other Variants......Page 90
Hexadecimal Notation......Page 91
Color Scheme Designer 3......Page 93
Adobe Kuler......Page 94
Color Stream iPhone App......Page 95
Pictaculous......Page 96
Colour Contrast Check......Page 97
Application: the Color of Coupons......Page 98
Texture......Page 102
Point......Page 103
Line......Page 104
Shape......Page 106
Rounded Corners......Page 108
Rotation......Page 110
Shapes and Layout......Page 111
Perspective......Page 113
Proportion......Page 114
Light and Shadow......Page 115
Pattern......Page 118
Aged, Weathered, Worn, and Nostalgic Style......Page 123
Clean and Grainy......Page 126
Handcrafted Scrapbook......Page 128
Whimsical Cartoon Style......Page 130
Minimal Texture......Page 132
Starting Your Own Textural Trends......Page 133
Application: Clipping and Saving......Page 134
Typography......Page 138
Taking Type to the Web......Page 140
Text Image Replacement......Page 142
Web Fonts with @font-face......Page 143
Self-hosted Web Fonts......Page 144
Web Font Services......Page 145
sIFR and Cufón......Page 146
Anatomy of a Letterform......Page 147
Horizontal Spacing......Page 149
Text Alignment......Page 151
Typeface Distinctions......Page 153
Serif Fonts......Page 154
Sans-serif Fonts......Page 156
Handwritten Fonts......Page 158
Fixed-width Fonts......Page 159
Novelty Fonts......Page 162
Dingbat Fonts......Page 163
Individual Artists and Foundries......Page 165
Choosing the Right Fonts......Page 166
Setting Font Size and Line Height......Page 168
Using Punctuation and Special Characters......Page 169
Application: The Fine Print......Page 171
Imagery......Page 174
What to Look For......Page 175
Take It or Make It......Page 178
Stock Photography......Page 179
Free Images......Page 181
Royalty-free Images......Page 182
Rights-managed Images......Page 184
Getting Professional Help......Page 185
Google Ganking......Page 187
Hotlinking......Page 188
Clipart......Page 189
Creative Cropping......Page 190
Photoshop Adjustments......Page 194
File Formats and Resolutions......Page 199
Creative Image Treatments......Page 200
Using Images to Enhance Images......Page 201
Using Pure CSS to Enhance Images......Page 204
Application: the Fine Print......Page 207
Onward and Upward......Page 209
Index......Page 212
