Uso de bibliotecas de bocetos y primitivas para construir un sistema aún mejor de botones

Identificar primitivas de diseño y un caso para construir componentes que limitan la cantidad de redundancia en su trabajo

Componentes que comparten el mismo radio de borde, almacenados en un archivo de biblioteca de bocetos

En un artículo anterior comparto un proceso que usa Sketch Libraries para construir los bloques de construcción básicos de un sistema de diseño. A menos que haya estado viviendo debajo de una roca, las bibliotecas probablemente estarán en su radar, si es que ya no son parte de su flujo de trabajo.

Al abstraer las propiedades recurrentes que componen nuestros diseños, podemos crear sistemas reutilizables de estilos y componentes, almacenándolos en bibliotecas. Esto reduce la deuda de diseño y mejora la velocidad, eficiencia y consistencia en nuestro trabajo.

Puede referirse a estas propiedades abstractas como "UI Primitives", un término familiarizado (creo) por Benjamin Wilkins de Airbnb y Dan Eden de Facebook.

Puede que este no sea el único caso de uso para las bibliotecas, pero así es como las he estado usando y ha sido un gran paso para mi proceso de diseño. Ahora déjame explicarte cómo llegué allí.

Pensamiento de diseño en primitivas

Piense en las primitivas como los elementos de nivel más granulares que componen el resto de su diseño. Si alguna vez trabajó con SASS, las primitivas son sus variables. Del mismo modo, aquellos familiarizados con el Sistema de diseño de iluminación entenderán las primitivas como fichas de diseño.

Ciertas arquitecturas CSS recomiendan que agrupemos estas variables primitivas en una capa de abstracción, por lo que a menudo creamos una carpeta de archivos parciales y la llamamos "resúmenes". Si escucha alguno de estos términos, sepa en la mayoría de los casos que son uno y lo mismo. Lo que estamos haciendo aquí es "abstraer" los estilos comunes de un diseño para hacerlos reutilizables, de una manera que nos impida repetirnos innecesariamente.

Ya sea que esté consciente de las primitivas que comprenden sus diseños o no, una auditoría de su trabajo probablemente revelará cualquier número de estas propiedades recurrentes. Notará patrones y similitudes compartidas entre varias partes de la interfaz de usuario, que usted, como diseñador, ha implementado conscientemente para crear armonía visual en su trabajo.

Tomarse el tiempo para identificar estos patrones puede tener un gran impacto en su proceso. Pensar en primitivas lo ayudará a abordar su trabajo de una manera más sistemática, ayudándole a resolver problemas comunes relacionados con la escalabilidad y la coherencia, ya que inevitablemente, se convierten en una parte integral de los sistemas de diseño que crea.

Poner en práctica primitivas para mejorar nuestro proceso de diseño en Sketch

Donde un desarrollador pueda extraer estas primitivas de IU, almacenándolas como variables para reducir la inconsistencia y mejorar la eficiencia en su proceso. Como diseñadores, podemos lograr exactamente los mismos resultados utilizando Sketch Libraries.

Un ejemplo del uso de variables para abstraer las propiedades reutilizables que se encuentran en la imagen en la parte superior.

Entonces, ¿cómo podemos tomar esta idea de las primitivas de IU (que son los ingredientes más básicos en los diseños) y utilizarlas para construir componentes más grandes e identificables en un sistema de diseño?

Bibliotecas primitivas para una sola fuente de verdad

División de su kit de interfaz de usuario en bibliotecas de croquis parciales

Estoy seguro de que ahora debe estar familiarizado con la idea de usar un kit de interfaz de usuario, donde todos los componentes reutilizables viven en un solo archivo de Sketch. Una "fuente única de verdad", como muchos se refieren a ella.

Sobre la base de esta idea, mi proceso actual consiste en dividir los componentes de la interfaz de usuario y los estilos primitivos que comprenden, que puede haber guardado en un solo archivo de boceto llamado "UI kit.sketch", en varios archivos de boceto independientes.

Al tomar estos archivos parciales y convertirlos en bibliotecas, las primitivas se pueden usar en cualquier otro archivo y, por lo tanto, en cualquier otro componente. Esencialmente, estamos creando muchos archivos parciales pequeños y livianos para usar en nuestros diseños o incluso en diferentes proyectos.

