UI-Design-Inspiration: 6 Seiten mit echten Interfaces

Ein leerer Frame ist der schwerste Startpunkt für ein Design. Echte Interfaces machen es leicht: Du siehst, wie eine Einstellungsseite, eine Paywall oder ein Hero aussieht, wenn ein Team sie ausgeliefert hat. Hier sind sechs Seiten, die echte Screens sammeln, wofür sich jede am besten eignet und welche zuerst eine Anmeldung verlangen.

1. Mobbin: echte App-Screens

Mobbin nennt sich selbst „die Design-Referenzbibliothek für Apps und Websites" und listet über 600.000 ausgelieferte Screens, jede Woche kommen neue dazu. Die Bibliothek ist in Apps, Sites, Screens, Flows, Animationen und UI-Elemente gegliedert. Du kannst kostenlos beitreten, aber ein kostenloser Account hat eingeschränkten Zugang, die komplette Bibliothek steckt hinter Bezahlplänen.

Worauf du achten solltest: wie mehrere Apps denselben Screen lösen. Wähle einen Screen-Typ, etwa Onboarding oder eine Paywall, und vergleiche fünf davon hintereinander, bevor du deinen zeichnest.

2. Refero: Referenzen, die du durchsuchen kannst

Refero beschreibt sich als „echte Produkt-Screens, Flows und Patterns". Alles ist auf die Suche ausgerichtet. Auf der Seite gibt es Vorschläge wie Signup mit E-Mail-Verifizierung, Dashboard-Layouts mit Diagrammen und Login-Screens mit SSO und Passwort-Reset, dazu getrennte Tabs für Web-Apps und iOS-Apps.

Worauf du achten solltest: eine konkrete Frage, als Suche eingetippt. „Calendar booking" liefert brauchbare Antworten schneller, als durch eine Galerie zu scrollen.

3. Page Flows: die ganze Reise

Die meisten Inspirationsseiten zeigen einzelne Screens. Page Flows zeigt den Weg dazwischen. Der Claim lautet „UI/UX Inspiration from Real User Flows", und die Seite kombiniert Flows mit Bildschirmaufnahmen und Schritt-für-Schritt-Anmerkungen.

Du kannst nach iOS, Android, Web und E-Mails filtern, und es gibt eine 3-tägige Testphase.

Worauf du achten solltest: auf die Schritte zwischen den Screens. Ein guter Signup-Flow entscheidet sich an dem, was nach dem Button passiert. Schau dir also die ganze Sequenz an, nicht nur das erste Bild.

4. Landingfolio: Landingpage- und Hero-Ideen

Landingfolio ist eine Galerie von Landingpages. Als wir nachgesehen haben, zählte der Header 961 Seiten, 4 davon in dieser Woche neu, filterbar nach Branche, Seitentyp (Landing, Pricing, About, Login, Signup, 404) und Farbe. Außerdem gibt es Komponenten für Tailwind, Webflow und Figma.

Worauf du achten solltest: auf den ersten Screen, den Hero. Filtere auf deine Branche und vergleiche, wie die Konkurrenz das Eine sagt, das Besucher wissen müssen. Unsere Guides zu Prinzipien für Landingpage-Design und zur Anatomie einer SaaS-Landingpage zeigen, was du mit deinen Funden anfängst.

5. Dark Mode Design: dunkle Websites

Dark Mode Design ist ein kuratiertes Raster dunkler Websites, und jeder kann eine Seite einreichen. Jede Kachel ist ein komplettes dunkles Design, du siehst also, wie andere mit Kontrast, Akzentfarbe und Bildsprache auf schwarzem oder fast schwarzem Grund umgehen. Alle Screenshots gehören ihren Eigentümern.

Worauf du achten solltest: auf die zweite Farbe. Notiere, welche Farben jede Seite zusätzlich zum Akzent einsetzt und wo. Unser Paper zu Farbsystemen für den Dark Mode erklärt, wie du dein eigenes baust.

6. SaaSFrame: SaaS-Screens

SaaSFrame ist „eine Inspirationsbibliothek für SaaS-UI und -UX-Design" mit echten SaaS-Websites und Produkt-Interfaces. Die Kategorien zeigen die Größe der Bibliothek: Als wir nachgesehen haben, waren es 296 Landingpage-Screens, 211 Pricing-Seiten, 191 Dashboards, 424 Screens zum Hinzufügen und Bearbeiten und 571 Screens zur Account-Einrichtung. Außerdem listet sie Patterns wie Sidebar-Navigation, Onboarding-Checklisten und KI-Generierungszustände und bietet nach eigenen Angaben editierbare Figma-Dateien und KI-Design-Prompts.

