Website Layout Styles – Grunge and Textured

Now that I have a better understanding of what makes a textured style website because it can created a number of different ways.

Grunge / Textured styles

‘Grunge’ is a stylish design trend that gives web designs a less uniform, less structured, and more organic look-and-feel. It’s characterized by man-made or organic textured/gritty backgrounds, uneven/torn edges, worn, faded and aged graphic elements inspired by urban and industrial architecture and scenery. It gives a way for designers to venture away from the glossy, flashy, and rigid design elements that characterize the “Web 2.0″style – a style that still dominates mainstream web design.

texture grunge website design

So this is a example of a very simple textured website. I can see a texture on the dark cloud which stands out from the background. Also there are some faint clouds in the cream background but these don’t have a texture or hard colour defining them from the background so are harder to see and subtle.

Traditional Media – Paper, Cardboard

Takes inspiration from traditional media such as paper and cardboard. Using scans and images of paper provides an informal, cut-and-paste collage feeling to the design giving the site more of a personal and hand-crafted image – quite opposite to the clean and shiny trend of other web design styles. texture paper web designThis website has used a build up of different paper in the design, so it looks quite realistic. I can see a piece of brown paper, with what looks like a blue photo on top of it, then a bordered photo (dog) on top of that, but this top part actually is a slide show of different photos. Then on top of that is another piece of paper and a paper clip ‘holding it all together’. This paper theme works really well because there are so many different ways to use a piece of paper!


Just like the use of paper in web design, the use of doodles and hand drawn illustrations give an informal, friendly and accessible value to the website as well as giving a fantastic visual addition to the design. Check out this roundup of 30 stylish examples of doodles in web design.texture web design example doodle hand drawn

So this example of a hand drawn/doodle look also has texture in it too! The simple blocks of red show the sky line and the hand drawn stars above are a good example of how to make it look drawn not like computer graphics. Then a striped background that has a texture underneath it, then it appears the background (green) has been hand torn around the edges to give the uneven approach.  All these little details add up to give the website a hand drawn look, which is very effective!


If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. Sometimes designers create whole pages with paper, pencil and/or a tablet PC. Curved links, hand-made icons, backgrounds, notes, stickers and fuzzy lines are supposed to give the site a “human touch”. Combine with a good handwritten font. Hand-drawing is a typical feature of graphic artists, designers and illustrators and is often associated with creativity and inspiration, and is often used in portfolios and showcases. The interesting thing is that the hand- drawn style is often the only element which is used by designers to present their work on their site. hand drawn example website design

So this website really stood out to me over the other hand drawn style ones because I really like the lack of colour, its small pattern background is a beautiful uncomplicated way to start off the design, she has then put a main body of what looks like a piece of lined paper, giving her a plain white to lay her navigation and logo onto. Then also she has a blank area of white that is a hero image which is the space for viewing her work, then a little pink button that says ‘buy stuff’ that takes you to her online shop! I think it has to be the simplest website I’ve ever seen, but also one of the best designs! Another point is that by ‘hand drawn’ I thought that meant a picture, but this example shows that just the font used can also create this effect.

Extreme Sports

The whole lifestyle and adrenaline packed action of extreme sports flows into the design and marketing that’s involved with the sport making for some fantastic inspiration for designers. In the modern world this unique style is spread onto the web making for some distinctive website design sports exampleThis is the Quiksilver website, it has a subtle white textured background, although it is quite hard to see in this example, they have made the background appear to look like snow, which suits the companies branding because they sell winter sportswear. All the other examples I looked at of sports websites were much more extreme designs, but I liked this one most because it isn’t so ‘in your face’.

Natural Textures – Wood

Natural elements lend themselves well to websites, they bring something that we can all relate to to our screens and soften what can otherwise be a sterile and lifeless environment. Wood is one natural element that has been used frequently.wood texture web designThis header graphic shows the use of wood used in design. It is a obvious choice as it represents the woodland scene, but then the wood effect has been carried through to make a background so that when you scroll down the wood effect is what you see. Personally I don’t like this particular wood effect, it looks very fake. Also I think that the wood effect used in the woodland scene should be the same as the one used in the background below it, so that there is some continuity in the design.

Retro and Vintage

Retro and vintage elements are now becoming more and more popular in a variety of design contexts. Online shops, corporate designs, portfolios and blogs incorporate both styles on a small and large scale. While retro focuses on the style of the 1910s to 1930s, vintage recalls the time period between the 1950s and 1980s. Design elements reflect some old-fashioned motifs, trends, personalities and objects. Such elements create a nostalgic atmosphere, awaken feelings and communicate information using emotions. Some such designs make use of so-called “classical conditioning” — a technique used to associate a stimulus with an unconscious physical or emotional response. Common graphic elements can include: illustrations from old posters, movies, newspapers, CDs, vinyls, ads; old-style typography (e.g. Roman typefaces); script fonts and handwriting; old radio devices; old TV devices; old cars; old packaging and old photos amongst others. retro vintage design website example

I have chosen this example because it shows a lot of different retro features in it. The illustration of the woman is very retro, along with the billboard that is advertising the companys name Prahba, this is using some retro milky colours and font. Another feature is the suitcase with travel badges this is a popular retro thing as well.  Personally what I like most about this site is how they have ‘lit’ the billboard, I think that this really sets off the logo for the company and brings it out of the rest of the background illustration which is quite ‘busy’. Many many more examples are on this website.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s