1 week ago


86 The Principles of

86 The Principles of Beautiful Web Design Point If you’ve worked with CSS, then you’re probably familiar with using pixels as a unit of measurement. One pixel (short for “picture element”) is one of the millions of dots on your computer screen. If your resolution is set to 1280×1024 pixels, you have 1,310,720 pixels on your screen, arranged in 1,024 rows and 1,280 columns. All these pixels come together to create a digital image. This is all very elementary technical knowledge, but as we’re about to see, it applies specifically to the concept of points in graphic design. Just as the pixel is the fundamental element of digital images, the point (or dot) is the fundamental element of graphic design, and can be used to build any graphic element. Points have no scale or dimension unless they have a frame of reference. For instance, a point on a huge billboard might look like a period, but up close it’s probably about as big as your head. When points are grouped together, as they are in Figure 3.1, they can create lines, shapes, and volume. Figure 3.1. Halftone Kitty: a study in points When you’re working on website graphics, it’s easy to look at the big picture and ignore the points that make up each image. Points themselves have a lot of power, though. Just take a look at Craig Robinson’s Flip Flop Flyin’. 1 Among other forms of tiny art, Craig creates portraits of famous people, bands, and groups that he calls Minipops. The one in Figure 3.2 is a close up of Craig’s A-Team Minipop. Hard-core fans will notice that Hannibal even has his trusty cigar. 1

Texture 87 Figure 3.2. The A-Team by Craig Robinson Line When two or more points are connected, they form a line. The line is the most common element of graphic design, and is among the most expressive. When designing websites, most people only consider lines for CSS borders or hyperlink underlines, but they can be used in countless ways throughout your web creations. When a line is diagonal, it evokes a sense of movement and excitement. Like a falling domino, a diagonal line has potential energy. Using a pattern of horizontal lines as a background element provides texture and interest to a design, but using a motif of diagonal lines will make the design feel a little more “on edge,” causing users’ eyes to move around constantly. Compare the two examples in Figure 3.3. Which keeps your eyes moving around more successfully? Figure 3.3. Backgrounds created using diagonal and horizontal lines Just as diagonal lines suggest movement, varying the thickness and direction of a line generates a sense of expression and character. Jagged lines with sharp angles can feel dangerous and frantic. Gently rolling, curvy lines tend to feel relaxing and smooth. Lines comprising 90-degree angles tend to feel sharp and mechanical. Finally, lines with lots of curves and angles convey expressiveness; for example, handwriting, graffiti, and sketches.

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
Visual Design for Library Websites - WebJunction
PDF Specimen Booklet - Fontworks UK Ltd
How to build a department web site (starter pack) - University of ...
Visual Design and Web Site Usability
Responsive Email Design Guide - e-Dialog