What are User Interface Design Patterns? A pattern is a plan or model for making something. In software development, patterns provide solutions to specific design problems. Buttons tell people to do something. Download, Buy, Continue or Save.
When you design a website or web app, you’ll need a navigation bar, button, tabs, forms and more. Common design patterns help to make your design easy to use and user friendly.
What is a UI Pattern Library?
A UI Pattern Library is a collection of user interface components or patterns. It helps you to define how each component looks and works. Your pattern library helps to ensure a consistent look and feel across your products. You want to add solutions so you don’t have to solve the same design problem over and over again. Or search your app for the pattern that you need to use.
What goes in it?
You’ll want to define your user interface. How you create buttons, navigation bars, layouts, alerts and notifications. Include guidelines on how and when to use them. You may want to include code snippets so you don’t have to rebuild a component from scratch. Also include color palettes, typography and grid layouts.
Where to find Design Pattern Libraries and Resources?
When you build your own pattern library, get designers and developers involved. A pattern library is a collaborative project. Both your designers and developers must work together in creating and maintaining it.
Decide on what to name things The team needs to decide what to call a component. A shared naming convention prevents communication problems.
Use a ticket system to track updates Your design library has to be updated and maintained. A ticket system makes it easy to track changes. You can create an approval system for requests.
Audit your library Your library can quickly become out of date. Remove old components, templates and no longer used patterns. Plan to audit your library at least once a year.
When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.
What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.
Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.
You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.
The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.
How I Built It
If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.
The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.
The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.
Whether you use a computer, phone, table or some other device to access the Internet, you expect it to work. Sometimes things can break. Your connection is slow. Images don’t load. They are using a third-party tool that is having their own issues with the Internet. What can you do? Wait. Try again. Come back later to see if they fixed it.
The Internet provides information to users. By allowing them to use, whatever tools they wish. This feature makes the web resilient or fault tolerant.
What is a resilient website?
Being fault tolerant or resilient is part of the how the web works. HTML and CSS are the simplest tools for building a website. If errors are in either the HTML or CSS, the browser skips the errors and loads the page anyway. It may not look the way you want, but people can read the information.
What can you do?
1. Start with the basics
Use HTML and CSS. HTML is the foundation of the web. You can build a website with HTML only and have it work. CSS allows you to use new features and older browsers ignore what they don’t understand. The more things we add to our web apps, the more they affect user experience. site performance and accessibility.
2. Pick the right framework for the job
3. Prevent errors and make them easy to fix
Where can I learn more about making resilient websites?
Jeremy Keith wrote Resilient Web Design. A book that gives you ideas and approaches on how to build a more resilient web.
Which elements are focusable? HTML has interactive elements with built in focusability. Elements like text fields, buttons and select lists. You can navigate them by keyboard automatically.
Sometimes, we use HTML elements like <p>, <h2> or <div> to create custom interactive components. If you don’t make these elements focusable, this creates problems for keyboard users. The tab index attribute solves this problem by making a non-focusable element focusable.
Use the <button> tag to create buttons. You can use <div> or <span> tags to recreate the functionality of a button. When you choose to do this, you have to write extra code to mimic the behavior of a button. It is easier to use the button tag when you need a button.