How to use mobbin?

Leon Chase

• 4 min read

Mobbin is a popular design tool and resource platform that provides access to thousands of mobile app designs from real-world applications. It’s widely used by UX/UI designers, product managers, and developers for inspiration, research, and reference when designing or building mobile apps. Mobbin allows users to explore how popular apps handle specific features, flows, and UI components.

Here’s a step-by-step guide on how to use Mobbin effectively:

1. Getting Started with Mobbin

Step 1: Sign Up

  • Visit the Mobbin website and create an account.
    • You can sign up using your email or via Google or Apple accounts.
  • Once registered, log in to access the platform.

Step 2: Explore the Interface

  • Search Bar: Use this to search for specific apps, features, or design patterns.
  • Categories: Browse through predefined categories like Onboarding, Navigation, Forms, etc.
  • Apps: View designs from specific apps (e.g., Instagram, Airbnb, TikTok).
  • Collections: Curated sets of designs grouped by themes or use cases.

2. Searching for Designs

Step 1: Search for Specific Apps

  • Use the search bar to find designs from a particular app. For example:
    • Type "Spotify" to see how Spotify handles its UI/UX.
    • Type "TikTok" to explore TikTok's design patterns.

Step 2: Search for Features or Flows

  • Instead of searching for apps, you can search for specific features or user flows. For example:
    • Search for "onboarding" to see how different apps handle user onboarding.
    • Search for "checkout flow" to explore e-commerce checkout designs.

Step 3: Filter Results

  • After performing a search, use filters to narrow down results:
    • Platform: iOS or Android.
    • Category: Navigation, Forms, Empty States, etc.
    • App: Focus on specific apps.

3. Browsing Categories

Mobbin organizes designs into various categories to help you find inspiration for specific aspects of app design.

Common Categories

  • Onboarding: How apps introduce new users to their features.
  • Navigation: Examples of navigation patterns like bottom tabs, side menus, etc.
  • Forms: Input fields, login screens, and registration flows.
  • Empty States: How apps handle empty or incomplete states (e.g., no messages, no notifications).
  • Error Handling: Error messages and recovery flows.
  • Settings: Examples of settings pages and configurations.

How to Use Categories

  • Click on a category to browse examples from multiple apps.
  • Compare how different apps approach the same problem (e.g., login screens).

4. Exploring Collections

Mobbin offers curated collections that group designs by themes or use cases. These are great for finding inspiration for specific projects.

Examples of Collections

  • Dark Mode: Apps with dark mode implementations.
  • E-commerce: Checkout flows, product pages, and shopping carts.
  • Social Media: Feeds, profiles, and messaging interfaces.
  • Gaming: Game interfaces and HUDs (Heads-Up Displays).

How to Use Collections

  • Browse collections to get ideas for specific industries or design challenges.
  • Use them as a starting point for your own designs.

5. Using Mobbin for Inspiration

Step 1: Analyze Competitors

  • Use Mobbin to study how competitors design specific features.
    • Example: If you’re building a fitness app, search for "fitness" to see how other apps handle workout tracking, progress visualization, etc.

Step 2: Learn Best Practices

  • Explore designs from top apps to understand industry standards and best practices.
    • Example: Study how apps like Airbnb or Uber handle complex flows like booking or ride requests.

Step 3: Solve Design Challenges

  • When facing a design challenge, search for similar examples on Mobbin.
    • Example: If you’re unsure how to design an empty state, search for "empty state" to see how other apps handle it.

6. Downloading Screenshots

Mobbin allows you to download screenshots of app designs for reference.

Step 1: Select a Design

  • Click on a design to view it in detail.

Step 2: Download

  • Use the download button to save the screenshot to your computer.
  • Note: Mobbin’s free plan may limit downloads, so consider upgrading if you need more access.

Step 3: Use Screenshots Responsibly

  • Always respect copyright and intellectual property. Use downloaded designs only for inspiration or reference, not for direct copying.

7. Integrating Mobbin into Your Workflow

Step 1: Use Mobbin for Wireframing

  • Combine Mobbin with wireframing tools like Figma, Sketch, or Adobe XD.
    • Example: Find a login screen design on Mobbin, then recreate it in Figma.

Step 2: Collaborate with Your Team

  • Share Mobbin links with your team to discuss design ideas.
    • Example: Share a collection of onboarding flows to align on a strategy.

Step 3: Stay Updated

  • Regularly check Mobbin for new designs and trends.
    • Example: Follow updates to see how apps evolve over time (e.g., redesigns or feature additions).

8. Pricing and Plans

Mobbin offers both free and paid plans:

Free Plan

  • Limited access to designs and features.
  • Ideal for casual users or those exploring the platform.

Pro Plan

  • Full access to all designs, collections, and features.
  • Unlimited downloads.
  • Advanced search and filtering options.
  • Pricing starts at $15/month (as of 2023).

Enterprise Plan

  • Custom pricing for teams and organizations.
  • Includes collaboration features and priority support.

9. Tips for Using Mobbin Effectively

Tip 1: Focus on Patterns, Not Copying

  • Use Mobbin to identify common design patterns, not to copy designs directly. Adapt ideas to fit your app’s unique needs.

Tip 2: Combine with User Research

  • Pair Mobbin insights with user research to ensure your designs meet user needs.

Tip 3: Bookmark Favorites

  • Use Mobbin’s bookmarking feature to save designs you want to revisit later.

Tip 4: Stay Consistent

  • Ensure that the designs you take inspiration from align with your app’s overall style and branding.

10. Conclusion

Mobbin is a powerful tool for anyone involved in mobile app design or development. By providing access to thousands of real-world app designs, it helps you stay inspired, informed, and aligned with industry standards. Whether you’re looking for ideas, solving a specific design challenge, or researching competitors, Mobbin can be an invaluable resource in your workflow.

By following the steps and tips outlined above, you can make the most of Mobbin to create better, more user-friendly mobile apps.