La anatomía de un panel de Bootstrap que gana $ 1,000 cada mes

En Creative Tim siempre hemos querido ofrecer excelentes herramientas a todos los desarrolladores web que utilizan nuestros productos. Si desea leer más sobre cómo hemos construido nuestro negocio y cuál es nuestro impulso, puede consultar este artículo: Cómo convertir un proyecto paralelo en un negocio de $ 17,000 al mes.

Queremos ver mejores sitios web y aplicaciones web en Internet. Así que decidimos compartir algunos de los "ingredientes secretos" que forman la base de uno de nuestros paneles de control más populares: Light Bootstrap Dashboard. Por supuesto, ya no serán un secreto, porque los vamos a compartir contigo. ?

En este caso de estudio, compartiré cómo se nos ocurrió la idea de crear un tablero, dónde nos inspiramos, cómo implementamos todo, cómo se usó dentro de las herramientas internas de Stanford y cómo financiamos el desarrollo y el soporte del mismo. Aquí hay una descripción general del artículo:

  1. La estructura básica y la funcionalidad central
  2. Cómo se creó el diseño
  3. Construido sobre código abierto y por qué debería pararse sobre los hombros de gigantes
  4. Lanzar, levantarse y brillar
  5. Cómo financiamos el soporte y resolvemos las solicitudes de los desarrolladores
  6. Planes de desarrollo futuro

Intentaré dar tanta información como pueda, con la esperanza de que este tutorial no sea así:

1. La estructura básica y la funcionalidad principal

Debe pensar en el proceso detrás de la creación del tablero como una prueba que debe realizar después de aprender mucho. Por supuesto, aprenderá mucho durante el desarrollo del producto. Pero primero, debe tener un conocimiento sólido de qué es “eso” y cómo “se usa”. Antes de escribir la primera línea de código, debe investigar un poco, hacer planes, crear listas de tareas pendientes y bocetos, y tratar de visualizar lo que querrá tener al final.

Dado que no está reinventando la rueda, debe buscar empresas que crean excelentes productos para inspirarse (como Heroku, Slack, Mailchimp, Stripe). También mire a su competencia. Obtendrá mucha información. Y cuando empieces, será más fácil desarrollar el producto porque hiciste tu tarea. Tienes que afilar tu hacha, antes de empezar a cortar:

"Si tuviera ocho horas para talar un árbol, pasaría seis horas afilando mi hacha". - Abraham Lincoln

Hicimos nuestra tarea y tenemos una gran lista de más de 100 paneles gratuitos como ejemplos de los que podemos inspirarnos. Éstos son algunos de ellos:

Tiene una lista enorme de paneles, con muchos colores, animaciones, hermosos íconos, gráficos pequeños, gráficos grandes, barra lateral estática o fija y cientos de características diferentes. ¿Cómo sabes cuál es la mejor opción para tu audiencia?

Como no sabíamos qué querían las personas dentro de un panel, decidimos anotar todas las características que contienen estos paneles y usar solo las más comunes. Nos dimos cuenta de que las funciones principales resuelven alrededor del 95% de los casos en los que necesita un tablero. El 5% restante resuelve problemas muy concretos.

Los elementos básicos son botones, iconos, tipografía, barra lateral, panel principal, barras de navegación y menús desplegables. Las características principales en la mayoría de los paneles son:

  1. Mesas
  2. Notificaciones
  3. Listas de tareas
  4. Tarjetas (para diferentes tipos de formularios y visualización más fácil de la información)
  5. Gráficos (gráfico de anillos, gráfico de líneas, gráfico de barras)
  6. mapas de Google

Con pequeños ajustes visuales, puede reproducir el 95% de cualquier tablero de cualquier empresa del mundo simplemente usando los elementos centrales. Luego tienes el 5% restante, que siempre es diferente según la empresa y los problemas que resuelve. Aquí podemos encontrar:

  1. Tarjetas del sistema Kanban
  2. Funcionalidad de arrastrar y soltar
  3. Componentes de la línea de tiempo
  4. Editor WYSIWYG
  5. Menú de la barra lateral de navegación de 8 niveles
  6. Cargador de archivos múltiples + Cargador de archivos de arrastrar y soltar
  7. Formulario X-Editable
  8. Morris Chart, Google Chart, Flot Chart, amChart, Flows Chart y muchos otros tipos de gráficos
  9. Y la lista puede continuar con más de 200 funciones.

