The Principles of Beautiful Web Design / Edition 1

by Jason Beaird

Overview

Tired of making web sites that work absolutely perfectly but just don't look nice?

If so, then The Principles of Beautiful Web Design is for you. A simple, easy-to-follow guide, illustrated with plenty of full-color examples, this book will lead you through the process of creating great designs from start to finish. Good design principles are not rocket science, and using the information contained in this book will help you create stunning web sites.

Understand the design process, from discovery to implementation Understand what makes "good design" Developing pleasing layouts using grids, the rule of thirds, balance and symmetry Use color effectively, develop color schemes and create a palette Use textures, lines, points, shapes, volumes and depth Learn how good typography can make ordinary designs look great Effective imagery: choosing, editing and placing images And much more

Throughout the book, you'll follow an example design, from concept to completion, learning along the way. The book's full-color layout and large format (8" x 10") make The Principles Of Beautiful Wed Design a pleasure to read.

Editorial Reviews

"The Principles of Beautiful Web Design is a good book to kick start your graphic-design journey. The biggest benefit that I got from this book is the knowledge to learn from great designs as opposed to just admiring them in a state of awe." - Slashdot.org

"Jason is a great writer, and the book is quite easy to read. It's put together wonderfully, including many full color screenshots and other forms of imagery that make the book a pleasure to read. I'd definitely recommend the book to anyone in Web design." - MondayByNoon

"Jason Beaird covers web design in a way that non-designers can understand. He walks you through all of the aspects of design development from initial meeting to finished product. If you are just getting into web development, this is a must read." - Blogcritics.org

"This is a thoroughly practical guide to web design that is very well written: good technical depth in easy-to-understand language with excellent illustrations and graphics that support the text. For many users it will be the only web-design text they will need. For those who want to further advance their skills and knowledge it will provide a sound foundation." - PC Update

"His "Don't just tell, show!" style makes this book accessible to everyone... It strikes a carefully thought-out balance between describing principles and illustrating them. It is clear and well structured, with practical examples in every chapter." - Mitch Wheat

Product Details

ISBN-13:	9780975841969
Publisher:	SitePoint
Publication date:	02/01/2007
Pages:	180
Product dimensions:	7.98(w) x 9.96(h) x 0.46(d)

About the Author

Jason Beaird dual-majored in graphic design and digital media at the University of California Florida. When he's not working on websites, he enjoys disassembling electronics and using them in his artwork. Jason writes about his adventures in design and technology on his personal site, jasongraphix.com.

Table of Contents

Preface xiii

Who Should Read This Book xiv

What's in This Book xiv

Conventions Used in This Book xv

Code Samples xv

Tips, Notes, and Warnings xvi

Supplementary Materials xvi

Want to Take Your Learning Further? xvi

Chapter 1 Layout and Composition 1

The Design Process 2

Discovery 2

Exploration 4

Implementation 4

Defining Good Design 5

Web Page Anatomy 8

Grid Theory 10

The Rule of Thirds 11

960 Grid System 13

Balance 16

Symmetrical Balance 16

Asymmetrical Balance 18

Unity 21

Proximity 22

Repetition 23

Emphasis 24

Placement 24

Continuance 25

Isolation 26

Contrast 26

Proportion 27

Bread-and-butter Layouts 29

Left-column Navigation 30

Right-column Navigation 30

Three-column Navigation 31

Finding Inspiration 32

Using a Morgue File 32

Trends: Popular Favorites 34

Fresh Trends 36

Resizing: Fixe, Fluid, or Responsive Layouts 40

Fixed Width Layouts 40

Fluid Layouts 40

Responsive Design 41

Screen Resolution 43

Frameworks 45

Application: Knoxville Reflexology Group 47

Getting Started 48

Chapter 2 Color 53

The Psychology of Color 53

Color Associations 54

Color Temperature 60

Chromatic Value 61

Saturation 61

Color Theory 101 62

Red, Yellow, and Blue, or CMYK 63

The Scheme of Things 65

A Monochromatic Color Scheme 66

An Analogous Color Scheme 69

A Complementary Color Scheme 72

Split-complementary, Triadic, and Tetradic 77

Other Variants 79

Creating a Palette 80

Hexadecimal Notation 80

Color Tools and Resources 81

Color Scheme Designer 3 82

Adobe Kuler 82

Colour Lovers 83

Pictaculous 84

Colour Contrast Check 85

Application: Choosing a Color Scheme 86

Chapter 3 Texture 89

Point 90

Line 91

Shape 92

Rounded Corners 95

Rotation 97

Shapes and Layout 98

Volume and Depth 100

Perspective 100

Proportion 101

Light and Shadow 102

Pattern 104

Building Texture 109

Aged, Weathered, Worn, and Nostalgic Style 109

Clean and Grainy 112

Handcrafted Scrapbook 114

Whimsical Cartoon Style 116

Minimal Texture 117

Starting Your Own Textural Trends 119

Application: Logo and Content 120

Chapter 4 Typography 123

Taking Type to the Web 125

Web Fonts with @font-face 127

Self-hosted Web Fonts 127

Web Font Services 128

Text Image Replacement 129

Anatomy of a Letterform 132

Text Spacing 134

Horizontal Spacing 134

Vertical Spacing 136

Text Alignment 137

Typeface Distinctions 138

Serif Fonts 139

Sans-serif Fonts 142

Handwritten Fonts 144

Fixed-width Fonts 145

Novelty Fonts 148

Dingbat Fonts 149

Finding Fonts 151

Free Font Galleries 151

Commercial Font Galleries 151

Individual Artists and Foundries 151

Choosing the Right Fonts 152

Setting Font Size and Line Height 154

Using Punctuation and Special Characters 155

Application: The Fine Print 156

Chapter 5 Imagery 159

What to Look For 160

Legitimate Image Sources 163

Take It or Make It 163

Stock Photography 164

Getting Professional Help 170

How Not to Impress 172

Google Ganking 172

Hotlinking 173

Clipart 174

Creative Cropping 175

Photoshop Adjustments 179

File Formats and Resolutions 184

Creative Image Treatments 186

Using Images to Enhance Images 186

Using Pure CSS to Enhance Images 188

Application: The Finishing Touches 191

Onward and Upward 194