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:
