So erstellen und vermarkten Sie ein erfolgreiches UI-Kit

Die Geschichte hinter dem Paper Kit

Papier-UI-Kit

Die größte Herausforderung, der ich und mein Team von Creative Tim seit dem ersten Tag gegenüberstanden, bestand darin, unser Hobby zu einer wirtschaftlichen Art des Lebensunterhalts zu machen. Dazu mussten wir lernen, wie man schöne UI-Kits erstellt, die die Benutzer tatsächlich verwenden möchten, und wie man sie den Benutzern vorstellt. Nach ein paar Versuchen und viel Mühe haben wir ein paar Dinge verstanden, von denen wir glauben, dass sie jedem helfen können, in diesen Raum zu gelangen.
 
 In den ersten Monaten war mein Partner Alex für die Entwicklung der Produkte verantwortlich. Nachdem wir bei einigen Kits erste Erfahrungen gesammelt hatten, bekamen wir Feedback von unseren Kunden, die wünschten, wir hätten mehr veröffentlicht. Das war also der Punkt, an dem ich mich direkt in die Codierung des Produkts einmischte. Denken Sie daran, dies war mein erster Versuch.
 
 In diesem Artikel werde ich versuchen, so gut ich kann meine Bemühungen zu erklären, um ein Publikum für eines unserer beliebtesten Kits zu finden: das Paper Kit. Ich werde versuchen, so viele Details wie möglich anzugeben, daher sieht das Ergebnis so aus, als würde man ein Pferd zeichnen:

Vor ein paar Jahren habe ich ein Zitat auf Twitter gesehen. Es geht so: "Geben Sie mir sechs Stunden, um einen Baum zu fällen, und ich werde die ersten vier Stunden damit verbringen, die Axt zu schärfen." Es wird Abraham Lincoln zugeschrieben. Das hat mir sehr viel Sinn gemacht und meine Sichtweise auf die Art und Weise, wie ich mit der Arbeit umgehe, wirklich verändert.
 
 Früher war ich eine wirklich verdammte Person, die die Aufgaben meisterte. Während meiner jahrelangen Arbeit habe ich gelernt, geduldiger zu sein und meine Axt zu schärfen. Wie übersetzt sich dies auf die Entwicklung und das UI-Kit? Grundsätzlich Forschung. Bevor ich Codezeilen schreibe, habe ich alle UI-Kits überprüft, die ich im Internet gefunden habe.
 
 Märkte wie ThemeForest und BootstrapBay haben eine Vielzahl von Themen. Die meisten von ihnen sind für einen bestimmten Zweck gebaut. Sie leisten in der Regel hervorragende Arbeit, wenn Sie versuchen, eine bestimmte Präsentationssite zu erstellen. Wir wollten jedoch etwas erstellen, das ein Back-End-Entwickler für ein komplexes Projekt verwenden kann. Also haben wir meine Aufmerksamkeit auf wirklich komplexe Websites wie Airbnb, Uber, Twitter, Paper53 usw. gelenkt. Welche Elemente verwenden sie? Welches Design bevorzugen sie?

Die Elemente

Nachdem wir viele Websites mit unterschiedlichen Zwecken durchgesehen hatten: Präsentation, Portfolio, Soziales, kamen wir auf die Liste der Elemente, die den Kern bilden:

  • Tasten
  • Eingänge
  • Kontrollkästchen / Radio
  • Navigation
  • Dropdown-Liste
  • Fortschrittsbalken / Schieberegler
  • menüs
  • Typografie
  • bilder
  • Benachrichtigungen
  • Etiketten
  • Karussell

Diese decken über 90% der Funktionen ab, die Sie zum Erstellen einer Seite benötigen.

Design und Entwicklung

Einer der größten Designtrends im Moment waren Material und das flache Aussehen von iOS. Diese mochte ich wirklich, aber sie entsprachen nicht meinem Stil. Ich wollte etwas Verspieltes bauen, das Spaß macht und leicht zu befolgen ist. Ich habe viele Medien für Designer wie Dribbble und Behance verwendet. Aber ich habe mich schließlich für das Design einiger wirklich cooler Sites entschieden, die ich selbst verwendet habe: Paper 53 und Headspace. Ich fand sie großartig und sie wirkten wirklich beruhigend, wenn man sie navigierte.
 
 Also habe ich eine Farbpalette mit 6 Farben erstellt, um die Grundklassen für Bootstrap abzudecken. Alle Hintergründe versuchen, Papierbögen zu ähneln, und die Animationen sollen die Bewegungen eines Blattes Papier imitieren. Für die Schriften habe ich eine kostenlose Schriftart von Google Fonts gewählt. Es heißt Montserrat.
 
 Ein Kit kann sehr nützlich sein, aber oft wissen die Leute nicht, wie man es benutzt. Deshalb habe ich drei Beispielseiten erstellt: ein Login, ein Profil und eine Landing Page, um zu zeigen, was Sie damit erstellen können. Die Leute könnten sie auch direkt beim Erstellen ihrer Projekte verwenden.

