/Por Qué Los Startups Necesitan Una Guía De Estilo

Por Qué Los Startups Necesitan Una Guía De Estilo

Compartir

Incluso para un diseñador con experiencia, crear una nueva guía de estilo para un producto es difícil—hay muchas direcciones de diseño posible, y el proceso puede rápidamente convertirse en algo abrumador. La vida del startup es bastante agitada, rápida, y llena de clichés como “la perfección es la enemiga de tener algo hecho”, “muévete rápido y rompe cosas”, o “lancemos ahora, arreglemoslo después”.

Crear una guía de estilo bajo dichos eslóganes y prioridades fluctuantes es desafiante, pero es necesario si queremos que el diseño de un producto tenga éxito a largo plazo.

Sistema de diseño de UX, guía de estilo, y librería de componentes de BBC

La Experiencia Global de Lenguaje (GEL)de la BBC explica el propósito de cada componente y cómo deberían ser utilizados.

En años recientes, hemos escuchado mucho sobre sistemas de diseño, guías de estilo, librerías de patrones, y diseño atómico. Y si bien estas herramientas son muy útiles, usarlas puede sentirse como un exceso cuando lo único que quieres es crear un par de pantallas para un MVP o demo de una app. Sin embargo, tener una guía de estilo no sólo mejorará tu proceso de diseño en general, sino que también hará de tu app algo más sólido y consistente.

Hablemos primero sobre los principales beneficios de las guías de estilo, y después enfoquémonos sobre los desafíos en un ambiente de startup. Finalmente, hablaremos sobre cómo una guía de estilo siempre evolucionan como un documento viviente.

Las 5 Principales Razones De Por Qué Una Guía De Estilo Es Una Buena Idea

1. Una Guía De Estilo Hace De los Diseños Algo Concreto Y Del Branding Algo Claro

Siendo un sólo diseñador en un startup—lo cual suele ser el caso—no hay muchas oportunidades para revisar y desafiar decisiones de diseño muchas veces tomadas por otras personas en el equipo. Aunque muchos podrían estar trabajando en colaboración, los diseños no necesariamente son compartidos con otros. Esto significa que hay sólo una persona validando diseños finales.

Una guía de estilo proveerá a un startup una guía y documentación para referencia. Desafiará algunas de las decisiones de diseño hechas por el diseñador o por el equipo porque tendrán que validarlas en el contexto global de la app. Diseñar un componente de UI porque funciona bien en una pantalla no alcanzará; un diseño bien pensado debería resolver un sólo problema de diseño en una situación, al igual que un problema generalizado que se pueda encontrar en otras pantallas de la app.

Componentes repetidos de un UI merecen estar en una guía de estilo

El diseño UI de esta app usa el título “contacto” de forma repetida, un candidato ideal para ser incluído como componente en una guía de estilo. (by Ivan Bjelajac on Dribbble)

Una guía de estilo hace que todo el estilo del diseño en general, guías de marca, especificaciones, y reglas disponibles para todos en tu compañía, y tan sólo a un click de distancia. Pueden ir a una URL para fácilmente acceder a ella o descargarla en PDF. El diseño se convierte en el trabajo de todos—no es sólamente la responsabilidad del equipo de diseño. Es una aproximamiento más prudente que mejorará el UI de tu producto.Guía de lenguaje de IBM en la web

IBM almacena sus guías de “lenguajes de diseño” online lo cual hace las cosas más fáciles para todos, incluso públicas, para que puedan ser vistas.

2. Una Guía De Estilo Hará De Tu Diseño Algo Más Consistente

Provee una suerte de diccionario para tu lenguaje de diseño de UI. Puedes usar la misma terminología cuando quieres comunicar algo que ya has expresado. Imagina si tuvieramos diferentes palabras para expresar la misma cosa:

  1. “Está lloviendo, necesito mi paragüas.”
  2. “Está lloviendo, necesito mi paragüüüass”
  3. “Está lloviendo, necesito mi paragüaaass”

Hará del lenguaje algo poético, pero es difícil de entender. Fundamentalmente, es la misma idea con el UI de un sitio o una app. Para que sea fácil de usar, deberías inventar sólo una nueva “palabra” cuando realmente estés creando algo nuevo. De esta forma, estarás atado a una estricta regla que dice, “Sólo componentes que resuelvan un problema repetido de diseño a través del producto serán permitidos en el producto y subsecuentemente en la guía de estilo.”

La consistencia hace de tu producto algo más amigable para el usuario; un producto altamente usable se traduce en ventas y más compromiso de marketing.

Pantallas del proceso de onboarding de una app

Pantallas de onboarding por lo general utilizan animaciones o efectos visuales que no están presentes en el resto de la app. Les da a los diseñadores una buena oportunidad para crear un nuevo layout.
(por Murat Gursoy on Dribbble).

3. Reusar El Mismo Sistema De Componentes Hace Que Tu App Sea Fácil De Usar

Como en el ejemplo del lenguaje, tener consistencia es clave. Cada vez que cada componente es entendido por el usuario, cuando se utilice de nuevo y en un contexto distinto, las personas ya estarán familiarizadas con el comportamiento anterior. En lo que respecta a interacciones de usuario, esta consistencia mejora en general la usabilidad del producto.El UI de Eventbritte reutiliza componentes comunes.

Eventbrite usa un layout de tres íconos en muchas de tus secciones. Cuando un usuario se cruza con estos componentes de nuevo, ya estarán familiarizados con su comportamiento en general.

Trabajando con un sistema de diseño basado en componentes ahorra tiempo y también hace de un producto algo fácil de actualizar. Si hay un problema de usabilidad con un componente en una cierta situación, se puede arreglar una vez que todos los otros posibles problemas con ese componente sean actualizados.

4. Una Guía De Estilo Hace De Tu App Algo Fácil De Desarrollar En El Largo Plazo

Cuando tu equipo está desarrollando un componente común para una pantalla, están desarrollando una solución que usarán también en otro lado. Esto ahorra tiempo de desarrollo—mucho, de hecho. Cuando tu compañía crece, esto significaría, quizás, ahorrar 10 veces horas de trabajo requeridas para crear una pantalla nueva.

Via: toptal.com