Aug 03 2010

Showcase of Fresh Texture-Based Web Designs

Advertisement

By Callum Chapman

Over the past few months, the use of extreme textured images in web design is starting to die down. It was used so excessively that is was almost everywhere we looked when browsing the web. Other developments, such as the use of minimalism in web design and various other styles have slowly pushed the dramatic use of texture out of the window.

It does however still play a big part in the world of designing for the web, as this showcase presents. Although there are still some pretty excessive use of texture in a few of the following designs (but hey, it does look good!), the majority of them use texture as a subtle touch-up to their backgrounds, headers or footers, adding that minor but ever-so-important touch of visual interest — why have a plain white background when you can add a tiny speck of texture that just makes your design pop?

This showcase presents thirty-eight fresh examples of texture in web design, from creative design agencies, modern restaurants and even plastic film packaging companies. Let us know your favourite design!

Living For Art

Jasmin’s Living For Art portfolio uses a very delicate crumpled paper texture in the background of his web design, making the sharp, white typography pop from the page.

Progressive One

The Progressive One design uses a texture and pattern combination to pull of this great dark-themed website, making superb use of contrast to make the site easy to view.

In Safe Hands

In Safe Hands is a very light and simple site, with a strong illustrated style, featuring a vector style logo. The background uses a very light texture, only very slightly darker than the main background color. This helps add a little more interest to the design, keeping it fresh and modern.

Grafitio

Grafitio is one of the heavier-textured designs in this showcase, which is very suitable for the type of site it is and makes it incredibly easy to remember. Heavy texture is used throughout the whole design, but is especially heavy on the left-hand side of the site and in the header, bringing out the best in the logo and navigation. Texture is also used for the area beneath the header, making it seem like the design is in fact produced using real-life elements such as paper.

Aggressive Panhandler

Aggressive Panhandler, in my opinion, manages to pull off textured design, sleek design and minimalism design all in one go. The design uses some great newspaper style typography, with sleek sidebar headers and all topped off with some nice textures used in both the content background and main background.

No Creativity Blog

The No Creativity Blog is quite an odd design, but works perfectly well, making use of scaled-down textures to create a collage style background, fitting in nicely with the digital header collage.

Urban Influence

Urban Influence don’t actually use texture in their design, but do however make use of it in their image slider in the header. Using texture in these images really helps add some depth to the site, and makes it much more visually appealing. The images also make use of bright attention-grabbing colors that only help to add more interest to the design, and also helps to bring out the gorgeous oranges, blues and browns used throughout the design in the headers and active links.

Clickfarm Interactive

Clickfarm Interactive I’m sure would just be a drop-dead beautiful design without the texture – with it, it’s even more amazing! The texture used in the background image brings the clean content background out from the rest of the design, and overall just complets that “farm” look.

Douglas Menezes Blog

Douglas Menezes Blog design is probably one you’ve seen before, known for its dramatic use of opposite color’s and geometrical shapes. The texture makes this design go bang though. As the texture has been applied to the design using the Overlay Blending Mode (or a blending mode very similar to) in Photoshop, it adds some different shades to the color’s, making it indescribably excellent.

No Sleep For Sheep

Dark designs are sometimes hard to pull off, especially when trying to embed strong, heavy texture. No Sleep For Sheep, as well having an interesting name, have a really interesting design, making use of a blue grungy texture to act as the sky behind the silhouettes of a curvy hill and plenty of sheep.

Maverick Ads

Maverick Ads have gone for a elegant grunge look, using swirls and curvy line vector-style elements alongside textured stone images to produce an interesting and unique style.

Creative Spaces

Creative Spaces have a rather strange but very creative design, featuring floating objects, walls with clouds, a human with a deer head and several great uses of texture, including a grainy stone texture for the walls, and real wooden flooring to make the design seem as (strangely) real as possible.

Crush Lovely

Crush Lovely is a very simple, sleek and modern design, but makes great use of a subtle noisy texture background to make the clean objects and bright images pop from your screens.

Five Points Interactive

