Comment construire et commercialiser un kit d'interface utilisateur performant

L'histoire derrière le kit de papier

Kit d'interface utilisateur papier

Depuis le premier jour, mon équipe chez Creative Tim et moi-même avons dû relever le défi principal: faire de notre loisir un moyen économique de subvenir à nos besoins. Pour ce faire, nous avons dû apprendre à créer de magnifiques kits d’interface utilisateur que les gens veulent réellement utiliser et à les présenter aux utilisateurs. Après quelques essais et beaucoup d’efforts, nous avons compris un certain nombre de choses qui, selon nous, pourraient aider toute personne cherchant à pénétrer cet espace.
 
 Durant les premiers mois, mon partenaire Alex était responsable du développement des produits. Après avoir commencé à utiliser certains de ces kits, nos clients nous ont fait savoir qu'ils souhaitaient recevoir davantage de logiciels. C'est donc à ce point que je me suis impliqué directement dans le codage du produit. Gardez à l'esprit que c'était mon premier essai.
 
 Au cours de cet article, je vais essayer d’expliquer le mieux possible mes efforts pour créer puis trouver un public pour l’un de nos kits les plus populaires: le kit papier. Je vais essayer de donner le plus de détails possible, donc le résultat est comme cette image décrivant comment dessiner un cheval:

Il y a quelques années, j'ai vu une citation sur Twitter. Cela ressemble à ceci: «Donnez-moi six heures pour abattre un arbre et je passerai les quatre premières à affûter la hache.» C'est attribué à Abraham Lincoln. Cela a eu beaucoup de sens pour moi et a vraiment changé mon point de vue sur la façon dont j'aborde le travail.
 
 J'avais l'habitude d'être une sorte de personne vraiment imbécile, capable d'exécuter ses tâches. Au fil de mes années de travail, j'ai appris à être plus patient, à affûter ma hache. Comment cela se traduit-il dans le développement et le kit d'interface utilisateur? Fondamentalement, la recherche. Avant d'écrire une ligne de code, j'ai inspecté tous les kits d'interface utilisateur trouvés sur Internet.
 
 Les marchés tels que ThemeForest et BootstrapBay ont une grande variété de thèmes. La plupart d'entre eux sont construits dans un but spécifique. Ils font généralement un excellent travail si vous essayez de créer un site de présentation spécifique. Mais nous voulions créer quelque chose qu'un développeur back-end peut utiliser avec un projet complexe. Nous avons donc concentré mon attention sur de véritables sites complexes comme Airbnb, Uber, Twitter, Paper53, etc. Quels éléments utilisent-ils? Quel design préfèrent-ils?

Les éléments

Après avoir parcouru de nombreux sites ayant des objectifs différents: présentation, portefeuille, social, nous avons dressé la liste des éléments essentiels:

  • boutons
  • contributions
  • case à cocher / radio
  • la navigation
  • menu déroulant
  • barres de progression / curseurs
  • des menus
  • typographie
  • images
  • notifications
  • Étiquettes
  • carrousel

Celles-ci couvrent plus de 90% des fonctionnalités dont vous avez besoin pour créer une page.

Design et développement

L’une des plus grandes tendances actuelles en matière de design est Material et le look plat iOS. J'ai vraiment aimé ceux-ci, mais ils n'étaient pas mon style. Je voulais construire quelque chose de ludique, amusant, facile à suivre. J'ai utilisé beaucoup de médiums pour des designers, comme Dribbble et Behance. Mais j’ai finalement choisi la conception de sites vraiment intéressants que j’ai moi-même utilisés: Paper 53 et Headspace. Je pensais qu'ils avaient fière allure et qu'ils avaient un effet vraiment apaisant lorsque vous les parcouriez.
 
 J'ai donc créé une palette de couleurs de 6 couleurs pour couvrir les classes de base de Bootstrap. Tous les milieux essaient de ressembler à des feuilles de papier et les animations sont conçues pour imiter les mouvements d'un morceau de papier. Pour les polices, je suis allé avec une police gratuite offerte par Google Fonts. Il s’appelle Montserrat.
 
 Un kit peut être très utile, mais souvent, les gens ne comprennent pas comment l’utiliser. J'ai donc créé 3 exemples de pages: une connexion, un profil et une page de renvoi pour montrer ce que vous pouvez créer avec. Les gens pourraient également les utiliser directement lors de la construction de leurs projets.

