Creative Curio

Texture can be the element that really takes your designs to the next level. Textures create visual interest and add those touches of detail that were previously missing. Think about what kinds of textures are inviting (silky, soft, fluffy) and which you’d rather keep away from (rough, hard, thorny).

Texture can be used to

• Define shapes or space
• Add visual interest (detail)
• Create a mood
• Emphasize
• Create a tactile response, evoke memories and add realism

Non-Traditional Materials

Often textures are implied; shadows and highlights add depth and realism to a digital design. But you don’t have to be confined to the digital world. Step it up even more outside of the computer!

Remember that the stock (paper or other material) your printed pieces are on is also part of the texture of the overall design. You can use different non-traditional materials, too, like glass, plastic, cardboard, ribbon, wood or twine. Antique shops, hardware and art supply stores are a great places to find some texture inspiration.

Great Design Using Non-Traditional Materials is an awesome little book if you’re really interested in these types of designs. Sheree Clark, one of the authors, recently wrote an article for Dynamic Graphics on using non-traditional materials in your work, complete with suggestions and ideas.

Free People

I absolutely LOVE the style of the Free People website and it seems to change almost every time I come back. The (r)evolution taking over the web right now is grunge, which adds the textures of the physical world into this digital realm. Free People also integrates the unique textures and patterns of its textiles, so the design not only is a great example of texture, it’s also an excellent use of incorporating the product into the design. The textures used in this site give it a very earthy, down-home, yet semi-exotic feeling.

Echo textures in the photos or from the text in a layout. If the subject is of an ethnic or cultural nature, find native textures in plants, building materials and fabrics of the region that will add to the overall experience. Instead of a simple solid line for a border on a layout, try dots, dashes or, for even more texture, making it look like sewn stitches, twigs or twine. If it fits the style, “attach” photos to the layout with duct tape, staples or paper clips. Remember, if creating a texture completely from scratch in Photoshop is too difficult or time consuming, take a picture, scan it or search through stock photography collections.

Yolo Colorhouse Packaging

The different YOLO Colorhouse paint cans (found via Communication Arts Design Annual 2005 and The Dieline) have three different main textures used in the backgrounds of their paint can labels. They represent the indoor, outdoor and “little YOLO” lines of paints. The textures are not only visually interesting, but they help the consumer distinguish between the types of paints, so you don’t accidentally buy exterior paint for your bedroom.

The old-fashioned nature illustrations used as the background create an interesting juxtaposition of old and new; the paints themselves are very eco-friendly, which is a fairly modern concern. The handwritten font (Cezanne) used on the paint cans for the tagline—“Created by scientists and artists with nature in mind”—is full of texture and adds to the rustic, vintage feel of the design.

The YOLO labels are a great example of texture being used to emphasize. The background is a wonderful visual experience, but notice how the important information is on a label almost completely devoid of texture. They could have made the label semi-transparent to show some of the background through, thereby promoting unity, but I think it’s much more effective to have it opaque and without texture because of the stark contrast that is created.

Passing Notes

Debossing is an awesome finishing technique to add texture to a printed design, like on these letterheads from Passing Notes (also see Abbie’s submission at AIGA). Sure, you can fake a deboss in Photoshop, but nothing can substitute for that tactile connection gained from the texture of a genuine deboss (or blind emboss). The folded notes also add texture to the design as the layers overlap each other. The texture here brings back memories of passing notes in grade school.

Also take into consideration other finishing techniques such as varnishes (matte and glossy), foil stamping or take the piece outside the lithographic world to a letterpress artist!

Migros Packaging

Let the package’s contents show through the package via a diecut for some added texture, like this Migros meat package found by The Dieline.

Remember that typography has texture, too! Thick or thin, tall or short x-height, dense or loose tracking and leading, serif or sans serif, and especially display fonts (like Cezanne mentioned above) can add to the texture of the canvas.

This has been the fifth installment in Real World Examples of the elements of design. Previously covered have been line, shape, space and scale. Next up will be value and color.

Subscribe to Creative Curio (What is RSS?) so you don’t miss them! Email subscriptions are available, too, and as always, both subscription options are absolutely free!

convert this post to pdf.

Size is often used synonymously with scale, but there is a distinct difference between the two.

Size is the physical dimensions of an element in the layout (a 6 inch by 6 inch image). Scale is the size of the element as it relates to its usual physical size (it is impossible to get a full size human on an 8.5x11 piece of paper, so s/he would have be scaled down to fit).

Size is relative to the layout. Think about 12 pt font in a magazine vs. a billboard. It’s the same size, but in relationship to its layout, it can seem just right or entirely too small.

Size and Scale are used to

• Create depth
• Create perspective
• Create hierarchy and organize
• Create interest and variety

I Love Typography

Using size to construct the hierarchy of a layout is probably the easiest way to introduce this element.

Take a look at I Love Typography, the definitive typography blog. It is easy to distinguish the header from the headline, byline, subheaders and body copy. This is because they vary in size and your eye is naturally drawn to the largest element first. Note the drop cap, too; it’s a great way to indicate where the reader should start and an example of using size to direct the viewer’s eye.

Onitsuka Tiger

