Views
2 weeks ago

design3

188 The Principles of

188 The Principles of Beautiful Web Design The most important thing about the imagery is that the individual images needed to be inviting, while evoking an emotional connection with visitors. One thing that her old site didn’t do was connect on a personal level with anyone. It was mainly static text, together with an image of Carrie. Using the right content was key in striking an emotional connection with the site visitors. To start the process of finding the right imagery, I searched my business stock photography account for images regarding pain. One of the main images on the site is of a man holding his lower back while sitting in an office atmosphere. This image should connect with anyone in the situation where they’ve had try and make it through the work day, even though they were in pain. Coupled with two simple lines of marketing copy, the message is highly effective. Figure 5.37. Making an emotional connection by empathy The three columns of text under the slider also needed some imagery to catch the eye. The first image is a reflexology illustration from a paid stock photography site. This was necessary, because it illustrates the parts of the body affected by reflexology, but in a creative, visual way. The last two images are illustrations, created in Adobe Illustrator. One is a vector illustration of one of the machines KRG uses, shown in Figure 5.38. I used a photo for reference, but simplified it, without including any of the words, text or graphics that are usually found on the machine. Many who come to the site don’t have any idea what Reflexology is, so an image of a “mysterious machine” is sure to pique interest. The graphic is simple, yet effective.

Imagery 189 Figure 5.38. The in-progress illustration of the PEMF machine The third image is a graphic of their thermography, or thermal imaging service. It is a good way to analyze blood flow throughout the body, and a custom graphic to illustrate this concept jumps out to the viewer against the dark green and the stark, sterile background. The position of the arms is a typical pose that’s made while the test is performed. There are a handful of important things to remember when using multiple images in a row: It’s a good idea to keep them the same height, so they line up, otherwise you may run into alignment issues. Also, I saved each vector graphic as a transparent PNG, so there wouldn’t be a background or box around each image. The columns are close together, and the images wouldn’t have enough breathing room with their backgrounds. Coming up with the inspiration for these images and graphics wasn’t difficult. When I was in Carrie’s office, I just looked around and took in all of the imagery that correlated with her business. Integrating things that I saw when I was at the location ties together her business and her website.

  • 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 14 and 15:

    xiv bathroom with the work that we

  • 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 206: 190 The Principles of Beautiful Web
Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF - Shop.org
QUICK START GUIDE FOR CLUB WEBSITES
PDF Specimen Booklet - Fontworks UK Ltd
Visual Design and Web Site Usability
Visual Design for Library Websites - WebJunction
How to build a department web site (starter pack) - University of ...
The Complete Guide to a High Converting Website
Responsive Email Design Guide - e-Dialog
Web Site Design & Usability Testing - HIPNet