How to Use Pattern in Web and Mobile for Better UX

Screen Shot 2013-03-19 at 11.41.29 AM

When we talk about using pattern in web and mobile, every designer thinks about adding a ready-made pattern to the background of the site or even create a brand new pattern.

If the purpose of adding your pattern is just for improving the aesthetic and beauty of the site, you need to read this post. Creating design balance and aesthetic is one part of the job but not all.

Using the right pattern in correct place can improve emotional connection with users.
And any emotional connection leads to user engagement and ultimately improve the traffic.

Lets say you have an e-commerce site and want to show the feel and look of spring season in your site.
See below how Estee Lauder used pattern for the spring “feel” without showing the cliché  images of cherry blossom or birds.

With this clever and concise approach spring and products are on the same visual level not two levels and viewers see the products with the feel of the spring together with it.

Use of Pattern and UX design


NorthFace site, used the enlarged pattern of their sport ‘s wear, not just to for the sake of using pattern, but to make users visually “ feel” their sport’s wear.

Pattern and UX design


Pattern and User experience



Addidas has the same approach as Northface.

On different pages you see the use of their product’s patterns.

This approach serves many points:

1-    The pattern get branded in consumer’s mind and where ever they see the product reminds them of Adidas

2-    Product can be found easier in the store

3-    The abstract pattern has its own visual value


User experience and pattern


Pattern and User experience


user experience and pattern


User experience and pattern


Creating Pattern Contrast

Havana Mojito Club site

The red wall background with the white cutout of the drink and glass creates a pattern contrast that adds to the coldness and iciness of the drink.

Please note how red brick pattern forces this contrast better.

User experience and pattern design


Beetle site is another example of the pattern contrast:

The shine of the Beetle’s car stands out better with white, rough wall pattern behind it.



user experience and pattern design




The notebook cover pattern is complementary to the idea and also serves as a visual background.“ My Little Red Dinning Book” app supported with the texture of the “notebook” cover together with other illustration elements gives you the feel of what they try to present for this app experience.

Or for the BEER FESTIVAL, background supports the theme.


user experience and pattern design


The texture of the fabric and pattern used in the background of this site provides a great environment and a good background for their fun and whimsical approach.

To understand the value of this pattern in engaging users just imagine it on a white background and you can “feel” the difference.



Pattern and User experience


user experience and pattern design
Don’t you think the use of cardboard texture and the name of the IOS game are very well connected and at the same time eye catchy?


user experience and pattern design

Pattern design and Mobile 

Pattern design in mobile and app design is more Skeuomorphic.

Skeuomorphic patterns create or mimic an image from the real world.

For example see below background pattern that shows the real bathroom environment.
user experience and pattern design


Or in the following app the texture and pattern of the maps and buttons represents the real version:

user experience and pattern design


user experience and pattern design


If you use pattern just to improve the beauty of your site you miss a great point. Smart use of pattern is where you can take advantage of many aspects of the pattern for inviting users to site.


About the author:

Saya is a web and graphic designer, fine artist and a bit more. Follow her on Twitter / Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + = twelve

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>