How should you approach UI design patterns?We use design patterns all the time, if you're unfamiliar with them you probably haven't realized that they're all around you. What about the classic example of having too much content to display on one page? We turn our attention to 'Tabs', a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links. The typical benefits for using a design pattern include:
- showing beginners how to use best practices in web design;
- learning to adapt to collective understanding of designers;
- allowing for better communication, reducing the risk associated with unfamiliar choices;
- reducing the necessary time and costs workflow to carry out specific tasks;
- avoiding wasted time on building something that’s been built before;
- giving the user an experience that he’s familiar and experienced with (the nature of design patterns).
- Navicon — a universal symbol for menu, otherwise known as site navigation, is becoming increasingly popular in modern web design, but has already been fully adapted to mobile devices.
- Parallax Scrolling — a unique design pattern that enables single page website, with an easy to use scrolling mechanism, but also includes a list of background sprites that give the page a lively feel.
- Problem summary: what user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
- Solution: how have others solved this problem? A few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
- Example: great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, user flows and/or additional notes are necessary to clearly communicate the pattern.
- Usage: when should this pattern (not) be used? A few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.
The rise of UI toolkitsUI design patterns have always been about making it easier for the user to navigate your website, application or system. If the user learns how to submit a comment for the first time, chances are he will instantly know how to send you an email using the contact form, it's the same repetitive concept of information input. In the recent years, we've seen an enormous growth in the UI toolkit market. A UI toolkit can be simply understood as a set of widgets that let you build a fully graphical application from scratch. Twitter Bootstrap is a perfect example of a successful UI toolkit. These days, a large proportion of web designers will rely on Bootstrap features to ease their own workflow. In a sense, there is no need to reinvent the wheel!
3 UI design patterns to rememberIn short, design patterns are solutions to recurring problems. By utilizing patterns we can overcome simple user interface problems. If we pay close attention, we notice that patterns are all around us. There is nothing special about that specific design, it's the way it has been applied that you're excited about!
Crystal Clear Calls-to-ActionThe simplest of web forms (and also, the most common ones) will usually have just a single actionable button: in this case ‘Create Website’. It’s pretty self-explanatory, which is the point. How much more easy could it get, right? Always go for the easy option, don't reinvent the wheel just to stand out from the crowd.
Breadcrumbs to the rescueBreadcrumbs show the path from the front page of the site to the current location of the user in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed. In this example by Fares Farhan, we see how he utilizes two UI design patterns at the same time. First, he has got the tabs pattern on top, and second the breadcrumbs navigation pattern on the bottom. By having combined them together he makes for a very pleasant browsing experience.
Registration should be easyUnless you’ve been living under a rock, you’ll be aware of social registration. Registration to a website is a common thing to do, and so should be made as easy and pleasant as possible. This is one of my favorite registration pages at the moment. It's the GitHub homepage, and as you can see in the screenshot everything that company stands for is presented in less than hundred words. You also have the ability to register on the go, and the process takes less than a minute to complete. You'll get an email to verify your account, but that is something that we're used to anyway!
Final WordsI've built websites for over eight years and during those eight years I've realized that simplicity is the key to many design problems. I have come to a conclusion that clutter in design, bloated with unnecessary elements and forms is the most frustrating experience that you can find on the web. Yes, design is exactly how something works, so why not make it work properly? User interface (UI) is incredibly important to the success of your business or venture. The best way to ensure you are designing successful sites is to learn from and utilize existing design patterns.
Alex loves to immerse himself in a subject that he is writing about, not only does it help him to escape in peace, it enables him to learn, and grow at the same time. He is the force behind CodeCondo; a web development community for aspiring developers and webmasters, and Ecommerce Platforms; a blog for new online shop owners. You can follow him on Twitter and Google+.
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…