El problema es que cada uno de estos nuevos complementos agrega bibliotecas adicionales de CSS, JavaScript o jQuery y HTML. Hemos construido el producto en HTML simple, sin marcos ni trucos modulares, por lo que todo el CSS / JavaScript estaría en un solo archivo.

No me malinterpretes, no estoy diciendo que las funciones no fueran buenas. Estos son excelentes complementos desarrollados por personas increíbles. Pero no era algo que quisiéramos tener en nuestro panel simple.

Así que decidimos mantener el producto lo más ligero posible (¿recuerdas el nombre?). Panel de control de Bootstrap ligero . Y decidimos implementar solo las características que estaban resolviendo el núcleo en un 95%.

2. Cómo se creó el diseño

Después de que hicimos nuestro plan para los elementos que tendría el producto, tuvimos que pensar en un diseño que fuera sobresaliente. Un diseño fácil de usar que haría que las personas quisieran tener este tablero dentro de su sistema de administración de contenido. Ya teníamos el famoso Kit Bootstrap Get Shit Done. A los desarrolladores web les encantó y se ha descargado más de 30.000 veces. Así que decidimos usarlo como diseño central para elementos básicos como botones, barras de navegación, entradas, etc.

Sin embargo, nos dimos cuenta de que necesitamos más que eso, para tener un impacto y hacer que la gente desee nuestro producto. No queríamos ser "otro tablero basado en Bootstrap". ¿A dónde vas cuando quieres un gran recurso de diseño?

Si busca "tablero" en Dribbble, encontrará muchos tableros y paneles de administración increíblemente hermosos. En realidad, para quienes no lo sepan, Dribbble es como cocaína visual. Vea algunos de estos ejemplos hechos por Cosmin Capitanu y Mike de CreativeMints:

Ver todos estos hermosos ejemplos nos hizo darnos cuenta de que si construimos algo así definitivamente nos destacaremos entre la multitud. Además, incluso si los cuadros de mando o los gráficos se ven muy bien, será muy difícil o imposible para nosotros codificarlos en HTML, CSS y JavaScript. O están resolviendo un problema muy específico, como el último tablero con medidas corporales.

Era imposible hace 2 años, porque nuestro nivel de conocimiento y experiencia con HTML / CSS no era tan alto. Estoy seguro de que si quisiéramos implementarlos hoy, tendríamos muchas posibilidades de crear algo muy similar. Además, la tecnología y las capacidades del navegador nos ayudarán más.

Queríamos construir algo que pudiera ser utilizado por muchas personas de diversos campos comerciales. También había algunos paneles de control simples y hermosos, pero no queríamos usarlos como inspiración porque queríamos algo diferente.

No puedo explicar exactamente lo que queríamos, pero no nos sentimos cómodos con ninguno de los ejemplos. Así que continuamos investigando hasta que encontramos algo que realmente nos gustó:

No fue perfecto ni tan sobresaliente como queríamos que fuera. Pero sentimos que es la elección correcta y es un muy buen ejemplo a partir del cual podemos construir nuestro tablero. Incluso Pablo Picasso dijo que los grandes diseñadores roban y Apple respetó su palabra:

No pudimos hacer eso. El tablero de Heroku era lo suficientemente bueno como para darnos esa chispa. Así que decidimos usarlo solo como inspiración y no para el resultado final. Aquí está la primera iteración:

Es un buen comienzo. Para tener una mejor visión de cómo se verá, solo tenemos que poblar el área correcta con algunas tarjetas con gráficos:

Los colores de las cartas no se veían tan bien. Eran demasiado brillantes para el aspecto de la barra lateral izquierda. Entonces comenzamos a probar diferentes combinaciones de colores para los gráficos y la barra lateral.

En este punto, nos dimos cuenta de que no tenemos que mantener solo un color para el fondo de la barra lateral. Y deberíamos dejar que nuestros usuarios elijan el color que quieran. Sabíamos que Apple tenía algunos degradados hermosos para su aplicación Fitness, por lo que decidimos usar esos degradados como base para nuestros futuros degradados.

Siempre hemos pensado que si observamos lo que están haciendo las mejores empresas del mundo en términos de Diseño y UX, estableceremos estándares muy altos para nuestras interfaces. De esta forma, cada vez más desarrolladores web tendrán acceso gratuito a productos de alta calidad.

