How to use UI patterns in 5 easy steps

If you’re making a ecommerce site, you won’t get very far without a checkout system. Patterns of this type force the designer to answer critical questions about their site. In this article, Chris Bank of UXPin – the wireframing prototyping app – explains the theory and practices applying UI patterns to your website. Words: Chris Bank
Chris Bank is the growth lead at UXPin, a UX design app that creates responsive interactive wireframes and prototypes. In order to stay up-to-date, below are some quick references for pattern libraries. For example, let’s say you’re building a site for a professional entertainer: you’ll need to include things like an event calendar, biography, and portfolio. The best ways to consistently address these needs are UI patterns. Content Structuring – How is your content presented and accessed? In Web UI Design Patterns 2014, we explain the proper application of web UI patterns by looking at 63 examples from sites like Amazon, Facebook, and Pinterest. Know how to use the pattern – Know the technical details. As discussed in Web UI Best Practices, a website is a form of visual art in its own right, and follows many of the same rules as more traditional artforms. Web UI Kit – Collection of 30 patterns compatible for Axure, Omnigraffle, Photoshop and Sketch. That’s no easy feat, which is why we hold the masters like da Vinci and Van Gogh in such high regard. She illustrates her points through the example of a ‘ratings’ style pattern used by Rotten Tomatoes. Going further
Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. It’s the science of aesthetics, mixed with the principles of business, and an extraordinary website interface must feel effortless yet enticing. The Three Levels of Design Patterns, courtesy of http://ui-patterns.comIt’s best to think of UI patterns as best practices for core site functions such as:
Getting Input – How will users provide you data, and how will the site give them feedback? The broadest benefit of patterns, implementation, is the most cut-and-dry. Find a strong example – Search the web and find a site that uses the pattern well, in this case, Rotten Tomatoes. Social Sharing – How can your site encourage more social sharing and interaction? Missing out on a useful pattern can waste your time with finding a solution that others have thought of already. Find out how others have solved it. A good use of the rating pattern will include an aggregated average of the user ratings, an option to change the rating later, a display that lights up when you hover on it, a cue to let the user know their rating is accepted, etc. As shown above, the ratings patterns gives users quick feedback and allows their voice to be heard, plus it is useful in collecting user data. More than being creative, a good artist must also consider subtleties like composition, colours, size, what to include, and – perhaps more importantly – what to leave out. 03. Navigation – What menus and tabs will guide the user along? For analysis of UI examples from over 33 companies, feel check out Web UI Best Practices. Pick the right UI Patterns
The process for selecting a UI pattern can be simplified as:
Figure out the problems that need to be solved. How to use UI patterns
Anders Toxboe, designer at Benjamin Interactive in Copenhagen, theorizes that patterns can aid a site in three ways: context, flow, and implementation. Web UI designers must do the same. Once you’ve determined the overall visual hierarchy of the website, you still need to determine the fine details of your web interface such as how users can input data, how the site provides feedback, and many other functional and aesthetic factors. Instead of recreating the hierarchy for each page, a UI pattern ensures site-wide consistency. When using patterns for flow, things get a bit more interesting.  
UI Patterns – A convenient web pattern library with patterns organized by category; however, it has not been updated recently. Web UI patterns are great guidelines, but just remember they are not templates – more like a formalized best practice that’s open to your own creative freedom. Would my site benefit more from lazy or account registration? Keep track with pattern libraries
Unless you’re a hardened UI designer with years of experience, it’s hard to keep track of all the patterns at your disposal. 01. You’ll rarely be able to create an interface just by stitching different patterns together, but they are a great foundation for customization. What is the best way to get input from my users, given my target audience and the type of site? This is basically choosing what type of site you want, and following patterns specific to that type. Prioritize your interface based on how people scan for information.

Updated: 20.12.2014 — 13:07