Worauf du achten solltest: auf die langweiligen Screens. Pricing, Einstellungen und Account-Einrichtung entscheiden, ob sich ein Produkt fertig anfühlt, und genau diese Screens fallen auf einem leeren Frame am schwersten.

So nutzt du alle sechs zusammen

1. Benenne den Screen. Schreib den einen Screen oder Flow auf, den du gestaltest.
2. Wähle die passende Seite. Komplette App-Screens zu Mobbin, eine Frage zu Refero, eine Reise zu Page Flows, ein Hero zu Landingfolio, ein dunkles Theme zu Dark Mode Design und ein SaaS-Produkt zu SaaSFrame.
3. Speichere drei, nicht dreißig. Nimm die drei, die deinen Screen am besten lösen.
4. Schreib je eine Zeile dazu. „Klarer Preis, ein Button" ist eine Referenz. Ein gespeichertes Bild ohne Notiz ist ein Haufen.
5. Kopiere die Entscheidung, nicht die Pixel. Nimm mit, was das Layout tut und warum. Unser Paper zu Screenshot-getriebenem Design zeigt, wie du aus Referenzen einen Workflow machst.

Mit „eine Pricing-Seite so schlicht wie diese, mit einem Plan-Schalter wie dort" können Designer oder Kunden eine Menge anfangen. Mit „mach es modern" fast nichts.

Website

Mobbin

Echte App-Screens. Kostenloser Account mit eingeschränktem Zugang, die komplette Bibliothek kostet.

Seite öffnen

Website

Refero

Echte Produkt-Screens, Flows und Patterns zum Durchsuchen.

Seite öffnen

Website

Page Flows

Komplette User Flows aus Top-Apps, mit Bildschirmaufnahmen.

Seite öffnen

Website

Landingfolio

Inspiration für Landingpages und Heros.

Seite öffnen

Website

Dark Mode Design

Ein Raster dunkler Website-Designs.

Seite öffnen

Website

SaaSFrame

Eine Inspirationsbibliothek für SaaS-UI und -UX-Design.

Seite öffnen

Kostenlose Figma-Datei

6 Seiten für UI-Ideen

Alle sechs Links und wofür jede Seite taugt, in einer kostenlosen Datei.

In Figma öffnen

FAQ

Was sind die besten Websites für UI-Design-Inspiration?

Mobbin, Refero, Page Flows, Landingfolio, Dark Mode Design und SaaSFrame. Sie decken App-Screens, durchsuchbare Referenzen, komplette User Flows, Landingpages, dunkle Websites und SaaS-Interfaces ab.

Ist Mobbin kostenlos?

Teilweise. Bei Mobbin kannst du kostenlos mit eingeschränktem Zugang beitreten, für die komplette Bibliothek mit über 600.000 Screens brauchst du einen Bezahlplan.

Wo finde ich Beispiele für echte User Flows?

Bei Page Flows. Die Seite zeigt Flows aus echten Apps und Websites mit Bildschirmaufnahmen und Schritt-für-Schritt-Anmerkungen und bietet eine 3-tägige Testphase.

Wo finde ich Inspiration für Landingpage-Design?

Landingfolio ist eine Galerie von Landingpages, filterbar nach Branche und Seitentyp. Auch SaaSFrame listet Screens von SaaS-Landingpages.

Wo finde ich Inspiration für dunkle Websites?

Dark Mode Design sammelt dunkle Websites in einem Raster, und jeder kann eine Seite einreichen.

Wie nutze ich Inspiration, ohne zu kopieren?

Speichere zwei oder drei Referenzen für den Screen, den du gestaltest, und schreib eine Zeile dazu, was jede gut macht. Nutze die Entscheidung, etwa den klaren Preis oder den einzelnen Button, und zeichne das Layout selbst.

Quellen

• Mobbin, mobbin.com: „The design reference library for apps and sites", über 600.000 ausgelieferte Screens, kostenlos beitreten, Pläne. Geprüft am 4. November 2026.
• Refero, refero.design: „Real product screens, flows, and patterns". Geprüft am 4. November 2026.
• Page Flows, pageflows.com: „UI/UX Inspiration from Real User Flows", Bildschirmaufnahmen und Anmerkungen, 3-tägige Testphase. Geprüft am 4. November 2026.
• Landingfolio, landingfolio.com: „The Best Landing Page Design Inspiration", 961 Seiten am Tag der Prüfung. Geprüft am 4. November 2026.
• Dark Mode Design, darkmodedesign.com: ein Raster dunkler Websites, Seite einreichen. Screenshots gehören ihren Eigentümern. Geprüft am 4. November 2026.
• SaaSFrame, saasframe.io: „SaaS UI & UX Design Inspiration Library", Screen-Zahlen wie am Tag der Prüfung angezeigt. Geprüft am 4. November 2026.
• Erstmals veröffentlicht als Karussell auf UX Brainy.