Como criar e comercializar um kit de interface do usuário bem-sucedido

A história por trás do Kit de Papel

Paper UI Kit

O principal desafio que eu e minha equipe da Creative Tim enfrentamos desde o primeiro dia foi como tornar nosso hobby uma maneira econômica de nos sustentar. Para fazer isso, tivemos que aprender a criar belos kits de interface do usuário que as pessoas realmente desejam usar e como colocá-los na frente dos usuários. Após algumas tentativas e muito esforço, entendemos algumas coisas que achamos que podem ajudar qualquer um que tentar entrar nesse espaço.
 
 Durante os primeiros meses, meu parceiro Alex foi responsável pelo desenvolvimento dos produtos. Depois que começamos a obter tração em alguns dos kits, recebemos comentários de nossos clientes dizendo que desejavam lançar mais. Esse foi o ponto em que me envolvi diretamente na codificação do produto. Tenha em mente que esta foi minha primeira tentativa.
 
 Durante este artigo, tentarei explicar da melhor maneira possível meus esforços para criar e, em seguida, encontrar uma audiência para um de nossos kits mais populares: o Kit de Papel. Vou tentar fornecer o máximo de detalhes possível, para que o resultado seja como esta figura que descreve como desenhar um cavalo:

Há alguns anos, vi uma citação no twitter. É assim: "Dê-me seis horas para derrubar uma árvore e passarei as quatro primeiras afiando o machado." É atribuído a Abraham Lincoln. Isso fez muito sentido para mim e realmente mudou minha perspectiva sobre a maneira como abordo o trabalho.
 
 Eu costumava ser um tipo de pessoa realmente idiota, dando poder às tarefas. Ao longo dos meus anos de trabalho, aprendi a ser mais paciente, afiar meu machado. Como isso se traduz em desenvolvimento e kit de interface do usuário? Basicamente, pesquisa. Antes de escrever qualquer linha de código, inspecionei todos os kits de interface do usuário que encontrei na internet.
 
 Mercados como ThemeForest e BootstrapBay têm uma grande variedade de temas. A maioria deles é construída para um propósito específico. Eles geralmente fazem um ótimo trabalho se você estiver tentando criar um site de apresentação específico. Mas queríamos criar algo que um desenvolvedor de back-end possa usar com um projeto complexo. Então, voltamos minha atenção para sites complexos reais, como Airbnb, Uber, Twitter, Paper53 etc. Quais elementos eles usam? Qual design eles preferem?

Os elementos

Depois de percorrer muitos sites com finalidades diferentes: apresentação, portfólio, social, criamos a lista dos elementos que são os principais:

  • botões
  • entradas
  • caixa de seleção / rádio
  • navegação
  • suspenso
  • barras de progresso / controles deslizantes
  • menus
  • tipografia
  • imagens
  • notificações
  • etiquetas
  • carrossel

Eles cobrem mais de 90% da funcionalidade necessária para criar uma página.

Design e desenvolvimento

Uma das maiores tendências de design no momento era Material e a aparência plana do iOS. Gostei muito deles, mas eles não eram o meu estilo. Eu queria criar algo divertido, divertido e fácil de seguir. Eu usei muitas mídias para designers, como Dribbble e Behance. Mas acabei decidindo o design de alguns sites muito legais que eu mesmo usei: Documento 53 e Headspace. Eu pensei que eles estavam ótimos e tiveram um efeito realmente calmante quando você os navegou.
 
 Então eu criei uma paleta de cores com 6 cores, para cobrir as classes básicas do Bootstrap. Todos os cenários estão tentando se parecer com folhas de papel e as animações são destinadas a imitar os movimentos de um pedaço de papel. Para as fontes, fui com uma fonte gratuita oferecida pelo Google Fonts. Chama-se Montserrat.
 
 Um kit pode ser muito útil, mas muitas vezes as pessoas não entendem como usá-lo. Por isso, criei 3 páginas de exemplo: um Login, um Perfil e uma Landing Page para mostrar o que você pode construir com ele. As pessoas também poderiam usá-los diretamente na criação de seus projetos.

Página de registro feita com o Kit de papelPágina de perfil feita com Kit de papel.

O desenvolvimento significou a criação de arquivos SASS para todos os componentes. Esses arquivos Sass foram compilados em CSS e adicionados após o Bootstrap. Portanto, alguém que já tenha um projeto de Bootstrap pode simplesmente adicionar os arquivos personalizados e obter o novo design. As modificações do Javascript foram mínimas, pois reproduzimos apenas as animações padrão de alguns dos elementos padrão do Bootstrap.
 
 Depois de desenvolver os elementos, os testamos em todas as telas do navegador e do dispositivo. Uma ótima ferramenta para fazer isso é isso. E a parte final da adição das imagens. Entrei em contato com alguns dos meus artistas favoritos no Paper 53 e perguntei se não havia problema em usar seus desenhos. E eles ficaram felizes em fazê-lo :)
 
 A boa notícia é que fazer todos os preparativos anteriores levou a um tempo total de desenvolvimento de 3 semanas. Iuhuu!

Promoção

Quando tudo estava pronto, publicamos o kit no Paper Kit. Também compartilhamos o kit com alguns amigos para que eles pudessem nos informar se encontrassem algum erro que perdemos. Quando tudo ficou claro, fizemos algumas campanhas de marketing por e-mail anunciando o kit (para os usuários já inscritos no Creative Tim). O feedback foi positivo, então contatamos algumas comunidades. Temos ótimas respostas no Hacker News, Product Hunt, Reddit. Ainda mais, alguns a pegaram e a usaram para seu próprio trabalho. Veja o exemplo de Chris Pena, que fez um tutorial em vídeo com ele.

Kit de papel oferecido como download gratuito no Creative Tim.

Como a maioria dos itens que usamos para criar o kit era de código aberto, achamos justo, também o liberamos para todos de graça. Por isso, criamos um repositório no GitHub e todos podem contribuir.

Manutenção

Depois de lançá-lo, descobrimos coisas novas que precisávamos cuidar.

A melhor maneira de sustentar nossa atividade no futuro foi criar uma versão PRO pela qual os usuários possam pagar. Por isso, analisamos os recursos que ignoramos quando fizemos o plano do kit. Pegamos esses elementos e construímos um pacote maior. O produto foi um sucesso e muitas pessoas que usaram o kit gratuito ficaram felizes em atualizar e desenvolver seus produtos ainda mais facilmente.
 
 Isso nos deu tempo para também desenvolver um painel com o mesmo design. Isso se integra perfeitamente ao back-end. Portanto, se você estiver construindo sua apresentação e a parte com a qual o usuário interage usando o kit de papel; o Paper Dashboard é um ótimo administrador. Também temos código aberto e recebemos críticas positivas.

Painel de papel

No futuro, planejamos criar mais versões para o produto. O Sketch já está disponível e também estamos construindo a versão PSD. Começamos a criar a versão Angular, esta é uma das maiores solicitações de nossos usuários. E estamos analisando ReactJS, VueJS, etc.

Se você estiver interessado em colaborar conosco, envie um email para cristina@creative-tim.com