Un flujo de trabajo basado en componentes para croquis

La forma en que diseñamos está cambiando, y también nuestras herramientas.

Ofrezca a las personas una herramienta, y encontrarán diferentes formas de usarla. No hay dos diseñadores que trabajen de la misma manera, pero predigo que eso cambiará en los próximos años. El diseño digital moderno surgió de la piratería de editores de fotos para dibujar interfaces de usuario, perder la noción del trabajo dentro de los sistemas diseñados para no perder el trabajo y un ciclo interminable de recrear pantallas existentes cuando las cosas se pierden en la traducción ...

Durante la última década, los diseñadores comenzaron a reevaluar su enfoque y se inclinaron hacia un flujo de trabajo basado en componentes. Photoshop introdujo objetos inteligentes (pudiendo "colocar" otros archivos de Photoshop en una PSD). Esta nueva característica permitió a los diseñadores compartir una versión centralizada de un componente, sin preocuparse por tener duplicados de ese componente en sus archivos. Lamentablemente, esto realmente nunca se convirtió en un flujo de trabajo entre los equipos de diseño: fue más una excepción que una regla.

Cuando Sketch introdujo símbolos, el valor de los componentes se hizo más claro. A pesar de estar limitados a un solo archivo, los símbolos hacen que los componentes sean extremadamente fáciles: cree un componente y luego reutilícelo infinitamente en todo el archivo en mesas de trabajo y páginas. Inicialmente estáticos, los símbolos pronto se convirtieron en una característica más robusta con cambio de tamaño receptivo y la capacidad de sobrescribir valores. Estoy convencido de que los símbolos tendrán opciones de personalización más potentes en el futuro.

El verdadero avance se produjo cuando Sketch habilitó los símbolos de anidación dentro de otros símbolos. Incluso como diseñador único, existe un gran valor para definir, nombrar y estructurar símbolos correctamente. Casualmente, así es como los desarrolladores estructuran los componentes: comenzando en la parte inferior donde definen las cosas a un nivel micro, hasta pantallas completas en un nivel macro.

Una de las fortalezas de Abstract es proporcionar una forma para que los diseñadores versionen y administren su trabajo. Abstract realiza un seguimiento de los cambios realizados en cualquier componente dentro de un archivo de Sketch, lo que le permite a usted y a su equipo comparar diferentes versiones a nivel de componente. Esto significa que cuantos más símbolos haya en un archivo de Sketch, es menos probable que usted (o cualquiera de sus colegas) tenga algún conflicto. Con Resumen, editar un ícono que se usa en cada capa no debería causar ningún conflicto con otras personas que trabajan en el mismo archivo. Y si surge un conflicto, Abstract maneja esta situación con gracia.

Como ejemplo, así es como estructuro los archivos de Sketch que utilizamos para diseñar Abstract. Muchos de mis equipos de diseño favoritos usan flujos de trabajo similares, y parece escalar bien sin importar cuán grande / pequeño sea el equipo.

Primitivas

Colores

Cada proyecto comienza con la definición de una paleta de colores. Colores de marca, colores de texto, colores de UI, colores para diferentes tipos de acciones ... A partir de ese momento, generalmente no es una buena idea usar un color que no sea parte de la paleta, a menos que haya una muy, muy buena razón (que significa que probablemente debería ir a la paleta de todos modos).

Estilos de texto y estilos de capa

El segundo en la lista es la tipografía. Haga una lista de los tamaños de fuente necesarios en el proyecto. Cuanto más corta sea la lista, más fácil será mantenerla. Al igual que con los colores, generalmente no hay necesidad de desviarse de esta lista.

Agregar algunos modificadores a los estilos de texto lleva esta lista un paso más allá (color, peso de fuente, transformaciones de texto ...), pero esto también hace que la lista sea difícil de escanear agregando todas las diferentes permutaciones, o forzará la personalización constante de los elementos en el lista. (Esta es un área donde creo que Sketch puede mejorar y mejorará con el tiempo. Una simple sobrescritura de alineación no debería romper la conexión con el estilo de texto definido).

Componentes

Aquí es donde las cosas se ponen realmente emocionantes. Incrustar símbolos dentro de otros símbolos, crea niveles y niveles de componentes fáciles de mantener y mantener actualizados.

