Por qué las startups necesitan una guía de estilo

Incluso para un diseñador experimentado, es difícil crear una nueva guía de estilo para un producto determinado: hay muchas direcciones de diseño posibles y el proceso puede volverse abrumador rápidamente. La vida de las empresas emergentes es agitada, rápida y llena de clichés como "lo perfecto es enemigo de lo hecho", "muévete rápido y rompe las cosas" o "lánzalo ahora, arréglalo más tarde".

Elaborar una guía de estilo con tales eslóganes y prioridades fluctuantes es un desafío, pero es imprescindible si se quiere que el diseño de un producto tenga éxito a largo plazo.

En los últimos años, hemos escuchado mucho sobre sistemas de diseño, guías de estilo, bibliotecas de patrones y diseño atómico. Si bien estas herramientas son muy útiles, usarlas puede parecer excesivo cuando solo desea crear unas pocas pantallas para un MVP o para una demostración de una aplicación. Sin embargo, tener una guía de estilo no solo mejorará su proceso de diseño en general, sino que hará que su aplicación sea más sólida y consistente.

Primero hablemos de los principales beneficios de una guía de estilo y luego toquemos el desafiante entorno de inicio. Finalmente, discutiremos cómo una guía de estilo siempre evoluciona como un documento vivo.

Las cinco razones principales por las que una guía de estilo es una buena idea

1. Una guía de estilo hace que los diseños sean concretos y la marca clara

Como diseñador solitario en una startup, que suele ser el caso, no hay muchas oportunidades para revisar y cuestionar las decisiones de diseño tomadas por otros miembros del equipo. Aunque todos pueden estar trabajando en colaboración, los diseños no necesariamente se comparten con otros. Esto significa que solo hay una persona que valida los diseños finales.

Una guía de estilo proporcionará a una startup orientación y documentación de referencia. Cuestionará algunas de las elecciones de diseño realizadas por el diseñador o el equipo porque deberán validarse en el contexto global de la aplicación. Diseñar un componente de interfaz de usuario porque funciona bien en una pantalla no es suficiente. Un diseño bien pensado debe resolver un problema de diseño único en una situación, así como un problema generalizado que se encuentra en otras pantallas de su aplicación.

Una guía de estilo pone a disposición de todos en su empresa el estilo de diseño general, las pautas de la marca, las especificaciones y las reglas. Está a solo un clic de distancia. Pueden ir a una URL para acceder fácilmente a una guía de estilo en línea o descargar un PDF. El diseño se convierte en trabajo de todos, ya no es responsabilidad exclusiva del equipo de diseño. Es un enfoque prudente que mejorará la interfaz de usuario de su producto.

2. Una guía de estilo hace que su diseño sea más consistente

Proporciona una especie de diccionario para su lenguaje de diseño de interfaz de usuario. Puedes usar la misma terminología cuando quieras comunicar algo que ya has expresado. Imagínese si tuviéramos palabras ligeramente diferentes para expresar lo mismo:

1. "Está lloviendo; Necesito mi paraguas.
2. “Está lloviendo, necesito mi paraguas”
3. “Está lloviendo, necesito mi paraguas”

Puede hacer que un lenguaje sea poético, pero difícil de entender. Básicamente, es la misma idea con la interfaz de usuario de un sitio o una aplicación. Para facilitar el uso, solo debe inventar una nueva "palabra" cuando realmente esté creando algo nuevo. De esta manera, está sujeto a una regla estricta que dice: "Solo los componentes que resuelven un problema de diseño repetidamente en todo el producto se permiten en el producto y, posteriormente, en la guía de estilo".

La consistencia hace que su producto sea más fácil de usar; un producto altamente utilizable puede traducirse en más participación y ventas.

3. Reutilizar los mismos componentes del sistema hace que su aplicación sea más fácil de usar

Como en el ejemplo del lenguaje, la consistencia es clave. Una vez que el usuario entienda cada componente, cuando se use nuevamente en un contexto diferente, la gente ya estará familiarizada con su comportamiento. Cuando se trata de las interacciones del usuario, esta coherencia mejora la usabilidad general del producto.

Trabajar con un sistema de diseño basado en componentes ahorra dinero y también facilita la actualización de un producto. Si hay un problema de usabilidad con un componente en una situación determinada, se puede solucionar una vez y todos los demás problemas potenciales con ese componente también se actualizarán.

4. Una guía de estilo hace que su aplicación sea más rápida de desarrollar a largo plazo

Cuando su equipo está desarrollando un componente común para una pantalla, están desarrollando una solución que también usarán en otros lugares. Esto ahorra tiempo de desarrollo, mucho tiempo. Cuando su empresa escala, esto podría significar ahorrar hasta 10 veces las horas de trabajo necesarias para construir una nueva pantalla.