Five Points Interactive use the much-loved notepad-style design, using real paper textures and watercolor textures alongside beautiful floral patterns and paperclip images to pull together a lovely theme.

Michela Chiucini

Michela Chiucini’s design is another one that uses scanned in textures to produce a life-like theme as if it had been put together using physical objects you would see and touch almost everyday. The use of cardboard texture is used for the footer design, setting a lovely backdrop for a list of recent articles and a Flickr feed.

CSS Tinderbox

This newspaper-style design features some great vintage-looking typography and images, and is very minimal, mainly depending on it’s strong typography to attract and keep viewers. It does use a pretty subtle paper texture though, which helps draw out the typography, and adds a lot of visual interest to the design.

Blackwave Creative

Blackwave Creative’s site would look perfectly great without any use of texture, however it does really suit the design, and helps to bring out the typographic navigation bar at the top of the design, as well as some other elements such as the curling piece of paper pinned to the header.

The Man In The Sea

The Man In The Sea have yet another minimal and simple design, making use of some sweet typography and columns to add some unique visual interest to the design. The use of heavy texture merging into a much more subtle texture in the header/main background makes the rest of the design look even better, especially as it is greyscale, making the strong orange typography even more beautiful.

Maxim Design

Maxim Design (again) use a pretty strong, greyscale textured background to help the large distorted header typography stand out.

Gnutoff

Gnutoff have a very unique and slightly odd design with a lot of empty space in the middle of the page. The design is very limited in terms of color, sticking to just black and red for the images and typography in combination with a washed out yellow textured background with red splotches.

Street Youth Couture

Street Youth Couture’s website is possibly the only one here that may use texture a little excessively, however it does suit there grungy look and graffiti-style logo very well, and therefore is just about pulled off. The greyscale, low opacity brick texture looks great behind that large logo and distorted, grungy typographic navigation menu.

Giraffe

Giraffe (a big restaurant chain in the UK) is one of my favorite website designs in this showcase. The restaurant focus on great food and the music culture, therefore leading to a magnificent design making good use of a strong and very colorful color palette, great effects and of course that subtle texture throughout the site in the background and various vintage-style images.

Fundo Los Paltos

Fundo Los Paltos’ design is very nature inspired, with some great header images, a colorful logo and some silhouette-style branches over hanging the top of the design. A soft-grunge texture is used in the background to complement these features, and it works great!

Papini Plast

Papini Plast uses a repeating, subtle paper texture, adding some lovely depth to the overall design and helping to bring out those awesome images.

Cesky Culibrk

Yet another newspaper style design, and this one also uses a crumpled paper texture to make the newspaper look like a real-life newspaper you’d buy from the shop. The newspaper itself is also placed on top of a texture, giving the whole design more depth and the ability to use more realistic highlights and shadows.

Agencia De Publicidade Brasilia

Agencia De Publicidade Brasilia uses a subtle and slightly noisy crumpled paper texture in the background of their very blue design to add a bit of interest and to help those clean-cut vector shapes stand out from the background.

Digital Vision Queenstown

Digital Vision Queenstown’s web design uses some sleek navigation and buttons in their design, as well as a couple of other web trends. A lined paper texture has been used in the background to produce some low-opacity vertical stripes in combination with a noisy texture to help bring out that gorgeous grey typography.

The Bold Italic

The Bold Italic design has a very popular vintage-style trend going on, using a bunch of low opacity textures built upon each other to produce one awesome looking theme. The use of bold typography and a black and white portrait photograph really tops it all off!

DNA to Darwin

DNA to Darwin is another vintage style design, but focusing on a completely different (older) decade to the website featured directly above this one. This theme uses sepia style photographs, washed our color’s and a similar style of texture in the background to make them all fit into the design nicely. There was no such thing as white back in the day of Charles Darwin!

Design Swap

DesignSwap’s main trend used in their design is “vintage”, making use of large, bold typography with hard, subtle drop-shadows to make the headings very appealing. All of these great features themselves are set on a lovely creme-colored, noisy textured background, helping to finish the design off nicely.

Slavik Dizajn

SlavikDesign use a grungy red/brown texture in their background to help bring out their clean and bright typography and content area.

