Design Lesson 1:
Texture
What Is Texture?
Texture is anything that gives an object a distinctive appearance or feel. For example, when you look at the pictures below you can most likely "feel" them.
You can probably feel the roughness of the brick, the splinters you may get from the wood, or the slipperiness of the bar of soap even though you can't really touch them. This is the essence of texture, and is probably the most overlooked aspect of web design.
Rounded Corners
One common way to add some texture to your site is by adding rounded corners. Rounded corners have become so popular that CSS3 supports them. Once browsers catch up to the CSS specification rounded corners will be a cinch to implement, but for now you have to use one of a number of different techniques to use them.
The implementations of rounded corners fall into two main categories. One category involves the use of the scripting language Javascript while the other uses images to create the corners. Both implementations have their drawbacks. Relying on Javascript can be bad at times since some users may not have Javascript enabled on their computer. Relying on images can be a pain when you want to change the color of your corners since you have to change the color of every image.
The best Javascript implementation of rounded corners is Alessandro Fulciniti's Nifty Corners, which is used on this site.
There are a number of good image-based implementations on the web, and most sites provide an application that generates the HTML and CSS code for you. Soren Madsen and Ryan Thrash have similar techniques that can create some cool rounded corner boxes. It may be worth it to you to try and implement their designs, but there is no application to create the code for you.
If you want an application that will create the code for rounded corners you can try CSS Round or Spiffy Corners.
Shadow and Light
Shadow and light can be used to give off an illusion of depth. If you look at the circles below you may not realize they are exactly the same size.
The first circle looks 2D, but it seems to be hovering because of the drop shadow applied to it. A drop shadow can be easily added to an image using Fireworks Filters, and is a common technique to make images stand out.
The second circle still looks 2D, but the shadow makes it appear to be casting a shadow on a surface. A linear gradient is also applied to the circle to add to this illusion.
Finally, the last circle looks 3D. The same shadow from the second circle is used, but a radial gradient makes it looks like a light source is hitting the circle and causing the shadow which gives the illusion of three dimensions.
Textured Backgrounds
Textured backgrounds are an alternative to using solid colors or pictures as the background of your website. Pictures can be very difficult to use effectively on a website because of the variances of web browsers and the fact that text can be hard to read if care is not taken when choosing a background picture.
You could make your own textured background in Fireworks or Photoshop, but it can be hard to get the texture to line up correctly when it is repeated. There are a lot of sites on the web, though, that provide background textures for free so a search engine is probably your first stop when you plan to use a background texture. Simply search for "background texture" and you will find hundreds of results. One good site to find a lot of background textures is the Absolute Background Textures Archive.
- 1. Download the image above to your images folder.
- 2. Add a new CSS rule for the <body> tag.
- 3. Change the background image to the texture you downloaded.
- 4. Finally, change the Background-Repeat Property to "repeat".
You can also choose to have your background repeat along the horizontal or vertical axis. Choose "repeat-x" to make the background repeat across horizontally or "repeat-y" to make it repeat down vertically.
Site Styles
There are a number of different artistic styles you could attempt to recreate when designing your web sites. Although a few are mentioned below there are a lot more styles you can use, or you can even come up with some of your own. The website CG Textures has a number of great textures to help you design your site.
Weathered Style
Using weathered styles can create a feeling of history or age. The Tattered Fly website has curled paper, stones, and tears that give it this style. This style is so popular that Cameron Moll came up with the name "That Wicked Worn Look" and created a series of tutorials to create it for yourself. You can find the tutorials at his website.
Cartoon Style
The cartoon or whimsical style is usually used for playful or sites aimed at children, but Yes Insurance uses the style to hearken back to the days of carefree childhood in the hopes that the adults who are browsing the site are more inspired to buy insurance. The cartoon style uses simplified graphics and shapes along with bright colors schemes. Rounded corners are used quite a lot with this style.
Web 2.0 Style
The term "Web 2.0" was coined by Tim O'Reilly in 2004, and while Tim did not originally provide a graphic context to his term there are a number of design trends that have developed around it. Mozilla's website contains a number of Web 2.0 design elements including gradients, rounded corners, and plenty of white space.