Texture

Chapter three of The Principles of Beautiful Web Design deals with texture. Texture is anything that creates a unique appearance or feel to the surface of a design or object. Graphic design elements are utlized to create texture. These elements include:

Points are pixels which together other elements such as lines, shapes and volume.

Lines which are formed by two or more points. Diagonal lines give people a sense of movement or excitement. Jagged lines consisting of sharp angels give a dangerous or frenzied sense. Curvy lines evoke a feeling of relaxation.

Shapes are created when two endpoints of a line are joined. Geometric shapes are the default on computers. They evoke a sense of things that are technical and mechanical. Free form or organic shapes are abstract consisting of non-geometric curves, random angels and irregular lines. These shapes create a sense of informality and spontinaeity. Organic shapes soften a design.

Volume and depth- There are three dimensions width, height and depth. Perspective is created when objects appear smaller at a distance. Proportion is an element created when objects are formed based on their dimension and three-dimensional space.

Light and shadow are used in design to create depth and volume of objects thereby making them three-dimensional. Flat objects on a web page can be made three-dimensional by using light and shadow such as button shapes.

Depth can also be created by using a drop shadow to an object which can be done in Photoshop utilizing layers. A div element needs to be added to one's style sheet as well.

All these different elements together can create volume and depth in objects.

Patterns are repeated images often used for background design. Repeititous backgrounds were very popular in the nineties. CSS has changed the control to design background images. Backgrounds can now be applied to all elements whereas before designers were limited. The five CSS properties are:

1. background-color - the color is defined using hexadecimal colors. Transparency can also be specified.
2. background-image - an image can be used for the background and can be done using url (filename) or none.
3. background-repeat - there are four possible values used to repeat background images. 1)repeat where the image repeats in a tiled manner both horizontally and vertically 2)repeat-x where the background image repeats horizontally, 3)repeat-y where the background image repeats vertically and 4) no-repeat where the background image is not tiled.
4. background-attachment - this property is used to determine whether a background image remains fixed or moves when a viewer scrolls on page.
5. background-position which controls the position of the background image and is set using two values: vertical and horizontal. The values can be set in three ways. 1)Using keywords (top, center, right for the vertical position; left, center, right for horizontal). 2) Utilizing CSS measurements. 3)Using percentages. Be sure not to mix the three types of values together (keywords, percentages, measurements) since Firefox and Opera browsers will override this type of positioning.