Vale la pena señalar; esta técnica no tiene que detenerse en un nivel de componente. ¿Por qué no dividir sus formas, colores, bordes, iconos, etc. en archivos de boceto separados? En otras palabras, si puede identificar un estilo primitivo que ocurre en múltiples lugares en sus diseños, entonces, dentro de lo razonable, hay una buena posibilidad de que merezca su propio archivo de Biblioteca.

Carpeta de la verdad que contiene archivos de biblioteca primitivos

¿Por qué molestarse con las bibliotecas primitivas?

Al hacer bibliotecas primitivas, podemos crear un conjunto central de propiedades altamente reutilizables, reduciendo enormemente la complejidad en nuestro trabajo. Al mantener varios archivos pequeños, nuestros proyectos serán más fáciles de mantener, reutilizar y evolucionar, ya que cada archivo contiene menos partes.

Entonces podemos usar estos símbolos primitivos para construir componentes más complejos, reduciendo aún más la complejidad en nuestros átomos, moléculas y organismos. Los símbolos primitivos nos ayudan a mantener los estilos únicos al mínimo, reduciendo nuestros archivos de componentes a una combinación de primitivos, componentes anidados (dependiendo de su nivel de complejidad) y un puñado de propiedades no reutilizables.

En otras palabras, las únicas propiedades nuevas que tendremos que hacer al construir componentes, son aquellas vinculadas específicamente al componente en sí, ya que estas propiedades no tienen por qué reutilizarse en otros lugares de nuestros diseños.

"Un lenguaje de diseño unificado no debería ser solo un conjunto estático de reglas y átomos individuales, sino un ecosistema en evolución" - Karri Saarinen.

Al administrar y hacer referencia a bibliotecas primitivas (nuestra "fuente única de verdad") en varios archivos, podemos actualizar, realizar cambios o agregar fácilmente a cualquiera de estos archivos en cualquier momento.

Podemos agregar nuevos componentes cuando sea necesario, sin conflictos. Luego tenemos la capacidad de sincronizar actualizaciones en todo nuestro proyecto. En efecto, podemos crear un ecosistema de diseño, que evolucionará y crecerá en el tiempo. Se podría decir que podemos crear un vocabulario de diseño vivo.

Pensar en primitivas y crear bibliotecas primitivas no solo le ayuda al diseñador, sino también a sus colaboradores, incluidos los desarrolladores. Si puede identificar todos los casos de reutilización en sus diseños, entonces el trabajo de abstraer variables, desde la perspectiva de los desarrolladores, se convierte en un proceso aparentemente simple.

Usando primitivas para construir componentes a nivel de átomo

La siguiente parte de este artículo analizará el uso de estas bibliotecas "primitivas" para construir estructuras más complejas. Lo guiaré a través del proceso actual que utilizo para crear un sistema flexible de botones, utilizando la menor cantidad de símbolos únicos posibles

Una parte fundamental de cualquier buen sistema de diseño, los botones son posiblemente el átomo más identificable (de acuerdo con los principios de diseño atómico) en cualquier interfaz de usuario. Y cuando se abstraen, consisten en un puñado de propiedades primitivas.

La anatomía de un botón.

Eche un vistazo a los botones en su diseño y probablemente notará un puñado de propiedades recurrentes. Puede identificar similitudes en cualquiera de los siguientes:

  • Forma de fondo
  • Color de fondo
  • Ancho del borde
  • Radio de frontera
  • Familia de texto
  • Color de texto
  • Tamano del texto
  • Relleno (izquierda, derecha, arriba, abajo)

Podemos suponer que algunas de estas primitivas aparecerán también en otras partes de nuestro diseño, tal vez por ejemplo, en elementos de forma.

Anatomía ilustrada del botón etiquetado con varias propiedades primitivas

Al dividir estas propiedades recurrentes en bibliotecas, podemos hacer referencia a estas bibliotecas para crear nuestros botones, así como todos los demás componentes de nuestro sistema que comparten estas mismas propiedades.

Mantener estas propiedades primitivas en las bibliotecas nos impedirá tener que crear un nuevo estilo cada vez que construyamos un nuevo componente.

