Views
8 months ago

design3

xiv bathroom with the

xiv bathroom with the work that we did. We just fine-tuned the details, but it made a world of difference. Some people might have been able to live with the bathroom the way it was, but I doubt you’d find anyone who would say it was exactly what they wanted. Similarly, if you’re spending time developing a website, you should take time to design it. Under no circumstances should the design feel unpolished or haphazard. If you want to come off as edgy, anti-marketing, and non-corporate, then do it, and do it well—but there’s no reason to be ignorant about, or feel intimidated by, design. My goal with this book is simple: to present what I know about designing for the Web in a way that anyone can understand and apply. Why? Because the basics of website design should be common knowledge. We all live in and work on an internet that has been blindly covering up ugly with more ugly since its inception. It’s time to break that chain and make bold moves toward better design. Who Should Read This Book If you’re squeamish about choosing colors, feel uninspired by a blank browser window, or get lost trying to choose the right font, this book is for you. I take a methodical approach to presenting traditional graphic design theory as it applies to today’s website development industry. While the content is directed towards web programmers and developers, it provides a design primer and relevant examples that will benefit readers at any level. What’s in This Book This book comprises the following five chapters. You can read them from beginning to end to gain a complete understanding of the subject, or skip around if you only need a refresher on a particular topic. Chapter 1: Layout and Composition An awareness of design relies heavily on understanding the spatial relationships that exist between the individual components of a design. The layout chapter kicks off the design process by investigating possible page components. With these blocks defined, we discuss some tools and examples that will help you start your own designs on a solid foundation. To wrap up this discussion, we’ll examine Knoxville Reflexology, a real client project that we’ll be following as an example through each chapter. Chapter 2: Color Perhaps the most mysterious aspect of design is the topic of color selection. Chapter 2 sheds light on this as we delve into both the aesthetic and scientific aspects of color theory. Armed with these simple guidelines, and some tips for creating harmonious color combinations, you’ll see how anyone can choose a set of colors that work well together to complement the overall message of a website. Finally, we’ll learn how the palette for Knoxville Reflexology was chosen.