Pixel Creation

PixelCreation is yet another site that use paper and cardboard textures in their design to produce what looks like a hand-crafted website, using real cardboard and everyday elements to create a friendly and fun environment for their site.

WeGraphics

WeGraphics use the ever popular subtle-noise texture in their background to help bring their content to life. Unlike others however, they also use another texture at the same time, making some areas of the clean textured background lighter in some places, and darker in others, creating more depth and visual interest.

David Hellmann

Guess what? You’re right! David Hellmann’s design is one more that uses grainy cardboard textures to create an interesting textured background for his web design. This works tremendously well with the other colors in the design, as well as that collage-style look with the wonky thumbnail images in his portfolio section.

14 Styles

14 Styles do something a little different. Their site is very clean and actually quite minimalist compared to most here, making use of white space in the main content area and clean typographic elements. The header features a nice blue/grey checkered pattern, and is complete with some noisy texture graphics to just give it that little bit of extra “oomph!”.

The Tate Movie Project

The Tate Movie Project site is a very new one, and uses a bunch of really cool, interactive elements, including the header which is one big clickable-experience to get the users interacting and spending more time on the site. The site features loads of textures in a bunch of different places, such as the main background, the content background, and each little element within the sites content.

New Adventures in Web Design Conference

The official website of the New Adventures in Web Design Conference (held in England early next year) uses some superb CSS effects to create interactive elements, and pulls the whole vintage-style look off with some superb grainy card and paper textures used in the main background of the site.

DesignGiveaways

DesignGiveaways is a very clean and minimal site, using a very subtle but noisy tile-able texture in the main background of the site, helping the main content area and menu stand out more.

If you enjoyed this post, you’ll probably like (and want to check out) some of the previous posts from the Smashing archive:

About the Author

Comments and Discussions
  • Fernando de Sá, 03 August 2010

    exceletne recopilación!!! felicitaciones, algunos de ellos muy inspiradores

  • HammHetfiald, 03 August 2010

    This is a great list !

    Slavik Dizajn’s texture is amaizing, really like this one and New Adventure too !

    Thank you :)

  • Ted Thompson, 03 August 2010

    Some great looking websites. Grafitio is my favourite! Thanks for sharing.

  • Jamie, 03 August 2010

    Agreed, Grafitio is most rad.

    Really fun collection to take a gander at, thank you.

  • Bassam Aklan, 03 August 2010

    Nice topic

  • esranull, 03 August 2010

    very nice list thanks

  • Lee Gustin, 03 August 2010

    Awesome textured sites, love them :)

  • Antonio, 03 August 2010

    Lovin the vintage style designs. :) “Fundo Los Paltos” is also great.

  • Jasmin Halkic, 03 August 2010

    Thank you for adding my design in this article. :)

  • farhad, 03 August 2010

    nice .
    thank you

  • Pusparaj, 03 August 2010

    I’m not happy with the listing, though some of them are nice.

  • PsdDude, 04 August 2010

    Beautiful collection! I like Douglas Menezes Blog ,he is very creative!

  • Design Dazzling, 04 August 2010

    Awesome examples

  • Hypesol, 04 August 2010

    really nice … thanks

  • Arshad, 04 August 2010

    Really perfect designs

  • Ronny, 04 August 2010

    Thanks for including me in this list!
    Although I like the others way better!
    Some pretty cool ones in here :D

  • Jesse, 04 August 2010

    What’s with Five Points Interactive? Compare that to http://www.webdesignerwall.com/

    They look almost exactly the same, even down to the little color swatches on the left.

  • Ravikumar V., 04 August 2010

    nice designs

  • Tom Doyle, 06 August 2010

    Very nice – my favourite would have to be Grafitio too.

  • Bexxie, 06 August 2010

    I love textures in web design! I’ve seen a few of these sites before in other roundups. All great designs! I especially like the reddish/brown texture of Slavik Dizajn.

  • Tiff Reed, 17 August 2010

    I love textures in web design – especially when they’re done right. Awesome round up!

search form
 
image description image description