Auditar estilos de botones actuales

Como mencioné anteriormente, un buen diseño comienza con una auditoría de lo que ha sido antes. Al realizar un inventario de interfaz para AIN, nuestro sistema actual reveló que estábamos usando 4 tipos de botones en una variedad de estilos de color y forma.

Para ser claros, cuando me refiero al "tipo" me refiero a botones con diferencias estructurales notables, por ejemplo, los botones con un icono son estructuralmente diferentes a los que no lo tienen. mientras que cuando digo "estilo" me refiero a colores, bordes o cualquier otra propiedad cosmética que afecte a cada tipo de botón.

4 estilos de botones en una variedad de colores y formas

Identificar tipos de botones

Según la auditoría, parecía lógico agrupar los 4 tipos en las siguientes categorías:

  • botón solo
  • botón con icono
  • solo icono de botón
  • grupo de botones (izquierdo, medio y derecho)

Cada tipo de botón aparece en nuestros diseños en 3 tamaños diferentes, que se basan en un ritmo asociado con la cuadrícula de 8 puntos y se refieren a su altura. Esos tamaños son 48px, 40px y 32px. En aras de la simplicidad, adopté el tamaño de la camiseta al nombrar cada talla; Pequeño, mediano y grande.

3 tamaños de botones basados ​​en la cuadrícula de 8 puntos

Identificando las primitivas

Además de esto, identifiqué un total de 6 propiedades primitivas que componen todos los botones. Las primitivas, como ahora sabemos, son aquellas propiedades que se pueden encontrar en otros lugares de nuestros diseños, y no solo en nuestros botones. Éstas eran:

  • color
  • frontera
  • icono
  • forma
  • texto
  • estado

Aunque visualmente diferente, me di cuenta de que los colores, los iconos y los estilos de los bordes podrían hacer referencia fácilmente a algunas de estas bibliotecas primitivas que creé anteriormente. Esto ayudaría a mantener las propiedades únicas al mínimo. También podría usar menos símbolos para hacer los diferentes estilos de botones, ya que la mayoría de las anulaciones de estilo podrían ser manejadas directamente por cada biblioteca independiente. Esto significaba que tendría que hacer menos símbolos para lograr los diferentes estilos.

Predije que solo necesitaría un símbolo base para cada tipo de botón, que luego podría usarse para cada instancia de estilo que se encuentre en ese tipo de botón.

Estas suposiciones eran en su mayoría verdaderas, sin embargo, las primitivas de "texto", "forma" y "estado" (que abordaremos a continuación) tomaron un poco más de reflexión, debido a su falta de reutilización y especificidad hacia los botones solamente.

Tratar con el texto del botón

Decidí evitar crear una nueva biblioteca primitiva para el texto utilizado en los botones, ya que es muy específico de los botones en sí. El texto tiene una altura de línea única según el tamaño del botón, por lo que las posibilidades de encontrar el estilo de texto exacto en otro lugar son mínimas. Esto significaba que crear una biblioteca sería excesivo.

En este caso, fue más fácil mantener la complejidad que se encuentra con el texto dentro del archivo de boceto de los botones, en lugar de hacer referencia al texto de una biblioteca externa, que nunca podría ser utilizada por otros componentes del sistema.

Con eso, identifiqué 4 colores diferentes de texto: Marca, oscuro, blanco y deshabilitado. El texto también se estaba utilizando en 3 tamaños diferentes, uno para cada tamaño de botón; grande, mediano y pequeño.

Creé mesas de trabajo separadas en un archivo de boceto llamado botones AIN (el prefijo "AIN–" que se refiere al proyecto del sistema de diseño) para cada una de estas propiedades de texto y las convertí todas en símbolos. Cuando construya el componente del botón final, podré anular el estilo de texto cuando sea necesario, anidando estos símbolos de texto.

Para que estas anulaciones funcionen, me aseguré de mantener coherente mi convención de nomenclatura Artboard y sigo un sistema de nomenclatura básico: nombre del componente, propiedades (que contiene todas las propiedades en una carpeta específica de propiedad), tipo de propiedad, tamaño y color de propiedad. Se parecía a esto:

