5 pasos para crear un sistema de diseño

Información sobre cómo creamos nuestro sistema de diseño en Sketch

Conestoga College Doon Campus Design Foundations Studio

Los sistemas de diseño se han convertido en un activo básico en cualquier equipo de diseño y desarrollo. Iniciados por compañías tecnológicas como Google (Material), AirBnB, Uber y Facebook, tienen un propósito importante: proporcionar un único lugar de referencia para el diseño digital, que incluye pautas, componentes y fragmentos de código. No son solo para empresas y aplicaciones tecnológicas, sino que sirven a cualquier organización con presencia digital. En esta publicación, le mostraremos paso a paso cómo creamos nuestro sistema de diseño y las elecciones que tomamos en el camino. Nos referiremos a nuestro circuito de productos como el ejemplo en la construcción de nuestro sistema de diseño, y hemos elegido Sketch como la herramienta de diseño para construir y catalogar componentes.

Menú universal del circuito

Sobre Circuit y nuestros problemas de diseño, desafíos y objetivos

Circuit es una plataforma de contenido inmersiva utilizada para crear recorridos virtuales y experiencias de contenido increíbles. Desde el lanzamiento, nos hemos centrado en mejorar la experiencia del usuario al refinar y agregar nuevas funciones. El producto ha recorrido un largo camino en poco tiempo, pero todavía hay mucho por lograr en nuestra hoja de ruta. A medida que el diseño del producto se convirtió en una función central junto con el desarrollo, nos encontramos con los mismos obstáculos una y otra vez:

  1. Fue difícil diseñar y prototipar rápidamente nuevas características, en una variedad de tamaños de pantalla, e incorporar colores, logotipos e imágenes de la marca del cliente sobre la marcha.
  2. A medida que nuestro equipo creció, hubo más casos de diseños que no estaban sincronizados y que los diseñadores trabajaban con paletas obsoletas o comenzaban desde cero.

En un esfuerzo por racionalizar nuestro proceso de diseño, decidimos adoptar un sistema de diseño.

¿Qué es un sistema de diseño y cómo ayuda?

Un sistema de diseño (o biblioteca de diseño) es una colección de pautas, guías de estilo y componentes reutilizables que permiten la creación rápida de maquetas y admiten la creación más rápida de características. Puede responder preguntas específicas desde qué fuentes y colores se usan en los sitios web, hasta cómo se muestran los botones y paneles.

Después de implementar nuestro sistema de diseño, crear maquetas y experimentar con diseños es súper rápido. Podemos diseñar para una variedad de tamaños de pantalla, lo que nos ayuda a tomar mejores decisiones de interfaz de usuario. Podemos regresar fácilmente y cambiar el texto, el tamaño, las imágenes y el estilo sobre la marcha. Esto ha sido excelente para personalizar pantallas para mostrar a los clientes y obtener comentarios. También podemos agregar estructura a nuestro proceso de diseño web y ayudar a identificar y racionalizar nuestro sitio web, aplicación o producto actual para que todos estén en la misma página. Finalmente, es una fuente única de verdad para informar a diseñadores y desarrolladores. Sin escribir una extensa documentación, podemos transferir un solo archivo a un diseñador entrante y evitar confusiones sobre los detalles de estilo.

Tabla de pros y contras de un sistema de diseño (¡tabla realizada con nuestro sistema de diseño!)

No es una tarea fácil crear un sistema de diseño y requiere un trabajo constante para mantenerse alineado con su sitio web en vivo. Sin embargo, definitivamente vale la pena el esfuerzo.

Cómo crear y organizar un sistema de diseño.

Estos son los pasos que seguimos para crear nuestro sistema de diseño. Elegimos Sketch para crear nuestra biblioteca, y algunas de las recomendaciones serán específicas para su funcionalidad, pero los conceptos que cubrimos son universales. Otras herramientas que puede utilizar incluyen Figma, Adobe Xd y Adobe Illustrator.

El resultado final podría verse más o menos así.

Paso 1: audita tu sitio web o aplicación y haz una lista

Para comenzar, necesitas un diseño; Esto podría ser una maqueta, una página en vivo o una aplicación. En nuestro caso, teníamos una aplicación web en vivo y una colección de componentes y símbolos en Sketch. Muchos componentes en el archivo de diseño estaban desactualizados o nunca llegaron al entorno de producción en vivo.

Luego, haga una lista de todos los componentes que tiene y tome nota de los diversos estados en los que pueden estar (inactivo, al pasar el mouse, al hacer clic, deshabilitado, predeterminado, etc.). Nuestra lista constaba de fuentes, colores, tipografía, íconos y una larga lista de componentes como avatares, botones, tarjetas, pies de página, navegación, barras de progreso, etc.

