Come costruire e commercializzare un kit UI di successo

La storia dietro il kit di carta

Kit di interfaccia utente di carta

La sfida principale che io e il mio team di Creative Tim abbiamo dovuto affrontare fin dal primo giorno è stata come rendere il nostro hobby un modo economico per sostenerci. Per fare questo, abbiamo dovuto imparare come creare bellissimi kit di interfaccia utente che le persone vogliono effettivamente usare e come metterli di fronte agli utenti. Dopo alcuni tentativi e molti sforzi, abbiamo capito un paio di cose che pensiamo possano aiutare chiunque cerchi di entrare in questo spazio.
 
 Durante i primi due mesi, il mio partner Alex è stato responsabile dello sviluppo dei prodotti. Dopo che abbiamo iniziato a provare trazione su alcuni dei kit, abbiamo ricevuto feedback dai nostri clienti dicendo che avrebbero voluto rilasciarne di più. Questo è stato il punto in cui mi sono coinvolto direttamente nella codifica del prodotto. Tieni presente che questo è stato il mio primo tentativo.
 
 Durante questo articolo cercherò di spiegare al meglio i miei sforzi per creare e quindi trovare un pubblico per uno dei nostri kit più popolari: il Paper Kit. Proverò a fornire il maggior numero di dettagli possibile, quindi il risultato è come questa immagine che descrive come disegnare un cavallo:

Un paio di anni fa ho visto un preventivo su Twitter. Va così: "Dammi sei ore per abbattere un albero e passerò i primi quattro a affilare l'ascia". È attribuito ad Abraham Lincoln. Ciò ha avuto molto senso per me e ha davvero cambiato la mia prospettiva sul modo in cui mi avvicino al lavoro.
 
 Ero un tipo di persona davvero merda, che mi dava da fare per i compiti. Durante i miei anni di lavoro ho imparato ad essere più paziente, affinare la mia ascia. Come si traduce in sviluppo e kit UI? Fondamentalmente, ricerca. Prima di scrivere qualsiasi riga di codice ho ispezionato tutti i kit di interfaccia utente che ho trovato su Internet.
 
 Mercati come ThemeForest e BootstrapBay hanno una grande varietà di temi. La maggior parte di questi sono costruiti per uno scopo specifico. Di solito fanno un ottimo lavoro se stai cercando di costruire un sito di presentazione specifico. Ma volevamo creare qualcosa che uno sviluppatore di back-end possa utilizzare con un progetto complesso. Quindi abbiamo spostato la mia attenzione su siti davvero complessi come Airbnb, Uber, Twitter, Paper53 ecc. Quali elementi usano? Quale design preferiscono?

Gli elementi

Dopo aver attraversato molti siti con scopi diversi: presentazione, portfolio, social, abbiamo creato l'elenco degli elementi che sono il nucleo:

  • pulsanti
  • ingressi
  • casella di controllo / radio
  • navigazione
  • cadere in picchiata
  • barre di avanzamento / cursori
  • menu
  • tipografia
  • immagini
  • notifiche
  • etichette
  • giostra

Questi coprono oltre il 90% delle funzionalità necessarie per creare una pagina.

Design e sviluppo

Una delle più grandi tendenze del design al momento sono state Material e l'aspetto piatto di iOS. Mi piacevano molto quelli, ma non erano il mio stile. Volevo costruire qualcosa di giocoso, divertente, facile da seguire. Ho seguito molti mezzi per i designer, come Dribbble e Behance. Ma alla fine ho optato per la progettazione di alcuni siti davvero interessanti che ho usato da solo: Paper 53 e Headspace. Ho pensato che fossero fantastici e avevano un effetto davvero calmante quando li hai navigati.
 
 Così ho creato una tavolozza di colori con 6 colori, per coprire le classi di base per Bootstrap. Tutti gli sfondi stanno cercando di assomigliare a fogli di carta e le animazioni hanno lo scopo di imitare i movimenti di un pezzo di carta. Per i caratteri sono andato con un carattere gratuito offerto da Google Fonts. Si chiama Montserrat.
 
 Un kit può essere molto utile ma spesso le persone non capiscono come usarlo. Quindi ho creato 3 pagine di esempio: un login, un profilo e una pagina di destinazione per mostrare cosa puoi costruire con esso. Le persone potrebbero anche usarle direttamente durante la costruzione dei loro progetti.