botón / propiedades / texto / grande / marca

Nota al margen: para anular un símbolo con otro, también debe asegurarse de que sus mesas de trabajo tengan exactamente el mismo tamaño. Por lo tanto, asegúrese de que todos sus cuadros de texto tengan la misma altura y anchura si desea que aparezcan como anulaciones en la paleta del inspector.

Tratar con los estados de los botones

Los estados eran otro diseño primitivo exclusivo de mi botón. Es decir, ningún otro componente en mi sistema comparte el mismo diseño para los estados de desplazamiento, presionado e inhabilitado. Esto significaba que los estados también deberían compilarse directamente en el archivo de dibujo de botones. Como fue el caso con el texto, no necesité crear otra biblioteca primitiva innecesariamente.

Creación de símbolos de estado del botón dentro del archivo de boceto del componente del botón

En cambio, construí 3 símbolos nuevos para usar como anulaciones de estado y seguí una convención de nomenclatura similar a la anterior:

botón / propiedades / estado / deshabilitado

Cada símbolo consta de una sola capa rectangular con rellenos ligeramente diferentes. El estado flotante que hice usando una mesa de trabajo con un relleno rectangular de 20% de blanco. Para el estado presionado, hice lo mismo pero con un 10% de relleno negro. Disabled tenía un 80% de relleno de blanco y otro relleno de 100% de negro en la parte superior, esta vez con el modo de fusión configurado en "Tono". Esto asegura que cualquier botón de color parezca desaturado cuando la anulación de estado se establece en "deshabilitado".

Nota al margen: los tamaños de la mesa de trabajo no son importantes, ya que se pueden cambiar de tamaño más adelante, solo asegúrese de que todas las mesas de trabajo de su estado sean del mismo tamaño, esto permite que las anulaciones funcionen. Sin embargo, deberá asegurarse de que los tamaños difieran de sus tablas de símbolos de texto. Esto es para que no aparezcan en el menú desplegable Anulaciones de texto. Es un poco molesto trabajar con Overrides en Sketch y no es esencial, pero mantendrá sus opciones de Override agradables y limpias.

Tratar con la forma del botón

Manejar los estados directamente significaba que también tenía que hacer lo mismo con la forma del botón. Esto se debe a que no puede crear una máscara de elementos de diseño nativos (que son elementos que pertenecen al mismo archivo) utilizando una Biblioteca externa. Entonces, para revelar la forma del botón detrás del estado, me vi obligado a construir la forma primitiva directamente en el archivo de dibujo de botones.

Para hacer esto, creé 5 símbolos diferentes para alojar las diversas formas de mis botones. Como antes, estos símbolos se usarán como anulaciones, por lo que puedo cambiar fácilmente la forma de un botón.

Creación de símbolos únicos para cada una de las 5 formas de botones, para usar más adelante como anulaciones

Puse un nombre a las 5 formas utilizadas en el sistema: Relleno (radio de 4 píxeles en cada lado), Redondeado (radio de 100 píxeles en cada lado), Radio a la izquierda (radio de 4 píxeles a la izquierda), Radio a la derecha (radio de 4 píxeles a la derecha) y Radio ninguno (0 píxeles) radio en todos los lados). Esas últimas 3 formas se usarán para mis grupos de botones: izquierda, centro y derecha, en caso de que no esté claro.

A continuación, convertí cada forma en una Máscara ‘ctrl clic> Máscara’ e inserté un color de mi Biblioteca de colores. A medida que el color se asienta sobre una máscara, la siguiente forma recortará el color revelando la forma.

Enmascarar la forma y agregar un color de la Biblioteca de colores

Luego anidé el símbolo de "estado" que hice anteriormente sobre el color.

Finalmente inserté un borde de mi archivo de la Biblioteca de bordes. Repitiendo los pasos anteriores, me aseguré de que la convención de nombres siguiera su ejemplo:

botón / propiedades / forma / relleno

botón / propiedades / forma / redondeado

Anidar el símbolo de estado y el borde de una biblioteca de bordes

Nota al margen: asegúrese de que sus Tableros de formas sean idénticos en tamaño entre sí, pero de tamaño diferente tanto para sus Tableros de texto como para los de Estado. Esto evitará que todos se muestren en el mismo menú desplegable Anulación y mantendrá las cosas organizadas.

