So we’re unable to count on the height of a content block remaining the same at all times, on all monitors. One thing we can do, though, is remove the 90-degree corners that so often characterize rectangle-based layouts. From a graphic design perspective, boxes with rounded-off corners soften the layout, creating a more organic, smoother feel. Remember when I asked if you could make a website design feel like a wet bar of soap? Well, rounded corners can certainly make a site feel a little more slippery. Take a look at the boxes on Simon Collison’s home page in Figure 3.9. The corners of each of the boxes you see here have been slightly tapered to give this very gridtacular layout a slightly softer feel. The upper red box to the left of the image shows a close-up of those rounded corners.

Figure 3.9. The Celebrated New Miscellany of Mr. Simon Collison

So why does the lower red box in Figure 3.9 show a square corner? This is a close-up of what the corners on Simon’s site look like in Internet Explorer 8 and below. They are square because Simon has used the border-radius CSS3 property, which is only supported in Internet Explorer 9 and up. CSS3 is by far the easiest way to implement rounded corners. Because of the lack of IE support, though, it might be impractical unless you’re okay with some users seeing square corners. In Simon Collison’s case, losing the roundedness in IE isn’t a deal breaker. Besides, the real draw of Simon’s site is his jaw-dropping use of media queries. A media query is a feature of CSS3 that allows us to define a conditional rule for applying a certain set of styles. In this case, Simon is using them to automatically change the layout of his site as you resize the browser or view it in different devices. While it’s not a true “responsive layout” (because it’s not fluid), it’s still an impressive and practical way to adapt to the many devices we use to access the Web. Now, go on, open http://colly.com in a browser and resize away.

When I wrote the first edition of this book, border-radius was a glimmering ray of hope for a design technique we’d been trying to implement for years with HTML and CSS. For that reason, I highlighted several techniques for creating rounded corners using extraneous markup or JavaScript. Most of those techniques have been abandoned. If you’re unable to create the effect with simple CSS, I’d advise you to follow Simon’s lead and keep the corner effect subtle enough; that way, your design will still look good with square corners. Visit http://dowebsitesneedtolookexactlythesameineverybrowser.com/ for a further explanation of my stance on this topic.

I mentioned in the section above that diagonal lines evoke a sense of movement and excitement. Rotating shapes and elements in your design have the same effect. Rotated objects break up the horizontal and vertical monotony of the Web and, like rounded corners, help it to feel more organic. Take a look at the Ithaca Events site in Figure 3.10. There’s a lot of rich texture in this design that gives it a handmade feel. The subtle rotation of the logo, “view all” links at the bottom of each date, and other background elements give the site a lot of character. To me, this design really looks like a flyer that might be stapled onto the wall of a local entertainment venue. It’s a perfect look for a regional arts and culture calendar website.

Figure 3.10. Ithaca Events

Currently, the most common way to accomplish the rotation effect is by saving images for your design pre-rotated in your image editor of choice. As with rounded corners, this is a practice that will soon be made obsolete with CSS3. The transform property of CSS3 promises us the ability to scale, skew, and rotate objects directly in the browser window. While the effect will no doubt be overused and abused, having this much design control within CSS is a revolutionary step forward in web design. Just because CSS rotation lacks universal support, it doesn’t mean you should avoid using it.

Pointless Corp. is a great example of rotation of elements. The logo and text are rotated, which adds to the nostalgic-feel of the rest of the site. To reinforce the concept, the blue/green ribbon and text are rotated, too.

Figure 3.11. Pointless Corp. and their rotated logo and ribbon

Rounding corners and rotating elements in your design are just two techniques to make a layout feel less geometric and more organic. There are plenty of other ways to enhance your designs using shapes creatively. Take a look at the Speed Kids website in Figure 3.12. The designers of this site used a simplified style of illustration consisting of a variety of basic organic shapes to create the layout you see here. When I look at the page, the first item I see is the pink octopus. From there, the arrows created by the splashes under the logo guide my eye down to the playground. Next, the bars of the playground and the slides guide my eyes downward, to all of the links. Just in case I missed it, the ripples in the water guide me back toward the center of the page at the bottom, where all of the links and logos are located.

Figure 3.12. Speed Kids

It may not be apparent at first, but the shapes in this page’s illustration are the key elements that define the layout. One way to determine how much influence shapes have on a design is to isolate them by tracing out the layout’s main elements. You can do this either by printing a screenshot of the design and tracing the shapes by hand using tracing paper, or by opening up the screenshot in your favorite graphics program and removing the image after you’ve traced the key elements onto a new layer. I call this the "economy of line" test. The expression economy of line is used to describe art and design that provides significant graphic meaning with as few lines as possible. If a traced page layout still looks complete when recreated using only lines, it passes the test. As you can see in Figure 3.13, the Speed Kids layout still guides your eye around the page effectively, even without the text or colorful imagery.