Paso 2— Organiza las páginas

El método de diseño atómico (izquierda) y el método de página de patrón (derecha)

Independientemente del software elegido, es probable que use páginas para organizar el contenido de su biblioteca. hay dos maneras de hacer esto. La primera es la Metodología de diseño atómico de Brad Frost, donde los elementos se modelan de acuerdo con 5 agrupaciones jerárquicas: átomos, moléculas, organismos, plantillas, páginas. El segundo método, al que nos referimos como páginas de patrones, presenta componentes relacionados en sus propias páginas, como colores, tipos, iconos, avatares, botones, etc. En comparación, es una estructura plana sin mucha jerarquía que puede hacer que sea más sencillo diseñadores entrantes para localizar piezas específicas, pero carece del flujo estructurado de "bloques de construcción" de la metodología Atómica.

Cómo organizamos nuestro sistema de diseño

Estructuramos nuestro sistema siguiendo los principios atómicos, aunque lo simplificamos considerablemente. Terminamos con 5 páginas principales:

Una página de Pautas para la documentación escrita para explicar los estándares y objetivos para el sistema de diseño.

Una página de Sandbox que es nuestro "entorno de desarrollo" para el diseño. Usamos esto para experimentar con nuevas características y diseños. Una vez que una característica es aprobada, construida, probada y promovida a producción, actualizamos el diseño y lo promovemos a la biblioteca central.

Una página de Símbolos que contiene todos nuestros átomos, moléculas y organismos, desde simples botones e íconos hasta componentes compuestos, agrupados y organizados alfabéticamente. Hicimos esto para que los componentes se localicen rápidamente y podamos movernos rápidamente por la página a través de todas las mesas de trabajo. Puede que esto no funcione para bibliotecas de diseño más grandes, pero por ahora está bien para nuestras necesidades.

La página de símbolos terminada

Una guía de estilo que es una colección amalgamada de elementos de diseño como fuente, tipografía e íconos, componentes, plantillas y páginas. Hemos anidado los símbolos en agrupaciones en esta página, y es fácil exportar toda la guía de estilo como un documento PDF cuando necesitamos entregarlo a un diseñador o desarrollador.

Una de las páginas de la guía de estilo

Finalmente, un registro de cambios para realizar un seguimiento de los principales cambios, creadores y lanzamientos a medida que la biblioteca de diseño evoluciona con el tiempo.

En general, es su preferencia, y la forma en que organiza su sistema de diseño debe adaptarse a las necesidades de su producto y equipo.

Paso 3: crea estilos de capa y estilos de texto (omite este paso si no tienes Sketch)

Los estilos de capa y texto son excelentes porque le permiten anular las formas y el texto que asoció con los estilos más adelante.

Los estilos de capa nos permiten guardar las propiedades de un objeto, como relleno, bordes, sombras, alineación, etc. y nos permiten aplicarlas de manera consistente a otros objetos.

Estilos de capa del circuito

Agregar un estilo de capa: seleccione su objeto y en el panel de propiedades bajo apariencia, haga clic en "Estilo sin capa" y "Crear nuevo estilo de capa" para guardar las propiedades del objeto.

Nombramiento de estilos de capa: cómo nombra sus estilos determinará cómo aparecerán en el menú (arriba). Si encuentra que llegar a su estilo lleva demasiado tiempo o es difícil de encontrar, siempre puede cambiarlo en la ventana de estilos. Capa> Organizar estilos de capa. Así es como nombramos nuestros estilos de capa:

Circuito / Color / Primario / Azul / Medio

Los estilos de texto nos permiten guardar las propiedades del texto, incluido el tamaño de fuente, la fuente, la alineación, etc. y nos permite ingresar o cambiar rápidamente el texto utilizado en los símbolos más adelante. Aquí es probable que desee organizar sus estilos de acuerdo con las clasificaciones semánticas de texto en sus páginas web, es decir, el cuerpo H1, H2, H3, etc.

Estilos de texto del circuito

Agregar un estilo de texto: seleccione su texto y en el panel de propiedades bajo apariencia, haga clic en "Sin estilo de texto" y luego en "Crear nuevo estilo de texto".

Nombrar estilos de texto: similar a los estilos de capa de nomenclatura. Agrupamos nuestros estilos de acuerdo con H1, H2, H3, ... párrafos y cualquier componente que necesitara su propio estilo de texto.