Crear el componente del botón maestro para cada tipo de botón

A partir de aquí, todo lo que queda por hacer es crear los Símbolos maestros utilizados para los distintos tipos de botones. Esto juntará todas nuestras diferentes partes primitivas creando un componente de botón principal, que podemos usar para crear los otros estilos de botones en nuestro sistema.

Nota: piense en el símbolo maestro como el que inserta en sus maquetas de diseños usando Sketch Runner.

Solo para recapitular eso significa que necesitamos hacer un Símbolo maestro para cada uno de los siguientes tipos de botones:

  • botón solo
  • botón con icono
  • solo icono de botón
  • grupo de botones a la izquierda
  • botón de grupo medio
  • botón de grupo a la derecha

Recordando para cada tipo de botón también necesitaremos maestros únicos para nuestros 3 tamaños.

Construyendo el símbolo maestro para botones de solo

Los botones de solo son bastante simples. 3 tamaños, pequeño, mediano y grande, cada uno con 2 símbolos anidados: forma y texto. Ten en cuenta que nuestras bibliotecas primitivas centrales estaban anidadas dentro del símbolo de la forma, por lo que es relativamente fácil desde este punto. Todo lo que tenemos que hacer es insertar nuestros símbolos de forma y texto en una nueva mesa de trabajo para cada tamaño.

Construyendo el símbolo maestro para botones de solo

Para cada mesa de trabajo, cambié el nombre de la forma y el texto de las capas, por lo que las etiquetas de anulación son fáciles de entender y no están vinculadas a ninguna forma o tipo de texto específico cuando las uso.

Finalmente convertí la mesa de trabajo en un símbolo.

Al filtrar el menú Insertar se muestran nuestros 3 nuevos símbolos de botón maestro:

botón> botón solo> pequeño

botón> botón solo> medio

botón> botón solo> grande

Creación del símbolo maestro para botones con un icono

Para los botones de iconos seguí exactamente el mismo proceso que con los botones de solo, la única adición fue la inclusión de un icono de mi primitiva Biblioteca de iconos. Cualquier ícono funcionará, ya que las anulaciones y el color del ícono ya se solucionan a través de la biblioteca de íconos.

Crear un símbolo maestro para botones con un icono

Recuerde: "Ctrl + clic> Crear símbolo" hace que nuestros botones de icono se puedan usar si aún no ha convertido la mesa de trabajo en un símbolo.

Creación de los botones de solo icono de símbolo maestro

Una vez más, los botones muy simples de ícono siguen las mismas reglas que antes, sin embargo, esta vez hemos eliminado el símbolo de texto anidado. Como puede ver en el GIF a continuación, ahora solo tengo 2 capas, un icono y un símbolo de forma.

Como antes, hice un símbolo único para cada uno de los tamaños que necesitaba. Uno para botones de iconos pequeños, medianos y grandes.

Crear los símbolos maestros para botones de estilo de solo icono

Construyendo el símbolo maestro para botones de grupo

La construcción de los botones de grupo requirió un total de 9 símbolos. Uno para Izquierda, medio y derecho en cada uno de los 3 tamaños diferentes; pequeño, mediano y grande. Excepto por su forma, que usaba una anulación ligeramente diferente, los botones de grupo son idénticos a nuestros botones de solo.

Al colocar mi símbolo de forma anidada, me aseguré de que la forma correspondiera a la propiedad de forma correcta. Como ejemplo, para el botón de símbolo base / grupo de botones / medio / medio necesitaba anidar el símbolo que creé llamado botón / propiedades / forma / medio y así sucesivamente.

Crear los 9 símbolos base para botones de grupo

Usando nuestros nuevos botones y estilos primarios

En este punto, ahora tenemos un sistema de botones altamente flexible, hecho con la menor cantidad de piezas posible.

Al usar Anulaciones, podemos cambiar el icono, el color del botón, la forma, el estilo del texto y el borde sin crear un botón completamente nuevo cada vez.

Insertar botones con Runner y usar anulaciones para cambiar los estilos de los botones

