Cómo construir y comercializar un kit de interfaz de usuario exitoso

La historia detrás del kit de papel

Kit de interfaz de usuario de papel

El principal desafío que enfrentamos yo y mi equipo en Creative Tim desde el primer día fue cómo hacer de nuestro hobby una forma económica de mantenernos. Para hacer esto, tuvimos que aprender a construir hermosos kits de interfaz de usuario que las personas realmente quieran usar y cómo ponerlos frente a los usuarios. Después de algunos intentos y mucho esfuerzo, hemos entendido un par de cosas que creemos que pueden ayudar a cualquiera que intente entrar en este espacio.
 
 Durante los primeros meses, mi socio Alex estuvo a cargo del desarrollo de los productos. Después de que comenzamos a obtener tracción en algunos de los kits, recibimos comentarios de nuestros clientes que decían que deseaban que lanzáramos más. Ese fue el punto en el que me involucré directamente en la codificación del producto. Tenga en cuenta que este fue mi primer intento.
 
 Durante este artículo intentaré explicar lo mejor que pueda mis esfuerzos para crear y luego encontrar una audiencia para uno de nuestros kits más populares: el Kit de papel. Intentaré dar tantos detalles como sea posible, por lo que el resultado es como esta imagen que describe cómo dibujar un caballo:

Hace un par de años vi una cita en twitter. Dice así: "Dame seis horas para cortar un árbol y pasaré las primeras cuatro afilando el hacha". Se atribuye a Abraham Lincoln. Esto tenía mucho sentido para mí y realmente cambió mi perspectiva sobre la forma en que enfoco el trabajo.
 
 Solía ​​ser un tipo de persona realmente tonta, haciendo las tareas. A lo largo de mis años de trabajo, he aprendido a ser más paciente, afilar mi hacha. ¿Cómo se traduce esto en desarrollo y kit de interfaz de usuario? Básicamente, la investigación. Antes de escribir cualquier línea de código, he inspeccionado todos los kits de interfaz de usuario que encontré en Internet.
 
 Mercados como ThemeForest y BootstrapBay tienen una gran variedad de temas. La mayoría de ellos están construidos para un propósito específico. Por lo general, hacen un gran trabajo si está tratando de construir un sitio de presentación específico. Pero queríamos construir algo que un desarrollador de back-end pueda usar con un proyecto complejo. Así que cambiamos mi atención hacia sitios realmente complejos como Airbnb, Uber, Twitter, Paper53, etc. ¿Qué elementos usan? ¿Qué diseño prefieren?

Los elementos

Después de visitar muchos sitios con diferentes propósitos: presentación, portafolio, redes sociales, se nos ocurrió la lista de los elementos que son el núcleo:

  • botones
  • entradas
  • casilla de verificación / radio
  • navegación
  • desplegable
  • barras de progreso / controles deslizantes
  • menús
  • tipografía
  • imágenes
  • notificaciones
  • etiquetas
  • carrusel

Estos cubren más del 90% de la funcionalidad que necesita para crear una página.

Diseño y desarrollo

Una de las principales tendencias en diseño en este momento fue Material y el aspecto plano de iOS. Realmente me gustaron, pero no eran mi estilo. Quería construir algo juguetón, divertido, fácil de seguir. Fui a muchos medios para diseñadores, como Dribbble y Behance. Pero finalmente me decidí por el diseño de algunos sitios realmente geniales que utilicé yo mismo: Paper 53 y Headspace. Pensé que se veían geniales y tenían un efecto realmente relajante cuando los navegabas.
 
 Así que creé una paleta de colores con 6 colores, para cubrir las clases básicas de Bootstrap. Todos los fondos intentan parecerse a hojas de papel y las animaciones están destinadas a imitar los movimientos de una hoja de papel. Para las fuentes fui con una fuente gratuita ofrecida por Google Fonts. Se llama Montserrat.
 
 Un kit puede ser muy útil, pero a menudo las personas no entienden cómo usarlo. Así que creé 3 páginas de ejemplo: un inicio de sesión, un perfil y una página de destino para mostrar lo que puede construir con él. La gente también podría usarlos directamente al construir sus proyectos.

Página de registro hecha con kit de papelPágina de perfil realizada con Kit de papel.

El desarrollo significó crear archivos SASS para cada componente. Estos archivos Sass se compilaron en CSS y se agregaron después de Bootstrap. Entonces, alguien que ya tiene un proyecto Bootstrap puede simplemente agregar los archivos personalizados y obtener el nuevo diseño. Las modificaciones de Javascript fueron mínimas ya que solo jugamos con las animaciones predeterminadas para algunos de los elementos predeterminados en Bootstrap.
 
 Después de desarrollar los elementos, los probamos en todas las pantallas de navegador y dispositivo. Una gran herramienta para hacer esto es esto. Y la parte final de agregar las imágenes. Me puse en contacto con algunos de mis artistas favoritos en el Documento 53 y les pregunté si está bien usar sus dibujos. Y estaban felices de hacerlo :)
 
 La buena noticia es que hacer todos los preparativos anteriores llevó a un tiempo de desarrollo total de 3 semanas. Iuhuu!

Promoción

Cuando todo estuvo listo, publicamos el kit en Paper Kit. También hemos compartido el kit con un par de amigos para que nos avisen si encuentran algún error que nos perdimos. Cuando todo salió a la luz verde, realizamos algunas campañas de marketing por correo electrónico entrante anunciando el kit (a los usuarios ya suscritos en Creative Tim). La retroalimentación fue positiva, por lo que nos comunicamos con algunas comunidades. Obtuvimos excelentes respuestas en Hacker News, Product Hunt, Reddit. Aún más, algunos lo recogieron y lo usaron para su propio trabajo. Tomemos como ejemplo a Chris Pena, quien hizo un video tutorial con él.

Paper Kit se ofrece como descarga gratuita en Creative Tim.

Como la mayoría de los artículos que utilizamos para crear el kit eran de código abierto, pensamos que era justo, también lo lanzamos para todos de forma gratuita. Así que creamos un repositorio en GitHub y todos pueden contribuir.

Mantenimiento

Después de lanzarlo, descubrimos cosas nuevas de las que teníamos que ocuparnos.

La mejor manera de mantener nuestra actividad en el futuro fue hacer una versión PRO que los usuarios puedan pagar. Así que volvimos a las características que pasamos por alto cuando hicimos el plan para el kit. Tomamos esos elementos y construimos un paquete más grande. El producto fue un éxito y muchas de las personas que usaron el kit gratuito estaban felices de actualizar y desarrollar sus productos aún más fácilmente.
 
 Esto nos dio el tiempo para desarrollar también un tablero con el mismo diseño. Esto se integra muy bien para el back-end. Entonces, si está construyendo su presentación y la parte con la que el usuario interactúa usando el kit Paper; Paper Dashboard es un gran administrador. También lo hemos abierto y hemos recibido críticas positivas.

Tablero de papel

En el futuro, planeamos crear más versiones para el producto. El Sketch ya está disponible y también estamos construyendo la versión PSD. Hemos comenzado a crear la versión angular, esta es una de las mayores solicitudes de nuestros usuarios. Y estamos estudiando ReactJS, VueJS, etc.

Si está interesado en colaborar con nosotros, envíeme un correo electrónico a cristina@creative-tim.com