También puede aplicar estilos de capa a los estilos de texto. Aquí es cómo:
Seleccione texto> Capa> Convertir en contornos, luego debería poder agregar sus estilos de capa al texto como cualquier forma normal. Sin embargo, si tiene mucho texto, hacerlo demasiado puede bloquear su Sketch o hacerlo increíblemente lento.

Paso 4 - Crear símbolos / componentes

Esta es la parte divertida. Preste especial atención al espaciado, el tamaño, las formas y, si corresponde, recuerde aplicar estilos de texto y capa a partes individuales de los componentes, esto permite anular las partes más adelante. El objetivo es terminar con una colección completa de símbolos y componentes.

Crear un símbolo: en Sketch, agrupe sus elementos y presione "Crear símbolo" en la barra de navegación superior. Comience con algo pequeño definiendo cosas como botones, avatares e íconos, luego pase a construir sus componentes compuestos.

Nombre el símbolo: Esto determinará cómo aparecerán en el menú de inserción. Para un botón, los nombramos como tales:

Botón / Predeterminado / Inactivo
Botón / Predeterminado / Desplazar
Botón / Predeterminado / Desactivado

Nombre y ordene las capas en su símbolo: Esto es muy importante porque así es como aparecerán en la anulación. Piensa para ti mismo si la orden tiene sentido y se llama y ordena como alguien más lo esperaría.

Anular panel de un componente de tarjeta

Por supuesto, no siempre puede ordenarlos de una manera que sea razonable encontrar en la anulación porque las capas aún determinan qué elemento está en la parte superior, pero es bueno tenerlo en cuenta al crear sus símbolos.

Símbolos anidados: símbolos dentro de símbolos. Al usar símbolos más pequeños para crear símbolos compuestos, puede hacer un cambio en un lugar y hacer que se refleje en todas las instancias en todos sus diseños. Por ejemplo, si cambia las propiedades de decir un botón, todos los botones de su maqueta también cambiarán.

¡Siempre escale un nuevo símbolo para probar!

Escale su símbolo: el diseño receptivo es una práctica común ahora. Cuando cree su símbolo por primera vez, es posible que los elementos no escalen de la forma esperada. Puede determinar cómo se escalan las cosas en la ventana de cambio de tamaño en el panel de propiedades. Al pasar el mouse sobre la vista previa, se mostrará cómo se escala.

Tenga en cuenta que es más fácil escalar que reducir, ya que a veces las cosas se ponen un poco torpes. Entonces, si no está seguro, ¡comience con poco!

Cree plantillas y páginas: una vez que tenga una colección de símbolos, puede comenzar a crear plantillas y páginas para crear maquetas rápidas de pantallas enteras. También es una buena idea comenzar a recopilar sus símbolos en una guía de estilo para organizarlos y presentarlos.

Maqueta de una pantalla móvil que muestra cómo se aplican las anulaciones

Paso 5: actualizaciones continuas del sistema de diseño

Nunca sabrá qué tan bien funciona su sistema hasta que lo use para crear algunas maquetas. Luego, es posible que deba regresar y ajustar sus símbolos porque no se escalan exactamente como deseaba, o descubrió que era demasiado tedioso aplicar algunos estilos de capa y preferiría tener menos clics para obtener un estilo .

¡Y eso está bien! Recuerde que un sistema de diseño es una biblioteca viva y deberá actualizarse continuamente.

Aquí hay algunos consejos adicionales de Sketch para ayudarlo a administrar su sistema:

  • Cree carpetas de datos para agregar su propia biblioteca de imágenes en anulaciones. Tenga en cuenta que si mueve la carpeta, deberá volver a vincularla. Boceto> Preferencias> Datos / Biblioteca.
  • Actualización de su biblioteca en otros documentos: notificaciones en la parte superior derecha → Actualizar biblioteca (primero debe guardar y cerrar la biblioteca)
  • Sketch API es una fuente oficial y actualizada para verificar los hechos, ya que los sitios web de terceros a veces tienen información desactualizada.
  • Las fuentes de SketchApp son un lugar útil para obtener activos gratuitos para bocetos

Los complementos facilitan mucho el uso y la organización de su sistema de diseño. Algunos que amamos en este momento:

  1. Sketch Runner: ¡usa tu teclado para insertar símbolos rápidamente!
  2. Organizador de símbolos: haga que su página de símbolos sea agradable y organizada como lo desee.
  3. Unsplash It: agrega fotos de Unsplash.

Esperamos que este artículo haya sido útil para mostrar cómo puede optimizar su flujo de trabajo con una biblioteca de diseño. ¡Feliz creación!