Advertisement
  1. Web Design
  2. Wireframing

20 Must-Have Wireframe-Vorlagen und UI-Kits für Ihre Design-Bibliothek

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Wireframing. User Journeys. Content Maps. Benutzerzentriertes Design. Informationsarchitektur. Animierte Prototypen. Konvertierungspfade. Iterative Eigenschaften. Sitemaps. Ähh, was?

Seien wir ehrlich, die Welt der UX (User Experience) und UI (User Interface) ist voll von Jargon und übermäßig komplizierten Begriffen. Nehmen Sie zum Beispiel diese reale Zeile, die ich aus einer Stellenbeschreibung für eine Senior Content Specialist Position an einer Universität kopiert habe:

"Erstellt Vorlagen für einen konsistenten Content-Strategie-Ansatz, einschließlich Richtlinien für Site Maps, Content Inventories und Audits, Datenanalysen und User Experience-Übungen."

Das sind eine Menge ausgefallener Phrasen, die einfacher sein könnten. Aber wenn Sie im Bereich Webdesign oder Content-Strategie arbeiten, sind Sie wahrscheinlich allzu vertraut mit diesen Begriffen. Die Ironie dabei ist, dass das Ziel von UX (das ist User Experience) buchstäblich darin besteht, Dinge (aka Inhalte) für Menschen (aka Benutzer) leichter verständlich (aka besser navigierbar) zu machen.

Wireframes und UI-Kits sind zwei Branchenbegriffe, die kompliziert klingen, aber eigentlich super einfach zu verstehen sind.

Wireframe iconsWireframe iconsWireframe icons
Bild: Wireframe-Icons

Was ist ein Wireframe?

Haben Sie schon einmal eine neue Website-Idee mit einem Kollegen beim Mittagessen oder mit einem Freund an einer Bar gebrainstormed? Sie fühlen sich inspiriert, schnappen sich eine Serviette und einen Stift und beginnen zu skizzieren, wie die Seite aussehen könnte: das ist Wireframing. Im Wesentlichen ist Wireframing ein Umriss oder Skizze, wie eine Website (oder App) aussehen wird. Es ist die Blaupause, die Karte, das Bare-Bone-Konzept.

Natürlich bringt Sie eine Skizze auf einer Serviette nur so weit. Daher haben Designer Vorlagen für Wireframes erstellt, die einfach in Präsentationen oder Designsoftware übertragen werden können. (Ich empfehle diesen Artikel, A Beginner es Guide to Wireframing, wenn Sie eine detailliertere und ressourcenlastige Aufschlüsselung von Wireframes wünschen).

Was ist ein UI-Kit?

UI steht für User Interface, Benutzeroberfläche, mit anderen Worten: das, was Sie machen, mit dem Menschen interagieren werden.

Ein UI-Kit enthält hilfreiche Dateien und Grafiken, die Sie wahrscheinlich benötigen werden, wie Kontrollkästchen, Symbole und mehr. Im Wesentlichen ist es ein Kit, das existiert, damit Sie nicht jede Komponente Ihrer Website oder App von Grund auf neu erstellen müssen - und die Standardisierung bedeutet, dass sie gut gestaltet und für Ihr Publikum einfach zu bedienen sein wird.

Es gibt keine einzige "richtige" Möglichkeit, einen Knopf zu entwerfen, aber es gibt sicherlich Möglichkeiten, die besser sind als andere, und viel Designforschung. Durch die Verwendung von UI-Kits vertrauen Sie den Experten und stellen sicher, dass die Details Ihrer Website poliert und professionell sind.

Die besten Wireframe-Templates und UI-Kits

Wireframe-Templates und UI-Kits sind zwei verschiedene Dinge, aber der Inhalt dieser Templates überlappen sich häufig. Daher haben wir sie in dieser Liste der besten und nützlichsten Wireframes und UI-Kits zusammengestellt, die Sie Ihrer Sammlung hinzufügen können:

1. molo Mobile Wireframe Kit

molo Mobile Wireframe Kitmolo Mobile Wireframe Kitmolo Mobile Wireframe Kit
molo Mobile Wireframe Kit

Das molo Wireframe Kit ist für Apps und mobile Entwicklung gemacht. Es gibt neun Kategorien, einschließlich Login, exemplarische Vorgehensweisen, Social Media, Blogs und Navigation. Alles wird mit Google Fonts gemacht, was bedeutet, dass Sie nie mit gebrochenen Schriften oder unerwarteten Designproblemen zu tun haben.

2. Codama iOS Wireframe UI Kit

Codama iOS Wireframe UI KitCodama iOS Wireframe UI KitCodama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI KitCodama iOS Wireframe UI KitCodama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit

