{"id":9258,"date":"2015-10-08T19:01:46","date_gmt":"2015-10-08T19:01:46","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9258"},"modified":"2020-04-29T15:08:35","modified_gmt":"2020-04-29T22:08:35","slug":"4-easy-steps-to-using-ui-patterns","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/4-easy-steps-to-using-ui-patterns\/","title":{"rendered":"4 Easy Steps to Using UI Patterns"},"content":{"rendered":"

The more people use the web, and the more designers figure out what works, the more refined design solutions become. Far from being trends, these design patterns are proven jumping-off points for your design work.<\/p>\n

Some solutions work so well that most designers use them repeatedly. And through familiarity, users have come to expect them. As explained in Web UI Design Best Practices<\/a>, this was the beginning of web design patterns: a common visual language that both designers and end users understand.<\/p>\n

Here\u2019s how to use patterns as a place to start without having your work look like a carbon copy.<\/p>\n

1. Select a pattern based on your priorities<\/h2>\n

Start by choosing a pre-built look or theme that matches what you want to accomplish. In this case we\u2019re building a simple, mobile-friendly profile page for a hypothetical social media app.<\/p>\n

\"image01\"<\/a><\/p>\n

Photo Credit: UXPin<\/a><\/p>\n

2. Break it down<\/h2>\n

The first step in applying a pattern to your project is to understand what makes it work. So what makes this pattern successful? Many factors make it work, and we\u2019ll highlight a few big ones:<\/p>\n

Style:<\/b> Trendy flat colors, a ghost button<\/a> to create action hierarchy, full-width graphics (when appropriate) and light backgrounds make for easy reading with minimal clutter.<\/p>\n

Format & Hierarchy:<\/b> Identity takes priority on this page. The purpose of this profile page is clear because, before messaging the person, we first must learn about the person herself. The visual hierarchy of this pattern is therefore:<\/p>\n

    \n
  1. Profile <\/li>\n
  2. Calls to action (Follow or Message) <\/li>\n
  3. Activity feed <\/li>\n<\/ol>\n

    Size:<\/b> This design\u2019s mobile optimization goes beyond simply using one column for content. Touch targets, like the buttons and icons, use the right amount of space<\/a> for users\u2019 fingertips to tap on the first try.<\/p>\n

    3. Apply your own thinking<\/h2>\n

    Colors and typography, two staples of branding in design, will make most any interface stand out from its original pattern. But the customization doesn\u2019t stop there.<\/p>\n