5. Una guía de estilo facilita la eficiencia en la producción y la innovación

La creación de una guía de estilo hace que los diseños sean más accesibles y fácilmente disponibles para el resto de la empresa. Los desarrolladores y diseñadores pueden crear prototipos de una idea de forma más rápida y sencilla. Bootstrap a menudo es elogiado por facilitar a los desarrolladores la creación de un prototipo funcional: su guía de estilo tiene el mismo propósito. Proporciona una base de referencia para una nueva interfaz de usuario que construirán los desarrolladores, sin que el equipo de diseño tenga que crear la pantalla primero (aunque el equipo de diseño debe realizar el control de calidad de las pantallas finales).

Los desafíos de una startup, una guía de estilo en flujo

La creación de un sistema de diseño en un entorno de inicio no es tan lineal como podría ser en una empresa más madura donde están acostumbrados a un proceso más optimizado. En una empresa más tradicional, el equipo de diseño realiza investigación, ideación y experimentación de UX, y luego elabora la guía de estilo de marca final. Este proceso no se adapta a todas las empresas. Las startups trabajan en un entorno en el que su visión y los requisitos del producto están siempre en constante cambio. Trabajan con MVP (productos mínimos viables), versiones incompletas de sus aplicaciones que se utilizan para probar su idea y mostrar su potencial a los usuarios.

Cuando se trata de crear una guía de estilo, esto puede convertirse en un problema.

En un entorno que siempre está evolucionando, un diseñador suele tener dificultades para crear una guía de estilo que se supone que debe ser algo 'fija'. Es posible que un diseñador no tenga tiempo para pensar detenidamente en todos los componentes que se están creando, aunque aún podrían terminar en la próxima versión de la aplicación. Facebook cambió su menú de hamburguesas por una barra de navegación cuando maduraron un poco. ¿Crees que quien puso el menú de hamburguesas allí en primer lugar también lo agregó a la guía de estilo de Facebook?

Incluso podría considerar que aún no es el momento de crear una guía de estilo. Es posible que te des cuenta de que a largo plazo vas a necesitar uno, pero en este momento es más importante generar pantallas para las pruebas de usabilidad de la aplicación. Además, también necesitará algunas páginas de marketing para promocionar su aplicación. De repente, su diseño necesita mejorar, y mientras crea pantallas, comienza a ver el valor de tener una guía de estilo que pueda mantener la coherencia entre sus diseños y la marca de la empresa.

El problema es que no sabes exactamente cuándo es el momento adecuado para cambiar flexibilidad por estabilidad. Tienes que decidir cuándo debes comenzar la guía de estilo y cuándo solo debes concentrarte en crear pantallas. Un enfoque óptimo puede ser producir una guía de estilo al mismo tiempo que entrega las pantallas; de esta manera, puede tener lo mejor de ambos mundos.

Comience con algo de inspiración de interfaz de usuario

Una buena manera de comenzar, especialmente si no es diseñador, es recopilar ejemplos de estilos de diseño que le gusten o, lo que es más importante, a lo que cree que responderán los usuarios. Reúna tantos ejemplos como sea posible y colóquelos en una carpeta/tablero InVision/tablero Niice/etc. Se pueden usar como referencia e inspiración junto con su sensibilidad de diseño. Puede construir sobre ellos más tarde para crear una biblioteca de patrones.

Por ejemplo, cuando estaba trabajando en una guía de estilo para una empresa que promocionaba artistas en la industria del entretenimiento, nos preguntamos si los fondos claros u oscuros tendrían un mayor impacto en nuestros usuarios. Miré cientos de sitios web diferentes en juegos/películas/producción visual para ver cómo usaban fondos oscuros y claros.

Hice una hoja de referencia donde resalté los patrones más comunes. Un patrón que identifiqué fue que las empresas de esa industria tendían a usar fondos más oscuros cuando presentaban sus productos, pero usaban fondos blancos en sus esfuerzos de marketing, comercio electrónico y tiendas.

No es necesario profundizar tanto, pero descubrí que tener referencias visuales ayuda, no solo para crear una guía de estilo, sino también para recordar algunos de los casos de uso para los que podría necesitar diseñar. Una vez que te sientas bien con las referencias que recopilaste, puedes comenzar a trabajar en el diseño visual.

Diseñe componentes de interfaz de usuario sólidos