xv Chapter 3: Texture An aspect of web design that’s often overlooked, texture is the key to creating designs that stand out. By understanding how the individual elements of texture function, you’ll learn how to use points, lines, and shapes to communicate and support your site’s message on a number of levels. We’ll then get to see firsthand how subtle textures helped shape the identity and character of our example website. Chapter 4: Typography The importance of typography is undeniable. Type is everywhere, and understanding the mechanics of written language is essential for any visual designer. In this chapter, we’ll dive beneath the surface of this rich topic, exploring the basics of the letterform, and investigating various typeface distinctions. Chapter 5: Imagery The necessary companions to any well-designed site are the images and illustrations that grace its pages. In the final chapter, we’ll discuss what we should look for in the visual elements that we use on our pages, and locate sources of legitimate supporting imagery. Of course, finding the right image is often just the beginning. We’ll also learn some image-editing basics before we see the final steps in our example project. Conventions Used in This Book You’ll notice that we’ve used certain typographic and layout styles throughout the book to signify different types of information. Look out for the following items. Code Samples Code in this book will be displayed using a fixed-width font, like so: A Perfect Summer's Day It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school. Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ➥ indicates a line break that exists for formatting purposes only, and should be ignored: URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she ➥ets-come-of-age/");

  • Page 1: Summary of Contents Preface . . . .
  • Page 4 and 5: iv The Principles of Beautiful Web
  • Page 7 and 8: Table of Contents Preface . . . . .
  • Page 9 and 10: ix Color Scheme Designer 3 . . . .
  • Page 11: xi Creative Image Treatments . . .
  • Page 16 and 17: xvi Tips, Notes, and Warnings Hey,
  • Page 18 and 19: 2 The Principles of Beautiful Web D
  • Page 20 and 21: 4 The Principles of Beautiful Web D
  • Page 22 and 23: 6 The Principles of Beautiful Web D
  • Page 24 and 25: 8 The Principles of Beautiful Web D
  • Page 26 and 27: 10 The Principles of Beautiful Web
  • Page 28 and 29: 12 The Principles of Beautiful Web
  • Page 30 and 31: 14 The Principles of Beautiful Web
  • Page 32 and 33: 16 The Principles of Beautiful Web
  • Page 34 and 35: 18 The Principles of Beautiful Web
  • Page 36 and 37: 20 The Principles of Beautiful Web
  • Page 38 and 39: 22 The Principles of Beautiful Web
  • Page 40 and 41: 24 The Principles of Beautiful Web
  • Page 42 and 43: 26 The Principles of Beautiful Web
  • Page 44 and 45: 28 The Principles of Beautiful Web
  • Page 46 and 47: 30 The Principles of Beautiful Web
  • Page 48 and 49: 32 The Principles of Beautiful Web
  • Page 50 and 51: 34 The Principles of Beautiful Web
  • Page 52 and 53: 36 The Principles of Beautiful Web
  • Page 54 and 55: 38 The Principles of Beautiful Web
  • Page 56 and 57: 40 The Principles of Beautiful Web
  • Page 58 and 59: 42 The Principles of Beautiful Web
  • Page 60 and 61: 44 The Principles of Beautiful Web
  • Page 62 and 63: 46 The Principles of Beautiful Web
  • Page 65 and 66:

    2 Chapter Color Whether you’re de

  • Page 67 and 68:

    Color 51 reason, it’s often used

  • Page 69 and 70:

    Color 53 Figure 2.5. Calming stones

  • Page 71 and 72:

    Color 55 Figure 2.7. These wind tur

  • Page 73 and 74:

    Color 57 Chromatic Value The measur

  • Page 75 and 76:

    Color 59 Figure 2.12. The tradition

  • Page 77 and 78:

    Color 61 thick that you’re unable

  • Page 79 and 80:

    Color 63 Another example of saturat

  • Page 81 and 82:

    Color 65 An Analogous Color Scheme

  • Page 83 and 84:

    Color 67 Figure 2.22. Blinksale’s

  • Page 85 and 86:

    Color 69 put off by the stark contr

  • Page 87 and 88:

    Color 71 Figure 2.27. Cross Cross C

  • Page 89 and 90:

    Color 73 Figure 2.30. The Bulls+Arr

  • Page 91 and 92:

    Color 75 Figure 2.34. The adventuro

  • Page 93 and 94:

    Color 77 Table 2.1. Counting from 1

  • Page 95 and 96:

    Color 79 Scheme Designer 3 works. U

  • Page 97 and 98:

    Color 81 Figure 2.39. Pictaculous C

  • Page 99 and 100:

    Color 83 Figure 2.41. A mood board

  • Page 101 and 102:

    3 Chapter Texture There are many we

  • Page 103 and 104:

    Texture 87 Figure 3.2. The A-Team b

  • Page 105 and 106:

    Texture 89 Figure 3.5. Geometric an

  • Page 107 and 108:

    Texture 91 Rounded Corners So we’

  • Page 109 and 110:

    Texture 93 Figure 3.10. Ithaca Even

  • Page 111 and 112:

    Texture 95 Figure 3.12. Speed Kids

  • Page 113 and 114:

    Texture 97 Figure 3.14. Perspective

  • Page 115 and 116:

    Texture 99 Figure 3.17. A clear and

  • Page 117 and 118:

    Texture 101 Although repetitious ba

  • Page 119 and 120:

    Texture 103 declaration background-

  • Page 121 and 122:

    Texture 105 Figure 3.25. Three repe

  • Page 123 and 124:

    Texture 107 Figure 3.27. Team Fanny

  • Page 125 and 126:

    Texture 109 said, just because you

  • Page 127 and 128:

    Texture 111 This site certainly fal

  • Page 129 and 130:

    Texture 113 Another notable example

  • Page 131 and 132:

    Texture 115 Figure 3.36. Minimalism

  • Page 133:

    Texture 117 Figure 3.38. The site d

  • Page 136 and 137:

    120 The Principles of Beautiful Web

  • Page 138 and 139:

    122 The Principles of Beautiful Web

  • Page 140 and 141:

    124 The Principles of Beautiful Web

  • Page 142 and 143:

    126 The Principles of Beautiful Web

  • Page 144 and 145:

    128 The Principles of Beautiful Web

  • Page 146 and 147:

    130 The Principles of Beautiful Web

  • Page 148 and 149:

    132 The Principles of Beautiful Web

  • Page 150 and 151:

    134 The Principles of Beautiful Web

  • Page 152 and 153:

    136 The Principles of Beautiful Web

  • Page 154 and 155:

    138 The Principles of Beautiful Web

  • Page 156 and 157:

    140 The Principles of Beautiful Web

  • Page 158 and 159:

    142 The Principles of Beautiful Web

  • Page 160 and 161:

    144 The Principles of Beautiful Web

  • Page 162 and 163:

    146 The Principles of Beautiful Web

  • Page 164 and 165:

    148 The Principles of Beautiful Web

  • Page 166 and 167:

    150 The Principles of Beautiful Web

  • Page 168 and 169:

    152 The Principles of Beautiful Web

  • Page 170 and 171:

    154 The Principles of Beautiful Web

  • Page 172 and 173:

    156 The Principles of Beautiful Web

  • Page 174 and 175:

    158 The Principles of Beautiful Web

  • Page 176 and 177:

    160 The Principles of Beautiful Web

  • Page 178 and 179:

    162 The Principles of Beautiful Web

  • Page 180 and 181:

    164 The Principles of Beautiful Web

  • Page 182 and 183:

    166 The Principles of Beautiful Web

  • Page 184 and 185:

    168 The Principles of Beautiful Web

  • Page 186 and 187:

    170 The Principles of Beautiful Web

  • Page 188 and 189:

    172 The Principles of Beautiful Web

  • Page 190 and 191:

    174 The Principles of Beautiful Web

  • Page 192 and 193:

    176 The Principles of Beautiful Web

  • Page 194 and 195:

    178 The Principles of Beautiful Web

  • Page 196 and 197:

    180 The Principles of Beautiful Web

  • Page 198 and 199:

    182 The Principles of Beautiful Web

  • Page 200 and 201:

    184 The Principles of Beautiful Web

  • Page 202 and 203:

    186 The Principles of Beautiful Web

  • Page 204 and 205:

    188 The Principles of Beautiful Web

  • Page 206:

    190 The Principles of Beautiful Web

Layout and Design - In Easy Steps
Boot Camp
1nLuzUY
HTML and CSS design and build websites
pwrof6l
QUICK START GUIDE FOR CLUB WEBSITES
GD Starter Pack 2017
How to survive a redesign
learn_HTML
8w41ny
Facebook Pages - TourismTechnology.com
The Complete Guide to a High Converting Website
Title & Picture - Split - HubSpot
1o1n0rn
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF - Shop.org
Learn web design
Visual Design for Library Websites - WebJunction
5ml User's Guide
Creative Services - Keiger Graphic Communications
From Print Design to Web Design
1qLxsKF
Responsive Email Design Guide - e-Dialog
bright pd100
ALISON
e4 Designing Brochure 8P-web version_LR_single
slides - HTML5 Developer Conference
Web Accessibility