Hur man bygger och marknadsför ett framgångsrikt UI-kit

Historien bakom papperspaketet

Pappersgränssnitt

Den största utmaningen som jag och mitt team på Creative Tim har mött sedan dag 1 var hur man gör vår hobby till ett ekonomiskt sätt att upprätthålla oss själva. För att göra detta var vi tvungna att lära oss hur man bygger vackra UI-kit som människor faktiskt vill använda och hur man får dem framför användarna. Efter några försök och mycket ansträngning har vi förstått ett par saker som vi tror kan hjälpa alla som försöker komma in i detta utrymme.
 
 Under de första månaderna var min partner Alex ansvarig för utvecklingen av produkterna. Efter att vi började få dragkraft på några av satserna fick vi feedback från våra kunder som säger att de önskade att vi släppte mer. Så det var poängen att jag har engagerat mig direkt i kodningen för produkten. Kom ihåg att det här var mitt första försök.
 
 Under denna artikel kommer jag att försöka förklara så bra som möjligt mina ansträngningar för att skapa och sedan hitta en publik för en av våra mest populära kit: Paper Kit. Jag kommer att försöka ge så mycket information som möjligt, så resultatet blir som den här bilden som beskriver hur man ritar en häst:

För ett par år sedan såg jag ett offert på twitter. Det går så här: "Ge mig sex timmar att hugga ner ett träd och jag kommer att spendera de första fyra att skärpa yxan." Den tillskrivs Abraham Lincoln. Det var mycket meningsfullt för mig och ändrade verkligen mitt perspektiv på hur jag närmar mig arbetet.
 
 Jag brukade vara en riktigt skit-gjort typ av person, driva igenom uppgifterna. Under mina år av arbete har jag lärt mig att vara mer tålamod, skärpa min yxa. Hur översätter detta till utvecklings- och UI-kit? I grund och botten forskning. Innan jag skrev någon kodrad har jag inspekterat alla UI-satser som jag hittade på internet.
 
 Marknader som ThemeForest och BootstrapBay har ett stort urval av teman. De flesta av dem är byggda för ett specifikt syfte. De gör vanligtvis ett bra jobb om du försöker bygga en specifik presentationssida. Men vi ville bygga något som en back-end-utvecklare kan använda i ett komplex projekt. Så vi riktade min uppmärksamhet mot riktiga komplexa webbplatser som Airbnb, Uber, Twitter, Paper53 etc. Vilka element använder de? Vilken design föredrar de?

Elementen

Efter att ha gått igenom många webbplatser med olika syften: presentation, portfölj, social, kom vi med listan över de element som är kärnan:

  • knappar
  • ingångar
  • checkbox / radio
  • navigering
  • falla ner
  • framstegsfält / reglage
  • menyer
  • typografi
  • bilder
  • aviseringar
  • etiketter
  • karusell

Dessa täcker över 90% av den funktionalitet du behöver för att skapa en sida.

Design och utveckling

En av de största trenderna inom design för närvarande var Material och iOS-platt look. Jag gillade dem verkligen, men de var inte min stil. Jag ville bygga något lekfullt, roligt, lätt att följa. Jag gick på många medier för designers, som Dribbble och Behance. Men jag slutade slutligen på utformningen av några riktigt coola webbplatser som jag använde mig: Paper 53 och Headspace. Jag tyckte att de såg bra ut och de hade en riktigt lugnande effekt när du navigerade dem.
 
 Så jag skapade en färgpalett med 6 färger för att täcka grundklasserna för Bootstrap. Alla bakgrunder försöker likna pappersark och animationerna är avsedda att imitera rörelserna hos ett papper. För teckensnitten gick jag med ett gratis teckensnitt som erbjuds av Google Teckensnitt. Det heter Montserrat.
 
 Ett kit kan vara mycket användbart men ofta förstår människor inte hur man använder det. Så jag skapade tre exempel: en inloggning, en profil och en målsida för att visa vad du kan bygga med det. Människor kan också använda dem direkt när de bygger sina projekt.

Registrera sidan gjord med papperssatsenProfilsida gjord med papperssats.

Utvecklingen innebar att skapa SASS-filer för alla komponenter. Dessa Sass-filer kompilerades till CSS och lades till efter Bootstrap. Så någon som redan har ett Bootstrap-projekt kan bara lägga till anpassade filer och få den nya designen. Javascript-ändringarna var minimala eftersom vi bara spelade med standardanimationerna för några av standardelementen i Bootstrap.
 
 Efter att ha utvecklat elementen testade vi dem på alla webbläsar- och enhetsskärmar. Ett bra verktyg för att göra detta är detta. Och den sista delen av att lägga till bilderna. Jag kontaktade några av mina favoritartister på Paper 53 och frågade dem om det är ok att använda deras ritningar. Och de var glada att göra det :)
 
 Den goda nyheten är att genomföra alla tidigare förberedelser ledde till en total utvecklingstid på 3 veckor. Iuhuu!

Befordran

När allt var klart har vi lagt ut satsen på Paper Kit. Vi har också delat satsen med ett par vänner så att de kunde meddela oss om de hittade några buggar vi missade. När allt fick grönt ljus, gjorde vi några inkommande e-postmarknadsföringskampanjer som tillkännagav kit (till de användare som redan prenumererade på Creative Tim). Feedbacken var positiv så vi nådde ut till vissa samhällen. Vi fick fantastiska svar på Hacker News, Product Hunt, Reddit. Ännu mer tog några upp det och använde det för sitt eget arbete. Ta exempel Chris Pena, som gjorde en videohandledning med det.

Paper Kit erbjuds som en gratis nedladdning på Creative Tim.

Eftersom de flesta artiklar vi använde för att skapa satsen var open-source trodde vi att det bara var rättvist släppte vi det också gratis för alla. Så vi skapade en repo på GitHub och alla kan bidra till det.

Underhåll

Efter att ha undersökt det upptäckte vi nya saker vi var tvungna att ta hand om.

Det bästa sättet för oss att upprätthålla vår verksamhet framöver var att skapa en PRO-version som användare kommer att kunna betala för. Så vi tittade tillbaka på de funktioner vi förbisett när vi först gjorde planen för satsen. Vi tog dessa element och byggde ett större paket. Produkten blev en hit och många människor som använde gratissatsen var glada att uppgradera och utveckla sina produkter ännu lättare.
 
 Detta gav oss tid att också utveckla en instrumentpanel med samma design. Detta integreras fint för back-end. Så om du bygger din presentation och den del som användaren interagerar med med hjälp av papperspaketet; Paper Dashboard ger dig en fantastisk admin. Vi har också öppnat det och fått positiva recensioner.

Papper Dashboard

I framtiden planerar vi att skapa fler versioner för produkten. Skissen är redan tillgänglig och vi bygger också PSD-versionen. Vi har börjat skapa Angular-versionen, detta är en av de största begäran från våra användare. Och vi tittar på ReactJS, VueJS, etc.

Om du är intresserad av att samarbeta med oss, skicka mig ett e-postmeddelande till cristina@creative-tim.com