Notice how the different design elements and how they are arranged leads your eye down the page. You typically start at the top of the page and work your way down, but the shapes of the illustration help your eye to follow a path to the menu system at the bottom. No matter where your eye ends up on the page, every element, such as the slide, the ship masts, and the playground posts lead you to the same place.

Figure 3.13. The economy of line test on Speed Kids' website

When we see a path that disappears into the horizon as the Great Wall of China does in Figure 3.14, we don’t think that its width actually decreases to a single point. Similarly, when we look at an open door, we’re aware that the top and bottom of the door are parallel, even though they seem to converge towards the door frame. We’re not fooled by these spatial illusions because we know (consciously or otherwise) that objects tend to look smaller as they become further away.

Figure 3.14. Perspective on the Great Wall of China

In Chapter 1, I mentioned that altering the proportion of objects was a good way to create emphasis. This is true because we humans rely on the relative proportion of adjacent objects to determine not only the size of those objects, but also their location in three-dimensional space. Although the horses in the background of Figure 3.15 are proportionately smaller than the horse in the foreground, our eyes tell us that they’re about the same size in reality.

Figure 3.15. Proportion in design is more than just horseplay

Light and shadow are the most important visual cues we can use to determine or create depth and volume in compositions. Even with accurate perspective and proportion, a composition without highlights and shadowing will look flat. Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen. Light and shadow alone can also be used to make two-dimensional objects look like they exist in three-dimensional space.

Each of the three cyan-colored circles in Figure 3.16 are the same size, but the different lighting effects and shadows applied give each a very unique feeling of depth and volume. A basic drop shadow has been applied to the first circle. It’s obvious that this is a two-dimensional object, but the drop shadow gives the illusion that the circle is hovering above the surface beneath it. The second circle has a linear gradient, and a shadow that’s skewed to the right. This combination of light with the tilted shadow suggest that it’s a two-dimensional circle that’s casting a shadow on an angled surface. The fact that the shadow is closer to the bottom than the top of the circle creates a sense of movement: it looks as if the top of the circle is falling towards or away from the viewer’s eye. A radial gradient—meaning one that’s applied in all directions from a central point—has been applied to the third circle, which looks spherical due to the highlight and shadows that the gradient creates. The shadow that it casts matches the location of the light source, which lends credibility to the volume and depth of the shape.

Figure 3.16. Examples of light and shadow

Just as there are many ways to alter the levels of depth with the circles in Figure 3.16, there are other methods to give your web page elements depth using only light and shadow. Take the menu in Figure 3.17, for example. The boxed-in words and rounded corners hint that these are clickable objects, and the dark background on the Products button indicates that it’s either hovered or active. It’s a simple navigation style that would work fine on just about any website, but unfortunately it feels a bit flat here.

Figure 3.17. A clear and functional menu—but it’s a little flat

If these button shapes were really three-dimensional, what would they look like? Would they be flat with beveled edges, or completely rounded on the top? Would the tops of the buttons be straight on the horizontal, or would they have rolling curves? What would happen when light hit them? All these questions can be answered by looking around you. For the example in Figure 3.18, I imagined that my links were lit from above, so I gave them a slight gradient rather than making the background color flat. I also added a bevel to the edges to make them feel a bit like glossy, rectangular subway tiles. I wanted the active link to look inset instead of beveled out, so that it appears to be clicked. I achieved that by adding a shadow to the top of the block instead of a bevel highlight. I gave the text a little drop shadow as well, to make it feel like the letters were slightly raised from the button surface.

Figure 3.18. Gradients, shadows, and beveling make this menu pop

Adding shadows to text and objects is another practical way of creating depth in your layout. This can easily be done in Photoshop using layer styles, but what if the person who’s maintaining the site lacks access to a copy of Photoshop? As with creating rounded corners and rotating objects, CSS3 again comes to the rescue. The box-shadow and text-shadow properties promise to make web design far less dependent on heavy images. A great place to experiment with these and other CSS3 properties is http://css3please.com.

No need to restrict yourself to just adding lighting and shadows to boxy elements, though: try involving some perspective, and think about how real-life objects work when you’re trying to manufacture a sense of dimension. Take a look at the screenshot from Worry Free Labs in Figure 3.19. The design of the home page for this Austin, Texas-based design agency is simple and fun, but there’s a lot of inventive texture going on here as well. The “We Are Worry Free Labs” banner becomes a focal point because of its contrast, but another area that gets a lot of attention is where the mobile devices are displayed. There are long, dramatic shadows next to these devices, calling a lot of attention to them. Without these elements, these images could be boring and mediocre. As it is, though, the organic shape and realistic shadows make this a convincing representation of a 3D object in space.

