() translation by (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.
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
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 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 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 ist ein beliebtes Wireframe-Kit mit 170+ Layouts. Es ist besonders gut für Dashboards, Daten und Diagramme.
5. 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
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
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 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
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
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
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
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
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
"Wie eine Skizze auf Papier" ist das Paper Wireframe Kit ein einfaches, gitterbasiertes Designwerkzeug.
15. 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
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
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
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
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
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.
