"I love UIPatterns.io | Curated list of interactive mobile design patterns"

2022-05-07 15:55:33

Surprise Me Level up your maker developer designer skills Create better products by example Explore & play with interactive UI design patterns and learn how to solve common UI problems. Find a curated list of design patterns with fully interactive and downloadable examples. Patterns are added regularly. Join fellow makers from companies all around the world and get a new pattern every Friday in your inbox This is a spectacular resource. Must-have for anyone who has to dabble in UI/UX themeselves. It's all been done before, and Levi is doing a great job systematizing these patterns. Jane Portman @uibreakfast Great work @kovlex, I've been looking for a design website that broke down these patterns into digestible chunks to grasp. I look forward to more patterns. Gabriel Lewis @gabriel__lewis Forms | 11 patterns Currency input The user needs to enter a monetary value. Date Input The user needs to pick a date on a form or page. Date range The user wants to filter and look up information by a date. Forgiving input format The user needs to enter some data into a field and doesn’t want to worry about how the data is formatted. Good defaults The user wants to complete actions quickly. Input validation The user needs feedback about the correctness of the data. Multiple value selection The user needs to pick a single or multiple values from a range of available options. Numeric values The user needs to enter or pick a numeric value. Password fields The user needs to choose or enter a password. Single value selection The user needs to pick a single value from a list of available options. Time Input The user needs to enter a time or pick a time slot. Data & content management | 6 patterns Contextual actions The user wants to operate on the data at hand without having to navigate to a different screen. Continuous scrolling The user wants a central place to view and interact with most or all content so they don’t have to waste time navigating between pages. Favorites The user wants to mark content for easy access in the future. Rating content The user wants to rate and give feedback on content. Reordering data The user wants to manually order records in a list. Segmenting data The user needs to navigate and find records in a long list. Guiding the user | 1 patterns Empty states The user comes across views with no data to be shown. Layout & navigation | 3 patterns Bottom navigation The user needs the ability to access different subtasks, views or modes. Cards The user wants to see an overview of the larger set of available content. Tabs The user wants a simple way of accessing different sections of the content. User screens | 4 patterns Lazy signup The user wants to try and use the product without first registering for the service. Login The user wants to get access to personalized views and data. Profile The user wants to access and edit their profile. Social login The user wants and easy way of signing up and logging in. From your friends at Mobiscroll Be thoughtful about your customers and the situations they are in. Give them the best UI you can, tailored to their needs. Context is important. Levi Kovacs @kovlex founder of Mobiscroll What is UIPatterns.io? UI design patterns are solutions to common design problems. They provide an overview of the problem and a number of solutions to solve it. We have created UIPatterns.io to provide a point of reference for developers and designers when it comes to solving common design problems. Each pattern comes with fully interactive examples, downloadable source code and can be used on mobile devices. We have built the examples with Mobiscroll, altough it is not required to use any specific framework or technology. These principles are valid for both mobile web and native apps. Brought to you by Mobiscroll Build Better Products The missing UI Kit from your mobile toolset Get started now Get a new pattern every week in your inbox Say hello Make UI happen with Mobiscroll Copyright © 2022 Mobiscroll