Showcase of Patterns in Web Design

Published in Galleries

Patterns can be used in web design as a visual focal point, or they can be used subtly to add character to a design. The use of subtle patterns is very popular at the moment. In many cases subtle patterns are used on backgrounds instead of a flat, solid color or a heavy texture that might dominate the design.

In this post we’ll showcase more than 25 websites that make use of visual patterns in their design. You’ll notice that subtle grids in particular are very common, and the sites in this gallery use them effectively.

Kaleidoscope

Kaleidoscope

Squared Eye

Squared Eye

Bronco

Bronco

You Know Who

You Know Who

Scribble & Tweak

Scribble & Tweak

Marie Poulin

Marie Poulin

Studio-XL

Studio-XL

Create a Free Website

Farrkling

Farrkling

National Association of Photoshop Professionals

National Association of Photoshop Professionals

Utopic Labs

Utopic Labs

Simon Collison

Simon Collison

DropBuilder

DropBuilder

Ringer

Ringer

Quaintology

Quaintology

Submit Design News

Submit Design News

Ugmonk

Ugmonk

Peppermint Dental

Peppermint Dental

Mercury Producciones

Mercury Producciones

Warner Pacific College

Warner Pacific College

Coreymade

Coreymade

Colin McKinney

Colin McKinney

Galpin Industries

Galpin Industries

AFD-Folio

AFD-Folio

Tapmates

Tapmates

WP Zoom

WP Zoom

Archibald Studio

Archibald Studio

McCombs Creative

McCombs Creative

Min Tran’s Journal

Min Tran's Journal

For patterns that can be used in your own work, please see these premium resources:

12 Responses

Warawick July 26th, 2011

Great list, my site went live last night and has a similar pattern to Coreymade and Warner Pacific College

shiraz July 27th, 2011

I want to add http://www.latestfashiontoday.com in the list because its also using the same as shown.

Thanks!

Gavrilo July 28th, 2011

nice patterns and sites , any one have some link for downloading this kind a patternes

Anonymous July 28th, 2011

I love subtle patterns.The “Bronco” in the third of the list seems meaningful.Symbols always look simple but rich in content .

Tristar Web Design July 28th, 2011

Backgrounds can give real feeling to web designs. It brings the images off the page, smooths out the design and makes edges and drop shadows look less sharp. I love the crisscross look in Zaarly and also the moving lens flair. I don’t like the national association of photoshop professionals. The website is a little outdated.

Ryan Leaper July 28th, 2011

Patterns play a vital role in the design of a website. As many of these show although only subtle the overall effect of using patterns for backgrounds greatly enhances the look and feel of a site. There are so many great examples of this hear it’s difficult to highlight one in-particular, however take the Min Trans Journal design for example. There are a number of patterns and textures at play hear but they all work well together and bring the page to life. A great inspirational showcase.

Asim Craft July 28th, 2011

Great list! The patterns give a lot of texture to the designs. Looking to revamp our web site and this list is great inspiration. Take a look and see if any of you have suggestions for Digital Designz Media website

Alexandre Soares July 28th, 2011

amazing list!

aledesign.it July 29th, 2011

A nice list… my preferite are “You Know Who”, “Coreymade” and “wpzoom” a nice ideas
of patterns. I like have an image like a background a site…but sometimes I need a particular effect of patterns and this is a good selection. Thanks for sharing.

Mark Wong July 30th, 2011

Subtle patterns are best – thanks for sharing.

Fishpunt July 31st, 2011

Great post, using patterns can really help promote a better user experience.

Sergiu August 6th, 2011

They really boost the perception of a website, it gives a more “hand made” feel. But sometimes, it gets really boring when you see the same pattern on more then 3 projects.

Leave a Reply