Patterns and textures in web design: awesome examples and resources

Inspirationby Team WeGraphics Apr 6, 2011

The visual approach, while designing a new site, often starts from the background design. A cool pattern or a subtle texture are details that can make the difference. Today we showcase web sites with an awesome use of patterns and textures, along with a list of resources that you can use to achieve the same results. Let's start!

Micro patterns

colinmckinney.co.uk

fishrestaurantcharleston.com

galp.in

all-for-design.com

electricpulp.com

tapmates.com

Minimal patterns for backgrounds

Minimal sites and posters beauty is based on few elements like typography, content distribution, color combination and awesome repeating patterns that fill the background. This a great set containing 20 minimal patterns (10 for the light version and 10 for the dark one), that you can use to stand out the background of your sites and posters.

Bokeh

ideage.ru

idosurfbetter.com

clear-web-solutions.com

motocms.com

envato.com

Bokeh Textures Vol1

Bokeh is the term used for the out-of-focus background of images, which can also make for good textures. These were created by shooting a fiber optic lamp with an out of focus lens and a large aperture. They would work perfect for photo overlays, backgrounds, and many other ares of design.

Soft Grunge patterns

wpbundle.com

wpzoom.com

bronco.co.uk

newadventuresconf.com

ecoki.com

Soft Grunge Patterns

The pattern is a very useful element for the web design. It is often used to create nice and unique website?s backgrounds in order to make really attractive a web layout. Here you can choice among 30 high-quality soft-grunge patterns to generate, with few clicks, stunning backgrounds for your web projects.

Noise

solidgiant.com

bushtheatre.co.uk

deolive.ru

lostworldsfairs.com/atlantis

sarahlongnecker.com

Noise effect textures

Here is a great set of textures that can be used to give a noise effect to your compositions. Simply paste in the texture in Photoshop, on top of the other layers, switch the layer blending mode to screen et voilà! Your composition will have a vintage look. Apply the sharpen filter if you resize the texture.

Old paper textures

ryanscherf.net

harmonyrepublic.com

scoutmob.com

svn2ftp.com

head2heart.us

Old Paper Textures Vol1

This is a really useful texture pack: 10 high-resolution old paper textures. I spent most of these days seeking old books to clean from dust and to scan. The result is more than satisfactory!

Wooden patterns

swiths.com

haletminouchet.com

designfabrika.com

nightowlinteractive.com

thethingswemake.co.uk

Wooden patterns for backgrounds

Here is a set of 10 unique patterns, particularly useful to realize a wooden background for a site just with a click. Play with .jpg source images, included in the zip file, to create your own patterns or use the .pat file to speed up your projects.

Watercolor textures

villadario.it

dmottcreative.com

stephencaver.com

ygrin.com

istokpavlovic.com

Watercolo textures vol1

This time I played with watercolors to create 11 amazing textures. After scanned, each item has been modified in Photohop, where I increased contrasts and replaced paper backgrounds with totally white ones (I think this makes watercolor effects easier to use).

Patterns and textures in web design: awesome examples and resources

Micro patterns

Bokeh

Soft Grunge patterns

Noise

Old paper textures

Wooden patterns

Watercolor textures

Decorative patterns

More from Inspiration

Get the newest resources