7 months ago


104 The Principles of

104 The Principles of Beautiful Web Design When applied to our document, our hihopickles div might look like the display shown in Figure 3.23. Figure 3.23. Hi Ho Pickles! As I said before, it’s sometimes difficult to spot a repeated background image in a website design. For a little practice, take a look at the screenshot of Dave McNally’s Tileables 7 site in Figure 3.24. Figure 3.24. Tileables, a resource for never-ending patterns There are no annoying repeated brick or corny animal cracker backgrounds here—just a sharp, wellpolished resource site for Photoshop pattern packs. But beneath the surface, the Tileables design uses several repeated backgrounds. Figure 3.25 highlights a few of these. 7

Texture 105 Figure 3.25. Three repeated background images in the Tileables design 1. At first glance, this decorative tile looks like a continuous series of textured squares. In reality, though, it’s a single image of just one color block, that’s then applied as a background to the header of the site and repeated horizontally and vertically to fill the space. 2. Shown as a preview are some of the other images that you can tile to create repeating patterns. The image is only used once, but it is repeated infinitely horizontally, vertically, or both. Building Texture In review, the texture-related elements I’ve described so far are point, line, shape, depth and volume, and pattern. Individually, each of these components creates some level of texture; however, when you begin to use them together, they build on one another to create more complex visual imagery. How you combine them depends on the type of effect you’re trying to create. So, the question is: what is the textural effect you want to achieve? Let's look at a few options. Aged, Weathered, Worn, and Nostalgic Style Perhaps you want to emphasize the timeless nature or nostalgic history of your subject. You might want to replicate the rich wood found inside a gourmet kitchen or in a traditional Italian home. Notice the grainy wood texture in the header and below the slider in the Italio Kitchen 8 site in Figure 3.26. It frames the content and provides a great deal of contrast to the smooth, cream colored sliding gallery area. It also gives a sense of tradition and age. 8

Boot Camp
Layout and Design - In Easy Steps
GD Starter Pack 2017
30 ways to create amazing web experiences on tablets
Download PDF -
Facebook Pages -
HTML and CSS design and build websites
Title & Picture - Split - HubSpot
How to survive a redesign
Responsive Email Design Guide - e-Dialog
Learn web design
The Complete Guide to a High Converting Website
PDF Specimen Booklet - Fontworks UK Ltd
Visual Design for Library Websites - WebJunction
Web Site Design & Usability Testing - HIPNet
Visual Design and Web Site Usability
5ml User's Guide
Creative Services - Keiger Graphic Communications
Hyper Text Design
From Print Design to Web Design