Cómo estamos usando el diseño basado en componentes

Heavyweight es un estudio de diseño digital en Amsterdam, para startups, empresas y agencias orientadas a objetivos. Escribimos sobre nuestras experiencias en el diseño de aplicaciones, sitios web, plataformas y sistemas.

El diseño basado en componentes a menudo se habla en el contexto de proyectos grandes y complejos. En este artículo exponemos que también puede ser muy beneficioso para proyectos y equipos más pequeños. En Heavyweight utilizamos el diseño basado en componentes para cada proyecto, grande o pequeño.

En primer lugar, nos inclinamos ante Brad Frost, quien literalmente escribió el libro sobre diseño atómico. Nos presentó la idea de que en realidad no estamos diseñando páginas web o pantallas de aplicaciones, sino que de hecho estamos diseñando sistemas de diseño.

Sin embargo, descubrimos que la naturaleza metafórica del diseño atómico causó cierta confusión entre nuestros clientes. Especialmente las convenciones de nombres abstractos pueden ser un poco desalentadoras. Por lo tanto, definimos nuestra propia opinión; Diseño basado en componentes, tomando prestado en gran medida de otros grandes diseñadores, por supuesto.

Vamos a sumergirnos: ¿Qué es?

En esencia, el diseño basado en componentes es la práctica de dividir la interfaz de usuario en partes más pequeñas y manejables con nombres claros. Cada una de estas partes cae en uno de seis grupos distintos.

1. Identidad

El primero de estos seis grupos es la identidad. Aquí definimos los elementos centrales de la marca del proyecto. Los tipos de letra, la tipografía, los colores primarios y secundarios se especifican meticulosamente. Posteriormente, estos se utilizan en todo el proyecto.

2. Elementos

El segundo grupo define las partes reutilizables más pequeñas del proyecto: elementos. Algunos ejemplos bien conocidos de elementos son: botones, enlaces, entradas, menús desplegables, etc. Cada uno de ellos está definido, junto con todos sus estados; como los botones de desplazamiento, foco y deshabilitado. Nuestro mantra es: definir una vez, reutilizar a lo largo del proyecto.

3. Componentes

Avanzando en escala, el tercer grupo es Componentes. Cuando se trabaja en el diseño de aplicaciones y diseños web, la mayoría de los bloques en la pantalla son Componentes. Un componente puede ser cualquier cosa que use al menos algunos elementos. Cosas como tarjetas, héroes y menús de navegación son ejemplos tradicionales de componentes. Sin embargo, no necesariamente tienen que parecer modulares.

Al diseñar componentes, también creamos versiones de él para cada uno de los tamaños de respuesta (o puntos de interrupción) del proyecto directamente. De esta manera, nunca tendremos que retroceder a las pantallas que diseñamos hace semanas, y luego adaptarlas a un teléfono inteligente. Los objetivos receptivos se acuerdan de antemano con el cliente y cada componente se diseña en consecuencia.

4. Composiciones

Subiendo de escala una vez más, el cuarto grupo es Composiciones. Una composición es una parte que tiene múltiples componentes dentro. Definen cómo deben comportarse los Componentes dentro de él.

A continuación se muestra un ejemplo de un diseño de columna simple. Esta es una composición muy simple. Solo define algo de espacio en blanco alrededor de la Composición, un título y cómo se deben recorrer los Componentes en su interior. ¡Miseria!

5. Diseño

El quinto grupo, Layout, es una colección más abstracta de principios de diseño. Aquí se definen las cantidades de espacio en blanco, cuadrículas y envoltorios. Al definirlos de esta manera, es fácil para otros diseñadores participar en un proyecto y usar los estilos y pautas existentes.

6. Páginas

El último grupo son las páginas (o pantallas) reales del proyecto. Cada página consta de una disposición de composiciones y componentes.

Todas las excepciones raras se definen a nivel de página. Digamos que la página de contacto debe tener un fondo azul, porque nuestros amigos en el departamento de marketing lo dicen ... Agregamos eso solo a nivel de página.

Ejemplo

Veamos un ejemplo muy simple de diseño basado en componentes.

Digamos que estamos vendiendo boletos para algún evento. Hay tres entradas diferentes disponibles. Cada uno de los tickets se representa de la misma manera, con un número limitado de elementos en su interior, en este caso un botón y algo de texto. Esto significa que un ticket debe representarse como un Componente: el Componente del ticket.

Ahora, supongamos que queremos presentar los tres tickets en nuestra página de inicio en un diseño simple de tres columnas. Aquí es donde decidimos diseñar una Composición: la Composición de Entradas. Esta composición especifica que cada uno de los componentes del ticket debe tener algo de espacio entre ellos y un título sobre ellos.

Dos días después del lanzamiento del proyecto, el cliente quiere agregar algo de texto a las entradas, diciendo que están agotadas. Esto significa que solo tenemos que actualizar el Componente Ticket y enviarlo a los desarrolladores. ¡Rápido como un grillo!

Leer más: Cómo estamos diseñando sistemas complejos usando Diseño basado en componentes.

Bosquejo

No es ningún secreto que Sketch se ha convertido rápidamente en la aplicación de referencia para el diseño de UI y UX. Aprovechar los estilos de texto, los símbolos y las mesas de trabajo de Sketch nos permitió afinar inmensamente nuestro flujo de trabajo de diseño basado en componentes. Desarrollamos una maravillosa plantilla Sketch que tiene todos estos principios incorporados, para que podamos comenzar rápidamente un proyecto rápidamente.

Dedicar un poco más de tiempo a definir todos los estilos de texto ahorra mucho tiempo en general.

Terminando

En resumen, el diseño basado en componentes nos permite diseñar rápidamente muchas pantallas que son fáciles de mantener y actualizar con nuevas características. Varios diseñadores pueden trabajar en el mismo proyecto al unísono porque todo está claramente definido.

Si disfrutaste esto, por favor considera compartir este artículo, ¡realmente ayuda!

Siga nuestros diseños basados ​​en componentes en Dribbble.
Inspiración y detrás de escena en Instagram y Twitter.

¿Crees que este enfoque de diseño es adecuado para tu próxima aplicación, sitio web o sistema complejo? Hablemos de eso mientras tomamos un café en Amsterdam.