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.
http://www.esteelauder.com/index.tmpl
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.
http://www.thenorthface.com/catalog/index.html
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
http://www.adidas.com/us/content/basketball/
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.
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.
http://www.beetle.com/int/en/home
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.
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.
http://www.zirkuaestudio.com.br/#prettyPhoto
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?
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.
Or in the following app the texture and pattern of the maps and buttons represents the real version:
Conclusion:
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.