Figure 3.19. Worry Free Labs using a combination of shape and shadow to strong effect

Drawing from real-world inspiration is the key to adding believable depth to graphic elements. Rather than settling for a layout filled with flat blocks of color, lines, and shapes, try to think of ways in which you can incorporate three-dimensional space. Remember that the items that “stick out” the farthest are likely to become focal points, and that perspective and proportion do very little without the reinforcement of light and shadow.

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 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.

Figure 3.26. Grainy texture on Italio's site

This site has several elements that help to establish its unique texture. The wood texture is rich and grainy. Just the right color of wood was chosen to give it that “old walnut” look. Combine that with the cream-colored, nearly parchment-like content area, and it only adds to the effect. The jagged edge between the wood and the cream area is another texture element that breaks things up. The food itself is a texture. Just as the texture of food is important when we taste it, the visual texture only makes us want to try it even more. Thanks to the vivid food photography you can just tell that the coating on that calamari will be crispy and delicious.

The weathered and worn look has been around for ages in both the print and web design worlds. It was popularized to the point where it became a design trend in 2004, when Cameron Moll gave this aesthetic quality the trendy and addictive name, That Wicked Worn Look. Cameron’s series of articles about the topic was an instant hit, and inspired many designers (myself included) to bring more of that rough and worn-in texture to the Internet. Another example of a design that uses the weathered aesthetic to create a sense of nostalgia is the Team Fannypack website in Figure 3.27. This goofy but thoughtfully designed site for a Multiple Sclerosis Walk team has been made to look like a crumpled old newspaper. Notice the weathered texture and folded corner on the paper content area. The sepia-toned color scheme also helps lend this team’s story some historical significance.

Figure 3.27. Team Fannypack in full sepia

Using strong textures with a grungy feel doesn’t mean your site has to hark back to a bygone era. The Electric Pulp site in Figure 3.28 is an excellent example of a site featuring weathered textures without looking like it’s come from a library archive.

Figure 3.28. Electric Pulp: modern grunge

The wood grain used on the Electric Pulp site simply exists to evoke an organic, hand-crafted vibe. The slightly rotated logo, active marker on the navigation menu, and trees at the bottom of the page all feel hand painted, and the “We Build Websites” text looks as if it was burned into the background. All of this helps to establish a very recognizable style that you can see repeated in much of the agency’s client work as well. I guess you could say that rich tangible texture is their calling card.

Although some people feel the wicked worn look is (or was) a fad that has come and gone, I believe it’s a design option that’s here to stay. Like a comfortable pair of jeans with holes in the knees, or a faded stack of postcards with tattered edges, there is validity and honor in things that show wear and tear, and the passage of time.

And now for something completely different …

As a backlash against the worn aesthetic, there was a period of time in the late 2000s when a lot of designers and developers decided to buck the use of textures entirely. At the time, it seemed to be a logical reaction. After all, if you want to make a crisp, professional first impression, adding a ton of extreme textures can be like wearing holey jeans and a concert T-shirt to a job interview. That said, just because you’re trying to be all corporate and business-like, it doesn’t mean your designs have to be boring and flat. Take a look at the Foundation Six website in Figure 3.29.

Figure 3.29. Sophisticated design and subtle texture in Foundation Six

There’s no boring corporate blue or pictures of people in cubicles here, just a professional, sophisticated design with a complementary color scheme and loads of subtle texture. Check out the curl of the F6 banner, the radial gradient on the blue backdrop, and the double shadows produced by the portfolio screenshots. At the heart of this clean, tactile look is the subtle noise texture that’s present on all three of the background blocks you see above. A noise or grain texture is simply a pattern of tiny dots. If you look around you, most surfaces have some sort of subtle texture to them. Adding a bit of translucent noise helps break up expanses of flat colors and pixel-perfect gradients to make digital surfaces look more analog.

Applying subtle noise textures on the Web is a fairly new trend, but because it’s such a primitive building block, I think we will be seeing it in designs for years to come. Another site that adds texture to an otherwise basic layout is the Banger's Restaurant site, seen in Figure 3.30.

Figure 3.30. Ubiquitous texture in the Banger's Restaurant website

Earlier in the chapter, I explained that geometric shapes are the norm on the Web, but they have a very mechanical feel. Without the textures to give this an aged, super-worn feel, this site would lose most of its nostalgic personality. The basic shapes are enhanced with texture, and grit.

Another interesting reaction to—or perhaps more a variant of—the wicked worn look has been a rise in handcrafted designs that look more like a page from a personal journal or scrapbook than a website. A cool example of this look is the site for Needle in Figure 3.31.