Mientras hacíamos todas estas diferentes combinaciones de colores, degradados, tarjetas y gráficos, vimos que los chicos de Metalab, que construyeron la interfaz para Slack, escribieron un artículo: Slack's 2.8 Billion Dollar Secret Sauce. Esto terminó siendo una inspiración para los siguientes pasos. La idea general del artículo era que la salsa secreta de Slack se crea mediante la combinación de una interfaz genial y divertida con pequeñas interacciones, lo que hace que el producto sea más fácil de usar.

"Se ve diferente, se siente diferente y suena diferente".

Queríamos agregar algo que ninguno de los otros panelestenido. Siempre me ha encantado cómo un degradado con algo de transparencia puede verse sobre una imagen. Y comencé a jugar con diferentes imágenes y la opacidad del degradado. Por cierto, la imagen de degradado de Duotone que usamos en 2015 (ni siquiera sabíamos que tenía un nombre) parece ser una de las tendencias en diseño web para 2017. Esto es muy bueno, ¿no? ?

No completamente satisfecho ...

Esta fue la vista que nos hizo sentir felices, ¿fue simplemente perfecta para nosotros ?. También agregamos pequeñas interacciones como la animación desplegable de apertura o el efecto de mostrar de la notificación:

Agregar la imagen con los degradados y las pequeñas animaciones nos hizo sentir como este tipo:

3. Construido sobre código abierto y por qué debería pararse sobre los hombros de gigantes

Como dijimos al principio, no queríamos reinventar la rueda. Tampoco teníamos el dinero para contratar expertos capaces de construir los elementos necesarios para el tablero. Decidimos que la mejor opción para nosotros es usar lo que otras personas crearon y compartieron de forma gratuita o de código abierto .

Recientemente descubrimos que lo que realmente hicimos fue apoyarnos en los hombros de gigantes. Eso significa que usamos tanto como pudimos de herramientas que ya son poderosas y están bien mantenidas por grandes comunidades. Para obtener más información sobre esto y por qué debería usar esta técnica cuando quiera construir algo desde cero, lea este artículo asombroso, escrito por Quincy Larson: Cómo pararse sobre los hombros de gigantes

Echemos un vistazo a lo que realmente hay debajo del capó.

  • Marco: Bootstrap: Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para desarrollar proyectos móviles y receptivos en la web.
  • Capa de diseño: Kit Get Shit Done - Kit gratuito de interfaz de usuario Bootstrap 3. Este es el mejor punto de partida para cualquier proyecto en línea que esté creando. Se ha convertido en una marca registrada para la comunidad en línea de una interfaz limpia y agradable.
  • Fuente: Roboto: una fuente de Google que tiene una naturaleza dual. Tiene un esqueleto mecánico y las formas son en gran parte geométricas.
  • Iconos pequeños: Font Awesome: Font Awesome te ofrece iconos vectoriales escalables que se pueden personalizar con CSS.
  • Iconos grandes: iconos de trazo 7: este es un conjunto completo de 202 iconos de trazo fino inspirados en iOS 7.
  • Gráficos: Chartist.js: Chartist.js es el producto de una comunidad que se sintió decepcionada por las capacidades proporcionadas por otras bibliotecas de gráficos.
  • Notificaciones: Bootstrap Notify: este complemento lo ayuda a convertir las alertas de bootstrap estándar en notificaciones de tipo "gruñido".
  • Mapas: Google Maps: complemento para ver mapas.
  • Fotos: Unsplash: fotos de alta resolución gratuitas (haz lo que quieras).
“No existe algo por nada. Todo, incluido su éxito personal, tiene un precio que debe pagarse ”- Napoleon Hill

Dado que usamos mucho de la comunidad, sería justo devolver a la comunidad. Así que decidimos hace un par de semanas lanzarlo bajo licencia MIT. De esta manera, más desarrolladores pueden contribuir y usarlo sin restricciones legales, para proyectos personales y comerciales.

4. Lanzamiento, Levántate y Brilla

Hacer la investigación durante unos 50-60 días (afilando el hacha) nos dio la posibilidad de desarrollar el tablero en solo 15 días (cortando el árbol). ?

¿Qué haces después de lanzar un proyecto? Necesita ver cuál es la retroalimentación, si a las personas les gustaría usarlo y si el panel de control simple que creó les está resolviendo un problema. Si no quieren usarlo, entonces no tienes negocio. Lo presentamos en diferentes comunidades y le estaba yendo muy bien. Por ejemplo, obtuvo:

  • 170 votos a favor en Hacker News, alcanzan la posición 9 y más de 88.000 visitas esa semana
  • 247 votos a favor en / r / webdev subreddit
  • 80 votos a favor en el subreddit de / r / web_design (bloqueado en 80 porque tiene la etiqueta "spam", tuvimos algunas ventanas emergentes de suscripción ... que luego eliminamos?)

