88 The Principles of Beautiful Web Design When you’re working on the prototype stage of a website’s development, try to keep in mind that lines are far more useful than just being dividers, borders, and stripes. They’re the foundation of art, drawing, and design. As the Web is such a rigid and technical medium, it’s easy to forget about fundamental art tools such as pens and brushes. So try creating variations in the quality of a line, either by scanning in some of your own traditional artistic endeavors, or using the predefined brushes in a program like Adobe Illustrator, as I have in Figure 3.4. This is a great way to bring a traditional artistic feel to a medium that is sometimes all too digital. Shape Figure 3.4. Experimenting with the quality, direction, and thickness of line Any time the two end points of a line come together, a shape is created. There’s probably little more I can add to your knowledge of the basic geometric shapes: circles, triangles, and rectangles. Arrows, stars, diamonds, ellipses, plus signs, semicircles, and more are geometric as well—Figure 3.5 illustrates a few of them. The precise curves, angles, and straight lines involved in geometric shapes make them difficult to draw by hand, unless you have a compass, protractor, and ruler. On a computer, though, geometrically defined lines, curves, and angles are usually the default forms in any image-creating program. For that reason, these types of shapes have a reputation for feeling technical and mechanical.
Texture 89 Figure 3.5. Geometric and freeform shapes The other main category of shape is organic or freeform. Freeform shapes are more abstract than geometric shapes, and consist of non geometric curves, random angles, and irregular lines, as can be seen in Figure 3.5. Freeform shapes have a free-flowing nature that conveys a sense of informality and spontaneity. They can represent the outline of a product, human gestures, or an organic doodle. Figure 3.6 represents the gradual transformation of a geometric shape into a freeform shape. Figure 3.6. Transforming a geometric shape into an organic one When it comes to website design, many people seem to forget that freeform shapes exist. In Chapter 1, I explained how the anatomy of a website consists of a bunch of blocks. No matter how you arrange them on the page, these blocks are inherently geometric. Unlike print design, which gives us the freedom to draw whichever layout shapes we like, the Web limits us to rectangles. However, although the containing blocks may be rectangular, that doesn’t mean they have to look rectangular. One of the most common methods we can use to hide the underlying form of an HTML element is to give it a background image.