Mientras se trabaja en nuevas empresas, es más difícil crear componentes que crear páginas, al menos al principio. Cuando diseña una página, a menudo tiene una idea de cómo se va a utilizar. Ese no es necesariamente el caso cuando diseña un componente. Está tratando de diseñar para un caso de uso específico, pero quiere que sea parte de un sistema de diseño universal y necesita abordarlo de esa manera. Por ejemplo, es posible que desee crear un componente de navegación secundaria con tres botones. Es posible que también necesite que funcione con cuatro, cinco o diez botones, y deberá funcionar en dispositivos móviles, tabletas y computadoras de escritorio. Necesitas pensar en el futuro.

Desea un cierto nivel de persistencia o poder de permanencia en un componente. Los componentes comunes no deben cambiarse con frecuencia y deben ser reutilizables en muchos lugares del producto. Por ejemplo, si solo está interesado en una aplicación de iOS, desea probar su componente según la cantidad de opciones o la longitud del contenido, no necesariamente el tamaño de la pantalla. La idea es que si es viable en la interfaz de usuario en muchos lugares de su aplicación, entonces sabrá que es un componente que tiene el potencial de ser parte de su guía de estilo.

Una startup necesita comenzar prácticamente desde la nada y luego moverse rápidamente. Es posible que su jefe quiera una pantalla diseñada para el final del día. Eso significa que realmente no puedes desarrollar una guía de estilo completa y luego crear la pantalla. Peor aún, podría estar diseñando una guía de estilo con componentes que nunca verán la luz del día porque la visión de la empresa ha cambiado. Como dicen, es mejor enviar ahora.

Crear una gran guía de estilo lleva tiempo y, dado que se convertirá en la base de su sistema de diseño, querrá hacerlo bien. En un entorno de inicio, debe trabajar en su guía de estilo con todo en conjunto.

La guía de estilo como documento vivo

Debe pensar en su guía de estilo como un trabajo en progreso. Al igual que una startup que descubre su estrategia, descubrirá su guía de estilo a medida que avanza. Lo editará y ajustará con el tiempo hasta que se convierta en la base de su interfaz de usuario. Un enfoque útil es comenzar la primera maqueta al mismo tiempo que comienza su guía de estilo. Abra dos archivos con su software favorito (en mi caso, Sketch); uno llamado page name y el otro styleguide . Mientras trabaja en el diseño de su pantalla, puede comenzar a sembrar su guía de estilo con los elementos que conforman su diseño.

A medida que comience a hacer más de estos, notará desde el principio que algunos componentes son los principales candidatos para su inclusión en la guía de estilo. Por ejemplo, si se ha decidido por un estilo de ícono, todos sus íconos pueden ir a la guía de estilo desde el principio.

Normalmente creo una sección llamada 'iconos hechos hasta ahora'. Si en algún momento alguien necesita un ícono, primero debe revisar esta sección antes de crear uno nuevo.

Otros elementos obvios a tener en cuenta son los colores, los botones, los selectores, los títulos, los encabezados, el cuerpo del texto, etc. Si está utilizando un estilo especialmente para marketing, puede considerar incluirlo en su guía de estilo y etiquetarlo adecuadamente. Está bien si no está completamente decidido por un artículo en particular. Puede refinar los elementos de la interfaz de usuario en su sistema de diseño más adelante cuando surja la oportunidad y actualizar la guía de manera adecuada. No olvides que la guía de estilo es un documento vivo , especialmente en una startup.

Eventualmente, cuando empiezo a poner diseños en la guía, sé que estoy llegando a un punto en el que todos los componentes deberían estar cerca de su estado final. Esta parte marca el punto de inflexión en el proceso de creación de la guía de estilo: ¡ahora puedes celebrarlo! Una buena manera de celebrar este hito es crear un logotipo o ícono (considere nombrarlo) para la versión 1.0 de la guía de estilo.

Algunas personas llegan a imprimir el logo/icono como una pegatina para que el equipo tenga una especie de trofeo. Ese es también el punto en el que generalmente vuelvo a la forma más tradicional de trabajar con la guía abriendo primero esa guía de estilo y luego creando un nuevo archivo para cualquier interfaz que se necesite hacer.

Conclusión

Como diseñador, al crear una guía de estilo tan pronto como sea posible, se asegura de que su inicio se adhiera a un estándar de calidad más alto. Puede ser un desafío, pero vale la pena el esfuerzo. Una guía de estilo sólida y completa no solo lo ayudará a tener un mejor producto, sino que también lo ayudará a reducir el costo de desarrollo.

Hay una manera de lograrlo, incluso en un entorno acelerado donde se toman decisiones rápidas y, a veces, los diseños deben cambiar rápidamente. Con suerte, el proceso descrito anteriormente ayudará a los diseñadores de cualquier startup a hacer frente a los desafíos de la complejidad y la velocidad, al mismo tiempo que crea una sólida guía de estilo para el beneficio del producto.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas