Make it worn – part 1: preperation

Posted on 21 April 08, in design, tutorials

This is part 1 in a series of 3 titled Make it worn, in which I'm talking about desiging a website with a worn look. This first part covers the stage of preparation I take before entering the actual design phase.

I'm designing a fictional website throughout these articles to show how I go about several stages and techniques. All of the materials I use are available for download, including the final page design and all in between steps. You may use these to experiment, edit, or whatever else you want to do with them, as long as it is non-commercial. On the bottom of each article will be a link to download the corresponding materials. The final article will contain a zip with everything in it.

Content first

Before applying any texture, make sure your content, navigation and other page elements are in place first. That's not say you should completely design those in detail, it's going to be hard to implement your textures afterwards and make the whole design look as one coherent whole. But at least finish your wireframe, decide what's going to be placed where on the page(s), how much space and emphasis each element should get, and so on.

You should be fine with a wireframe looking something like shown below in figure 1 (click to enlarge). It includes all elements that need a place in the page and shows where I want them to go, how much emphasis each of them should have (visualized in size and weight), what's clickable, and what areas belong together (visualized with horizontal lines in various widths and opacities).

Fig 1 – Basic wireframe

although it's always best to do these things first, it's especially important when applying worn textures, because you'll be easily tempted to follow the flow of the textures when placing content, navigation and other elements rather than the other way around, and end with a design that leaves content as a lesser important addition and emphasizes only, or mostly, the textures and how they flow around you page.

Where to start

If you haven't yet played around with worn textures, it's a good idea to take a look around at examples and study them, in order to mimic the effect realistically. The easiest way might seem to look at other websites that sport the worn look, but my advice would be to rather look beyond your computer screen, anything digital will never give as good an idea of what worn looks like as the real deal. So walk away from your computer and look around you. You can see worn textures everywhere, old books and letters, textured surfaces of tables, walls and doors, signs and posters around town, rusted metal, and on and on. Really if you pay attention, your inspiration and even source materials for later usage are everywhere around you. So take pictures, or use your scanner when possible, and start building a library that you can use to create realistic worn textures.

Work inwards

In order to create textures that cover and degrade along the whole of your pages smoothly, it's best to start around the edges and from there on work your way inwards to the details. Don't start out stressing about worn type, custom underlines or hand drawn pointers. Those will fall into place once your basic backgrounds and such are done. Roughly, I take the next steps in order to add the worn look to a site:

• Setting a basic color scheme
• Setting direction of type
• Applying a (repeatable) subtle worn pattern to the background of the page
• Add (non-repeating) details to the background of the page
• Tie up the content areas with the background by applying smooth transfers
• Adding nifty details

Setting a basic color scheme

Once your wireframe is in place, and you've got a rough idea of where your design should be going in terms of visual style, it's time to pick the color scheme you want to work with. There's various ways of doing this, in this example I am going to extract them from some materials I've collected as inspiration.

Fig 2 – Colorscheme extracted from photos of old books and covers

I've picked 4 basic colors that I want to use. That doesn't mean I'm not going to use any other colors, or tweak these along the way, but it does give me a good basis to start from.

Next, I'm going to apply these colors to my wireframe, so that I get an idea of where I want different colors and tones to go.

Fig 3 – Adding some color from the colorscheme to the wireframe

As shown above in figure 3, I've applied some basic coloring to my wireframe. So far I've only added some color to the background, links and headlines. I keep it like this for now, as I feel I've created enough visual guidance for myself while still being able to allow for some accidental effects later on when adding texture.

Setting direction of type

With the basics of color in place, it's time to start looking at type. I am shooting for an old books inspired look, so I've decided to go with a serif font. Books are mostly set in serifs, espcially older ones, so this way I'll have a good start on achieving the look I'm after. I don't pay an awful lot of attention to the type at this point, I only quickly set all of it to Georgia, the serif typeface I picked because of it's availability on most platforms and good readability on screen.

Fig 4 – Setting the basic type direction

I will add more detail to the type once I've got some basic textures in place. Again, I do this because I want to have some flexibility later on. It's certainly not bad to work on your type in detail at this stage, it really just depends on what direction you are taking and how you feel you will best serve the final result of a specific design. Decisions like these take some experience, so experiment with adding detail to type and coloring at different stages, and see what's works best for you and for different types of designs.

And that's it for the preperation! Visit back in a day or two for part 2, where I'm going to start making things worn.

Resources

Here's a zip file containing all resources from this article as psd's.

• Make it worn part 1 - resources