Designing new interfaces

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Designing new interfaces

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Designing new interfaces

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Step 4: Gather design inspiration

Before generating your own design ideas, it's helpful to gather inspiration from existing interfaces and design patterns. This can help you identify best practices, explore creative solutions, and avoid common pitfalls.

Key considerations
  1. Choose your ideal stage of originality (review the checklist for innovation)

  1. Direct copies: Replicate existing design patterns exactly. (e.g. Using a competitor’s design solution)

  2. Remixes: Combine elements from multiple sources into a new design. (e.g. Merging a unique animation with a common list view.)

  3. Indirect parallels: Draw inspiration from designs in different domains that solve similar problems. (e.g. Applying Netflix’s catalog workflow to a digital book catalog)

  4. Metaphors and analogies: Use concepts from the real world to inform your design. (e.g. Designing a music player interface based on a physical stereo.)

  5. True innovation: Create entirely new design patterns based on first principles. (e.g. Developing a novel gesture-based navigation system.)

  1. Explore a diverse range of inspiration sources

  1. The usual suspects:

    1. Dribbble.com

    2. Behance.com

    3. Awwwards.com

    4. Pinterest.com

  2. More interesting ideas:

    1. ProductHunt.com: See how new toolmakers and startups are differentiating

    2. Layers.to: What Dribbble wanted to be

    3. Footr.design: Some of the best footer designs on the web

    4. Godly.website: Downright delicious examples of landing pages

    5. Pageflows.com: User flows of popular apps, all in one place

    6. Teardowns.ai: UI patterns being used to build AI features

  1. Document and organize your inspiration for easy reference

  1. Create a Notion database to capture links, images, and notes about inspiring designs

  2. Use a Figma page to gather screenshots and annotate key takeaways

  3. Build a moodboard in FigJam or another visual collaboration tool to share with your team

  1. Analyze relevant design examples

  1. Analyze the strengths and weaknesses of each example

  2. Identify common patterns and trends across multiple examples

  3. Consider how you might adapt or improve upon these designs

Best practices
  • Focus on examples that align with your project goals and constraints.

Example

If you're designing a mobile app for a B2B SaaS product, prioritize inspiration from other successful B2B mobile apps over flashy consumer apps.

  • Look beyond direct competitors to find inspiration in adjacent domains.

Example

If you're working on an e-learning platform, study content-heavy sites like news publishers and blogs to see how they structure information.

  • Create a visual moodboard or collection of inspiring examples. Use a tool like FigJam to gather images, color palettes, UI patterns and other visual elements that capture the essence of the designs you want to emulate.