Een succesvolle UI-kit bouwen en op de markt brengen

Het verhaal achter de Paper Kit

Paper UI Kit

De grootste uitdaging waar ik en mijn team bij Creative Tim vanaf dag 1 voor staan, was hoe we van onze hobby een economische manier maken om onszelf te onderhouden. Om dit te doen, moesten we leren hoe we prachtige UI-kits kunnen bouwen die mensen eigenlijk willen gebruiken en hoe we deze voor gebruikers kunnen krijgen. Na een paar pogingen en veel moeite hebben we een aantal dingen begrepen waarvan we denken dat ze iedereen kunnen helpen die in deze ruimte probeert te komen.
 
 Gedurende de eerste paar maanden was mijn partner Alex verantwoordelijk voor de ontwikkeling van de producten. Nadat we begonnen waren grip te krijgen op sommige van de kits, kregen we feedback van onze klanten dat ze wensten dat we meer vrijgaven. Dus dat was het punt waarop ik mezelf rechtstreeks heb beziggehouden met de codering voor het product. Houd er rekening mee dat dit mijn eerste poging was.
 
 In dit artikel zal ik proberen mijn inspanningen voor het creëren en vervolgens vinden van een publiek voor een van onze meest populaire kits: de Paper Kit zo goed mogelijk uit te leggen. Ik zal proberen zoveel mogelijk details te geven, dus het resultaat is zoals deze foto die beschrijft hoe je een paard kunt tekenen:

Een paar jaar geleden zag ik een citaat op Twitter. Het gaat als volgt: "Geef me zes uur om een ​​boom om te hakken en ik zal de eerste vier besteden aan het slijpen van de bijl." Het wordt toegeschreven aan Abraham Lincoln. Dit was heel logisch voor mij en veranderde echt mijn perspectief op de manier waarop ik werk benader.
 
 Vroeger was ik echt een soort shit-done-persoon, die de taken uitvoerde. Door mijn jarenlange werk heb ik geleerd om geduldiger te zijn, mijn bijl te slijpen. Hoe vertaalt dit zich naar de ontwikkeling en UI Kit? Kortom, onderzoek. Voordat ik een coderegel schreef, heb ik alle UI-kits die ik op internet heb gevonden geïnspecteerd.
 
 Markten zoals ThemeForest en BootstrapBay hebben een grote verscheidenheid aan thema's. De meeste zijn gebouwd voor een specifiek doel. Ze doen het meestal uitstekend als u een specifieke presentatiesite probeert te bouwen. Maar we wilden iets bouwen dat een back-end ontwikkelaar kan gebruiken met een complex project. Dus hebben we mijn aandacht verlegd naar echte complexe sites zoals Airbnb, Uber, Twitter, Paper53 etc. Welke elementen gebruiken ze? Aan welk ontwerp geven ze de voorkeur?

De elementen

Na het doorlopen van veel sites met verschillende doeleinden: presentatie, portfolio, sociaal, kwamen we met de lijst van de elementen die de kern vormen:

  • toetsen
  • input
  • checkbox / radio
  • navigatie
  • laten vallen
  • voortgangsbalken / schuifregelaars
  • menus
  • typografie
  • afbeeldingen
  • meldingen
  • labels
  • carrousel

Deze dekken meer dan 90% van de functionaliteit die u nodig hebt om een ​​pagina te bouwen.

Ontwerp en ontwikkeling

Een van de grootste trends in design op dit moment waren Material en de platte look van iOS. Ik vond die echt leuk, maar ze waren niet mijn stijl. Ik wilde iets speels, leuks, gemakkelijk te volgen bouwen. Ik ging op veel media voor ontwerpers, zoals Dribbble en Behance. Maar uiteindelijk besloot ik een aantal echt coole sites te ontwerpen die ik zelf gebruikte: Paper 53 en Headspace. Ik vond dat ze er geweldig uitzien en ze hadden een echt kalmerend effect toen je ze navigeerde.
 
 Dus maakte ik een kleurenpalet met 6 kleuren, om de basisklassen voor Bootstrap te dekken. Alle achtergronden proberen op vellen papier te lijken en de animaties zijn bedoeld om de bewegingen van een stuk papier te imiteren. Voor de lettertypen ging ik met een gratis lettertype aangeboden door Google Fonts. Het heet Montserrat.
 
 Een kit kan erg handig zijn, maar vaak begrijpen mensen niet hoe ze het moeten gebruiken. Daarom heb ik 3 voorbeeldpagina's gemaakt: een login, een profiel en een bestemmingspagina om te laten zien wat je ermee kunt bouwen. Mensen kunnen ze ook direct gebruiken bij het bouwen van hun projecten.