La comunidad validó la idea. También tenemos muchos comentarios, para agregar los archivos SASS para una personalización más fácil o publicarlos en GitHub.

Luego, hemos visto que había muchos principiantes que solo querían aprender a usar este panel. Era tan hermoso que las personas que no interactuaban con algo así querían aprender a trabajar con él.

Pasamos alrededor de 3 semanas desarrollando una serie de videos tutoriales sobre cómo replicar el panel de WordPress usando nuestro producto. Elegimos utilizar el panel de WordPress porque es un panel muy popular. Y queríamos que la gente entendiera que pueden construir cualquier cosa con nuestro producto.

Los tutoriales fueron muy bien recibidos y cuentan con más de 78.000 visitas a la fecha. Aquí está el primer video sobre cómo crear una plantilla de administración receptiva usando Light Bootstrap Dashboard 1/3.

5. Cómo financiamos el soporte y las solicitudes de los desarrolladores web

Construir un producto fácilmente, mantenerlo vivo es difícil.

Hay muchos complementos / plantillas geniales que están muriendo porque sus creadores no tienen suficiente efectivo o no obtienen suficientes ingresos para continuar con el desarrollo o solucionar los problemas.

No queríamos el mismo estuche para nuestro producto. La mejor opción para mantener vivo el producto fue crear una versión PRO que pueda generar suficientes ingresos para respaldar el desarrollo continuo.

Usamos los comentarios de los desarrolladores web y decidimos crear una versión Premium con más elementos y complementos. Queríamos ayudar también a algunos de los chicos que querían características específicas y estaban en la categoría del 5%. Elegir los complementos correctos que pueden ayudar tanto como podamos de la categoría del 5% fue muy difícil para nosotros.

Comenzamos nuevamente a investigar sobre el tablero premium. Y agregamos complementos como Calendario completo, DataTables.net, Sweet Alert, Bootstrap Wizard y algunas páginas adicionales como Página de inicio de sesión, Página de registro, Página de bloqueo.

Aquí está la vista previa en vivo de la versión PRO. Verás que mantuvimos la misma estructura y queríamos hacerla ligera, sin demasiadas opciones y funcionalidades.

Tener los ingresos de la versión PRO nos hizo no solo admitir el producto, sino también crear nuevos tipos de archivos como la versión PSD / Sketch o la versión Angular 2. Ambos se comparten de forma gratuita.

6. Planes de desarrollo futuros

A continuación, se muestran algunas estadísticas sobre el panel:

Es muy fácil personalizarlo para que coincida con su marca. Se utilizó en herramientas internas como el Catálogo del Departamento de Medicina de Emergencia de Stanford:

Tenemos muchas solicitudes de desarrolladores web que desean que el Tablero se construya en diferentes marcos como Angular 2, Angular CLI, React, Meteor, VueJS o como Rails Gem. Crear todas estas versiones y admitirlas de forma gratuita bajo licencia MIT funcionará solo si tenemos versiones PRO para cada una. Comenzamos con Angular 2 y hemos visto a mucha gente que lo usa y tenemos muchos comentarios sobre cómo mejorarlo. Por lo tanto, si desea participar en los otros marcos o si tiene alguna idea sobre cómo mejorar estos productos, estaremos encantados de hablar más.

Se necesitó mucho coraje para mostrar nuestras fuentes y el proceso que teníamos detrás de la creación de Light Bootstrap Dashboard. Espero que aprenda algo de esto y si tiene algún comentario o sugerencia, estaría encantado de hablar con usted en los comentarios.

Enlaces útiles:

  • Descargue la versión HTML de www.creative-tim.com
  • Descargue la versión Angular de www.creative-tim.com
  • Descargue la versión PSD / Sketch de www.pixelsvibe.com
  • Juega con él en la vista previa en vivo
  • Contribuir e informar problemas en el repositorio de GitHub
  • Consulte nuestro blog: //blog.creative-tim.com/

Encuéntrame en:

  • Correo electrónico: [email protected]
  • Facebook: //www.facebook.com/axelut
  • Gorjeo: //twitter.com/axelut