This Onitsuka Tiger ad is an interesting exploration of scale. The shoe is made up of the elements of the culture they are appealing to. You’ll remember those posters where little photos are put together in such a way that they create a larger image, which is along a similar vein (and what is on the website madeofjapan.com).

The use of scale for this image pulls the viewer in to look at the details. Using small details in this way is a great tactic for holding the viewer’s interest. The effect is that the viewer wants to see all the different pieces, to see if s/he recognizes any of them in order to identify with the ad in a more personal way. The details don’t just have to be in the image, they can also appear in repeating icons in a border or background elements.

Military Museum

Experiment with scale for background elements, texture and patterns. In this Military Museum ad, the planes have been scaled down to create a kind of pattern. Alternatively you can scale something so large that it becomes nearly unrecognizable, and so creates an abstract background (think of most macro photography).

Nikon Vietnam and Foster’s Matchbook

Visual cues are important when relating the size of objects that might be unknown to the viewer. You often see images in ads that show a coin next to an object, or a person next to a product in order to give the viewer an idea of the actual size. Of course the reference point needs to be on the same plane, otherwise it will distort the perspective (Nikon ad).

It can be effective to mess with the viewer’s perceived ideas of how large or small an object should be. Think of rides at amusement parks like Disneyland where you are blown up or shrunk down and your perspective of the world is skewed. Sometimes it’s fun to get a different perspective.

Consider how you crop photos in your layouts, too. For example, would the Foster’s ad have been as effective if it showed the whole person instead of just a hand? Maybe, if the guy was super dorky, but still managed to get a lot of numbers because of Foster’s, but it probably would diminish the shock of the huge matchbook.

Use Scale Wisely

Look at how scale is making your layout more interesting.

• Add an object or image that is magnified x3 to create an abstract background
• Shrink the image smaller and duplicate it to create a texture or pattern
• Would a single large, dramatic image or 6 smallish images that don’t show much detail be more effective?
• Add to or skew the viewer’s perspective with the use of scale.

And be mindful of possible poor uses of scale.

• Size of an object can overwhelm the layout.
• Everything the same size = boring, possibly confusing (hierarchy).

Of course, once you know the rules, you can purposefully break them to create a desired mood or affect!

This has been the fourth installment in Real World Examples of the elements of design. Previously covered have been line, shape and space. Next up will be texture, value and color.

Subscribe to Creative Curio (What is RSS?) so you don’t miss them! Email subscriptions are available, too, and as always, both subscription options are absolutely free!

convert this post to pdf.

If you’re a new visitor or subscriber to Creative Curio, you’ve come in towards the beginning of a series on the elements of design. This is the third post on the series real world examples of the elements (the first two being Using Lines and Using Shape, but if you’d like to read up on the theories, visit the first series on the elements of design on Creative Curio: line, shape, space, size, texture, value and color.

Space is probably my favorite element of design. It’s so versatile and I think it can have the most impact on a design. Whether your intention is to make the viewer feel claustrophobic or free as a bird, space can help you do it.

In its most basic definition, space is mass, height, width and depth.

Space is used to

• Set mood
• Emphasize
• Create depth
• Balance
• Rest

Paul Sahre – Free Lecture Poster

Space, often referred to as “white space,” doesn’t have to be white. It can be blue, yellow or even pink. White space is really referring to a place for the eyes to rest, for the design to breathe. It relieves tension.

This poster by Paul Sahre creates an interesting juxtaposition of the substantial amount of white space and the thin, stretched, barely readable text. The design feels all at once peaceful and anxious. I would actually call the white space (the pink area) negative space, because really the white area is the positive space—it houses the text and creates a border—and the pink is the lack of space.

It’s a good time to point out typography and it’s reliance on space, too. Leading, tracking and space between paragraphs and subtitles all play a part in the amount of resting area in a layout, which in turn influences mood, texture and balance. Overlapping lines of text created with negative leading will make a tense and possibly confusing statement about the design. Or, it could make a very bold and loud statement. Loosely tracked text can make a different statement, but can still be as frustrating to read. Orwhataboutreadingsomethingthathasnospacingbetweenthewords? Ah, beginning to see the power of space now?

Google

I think Google is one of the most successful examples of using space to emphasize. There really isn’t anywhere else to go except to the search bar, which is a big reason why Google became so popular as a search tool. If an element is the only thing on the page, you can’t help but notice it.

You see this technique of using space to emphasize used a lot with business cards, where clear information communication is the primary purpose of the design. They are also successful examples of using space in an economical way—getting the most bang for your buck, so to speak. Space is at a premium with business cards because of their size, so how it is used must be carefully considered

Bugaboo Day Trips.com Roma Map

There is not a lot of space in this map from Bugaboo Day Trips. It’s pretty visually overwhelming, but it’s likely intentional. It adds to the feeling of “so much to do, so little time” and accurately reflects city’s crowded layout.

What stands out here? Yes, the streets leading to Plazza del Poppio. Why? Negative space. It’s a resting place. It’s some peace from the chaos surrounding it.

Space is a powerful element. Use it wisely!

This has been the third installment in Real World Examples of the elements of design. Previously covered were line and shape. Up next are scale, texture, value and color.

Enjoyed this article? Subscribe to Creative Curio (What is RSS?). Subscriptions are available via email, too.

convert this post to pdf.