Registreer pagina gemaakt met Paper KitProfielpagina gemaakt met Paper Kit.

De ontwikkeling betekende het maken van SASS-bestanden voor elke component. Deze Sass-bestanden zijn gecompileerd naar CSS en toegevoegd na Bootstrap. Dus iemand die al een Bootstrap-project heeft, kan gewoon de aangepaste bestanden toevoegen en het nieuwe ontwerp krijgen. De Javascript-aanpassingen waren minimaal, omdat we alleen speelden met de standaardanimaties voor enkele van de standaardelementen in Bootstrap.
 
 Na het ontwikkelen van de elementen hebben we ze getest op alle browser- en apparaatschermen. Een geweldig hulpmiddel om dit te doen is dit. En het laatste deel van het toevoegen van de afbeeldingen. Ik nam contact op met enkele van mijn favoriete artiesten op papier 53 en vroeg hen of het goed was om hun tekeningen te gebruiken. En dat deden ze graag :)
 
 Het goede nieuws is dat het maken van alle eerdere voorbereidingen heeft geleid tot een totale ontwikkeltijd van 3 weken. Iuhuu!

Bevordering

Toen alles klaar was, hebben we de kit op Paper Kit gepost. We hebben de kit ook gedeeld met een paar vrienden, zodat ze ons konden laten weten of ze bugs hebben gevonden die we hebben gemist. Toen alles groen licht kreeg, deden we een aantal inkomende e-mailmarketingcampagnes waarin de kit werd aangekondigd (aan de gebruikers die zich al op Creative Tim hadden geabonneerd). De feedback was positief, dus we hebben contact opgenomen met enkele gemeenschappen. We hebben geweldige reacties ontvangen op Hacker News, Product Hunt, Reddit. Sterker nog, sommigen pakten het op en gebruikten het voor hun eigen werk. Neem bijvoorbeeld Chris Pena, die er een video-tutorial mee deed.

Paper Kit aangeboden als gratis download op Creative Tim.

Omdat de meeste items die we gebruikten om de kit te maken, open-source waren, dachten we dat het eerlijk was, we geven hem ook gratis voor iedereen uit. Dus hebben we een repo gemaakt op GitHub en iedereen kan hieraan bijdragen.

Onderhoud

Na het te hebben gelanceerd, ontdekten we nieuwe dingen waar we voor moesten zorgen.

De beste manier om onze activiteiten voort te zetten, is door een PRO-versie te maken die gebruikers kunnen betalen. Dus keken we terug naar de functies die we over het hoofd hebben gezien toen we voor het eerst het plan voor de kit maakten. We namen die elementen en bouwden een groter pakket. Het product was een hit en veel mensen die de gratis kit gebruikten, waren blij om hun producten nog gemakkelijker te upgraden en te ontwikkelen.
 
 Dit gaf ons de tijd om ook een dashboard met hetzelfde ontwerp te ontwikkelen. Dit integreert mooi voor de back-end. Dus als u uw presentatie bouwt en het gedeelte waarmee de gebruiker interactie heeft met behulp van de Paper Kit; het Paper Dashboard zorgt voor een geweldige admin. We hebben het ook open source gemaakt en hebben positieve beoordelingen ontvangen.

Papieren dashboard

In de toekomst zijn we van plan meer versies voor het product te maken. De schets is al beschikbaar en we bouwen ook aan de PSD-versie. We zijn begonnen met het maken van de Angular-versie, dit is een van de grootste verzoeken van onze gebruikers. En we onderzoeken ReactJS, VueJS, etc.

Als je geïnteresseerd bent om met ons samen te werken, stuur me dan een e-mail op cristina@creative-tim.com