Codama ist ein iOS-Wireframe, das mit Sketch, einer Top-Design-Software, erstellt wurde. Es ist gut organisiert und die Dateien werden auf eine Weise benannt, die sinnvoll ist, in Sketch zu verwenden. Die Schrift der Wahl ist Montserrat, ein Klassiker für Apple-Design.

3. Greyhound UX Flowcharts

Greyhound UX FlowchartsGreyhound UX FlowchartsGreyhound UX Flowcharts
Greyhound UX Flowcharts

Greyhound ist ein einzigartiges Kit, das mit mehr als 100 Mini-Flowchart-Karten sowie Aktionsblöcken, Pfeilen und mehr geliefert wird.

4. WeDot - Wireframe UI Kit

WeDot - Wireframe UI KitWeDot - Wireframe UI KitWeDot - Wireframe UI Kit
WeDot - Wireframe UI Kit

WeDot ist ein beliebtes Wireframe-Kit mit 170+ Layouts. Es ist besonders gut für Dashboards, Daten und Diagramme.

5. Blokk Wireframe Kit

Blokk Wireframe KitBlokk Wireframe KitBlokk Wireframe Kit
Blokk Wireframe Kit

Blokk ist ein tolles Wireframe-Kit für einseitige Websites. Alle Inhaltsblöcke basieren auf Bootstrap, so dass es einfach ist, von einer Photoshop- oder Sketch-Skizze zu einer echten Live-Website zu gelangen.

6. UX Workflow - Wireframe und Sitemap Creator

UX Workflow - Wireframe and Sitemap CreatorUX Workflow - Wireframe and Sitemap CreatorUX Workflow - Wireframe and Sitemap Creator
UX Workflow - Wireframe und Sitemap Creator

Eine Sitemap ist eine Gliederung aller Inhalte auf Ihrer Website; von der Startseite, bis zu Ihren Seiten, Blog-Beiträgen, Kontaktseite, etc. Es ist alles in irgendeiner Weise miteinander verbunden. Eine Sitemap ist eine visuelle Darstellung davon. Der UX Workflow Sitemap Creator ist ein großartiges Tool, vor allem, wenn Sie eine Website-Idee visuell präsentieren müssen.

7. Collector Wireframe Web Kit

Collector Wireframe Web KitCollector Wireframe Web KitCollector Wireframe Web Kit
Collector Wireframe Web Kit

Das Collector Wireframe Web Kit ist für AdobeXD, eine kostenlose UX-Design-Software von Adobe, gemacht. Es basiert auf Bootstrap und ist nach beliebten Kategorien wie Header, Portfolio, Blog, Kontakt und Preistabellen organisiert.

Hinweis: Es verkauft sich für fast 40 Dollar auf anderen Design-Websites, das ist mehr als die Kosten für ein Envato Elements Abonnement (zum Zeitpunkt des Schreibens)! Es hat eine nützliche Video-Demo auf YouTube.

8. Wirey Wireframe Kit

Wirey Wireframe KitWirey Wireframe KitWirey Wireframe Kit
Wirey Wireframe Kit

Wirey hat nicht nur einen lustigen Namen, sondern ist auch ein Wireframe-Kit für Websites und digitale Projekte. Zu den Kategorien gehören Navigation, Kopfzeilen, Features, Blog und Fußzeilen.

9. Turbo iOS Wireframe Kit

Turbo iOS Wireframe KitTurbo iOS Wireframe KitTurbo iOS Wireframe Kit
Turbo iOS Wireframe Kit

Entwerfen einer App mit einer Anmeldeseite, exemplarischen Lernprogrammen, einem Benutzerprofil und sozialen Komponenten? Was ist mit Nachrichten, Verkäufen oder Videos? Probieren Sie dieses Turbo iOS Wireframe Kit aus, das einen Instagram-ähnlichen Look hat.

10. 6 E-Commerce-Wireframes

6 Ecommerce Wireframes6 Ecommerce Wireframes6 Ecommerce Wireframes
6 E-Commerce-Wireframes

Die Benutzeroberfläche von E-Commerce-Websites kann kompliziert sein: Es gibt Artikelgrößen und Farboptionen, Kaufschaltflächen, Logos, Bilder, Cross-Promotion-Artikel und vieles mehr. Das Letzte, was Sie tun wollen, ist, den Benutzer so weit zu verwirren, dass er keinen Kauf tätigt!

11. Google Fonts Combinations

Google Fonts CombinationsGoogle Fonts CombinationsGoogle Fonts Combinations
Google Fonts Combinations

