Back to Playbook

Inspiration

Curated sources for UI patterns and visual inspiration to jumpstart the creative process.

Why it matters

Creativity doesn't happen in a vacuum. Looking at high-quality work from other designers helps you understand current trends, discover new solutions to common problems, and push the boundaries of your own skills. It's about remixing ideas, not copying them.

Top Sources

Mobbin

A massive library of real-world mobile app screenshots. Great for analyzing flows and patterns.

Godly

Curated web design inspiration. Focuses on high-quality, modern, and often experimental websites.

Dribbble

Good for visual trends and micro-interactions, though often more conceptual than practical.

Behance

Detailed case studies and branding projects. Excellent for seeing the process behind the design.

Awwwards

The awards for design, creativity and innovation on the Internet. Best for cutting-edge trends.

Land-book

Design gallery with the best hand-picked website inspiration. Great for landing pages.

siteInspire

A showcase of the finest web and interactive design. Clean, minimal, and highly curated.

Refero

Real-world design references. Excellent for finding specific UI patterns and component examples.

Mobile Design Patterns

Specific collections focused on mobile interactions, user flows, and platform-specific guidelines.

Pttrns

A fine collection of mobile design patterns organized by category (e.g., login, profiles).

Page Flows

Videos of user flows from proven products. Great for seeing interactions in motion.

iOS HIG

Apple's Human Interface Guidelines. The bible for designing native iOS apps.

Material Design

Google's open-source design system. Essential for understanding Android patterns.

Design Systems

Learn from the best. These comprehensive design systems document everything from principles to components.

Carbon

IBM’s open-source design system. Excellent for enterprise-grade applications and data visualization.

Polaris

Shopify’s design system. A gold standard for e-commerce admin interfaces and accessibility.

Fluent 2

Microsoft’s design system. Focuses on motion, depth, and scaling across devices.

Atlassian

The system behind Jira and Trello. Great examples of voice, tone, and illustration guidelines.

Typography Inspiration

Great typography can make or break a design. These sites showcase excellent type usage and pairing.

Typewolf

The absolute best resource for seeing how real typefaces look on real websites.

Fonts In Use

A searchable archive of typographic design, indexed by typeface, format, and industry.

Fontpair

Helps you pair Google Fonts together. Simple, effective, and free.

Typ.io

Reveals the fonts used on the best websites, making it easy to find inspiration.

Spark Creativity

Stuck on what to design? Use this generator to get a random design prompt and practice your skills.

Design a Login Screen for a FinTech App
Constraint: Use a dark theme

Daily Practice

Consistency is key. These platforms offer daily or weekly challenges to keep your skills sharp.

Daily UI

The classic 100-day challenge. Receive a daily prompt in your inbox and design a solution.

Sharpen

A powerful design prompt generator for branding, UX, and marketing design challenges.

Frontend Mentor

Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

UX Tools Challenges

Real-world UX challenges to help you practice your skills and build your portfolio.

Inspiration Checklist

  1. Look Outside UI

    Find inspiration in architecture, print design, photography, and nature.

  2. Save & Organize

    Use tools like Pinterest, Eagle, or Are.na to categorize your findings for easy retrieval.

  3. Deconstruct

    Don't just look; analyze. What makes this design work? Is it the color, the spacing, or the typography?

Previous: Design Tokens