Mit Paper Kit erstellte RegisterseiteProfilseite mit Paper Kit erstellt.

Die Entwicklung bedeutete, SASS-Dateien für alle Komponenten zu erstellen. Diese Sass-Dateien wurden in CSS kompiliert und nach Bootstrap hinzugefügt. So kann jemand, der bereits ein Bootstrap-Projekt hat, einfach die benutzerdefinierten Dateien hinzufügen und das neue Design erhalten. Die Javascript-Änderungen waren minimal, da wir nur mit den Standardanimationen für einige der Standardelemente in Bootstrap gespielt haben.
 
 Nach der Entwicklung der Elemente haben wir sie auf allen Browser- und Gerätebildschirmen getestet. Ein großartiges Werkzeug, um dies zu tun, ist dies. Und der letzte Teil des Hinzufügens der Bilder. Ich habe einige meiner Lieblingskünstler auf Paper 53 kontaktiert und sie gefragt, ob es in Ordnung ist, ihre Zeichnungen zu verwenden. Und das haben sie gerne getan :)
 
 Die gute Nachricht ist, dass alle früheren Vorbereitungen zu einer Gesamtentwicklungszeit von 3 Wochen geführt haben. Iuhuu!

Beförderung

Als alles fertig war, haben wir das Kit auf Paper Kit gepostet. Wir haben das Kit auch mit ein paar Freunden geteilt, damit sie uns wissen lassen können, ob sie Fehler gefunden haben, die wir verpasst haben. Als alles grünes Licht bekam, haben wir einige eingehende E-Mail-Marketingkampagnen durchgeführt, in denen das Kit angekündigt wurde (für die Benutzer, die bereits Creative Tim abonniert haben). Das Feedback war positiv und wir haben uns an einige Gemeinden gewandt. Wir haben großartige Reaktionen auf Hacker News, Product Hunt, Reddit erhalten. Einige haben es sogar aufgegriffen und für ihre eigene Arbeit verwendet. Nehmen wir zum Beispiel Chris Pena, der damit ein Video-Tutorial gemacht hat.

Paper Kit wird als kostenloser Download auf Creative Tim angeboten.

Da die meisten Elemente, die wir zur Erstellung des Kits verwendet haben, Open Source waren, hielten wir es für fair, dass wir es auch für alle kostenlos veröffentlichen. Also haben wir ein Repo auf GitHub erstellt und jeder kann dazu beitragen.

Instandhaltung

Nachdem wir es gestartet hatten, entdeckten wir neue Dinge, um die wir uns kümmern mussten.

Der beste Weg für uns, um unsere Aktivitäten voranzutreiben, war die Entwicklung einer PRO-Version, für die die Benutzer bezahlen können. Wir haben also auf die Funktionen zurückgegriffen, die wir übersehen haben, als wir den Plan für das Kit erstellt haben. Wir haben diese Elemente genommen und eine größere Packung gebaut. Das Produkt war ein Erfolg, und viele Leute, die das kostenlose Kit verwendeten, waren froh, ein Upgrade durchzuführen und ihre Produkte noch einfacher zu entwickeln.
 
 Dies gab uns die Zeit, auch ein Dashboard mit dem gleichen Design zu entwickeln. Das passt gut zum Backend. Wenn Sie also Ihre Präsentation und den Teil, mit dem der Benutzer interagiert, mit dem Paper-Kit erstellen; Das Paper Dashboard ist ein großartiger Administrator. Wir haben auch Open-Sourcing und positive Bewertungen erhalten.

Papier-Dashboard

In Zukunft planen wir, weitere Versionen für das Produkt zu erstellen. Die Skizze ist bereits verfügbar und wir bauen auch die PSD-Version. Wir haben mit der Erstellung der Angular-Version begonnen. Dies ist eine der größten Anfragen unserer Benutzer. Und wir untersuchen ReactJS, VueJS usw.

Wenn Sie an einer Zusammenarbeit mit uns interessiert sind, senden Sie mir eine E-Mail an cristina@creative-tim.com