Okay, dies ist technisch vielleicht kein "UI-Kit", aber wenn ich eine neue Website entwerfe, bleibt ich als erstes bei der Typografie-Auswahl hängen. Es ist so ein wichtiges Element des Designs, aber es gibt so viele Optionen. Es ist leicht zu überdenken, und plötzlich haben Sie eine Stunde damit verbracht, über die Vor- und Nachteile von Open Sans vs. Lato zu diskutieren... sei nicht wie ich! Laden Sie einfach dieses Kit mit Google Font-Kombinationen herunter, wählen Sie eine vom Designer ausgewählte Schriftkombination aus und fahren Sie mit Ihrem Projekt fort.

12. Basement Wireframe Kit

Basement Wireframe KitBasement Wireframe KitBasement Wireframe Kit
Basement Wireframe Kit

Ein Kit für einfache Websites, insbesondere für Unternehmen und Online-Vertriebswebsites. Kommt mit Photoshop und Sketch Dateiversionen.

13. Clean UI Kit for Rough Sketching

Clean UI Kit for Rough SketchingClean UI Kit for Rough SketchingClean UI Kit for Rough Sketching
Clean UI Kit for Rough Sketching

Ein ablenkungsfreies UI-Kit, so dass Sie einen Website-Plan erstellen können, ohne sich zu sehr in den Details zu verzetteln.

14. Paper Wireframe Kit

Paper Wireframe KitPaper Wireframe KitPaper Wireframe Kit
Paper Wireframe Kit

"Wie eine Skizze auf Papier" ist das Paper Wireframe Kit ein einfaches, gitterbasiertes Designwerkzeug.

15. W1 UI Kit for watch Apps

W1 UI Kit for watch AppsW1 UI Kit for watch AppsW1 UI Kit for watch Apps
W1 UI Kit for watch Apps

Hier ist eines, das ein wenig anders ist: ein UI-Kit, das nur für Apple Watch-Apps entwickelt wurde. Das Design für einen so kleinen Bildschirm ist hart, daher ist es wichtig, dass Ihr Design präzise und einfach zu folgen ist!

16. Dashboard UI Kit

Dashboard UI KitDashboard UI KitDashboard UI Kit
Dashboard UI Kit

Erstellen eines Dashboards für Berichts- und Projektdaten? Verwenden Sie keine Screenshots aus Excel oder Ihren Google Tabellen. Entwerfen Sie ein Dashboard, das mit diesem UI-Kit tatsächlich nützlich ist und dessen Größe auf eine Vielzahl von Bildschirmgrößen geändert werden kann.

17. Awesome Web UI Kit

Awesome Web UI KitAwesome Web UI KitAwesome Web UI Kit
Awesome Web UI Kit

Ein beliebtes UI-Kit, das auf dem Bootstrap-Raster basiert und Photoshop-fähigen Dateien beinhaltet. Es ist besonders einfach zu ändern, um sich an Ihre Markenfarben anzupassen, was hilfreich ist, wenn Sie bereits ein Farbschema im Auge haben.

18. Heavy UI Kit: Music

Heavy UI Kit MusicHeavy UI Kit MusicHeavy UI Kit Music
Heavy UI Kit: Music

Wiedergabetasten, Album-Artworks, Pause: Dieses UI-Kit ist für Musik-Apps erstellt und verfügt über jede Komponente, die Sie zum Entwerfen benötigen. Kommt mit Photoshop- und Sketch-Dateien. Dieser Designer hat ein paar spezialisierte UI-Kits im Portfolio, darunter solche für Online-Magazine, Reise-Apps und Instagram-Geschichten.

19. Creative Mind UI Kit

Creative Mind UI KitCreative Mind UI KitCreative Mind UI Kit
Creative Mind UI Kit

Das Creative Mind UI Kit ist weniger minimal als ein herkömmliches Drahtmodell und wurde für Blogs und große Schlagzeilen entwickelt.

20. Social Media Kit

Social Media KitSocial Media KitSocial Media Kit
Social Media Kit

Planen Sie eine Social-Media-Kampagne oder entwerfen Sie das Look and Feel einer neuen Marke? Probieren Sie ein Kit wie dieses Social Media Kit aus, das mit Grafiken, Bannern, Zitatvorlagen und mehr geliefert wird.

Weitere UI-Kits, Wireframes und hilfreiche Grafiken

Suchen Sie nach weiteren Hinzufügen zu Ihrer Sammlung? Sehen Sie sich die vollständige Envato Elements-Bibliothek mit fast 2.000 UX- und UI-Kits an, einschließlich Vorlagen für Landing Pages, Quiz-Apps und Abonnementpläne.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.