Pagina di registrazione realizzata con kit di cartaPagina del profilo realizzata con kit di carta.

Lo sviluppo ha significato la creazione di file SASS per tutti i componenti. Questi file Sass sono stati compilati in CSS e aggiunti dopo Bootstrap. Quindi, qualcuno che ha già un progetto Bootstrap può semplicemente aggiungere i file personalizzati e ottenere il nuovo design. Le modifiche a Javascript erano minime poiché abbiamo giocato solo con le animazioni predefinite per alcuni degli elementi predefiniti in Bootstrap.
 
 Dopo aver sviluppato gli elementi, li abbiamo testati su tutti gli schermi dei browser e dei dispositivi. Un ottimo strumento per farlo è questo. E la parte finale dell'aggiunta delle immagini. Mi sono messo in contatto con alcuni dei miei artisti preferiti su Paper 53 e ho chiesto loro se fosse giusto usare i loro disegni. Ed erano felici di farlo :)
 
 La buona notizia è che fare tutti i precedenti preparativi ha portato a un tempo di sviluppo totale di 3 settimane. Iuhuu!

Promozione

Quando tutto era pronto, abbiamo pubblicato il kit su Paper Kit. Abbiamo anche condiviso il kit con un paio di amici in modo che possano farci sapere se hanno trovato qualche bug che abbiamo perso. Quando tutto ha avuto il via libera, abbiamo fatto alcune campagne di email marketing in entrata annunciando il kit (per gli utenti già iscritti a Creative Tim). Il feedback è stato positivo, quindi abbiamo raggiunto alcune comunità. Abbiamo ricevuto ottime risposte su Hacker News, Product Hunt, Reddit. Ancora di più, alcuni lo hanno raccolto e utilizzato per il proprio lavoro. Prendi esempio Chris Pena, che ha realizzato un video tutorial con esso.

Paper Kit offerto come download gratuito su Creative Tim.

Poiché la maggior parte degli elementi che abbiamo usato per creare il kit erano open-source, abbiamo pensato che fosse giusto e lo abbiamo anche rilasciato gratuitamente per tutti. Quindi abbiamo creato un repository su GitHub e tutti possono contribuire ad esso.

Manutenzione

Dopo averlo lanciato, abbiamo scoperto nuove cose di cui dovevamo occuparci.

Il modo migliore per sostenere la nostra attività andando avanti è stato realizzare una versione PRO che gli utenti saranno in grado di pagare. Quindi abbiamo guardato indietro alle funzionalità che abbiamo trascurato quando abbiamo fatto il piano per il kit. Abbiamo preso quegli elementi e costruito un pacchetto più grande. Il prodotto è stato un successo e molte persone che hanno utilizzato il kit gratuito erano felici di aggiornare e sviluppare i propri prodotti ancora più facilmente.
 
 Questo ci ha dato il tempo di sviluppare anche un cruscotto con lo stesso design. Questo si integra perfettamente per il back-end. Quindi, se stai costruendo la tua presentazione e la parte con cui l'utente interagisce utilizzando il kit di carta; Paper Dashboard è un ottimo amministratore. Lo abbiamo anche ottenuto da fonti aperte e abbiamo ricevuto recensioni positive.

Cruscotto di carta

In futuro, prevediamo di creare più versioni per il prodotto. Lo schizzo è già disponibile e stiamo anche costruendo la versione PSD. Abbiamo iniziato a creare la versione angolare, questa è una delle maggiori richieste dei nostri utenti. E stiamo esaminando ReactJS, VueJS, ecc.

Se sei interessato a collaborare con noi, inviami un'email a cristina@creative-tim.com