Enregistrer la page réalisée avec le kit de papierPage de profil réalisée avec le kit de papier.

Le développement consistait à créer des fichiers SASS pour chaque composant. Ces fichiers Sass ont été compilés en CSS et ajoutés après Bootstrap. Ainsi, quelqu'un qui a déjà un projet Bootstrap peut simplement ajouter les fichiers personnalisés et obtenir le nouveau design. Les modifications de Javascript étaient minimes car nous ne jouions qu'avec les animations par défaut de certains des éléments par défaut de Bootstrap.
 
 Après avoir développé les éléments, nous les avons testés sur tous les écrans de navigateurs et de périphériques. Ceci est un excellent outil pour faire ceci. Et la dernière partie de l'ajout des images. J'ai contacté certains de mes artistes favoris sur le papier 53 et leur ai demandé si je pouvais utiliser leurs dessins. Et ils étaient contents de le faire :)
 
 La bonne nouvelle est que les préparatifs antérieurs ont conduit à un temps de développement total de trois semaines. Iuhuu!

Promotion

Lorsque tout était prêt, nous avons posté le kit sur Paper Kit. Nous avons également partagé le kit avec quelques amis afin qu'ils puissent nous faire savoir s'ils trouvaient des bugs que nous avions manqués. Lorsque tout a reçu le feu vert, nous avons lancé des campagnes de marketing par e-mail entrantes annonçant le kit (destinées aux utilisateurs déjà abonnés à Creative Tim). Les réactions ont été positives, nous avons donc contacté certaines communautés. Nous avons eu d'excellentes réponses sur Hacker News, Product Hunt, Reddit. Encore plus, certains l'ont ramassé et l'ont utilisé pour leur propre travail. Prenons l'exemple de Chris Pena, qui a réalisé un didacticiel vidéo à ce sujet.

Paper Kit offert en téléchargement gratuit sur Creative Tim.

Étant donné que la plupart des éléments que nous avons utilisés pour créer le kit étaient des logiciels à source ouverte, nous avons pensé qu'il était juste que nous publions également le logiciel gratuitement pour tous. Nous avons donc créé un dépôt sur GitHub et tout le monde peut y contribuer.

Entretien

Après l'avoir lancé, nous avons découvert de nouvelles choses dont nous devions nous occuper.

Pour nous, le meilleur moyen de maintenir notre activité à l'avenir était de créer une version PRO que les utilisateurs seraient en mesure de payer. Nous nous sommes donc penchés sur les fonctionnalités que nous avions négligées lors de la première planification du kit. Nous avons pris ces éléments et construit un plus gros paquet. Le produit a été un succès et beaucoup de personnes qui ont utilisé le kit gratuit ont été ravies de mettre à niveau et de développer leurs produits encore plus facilement.
 
 Cela nous a donné le temps de développer également un tableau de bord avec le même design. Cela s'intègre bien pour le back-end. Donc, si vous construisez votre présentation et la partie avec laquelle l'utilisateur interagit à l'aide du kit Papier; Le tableau de bord en papier est un excellent administrateur. Nous avons également ouvert le code source et reçu des critiques positives.

Tableau de bord papier

À l'avenir, nous prévoyons de créer davantage de versions pour le produit. Le Sketch est déjà disponible et nous construisons également la version PSD. Nous avons commencé à créer la version angulaire, c’est l’une des plus grandes demandes de nos utilisateurs. Et nous examinons ReactJS, VueJS, etc.

Si vous souhaitez collaborer avec nous, envoyez-moi un email à cristina@creative-tim.com