Hvordan bygge og markedsføre et vellykket brukergrensesnitt

Historien bak Paper Kit

Papir UI-sett

Hovedutfordringen som jeg og teamet mitt på Creative Tim har møtt siden dag 1 var hvordan vi kunne gjøre hobbyen vår til en økonomisk måte å opprettholde oss selv på. For å gjøre dette, måtte vi lære hvordan vi bygger vakre UI-sett som folk faktisk vil bruke og hvordan de kan komme foran brukerne. Etter noen få forsøk og mye innsats, har vi forstått et par ting som vi tror kan hjelpe alle som prøver å komme inn i dette rommet.
 
 I løpet av de første månedene hadde partneren min Alex ansvaret for utviklingen av produktene. Etter at vi begynte å få trekkraft på noen av settene, fikk vi tilbakemeldinger fra kundene våre om at de ønsket at vi ga ut mer. Så det var poenget at jeg har engasjert meg direkte i kodingen for produktet. Husk at dette var min første prøve.
 
 I løpet av denne artikkelen vil jeg prøve å forklare så godt jeg kan min innsats for å skape og deretter finne et publikum for en av våre mest populære kits: Paper Kit. Jeg vil prøve å gi så mange detaljer som mulig, så resultatet blir som dette bildet som beskriver hvordan man tegner en hest:

For et par år siden så jeg et sitat på twitter. Det går slik: "Gi meg seks timer til å hugge ned et tre, og jeg vil bruke de fire første på å skjerpe øksa." Den tilskrives Abraham Lincoln. Dette ga mye mening for meg og forandret virkelig perspektivet mitt på måten jeg nærmer meg arbeid.
 
 Jeg pleide å være en virkelig skit-gjort type person, og driver gjennom oppgavene. Gjennom årene jeg jobbet har jeg lært å være mer tålmodig, skjerpe øksa. Hvordan oversettes dette til å utvikle og UI Kit? I utgangspunktet forskning. Før jeg skrev en kodelinje, har jeg inspisert alle brukergrensesnitt som jeg fant på internett.
 
 Markeder som ThemeForest og BootstrapBay har et stort utvalg av temaer. De fleste av dem er bygget for et bestemt formål. De gjør vanligvis en god jobb hvis du prøver å bygge et spesifikt presentasjonsnettsted. Men vi ønsket å bygge noe som en back-end-utvikler kan bruke med et komplekst prosjekt. Så vi flyttet oppmerksomheten mot ekte komplekse nettsteder som Airbnb, Uber, Twitter, Paper53 osv. Hvilke elementer bruker de? Hvilken design foretrekker de?

Elementene

Etter å ha gått gjennom mange nettsteder med forskjellige formål: presentasjon, portefølje, sosial, kom vi frem til listen over elementene som er kjernen:

  • knapper
  • innganger
  • boksen / radio
  • navigasjon
  • fall ned
  • fremdriftslinjer / glidebrytere
  • menyer
  • typografi
  • Bilder
  • varslinger
  • etiketter
  • karusell

Disse dekker over 90% av funksjonaliteten du trenger for å lage en side.

Design og utvikling

En av de største trendene innen design for øyeblikket var Material og iOS-flat look. Jeg likte de, men de var ikke min stil. Jeg ønsket å bygge noe lekent, morsomt, lett å følge. Jeg gikk på mange medier for designere, som Dribbble og Behance. Men jeg slo meg til slutt opp med utformingen av noen virkelig kule nettsteder som jeg brukte selv: Paper 53 og Headspace. Jeg syntes de så bra ut, og de hadde en veldig beroligende effekt når du navigerte dem.
 
 Så jeg opprettet en fargepalett med 6 farger, for å dekke grunnleggende klasser for Bootstrap. All bakgrunn prøver å ligne ark, og animasjonene er ment å etterligne bevegelsene til et stykke papir. For fontene gikk jeg med en gratis font som tilbys av Google Font. Det heter Montserrat.
 
 Et sett kan være veldig nyttig, men ofte forstår ikke folk hvordan de skal bruke det. Så jeg opprettet tre eksempelsider: en pålogging, en profil og en destinasjonsside for å vise hva du kan bygge med den. Folk kunne også bruke dem direkte når de bygger prosjektene sine.

Registrer siden laget med papirsettetProfilsiden laget med papirsett.

Utviklingen innebar å lage SASS-filer for alle komponenter. Disse Sass-filene ble samlet til CSS og lagt til etter Bootstrap. Så noen som allerede har et Bootstrap-prosjekt, kan bare legge til de tilpassede filene og få det nye designet. Javascript-endringene var minimale siden vi bare spilte med standardanimasjonene for noen av standardelementene i Bootstrap.
 
 Etter å ha utviklet elementene, testet vi dem på alle nettleser- og enhetsskjermbilder. Dette er et flott verktøy. Og den siste delen av å legge til bildene. Jeg kom i kontakt med noen av favorittartistene mine på Paper 53 og spurte dem om det er ok å bruke tegningene. Og de var glade for å gjøre det :)
 
 Den gode nyheten er at å gjøre alle de tidligere forberedelsene førte til en total utviklingstid på 3 uker. Iuhuu!

Forfremmelse

Da alt var klart, har vi lagt ut settet på Paper Kit. Vi har også delt settet med et par venner slik at de kunne gi oss beskjed hvis de fant noen feil vi savnet. Da alt fikk grønt lys, gjorde vi noen innkommende e-postmarkedsføringskampanjer som kunngjorde settet (til brukerne som allerede abonnerer på Creative Tim). Tilbakemeldingene var positive, så vi nådde ut til noen samfunn. Vi fikk gode svar på Hacker News, Product Hunt, Reddit. Enda mer tok noen det opp og brukte det til sitt eget arbeid. Ta eksempel Chris Pena, som gjorde en videoopplæring med det.

Paper Kit tilbys som en gratis nedlasting på Creative Tim.

Siden de fleste varene vi brukte til å lage settet var åpen kildekode, trodde vi at det bare var rettferdig, og vi ga det også gratis for alle. Så vi opprettet en repo på GitHub, og alle kan bidra til det.

Vedlikehold

Etter å ha undersøkt det, oppdaget vi nye ting vi måtte ta vare på.

Den beste måten for oss å opprettholde vår aktivitet fremover, var å lage en PRO-versjon som brukerne vil kunne betale for. Så vi så tilbake på funksjonene vi oversett da vi først la planen for settet. Vi tok elementene og bygde en større pakke. Produktet var en hit, og mange av dem som brukte gratissettet var glade for å oppgradere og utvikle produktene enda enklere.
 
 Dette ga oss tid til også å utvikle et dashbord med samme design. Dette integreres fint for back-end. Så hvis du bygger presentasjonen og den delen som brukeren samhandler med ved hjelp av papirsettet; Paper Dashboard gir deg en flott administrator. Vi har også åpnet det og mottatt positive anmeldelser.

Papirpanel

I fremtiden planlegger vi å lage flere versjoner for produktet. Skissen er allerede tilgjengelig, og vi bygger også PSD-versjonen. Vi har begynt å lage Angular-versjonen, dette er en av de største forespørslene fra våre brukere. Og vi ser på ReactJS, VueJS, etc.

Hvis du er interessert i å samarbeide med oss, send meg en e-post på cristina@creative-tim.com