![\"image04\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image045.png\")
<\/p>\nYou\u2019ve seen patterns before. You\u2019re probably looking at some now. And you\u2019re inundated with them every day: Layouts and icons, symbols and workflows. The bulk of web design is built on patterns.<\/p>\n
Sometimes they\u2019re obvious. Design agency sites tend to mimic each other, following broad trends as technology advances and trends change. News sites that experiment with article teasers\u2019 formats still use them. And shopping carts tend to work the same way.<\/p>\n
<\/p>\n
Photo credit: http:\/\/adwyse.de\/<\/a><\/p>\n Other times they\u2019re more subtle, like variations in sites\u2019 footers, or the (growing) use of \u201chamburger\u201d icons which, at the time of this writing, most readers don\u2019t quite get<\/a>. Or scrolling sideways instead of down through a website. It\u2019s technically possible, but unexpected.<\/p>\n Photo credit: http:\/\/revelator.com\/tour\/promote<\/a><\/p>\n Whether they\u2019re easy or not, it\u2019s important to recognize when you\u2019re using patterns in prototypes. Knowing conventions that users expect \u2014 and knowing when to break them \u2014 will make your designs easier to use and stronger overall.<\/p>\n In this post, we\u2019ll describe a few techniques for finding and customizing the right UI patterns.<\/p>\n Unfortunately, keeping patterns in your head isn\u2019t a great way to manage ideas. Assumptions creep in, and not having a visual reference makes patterns difficult to share.<\/p>\n Creating a pattern library is so important that entire sites like UI-Patterns<\/a> and PatternTap<\/a> exist as design references. But you can also make your own. Let\u2019s look at the process described in the free Web UI Pattern Handbook<\/a>.<\/p>\n Step 1:<\/b> Look for design patterns in the wild. Here\u2019s one way how.<\/p>\n That last item underscores the point. The key to pattern-hunting is to start with a running list of patterns: a repository of ideas from which you can pull as needed.<\/p>\n Common patterns include:<\/p>\n But don\u2019t stop there. Keep records of anything you see repeated across websites \u2014 on paper, or digitally with UXPin<\/a> (by creating a \u201cPattern Library\u201d project and dropping in screenshots) or even in a Dropbox folder.<\/p>\n Photo credit: UXPin<\/a> via Airbnb<\/a>, Noveske<\/a>, Species in Pieces<\/a>, Laerepenger<\/a><\/p>\n Step 2:<\/b> Start to use them in your work. Not the examples themselves, but the patterns behind them. <\/p>\n It\u2019s OK to use breadcrumbs. It\u2019s less OK to use red breadcrumbs separated by a particular icon that you especially liked somewhere on the web. Remember that patterns are ideas upon which you build your unique aesthetics. (That\u2019s not to say you must avoid every look-and-feel you\u2019ve ever seen. Creating something totally original is nearly impossible today, so seek inspiration from your project\u2019s branding and don\u2019t worry if \u201cit\u2019s been done.\u201d)<\/p>\n Step 3: <\/b>Share your findings with your team. This resource you\u2019re creating benefits everyone. Fellow designers can use patterns for the same reasons you do. Developers will come to recognize the spirit of your designs, not just the surface details. Stakeholders can better understand your design rationale by recognizing similar examples. <\/p>\n Finally, keep at it. Libraries don\u2019t happen overnight. As styles and trends change, so will your collection of examples \u2014 though we bet that the ideas will remain largely the same. It takes a game-changing UI to invent new patterns<\/a>. <\/p>\n A pattern library is more than a scrapbook of interesting aesthetics. It\u2019s also a foundation on which to create your own. <\/p>\n As an example, let\u2019s look at a common pattern for search results. When people browse search results, they mentally eliminate choices that aren\u2019t compatible as they zero in on the perfect match. Normally, that means the primary CTA is to click on the link. <\/p>\n If you were building a results page for a hotel, you need to filter that pattern through user behavior. Instead of browsing down a list linearly, comparative shoppers might move back and forth between options (evaluating based on price, location, decor, etc.). <\/p>\n In the below example built in the prototyping tool UXPin<\/a>, what if you flipped the pattern around so the primary CTA was to remove links that users didn\u2019t want? <\/p>\n Photo credit: UXPin<\/a><\/p>\n You don\u2019t break the idea behind search results, but you riff on the idea, implementing new solutions based on the user context. You can\u2019t think sideways unless you fully understand the solution a pattern represents.<\/p>\n Of course, we don\u2019t know yet if this new pattern will work, but perhaps it\u2019s worth testing alongside the original pattern. It might fail horribly, or it might work better than expected because it\u2019s so unconventional. <\/p>\n Let\u2019s adopt a similar experimental mindset with breadcrumbs. They seem like a simple pattern without much room to grow \u2026 unless you get a little creative. What if:<\/p>\n Not every brainstormed idea is a winner, but may eventually lead to something great. Don\u2019t be afraid to think outside the pattern \u2013 just make sure you test it with at least 5 users before you fall in love with it. <\/p>\n You\u2019ve chosen a pattern. You\u2019ve tested it out. Now it\u2019s time to give it a look. How does that work?<\/p>\n Falling into a rut is easy with patterns when they\u2019re thorough. But if we use good reasons to change them \u2014 when necessary \u2014 then our design will come out ahead. We\u2019ll describe a couple ways below.<\/p>\n Every project has certain attributes that make it seem like a coherent whole. Color and type choices are frequent tools to accomplish that, and easy to apply to patterns. You can use patterns to reinforce that brand:<\/p>\n As we mentioned before, breaking patterns (or at least bending them) will make certain use cases stand out from the rest. The more you use regular patterns, the more differences will stand out. The trick is to identify and question assumptions. For example:<\/p>\n Alternatively, sometimes the simplest solution is best. Patterns that solve a problem do so because they\u2019re well-designed. <\/p>\n Photo credit: UI Patterns<\/a><\/p>\n Buttons, for example, may not need extra frills and colors. Users are accustomed to certain patterns looking a certain way, and if there\u2019s no good reason to change them, then you\u2019d be smart to leave them alone. Good reasons include:<\/p>\n Bad reasons include:<\/p>\n The most important reason to apply your project\u2019s style to a pattern is also the trickiest: not to look like a pattern while retaining its spirit. A table can look like anything, as long as it works like a table. Buttons still need a tappable quality about them. Links need to stand out from text. Otherwise you have free rein to riff on patterns with your own creative ideas. <\/p>\n The web\u2019s history is full of patterns, from clickable corner logos to vertical scrolling to underlined links. Designers have learned to take advantage of how people recognize trends in visuals and interactions, and users have come to expect certain conventions in web UI design. It\u2019s a win-win situation that only gets better over time \u2014 even as it evolves.<\/p>\n If you found this post helpful, go ahead and check out the free Web UI Design Best Practices<\/a>. Find in-depth explanation of techniques spanning visual design, interface design and UX design with examples from LivingSocial, Spotify, Apple, Skullcandy and more. <\/p>\n![\"image02\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image029.png\")
<\/p>\nBuilding a Pattern Library<\/h2>\n
\n
\n
![\"UXPin](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/uxpin-with-screenshots.jpg\")
<\/p>\nGetting Creative With UI Design Patterns<\/h2>\n
![\"image05\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image0510.png\")
<\/a><\/p>\n\n
Tweaking Pattern Styles<\/h2>\n
Incorporate brand colors and typography <\/h3>\n
\n
![\"image01\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image017.png\")
<\/p>\nGive it a little flair <\/h3>\n
\n
Use them as-is<\/h3>\n
![\"image00\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/image009.png\")
<\/a><\/p>\n\n
\n
Going forward<\/h2>\n
![\"\"](\"http:\/\/www.awwwards.com\/awards\/images\/2014\/11\/web-ui-practices-book-2.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"