Sådan bygges og markedsføres et vellykket UI-kit

Historien bag Paper Kit

Papir UI-sæt

Den største udfordring, som jeg og mit team på Creative Tim har stået over for siden dag 1, var, hvordan vi kan gøre vores hobby til en økonomisk måde at opretholde os selv på. For at gøre dette, var vi nødt til at lære, hvordan man bygger smukke UI-sæt, som folk faktisk ønsker at bruge, og hvordan man får dem foran brugerne. Efter et par forsøg og en masse indsats, har vi forstået et par ting, som vi tror kan hjælpe enhver, der prøver på at komme ind i dette rum.
 
 I løbet af de første par måneder var min partner Alex ansvarlig for udviklingen af ​​produkterne. Efter at vi begyndte at få trækkraft på nogle af sætene, fik vi feedback fra vores kunder om, at de ønskede, at vi frigav mere. Så det var det punkt, at jeg har involveret mig direkte i kodningen for produktet. Husk, at dette var min første prøve.
 
 I løbet af denne artikel vil jeg forsøge at forklare så godt jeg kan mine bestræbelser på at skabe og derefter finde et publikum til et af vores mest populære sæt: Paper Kit. Jeg vil prøve at give så mange detaljer som muligt, så resultatet er som dette billede, der beskriver, hvordan man tegner en hest:

For et par år siden så jeg et tilbud på twitter. Det går sådan: ”Giv mig seks timer til at hugge et træ ned, og jeg vil tilbringe de første fire på at skærpe øksen.” Den tilskrives Abraham Lincoln. Dette gav meget mening for mig og ændrede virkelig mit perspektiv på den måde, jeg nærmer mig arbejde.
 
 Jeg plejede at være en virkelig get-shit-gjort slags person, der gik igennem opgaverne. I løbet af mine års arbejde har jeg lært at være mere tålmodig og skærpe min øks. Hvordan oversættes dette til udvikling og UI Kit? Grundlæggende forskning. Før jeg skriver en kodelinje, har jeg inspiceret alle UI-sæt, jeg fandt på internettet.
 
 Markeder som ThemeForest og BootstrapBay har en lang række forskellige temaer. De fleste af dem er bygget til et specifikt formål. De gør normalt et godt stykke arbejde, hvis du prøver at opbygge et specifikt præsentationswebsted. Men vi ønskede at bygge noget, som en back-end-udvikler kan bruge til et komplekst projekt. Så vi flyttede min opmærksomhed mod rigtige komplekse websteder som Airbnb, Uber, Twitter, Paper53 osv. Hvilke elementer bruger de? Hvilket design foretrækker de?

Elementerne

Efter at have gennemgået en masse sider med forskellige formål: præsentation, portefølje, social, kom vi med listen over de elementer, der er kernen:

  • knapper
  • indgange
  • afkrydsningsfelt / radio
  • navigation
  • dropdown
  • statuslinjer / skyder
  • menuer
  • typografi
  • billeder
  • underretninger
  • etiketter
  • karrusel

Disse dækker over 90% af den funktionalitet, du har brug for for at oprette en side.

Design og udvikling

En af de største tendenser inden for design i øjeblikket var Materiale og iOS-flade look. Jeg kunne virkelig godt lide dem, men de var ikke min stil. Jeg ville bygge noget legende, sjovt, let at følge. Jeg gik på en masse medier for designere som Dribbble og Behance. Men jeg sluttede mig med designen af ​​nogle virkelig seje websteder, som jeg brugte selv: Paper 53 og Headspace. Jeg syntes, de så godt ud, og de havde en virkelig beroligende virkning, da du navigerede dem.
 
 Så jeg oprettede en farvepalet med 6 farver til at dække de grundlæggende klasser til Bootstrap. Alle baggrunde forsøger at ligne ark, og animationerne er beregnet til at efterligne bevægelser af et stykke papir. For skrifttyperne gik jeg med en gratis skrifttype, der tilbydes af Google Font. Det kaldes Montserrat.
 
 Et kit kan være meget nyttigt, men ofte forstår folk ikke, hvordan de bruger det. Så jeg oprettede 3 eksempler på sider: et login, en profil og en destinationsside for at vise, hvad du kan bygge med det. Folk kunne også bruge dem direkte, når de bygger deres projekter.

Registrer side lavet med papirsætProfilsiden lavet med papirsæt.

Udviklingen betød at oprette SASS-filer til alle komponenter. Disse Sass-filer blev samlet til CSS og tilføjet efter Bootstrap. Så nogen, der allerede har et Bootstrap-projekt, kan bare tilføje de tilpassede filer og få det nye design. Javascript-ændringerne var minimale, da vi kun spillede med standardanimationerne for nogle af standardelementerne i Bootstrap.
 
 Efter at have udviklet elementerne, testede vi dem på alle browser- og enhedsskærme. Et godt værktøj til at gøre dette er dette. Og den sidste del af tilføjelsen af ​​billederne. Jeg kom i kontakt med nogle af mine favoritkunstnere på papir 53 og spurgte dem, om det er ok at bruge deres tegninger. Og de var glade for at gøre det :)
 
 Den gode nyhed er, at gennemførelsen af ​​alle de tidligere forberedelser førte til en samlet udviklingstid på 3 uger. Iuhuu!

Forfremmelse

Da alt var klar, har vi lagt sættet på Paper Kit. Vi har også delt kittet med et par venner, så de kunne fortælle os, hvis de fandt nogle fejl, vi har savnet. Da alt fik grønt lys, foretog vi nogle indgående e-mail-marketingkampagner, der annoncerede kittet (til de brugere, der allerede abonnerer på Creative Tim). Feedbacken var positiv, så vi nåede ud til nogle samfund. Vi fik gode svar på Hacker News, Product Hunt, Reddit. Endnu mere tog nogle det op og brugte det til deres eget arbejde. Tag eksempel Chris Pena, der lavede en videoundervisning med det.

Paper Kit tilbydes som en gratis download på Creative Tim.

Da de fleste af de ting, vi brugte til at oprette kittet, var open source, troede vi, at det kun var fair, vi frigiver det også gratis for alle. Så vi oprettede en repo på GitHub, og alle kan bidrage til det.

Vedligeholdelse

Efter at have undersøgt det, opdagede vi nye ting, vi var nødt til at tage os af.

Den bedste måde for os at opretholde vores aktivitet fremad, var at lave en PRO-version, som brugerne kan betale for. Så vi kiggede tilbage på de funktioner, vi overså, da vi først lavede planen for sættet. Vi tog disse elementer og byggede en større pakke. Produktet var et hit, og mange af de mennesker, der brugte gratis kit, var glade for at opgradere og udvikle deres produkter endnu lettere.
 
 Dette gav os tid til også at udvikle et dashboard med samme design. Dette integreres pænt til bagenden. Så hvis du bygger din præsentation og den del, som brugeren interagerer med ved hjælp af papirsættet; Paper Dashboard giver en god administrator. Vi har også åbent det og modtaget positive anmeldelser.

Papir Dashboard

I fremtiden planlægger vi at oprette flere versioner til produktet. Skitsjen er allerede tilgængelig, og vi bygger også PSD-versionen. Vi er begyndt at oprette den vinklede version, dette er en af ​​de største anmodninger fra vores brugere. Og vi undersøger ReactJS, VueJS osv.

Hvis du er interesseret i at samarbejde med os, så send mig en e-mail på cristina@creative-tim.com