NIVEL 1: Fundación

Los símbolos de nivel 1 no incluyen ningún otro símbolo. Son el nivel más bajo en nuestra pila de componentes.

  • Iconografía: variantes oscuras, claras y teñidas de nuestro conjunto de iconos, con corte configurado de manera que los desarrolladores puedan abrir fácilmente el archivo Sketch y obtener los recursos que necesitan
  • Avatares: un conjunto de 8 avatares que usamos en toda la aplicación. Son fotos imperfectas de un conjunto diverso de personas.

NIVEL 2: bloques de nivel inferior

Los símbolos de nivel 2 combinan primitivas y símbolos de nivel 1.

  • Elementos de forma: botones, entradas, casillas de verificación, controles de radio ...
  • Celdas: personas, comentarios, confirmaciones, archivos, páginas, mesas de trabajo ...
  • Subnavegación: encabezados con acciones o iconos opcionales
  • Banners: combina texto, íconos y botones

NIVEL 3: bloques de nivel medio

Los símbolos de nivel 3 combinan símbolos del nivel 2 y el nivel 1. Estos son símbolos más avanzados, que generalmente terminan siendo utilizados en el diseño real.

  • Barras laterales: listas de celdas, pueden servir como navegación
  • Principales áreas de contenido: todo, desde una cuadrícula de proyectos hasta un detalle de confirmación, incluidas acciones, título, descripción, vistas previas y comentarios
  • Encabezados de aplicaciones: Wayfinders, que ayudan a las personas a saber dónde están dentro de la aplicación, una combinación de etiquetas de texto e íconos
  • Modalidades: acciones, confirmaciones de acción, flujos completos ...

Por lo general, agruparé los símbolos del Nivel 3 en una página para poder compararlos rápidamente para mantener la coherencia.

NIVEL 4: Composiciones

Con una colección tan amplia de componentes, las mesas de trabajo que contienen los diseños reales generalmente no contienen más que un puñado de símbolos. La primera página en mi archivo de Sketch contiene todas las pantallas clave de nuestra aplicación, mientras que otras páginas están dedicadas a los flujos, incluidos todos los casos extremos posibles.

Entonces, ¿cómo cambiará el diseño?

Los flujos de trabajo de diseño e ingeniería se están arrastrando lentamente el uno hacia el otro. En el extremo del diseño, las herramientas de dibujo como Sketch crean funcionalidades nuevas y más potentes con cada actualización que, cuando se combina con Abstract, crea un flujo de trabajo sólido, predecible y confiable. Por el lado de la ingeniería, hay nuevos desarrollos que construyen mejores componentes para una variedad de plataformas. Ambas partes están estandarizando procesos similares, y esto me emociona.

La estandarización, combinada con nuevas herramientas extensas y un vocabulario compartido, eleva el proceso de diseño al nivel en el que nuestras contrapartes de ingeniería han estado operando durante décadas. Agregue Resumen en la mezcla, y de repente todos en un equipo tienen acceso a una rica historia de por qué las cosas son como son, las decisiones que llevaron al estado actual del trabajo, y una forma de comenzar a contribuir instantáneamente de una manera significativa .

La construcción de productos de alta calidad es un esfuerzo de equipo, y todos nosotros en Abstract estamos entusiasmados de jugar un papel fundamental en la evolución de este proceso.

Abstract está actualmente en Private Alpha. Estamos trabajando hacia una Beta pública a fines del segundo trimestre. Los comentarios de nuestros evaluadores han sido increíblemente útiles, ya que hemos estado refinando los flujos y mejorando la experiencia general. Más que nunca, creemos que ahora es el momento para que los diseñadores tengan la infraestructura adecuada para resaltar el valor del diseño. Cada semana salen nuevos lotes de invitaciones. Gracias por su apoyo y ánimo. Esperamos hacer cosas increíbles juntos.

Si no se ha registrado en la lista de espera de Private Alpha, puede hacerlo aquí. Y si está interesado en ayudarnos a rediseñar el proceso de diseño, estamos buscando personas increíbles con una variedad de experiencias, perspectivas y habilidades. ¡Echa un vistazo a nuestras posiciones abiertas y postúlate ahora!