11 großartige kostenlose UI-Kits für Webdesigner
Es gibt so viele gute Beispiele dafür UI-Design im Web, von dem manche denken, dass es einfach ist, eine attraktive, benutzerfreundliche Oberfläche zu erstellen. Aber wie jeder Webdesigner wissen wird, der sein Geld wert ist, ist es alles andere als. Tatsächlich ist es oft die größte Herausforderung für jedes Webdesign-Projekt.
UI-Kits erleichtern die Entwicklung einer Lösung für ein Designproblem. Sie bieten in der Regel sowohl ein Framework zur Unterstützung Ihres Layouts als auch eine Reihe von Elementen der Benutzeroberfläche, um Bedeutung, Funktionalität und Benutzerinteraktion zu vermitteln.
Obwohl Sie ein sein können CSS Genie, das bedeutet nicht, dass Sie bei jedem Projekt, das Sie durchführen, direkt zum Zeichenbrett zurückkehren und von vorne beginnen müssen. Auch wenn es schön wäre, ein völlig neues Schnittstellenparadigma zu erstellen, ist die einfache Tatsache, dass das Web so ausgereift wird, dass wir mehr oder weniger wissen, was funktioniert, und vor allem auch Ihre Benutzer.
Alles zusammenbringen
UI-Kits bieten eine Reihe von Ressourcen, mit denen Sie die Benutzeroberfläche Ihrer Anwendung entwickeln können, unabhängig davon, in welcher Branche Sie arbeiten Photoshop , mit Entwicklertools für iOS oder Android oder im Web. Ein UI-Kit wird so genannt, weil es verschiedene Teile der Benutzeroberfläche zusammenführt, darunter Widgets und Schaltflächen, Layout, typografische Einstellungen und häufig Benutzerinteraktionen oder Feedbackmodule.
Im Web wird eine Benutzeroberfläche normalerweise als CSS-Bibliothek mit einer Sammlung von Schriftarten und Bildern und manchmal als kleine JavaScript-Bibliothek geliefert, um eine Polyfüllung für alle erweiterten Funktionen bereitzustellen, die in älteren Webbrowsern nicht unterstützt werden. Die Benutzeroberfläche, mit der jeder Webdesigner vertraut ist, ist der Bootstrap von Twitter, mit dem Sie schnell ein konsistentes gitterbasiertes Layout erstellen können, ohne eine völlig neue Lösung entwickeln zu müssen.
Hier haben wir 11 brillante CSS-basierte UI-Kits zusammengefasst, mit denen sich schnell und einfach ein angenehmes und benutzerfreundliches Website-Layout entwickeln lässt. Probieren Sie sie aus und lassen Sie uns wissen, ob wir Ihren Favoriten in den Kommentaren am Ende verpasst haben.
01. Scheiße fertig
Kreativer Tim hat dieses kostenlose UI-Kit namens Get Shit Done entwickelt. Es ermöglicht eine hervorragende Anpassung über Bootstrap und ist sehr einfach zu bedienen. Die Website selbst ist einfach zu navigieren, sodass Sie in Sekundenschnelle genau das finden, was Sie brauchen. 'Creative Tim steht für alles, was ein Designer in seiner Arbeit sieht: sauber, funktionierende Schnittstellen für großartige Produkte', erklären sie.
02. Fast flache Benutzeroberfläche
Dies ist eine schöne und einfach zu bedienende Benutzeroberfläche, die auf dem basiert Grundgerüst . Als Ergebnis erhalten Sie eine Menge verfeinerter Funktionen, ohne SASS implementieren oder Ihren eigenen ästhetischen Ansatz entwickeln zu müssen. Die fast flache Benutzeroberfläche enthält auch eine Reihe nützlicher Widgets wie CSS-Bedienfelder, Breadcrumbs und Registerkarten, Warnungen und QuickInfos.
03. uikit
Das einfach benannte Uikit ist ein leichtes modulares Framework, das in entwickelt wurde WENIGER . Wie bei allen Kits, die wir hier vorstellen, enthält das Framework viele praktische Komponenten, einschließlich Navigationsleisten, Schaltflächen, QuickInfos und Modalitäten. Es gibt auch ein solides Rastersystem, das das Layout untermauert. Sie finden eine Reihe voreingestellter Themen, aber auch ein Anpassungswerkzeug, das dem Themeneditor der jQuery-Benutzeroberfläche ähnelt.
04. Bootflat
Bootflat ist eine Open-Source-Benutzeroberfläche, die auf Twitter basiert Bootstrap Rahmen. Da es sich um eine Erweiterung von Bootstrap handelt, finden Sie hier alle Standardfunktionen sowie ein paar einzigartige Themen, die die in letzter Zeit beliebte Popularität des flachen Designs widerspiegeln. Das perfekte UI-Kit für Liebhaber von flaches Design .
05. Noch eine UI v2
Dieses einfache UI-Kit, das von Hugo Darby-Brown entwickelt wurde, heißt spielerisch Yet Another UI (YAUI Kit) V2. Wie zu erwarten, enthält es eine Reihe nützlicher Widgets, deren Schwerpunkt eher auf Benutzereingaben als auf der einfachen Anzeige von Inhalten liegt. Der Stil ist groß und klobig und bietet einen angenehmen Gegensatz zur aktuellen Mode für minimalistisches, flaches Design.
06. Backstein
Brick wurde von Mozilla entwickelt und enthält eine Reihe von Komponenten der Benutzeroberfläche, die für die moderne Web-App entwickelt wurden. Die breite Palette an Plug-and-Play-Elementen basiert auf einem robusten plattformübergreifenden Framework, das Code-leicht ist und für Standardliebhaber interessanterweise Webkomponenten verwendet: eine bevorstehende W3C-Spezifikation zum Definieren neuer DOM-Elemente in HTML Dokument.
07. TINTE v2
Tinte konzentriert sich auf reaktionsschnelles Layout und Design und enthält eine Reihe nützlicher Elemente, die automatisch neu formatiert werden, um sie an die Bildschirmgröße des Benutzers anzupassen, ohne dass Sie sich selbst um die Mechanik kümmern müssen. Es wird auch ein nützlicher alternativer Ansatz zum Rasterlayout verwendet. Die einzige Einschränkung ist, dass Sie mit WENIGER vertraut sein müssen, um die Möglichkeiten optimal nutzen zu können.
08. Flatby-Benutzeroberfläche
Diese übersichtliche Benutzeroberfläche von Designer Dennis Schipper bietet einen einfachen Ansatz für die Entwicklung Ihrer Website. Dies verwendet in hohem Maße dasselbe Modell wie Bootstrap. Wenn Sie also das Twitter-Kit verwendet haben, ist dies bekannt. Dies ist typisch für viele Alternativen, die wir hier hätten aufnehmen können, und nutzt die wachsende Beliebtheit von Codepen.io als Demo und Download-Plattform. Dies ist ideal für Designer, da es einfach ist, den Inhalt zu optimieren und zu sehen, wie Ihre Seite mit einzelnen Kits funktioniert.
09. MetroStyle Web-Benutzeroberfläche
Wie Sie vielleicht anhand des Namens dieses Kits erraten haben, repliziert MetroStyle die Designästhetik des Windows-Neustarts von Microsoft und wendet sie in diesem einfachen, aber funktionalen Satz von Widgets, Rastern und Stilen auf das Web an. Es ist eine saubere (wenn auch konservative) Option, wenn Sie nach einem System suchen, das leicht zu erlernen ist.
10. Rein
Pure ist eine Reihe kleiner, reaktionsschneller CSS-Module, die extrem leicht zu codieren sind und gleichzeitig eine unglaubliche Auswahl an verschiedenen Stilen und Elementen bieten. Es baut auf der YUI-Bibliothek von Yahoo auf, bietet also ein gutes Maß an Stabilität und Reife sowie die Möglichkeit, nur die Teile herunterzuladen, die Sie benötigen.
11. Futurico UI HTML Edition
Ein praktischer Satz von Elementen der Benutzeroberfläche, die in ein vorhandenes Seitenlayout eingefügt werden können. Dies hat eine minimalistische Ästhetik mit einigen schönen visuellen Schnörkeln und praktischen Funktionen wie Registerkarten und Schiebereglern. Der einzige Nachteil ist die Notwendigkeit, sich zum Herunterladen kostenlos anzumelden.
Wörter :: Sam Hampton-Smith
Was sollten wir im nächsten Update zu unserer Liste hinzufügen? Lass es uns in den Kommentaren unten wissen!
