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.
        
 
            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 inputThe user needs to enter a monetary value. 
- 
                            
                                  Date InputThe user needs to pick a date on a form or page. 
- 
                            
                                  Date rangeThe user wants to filter and look up information by a date. 
- 
                            
                                  Forgiving input formatThe user needs to enter some data into a field and doesn’t want to worry about how the data is formatted. 
- 
                            
                                  Good defaultsThe user wants to complete actions quickly. 
- 
                            
                                  Input validationThe user needs feedback about the correctness of the data. 
- 
                            
                                  Multiple value selectionThe user needs to pick a single or multiple values from a range of available options. 
- 
                            
                                  Numeric valuesThe user needs to enter or pick a numeric value. 
- 
                            
                                  Password fieldsThe user needs to choose or enter a password. 
- 
                            
                                  Single value selectionThe user needs to pick a single value from a list of available options. 
- 
                            
                                  Time InputThe user needs to enter a time or pick a time slot. 
Data & content management | 6 patterns
- 
                            
                                  Contextual actionsThe user wants to operate on the data at hand without having to navigate to a different screen. 
- 
                            
                                  Continuous scrollingThe 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. 
- 
                            
                                  FavoritesThe user wants to mark content for easy access in the future. 
- 
                            
                                  Rating contentThe user wants to rate and give feedback on content. 
- 
                            
                                  Reordering dataThe user wants to manually order records in a list. 
- 
                            
                                  Segmenting dataThe user needs to navigate and find records in a long list. 
Guiding the user | 1 patterns
Layout & navigation | 3 patterns
User screens | 4 patterns
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 
                                 
                                 
                                 
                                 
                                 
                                 
                                