Try 4 top design professions. Free ➞ In 5 days, you will get acquainted with illustration, UX/UI, web and graphic design. Add 4 great case studies to your portfolio and decide on your next step.
Learn moreWhen designing complex interfaces, it's important to consider not only visual references but also conduct thorough user research. With a large number of screens, it's crucial to understand the steps of each specific flow and the screens involved. This allows you to create an intuitive and user-friendly interface that meets user needs and simplifies their interaction with the product. Proper flow structure and screen sequencing contribute to increased interface efficiency and improved user experience.
We've prepared a selection of catalogs that offer visual references and help you create user flows. These resources will help you avoid missing important screens and study the implementation of specific components, modules, scenarios, and pages from well-known brands. Using our recommendations, you can improve the user experience and optimize the design of your projects.
- Mobbin - a catalog of web, Android, and iOS;
- Refero - web and iOS;
- SaaSFrame - web, applications, and email newsletters;
- FlowStep - iOS and Android;
- UX Archive - iOS and Android;
- Awwwards - elements of promo sites;
- Page Flows - web and applications;
- Nice, Very Nice - blocks for web pages.
Reading is an important aspect of our lives that contributes to the development of thinking, broadening horizons, and improving communication skills. Books, articles, and other sources of information can enrich our experience and provide new ideas. It is important not only to read but also to analyze what you read in order to apply the acquired knowledge in practice. In today's world, where information is available in huge volumes, the ability to select high-quality and useful materials is becoming especially relevant. Immersing yourself in reading not only helps develop intellectual abilities but also find inspiration for creativity and personal growth.
A user flow is a sequence of user actions when interacting with an application or website. It is essential for creating an intuitive interface that ensures comfortable and effective use of the product. Without a clearly defined user flow, developing applications and websites can lead to confusion, decreased user satisfaction, and, as a result, reduced conversion.
A user flow helps developers and designers understand how users will navigate the product, what tasks they want to accomplish, and what problems they may encounter along the way. This allows them to optimize the interface by simplifying interactions and minimizing the number of steps required to achieve the goal. A properly constructed user flow contributes to an improved user experience and increased brand loyalty.
Therefore, a user flow is an integral part of the design process, as it helps create a logical structure that meets user expectations and contributes to the achievement of business goals. Ignoring this aspect can lead to the creation of complex and difficult-to-use apps and websites, which negatively impacts their success.
Mobbin
Mobbin is a leading portal providing an extensive catalog of screens. The platform allows users to search interfaces by specific brands and categories, as well as by screen types, such as login, verification, cart, and others. Additionally, they can search by UI elements, including buttons, cards, and tables, as well as by interaction scenarios, such as onboarding, account creation, and password change. Please note that viewing screens requires registration on the site.
There are three main catalogs: web, Android, and iOS. The main drawback is that these catalogs function independently of each other. As a result, a user on a particular company's iOS page will not be able to see how a similar screen for this product is presented on the desktop version. This limitation makes it difficult to compare solutions and can negatively impact the user experience.
Mobbin offers a subscription for $8 per month, billed annually. This subscription includes access to an expanded catalog of screens and flows, the ability to create more than three bookmarked collections, and advanced filters. A team subscription is also available for $10, which allows for the creation of shared collections. This feature is used by companies such as Duolingo, Shopify, Pinterest, Revolut, Volvo, and others. Mobbin is a great tool for designers and developers, allowing them to effectively organize and share ideas.
Mobbin's catalogs have been around for years, allowing users to find collections of screens created as recently as a year ago, or as recently as five years ago. This demonstrates the evolution of visual language, changes in functionality and the transformation of brand interfaces at different stages of their development. If a collection hasn't been updated for a long time, users can request it to be updated.
By opening screens for viewing, you will gain access to the Hotspot feature, which highlights clickable interface elements. By clicking the Prototype tab next to Screens, you can view an interactive prototype of the selected flow. This is especially convenient for quickly navigating through a scenario without having to study each screen in detail.
Refero Design PRO
Refero is one of the largest resources dedicated to collecting screens and interface elements. The website features catalogs organized by page types, modules, and UI elements. In Refero and other English-language sources, these modules are called UX patterns. All screens are organized into two main categories: web and iOS, allowing users to easily find the right solutions for their projects. The Refero catalog boasts impressive diversity, offering users a wide selection of UI elements. The footer category features over 6,000 options, making it easy to find the perfect design for any project. Additionally, the catalog includes 880 carousels, 200 tooltips, and 60 skeletons, highlighting the diversity and functionality of this resource. This extensive selection makes Refero an ideal tool for developers and designers looking to optimize their workflow and improve the quality of interfaces.
The main idea of the Refero platform and similar sites is to focus on a specific brand. Depending on the company's specific needs, its page displays available viewpoints, including web versions and iOS apps. Additionally, pages, blocks, and UI components are grouped according to different use cases. This allows users to easily find the elements they need and adapt them to their needs, improving interaction with the brand's products and promoting more efficient use of resources.
Each company may have multiple products, so elements such as fonts and colors are not displayed on a universal brand page, but rather on specific screens. This allows us to take into account the unique visual features of each product and ensure design consistency.
Only a limited version of the catalog is available without registration. After logging in, you have access to the entire product range, and you can also save thousands of screens to your bookmarks. The bookmarks feature doesn't provide advanced filtering, but it does allow you to organize screens by web and iOS format. Registration provides full access to content and ease of use.
The free version allows up to five search queries per day, as well as the ability to view a limited number of screens with directory and company information. This version is ideal for users who want to get acquainted with the main features and capabilities of the platform without spending money.
The paid version of the service is priced at $8 per month billed annually or $12 per month. It includes unlimited search, access to the entire library, regular content updates, and recommendations of similar screens. Paid subscription users receive advanced features for effective resource searching and use.
SaaSFrame
SaaSFrame is designed for UX/UI designers specializing in creating optimal user experiences for SaaS applications. The platform's key advantage lies in its unique and modern case studies, as well as its extensive catalog of email newsletter screens. This allows designers to find inspiration and ideas for improving interfaces and enhancing user interaction with applications.
The catalog can be filtered by content types, including interfaces, marketing pages and emails, as well as by technologies used, such as Webflow, Framer, WordPress and others. Each category allows you to view up to three screens per product, allowing you to analyze three app screens, three website screens, and three email screens. This simplifies the process of finding and selecting the right content for your needs.
The paid version offers access to all catalogs, filtering functionality, the ability to save bookmarks, as well as viewing the flow and mobile versions. The Pro version costs $10 per month when paid annually or $14 per month with a one-time subscription.
FlowStep Design
FlowStep supports two mobile platforms - iOS and Android. The catalog does not contain images, but screencasts are available, which are screen recordings of individual flows. This allows users to gain a clear understanding of the app's functionality and capabilities.
Flow collections are organized by filters covering various industries, such as business, finance, shopping, and others, as well as scenarios, including search, settings, and profiles. The flow catalog is compact, with each category containing between five and one hundred screencasts, allowing users to quickly find the content they need. This makes our resource a convenient tool for learning and implementing effective business practices and user scenarios.
Free registration is required to access any content. After registration, users can like and save interesting cases in their account.
Study additional materials:
Good design is based on five key rules that help create aesthetically pleasing and functional solutions. The first rule is simplicity. Effective design should be concise, avoiding unnecessary complexity, which allows users to perceive information more easily. The second rule is contrast. Proper use of contrast helps highlight important elements and improve readability. The third rule is hierarchy. Creating a visual hierarchy helps direct the user's eye to key parts of the design, ensuring better navigation. The fourth rule is consistency. Using consistent fonts, colors, and styles creates a harmonious perception and strengthens the brand. The fifth rule is adaptability. The design must be responsive so that it displays correctly on different devices, ensuring convenience for all users. Following these rules will help create a high-quality and effective design that will attract attention and improve the user experience.
UX Archive
UX Archive offers carefully selected mobile interface flows for the iOS and Android platforms. The collection includes well-known products such as Twitter, Reddit, Revolut, Unsplash, GitHub, Discord, and Shopify. It is worth noting that most of the interfaces were uploaded in 2020 and have not been updated since. This makes UX Archive a valuable resource for studying mobile UX design and analyzing the approaches leading companies use in their apps.
After registering in the catalog, users have access to over 150 apps and over a thousand flows. They can also save them to their favorites and upload images. This makes it easier to find and use the resources you need.
Awwwards
Awwwards offers not only the main directory of sites, but also a convenient search by elements. After registering, users can save their favorite screens as bookmarks and create collections based on their preferences. This helps organize inspiration and simplify the process of finding ideas for future projects.
The catalog's advantages include the fact that many elements are presented in video format and play automatically. This significantly saves time and allows users to better navigate the visual characteristics of elements by demonstrating them in animation.
The elements catalog includes various modules, such as login, menu, gallery, 404 page, and others. Design features, including composition, color schemes, and illustrations, as well as interaction elements such as animation and scrolling, are also featured. The Awwwards platform primarily publishes promotional websites, so the catalog doesn't offer scripts. However, there is a customizable filter by awards, making it easy to find the best examples of web design.
Page Flows
Page Flows is an extensive collection of flow recordings and screenshots reflecting various scenarios for using a particular product. The catalog is available in two versions: Desktop and Mobile, with separate search options for each, even for products from the same brand. It's important to note that the filters don't differentiate between iOS and Android, simplifying the search and analysis process.
There's also a newsletter catalog that offers filtering by industry. However, it's worth noting that most of the materials in this catalog are available only by subscription.
The expanded catalog is available exclusively with the paid version. Upgrading to a paid plan costs $39 per quarter or $99 per year. For companies with 3 to 10 employees, access costs range from $199 to $600. Choosing the paid version provides access to additional features and improved content, which significantly increases the efficiency of using the catalog.
The brand page features screen recordings demonstrating the progress of various flows. Individual screens are located below the recordings. The average length of scripted screencasts is 3-4 minutes, and the playback speed can be adjusted to increase the viewing tempo.
Case studies are updated regularly, but if you notice a recording appears outdated, you can submit a request for it to be updated. This will help keep the information relevant and improve the quality of the content.
Nice, Very Nice
Nice is a useful resource for web designers that offers access to essential tools, libraries, cases, tutorials and templates. The site also features a collection of modern UI modules that can help improve the visual design of web projects.
The catalog includes a basic search for various types of modules, such as navigation, prices, search, lists, commands, registration, and others. While there are no additional filters, each selected module page provides a list of keywords, allowing users to refine their search and find more specific UI components. This makes it easier for users to find the elements they need and promotes more efficient use of the catalog.
From the module, users can access the brand page, which displays all the catalog blocks. This allows users to easily browse the full product range and access all products associated with the selected brand. The brand page contains detailed product descriptions, their characteristics, and images, which helps you make a more informed choice.
Learn more about design in our Telegram channel. Subscribe to updates and stay up-to-date on the most exciting news and trends in the world of design!
Studying materials related to the topic can significantly expand your knowledge and understanding. We recommend focusing on relevant sources of information that will help you delve deeper into the subject matter. A variety of resources will provide you with useful insights and practical advice. Stay up-to-date on the latest trends and discoveries in this field.
- 15 Best Design Projects of Summer 2023: Editor's Choice
- How to Use Neural Networks in UX/UI Design?
- "I thought I wouldn't find a job without a higher education. And now I'm a UX designer in the USA! ”
- “Interface”: Fundamentals of Designing Humane Systems
Profession Graphic Designer PRO
You will learn how to create corporate identity elements and graphics for business. Build a portfolio that reflects your style and demonstrates your design skills. You can launch your career in a studio or as a freelancer.
Find out more