Al simular mis diferentes estilos de Botón en una nueva página dentro del archivo de botones AIN, ahora tengo una referencia visual de cada Botón en el sistema.

Varios estilos de botones creados con el sistema de botones

Para usar mi sistema de botones en otra parte de mis diseños, en otros archivos u otros proyectos, puedo convertir todo el archivo en una nueva Biblioteca de croquis. En este caso, eso significaba convertir los botones AIN en un archivo de biblioteca.

Crear una biblioteca para hacer que los botones sean reutilizables en varios proyectos y documentos

Al usar las Bibliotecas primitivas, puedo agregar fácilmente nuevos elementos a mi sistema, por ejemplo, un nuevo ícono en mi Biblioteca de íconos, e inmediatamente acceder a ellos para usarlos en el archivo de Botones. En efecto, nuestro sistema de diseño puede evolucionar con el tiempo y con muy poco esfuerzo adicional.

Una demostración de escalabilidad usando Bibliotecas; agregando iconos y usándolos en diferentes archivos en el sistema.

Terminando

Espero que este artículo haya ayudado a mostrar la importancia de pensar de manera primitiva. Hacerlo te ayudará a identificar relaciones en tus diseños y mejorar la consistencia en tu trabajo. Adoptar un enfoque primitivo y deconstruir sus diseños de esta manera también puede ayudarlo a ver sus diseños de manera holística.

En lugar de ver los componentes como patrones altamente específicos, complejos pero reutilizables, podemos descomponerlos e identificar la reutilización en sus propiedades primitivas.

Al combinar esta forma de pensar con el uso de Sketch Libraries, podemos extraer propiedades, como lo haría un desarrollador con variables, para crear archivos de diseño parciales con menos complejidad, que a su vez son más fáciles de actualizar y mantener. Entonces podemos utilizar estos archivos parciales primitivos para construir componentes más grandes, al tiempo que limitamos la deuda de diseño y tenemos en cuenta la escalabilidad.

En el caso de este artículo, analizamos los botones de construcción, sin embargo, puede aplicar este pensamiento y proceso a la construcción de cualquier componente, independientemente de la complejidad. Ya sea que esté diseñando elementos de formulario, alertas o avatares, como en la mayoría de los casos, todos estos elementos de la IU compartirán un cierto número de propiedades primitivas.

¿Qué sigue?

En este momento, debe tener una comprensión clara de cómo puede bibliotecas y primitivo para mejorar su flujo de trabajo y crear sistemas de diseño escalables.

En otro artículo analizaré el uso de Botones y otras Bibliotecas primitivas, para construir componentes más complejos, moléculas si lo desea, que, de manera similar, se pueden guardar en un archivo de Biblioteca independiente y representan el siguiente nivel de complejidad estructural en un diseño de UI sistema.

Puede descargar el proyecto de ejemplo como referencia, que incluye archivos primitivos para colores, iconos, bordes, formas y archivos de componentes para los botones. También he incluido mi archivo de formularios, para ilustrar cómo los diferentes componentes están formados por los mismos archivos de biblioteca primitivos. Espero que te ayude a ver cómo configuré las cosas. Ten en cuenta que necesitarás al menos el Sketch 47 para que todas estas cosas buenas funcionen. Y asegúrese de convertir cada archivo en una biblioteca.

Recursos

  • Las restricciones son una parte fundamental del diseño de Steven Bradley.
  • Metodología de diseño atómico de Brad Frost.
  • Construyendo un lenguaje visual en Airbnb.
  • Pensando en símbolos para el diseño universal por Benjamin Wilkins.
  • Dan Eden sobre Estructura del sistema de diseño.
  • Una mejor manera de hacer botones en Sketch por Jon Moore.

Si encontró útil este artículo, dele algunos aplausos para que otros que puedan beneficiarse de leerlo puedan encontrarlo más fácilmente. Gracias por tomarse el tiempo de leerlo, ¡sé que fue largo!

Soy Harry Cresswell Cofundé indtl.com y trabajo como diseñador de UX / UI y desarrollador front-end en Angel Investment Network. Diseño tipografía en mis noches libres y envío un boletín sobre diseño y tipografía.

Búscame en Twitter si quieres saludar.