Figure 3.31. Intentional imperfection on the Needle site

This site certainly falls into the wicked worn style family, but there’s a fixation here on making it feel handcrafted. Notice that most of the rectangular elements on the page have either been rotated or cut on diagonals. This intentional imperfection makes these blocks feel like they were cut out by hand with a pair of scissors. The same is true for photo in the main content area. It's all been carefully cropped, and a white border has been added around the image to make it feel like hastily made collage from a Polaroid. It’s a great look for a site that aims to make fashion fun and casual.

Another beautiful example of the handcrafted scrapbook style is the site for Marie Catrib’s restaurant in Figure 3.32. Rather than relying on happy-go-lucky scissor work to create a handcrafted aesthetic, Marie Catrib’s uses a torn-paper texture, big images, and lots of hand-drawn text as decorative elements. The result is a free-spirited, playful look that highlights this gourmet restaurant’s artistic personality.

Figure 3.32. Marie Catrib’s: playful but sophisticated

Marie Catrib’s site balances playful creativity with sophisticated craft, but what if you want more of the former than the latter? Using simplified illustrations, vivid colors, and a focus on imagery over content can help give your designs a childlike feel—what I like to call the whimsical cartoon style.

If you’re designing for a target audience that consists of young children, the whimsical cartoon style is a great choice. An example of this is the site for Disney’s Club Penguin, seen in Figure 3.33. If the interactive elements and animation on this page don’t grab a child’s attention, the coloring book-style illustrations and intense colors certainly will. Notice also the repeated use of rounded corners throughout the design, helping to tie the top navigation area into the rest of the site.

Figure 3.33. Playful creativity at Disney’s Club Penguin

Another notable example of the whimsical cartoon style is the site for Pop Cap Games seen in Figure 3.34. Pop Cap publishes games like Bejeweled and Plants vs. Zombies. It’s capitalizing on this by populating the home page with characters from its games. Normally, cluttering a design with eye-catching graphics like this would be a huge distraction from the content. When your business is selling games, though, creating fun distractions is what you’re all about. In this particular case, the plants and zombies staring each other down helps to move your focus back and forth over the page, and perhaps encouraging you to actually read some of the content before going back to playing games.

Figure 3.34. Pop Cap Games

Now that I’ve spent the entire chapter explaining texture and convincing you to add it to your designs, I feel obligated to let you know that sometimes texture is just unnecessary. Just as you might eliminate color from a design to create a specific effect, discarding texture may just be the best way to establish your site’s personality and character.

Take Brian Nathan Hartwell's portfolio site in Figure 3.35, for instance. There are no gradients, no rounded corners, no subtle noise textures… not even any boxes.

Figure 3.35. Brian Nathan Hartwell's portfolio

While some people might say his site lacks interest, I’d argue that Brian has simply removed all unnecessary distractions. It’s an extremely minimal, monochromatic layout that serves one purpose: delivering content. Since that content is primarily about his awesome work, it makes sense that he lets his work speak for itself. Eliminating texture and imagery from his design ensures that you’ll do just that.

Avoiding the use of texture in your design doesn’t mean it has to be as stripped down as Brian Nathan Hartwell's site. There are plenty of examples of textureless, minimal designs out there that provide more to look at than just plain text. The T-shirt site, Shirts in Bulk in Figure 3.36 is an example of minimal texture design.

Figure 3.36. Minimalism in Shirts in Bulk

The focal point of this site is the supersized header welcomes new visitors. Like the cover of a magazine, the logo, navigation, and content description are overlaid on top of the main imagery. The print design look is continued below this as the content is divided into tight, grid-based columns. It has the appearance of a printed catalog, but on the Web.

As illustrated by the websites I’ve featured above, texture can have a big impact on how people perceive your design. Staying on top of current web design trends is essential to creating effective contemporary designs, but having a knowledge of past modes that occurred outside the ethereal history of the Internet will help you to establish your own style and original designs.

Some of the most useful web design resources can be found in the art history section of your local bookstore or library. Becoming familiar with the architectural patterns of the High Renaissance, investigating the realism movement (and understanding how it influenced artists like Van Gogh and Cézanne to break all the rules on texture in paintings), and learning how modernism set the course for the design trends of today will help you do more than answer Jeopardy questions. A knowledge of graphic design history will expand your visual toolbox, giving you the creativity to develop a style that’s all your own, and the artistic variety to suit any client’s needs.

Ultimately, the image that your clients are trying to establish, and the communication goals they’ve set, should be the determining factors in how much and what types of texture you apply. And speaking of clients, it’s about time for us to check back on how it’s all going with the Southern Savers redesign.