Cómo crear una guía de estilo de boceto, una biblioteca y un kit de interfaz de usuario

Cada proyecto de diseño puede beneficiarse de una guía de estilo bien pensada. Utilice este tutorial para crear un kit de interfaz de usuario y, al mismo tiempo, crear una biblioteca personalizada (y reutilizable) para la creación rápida de prototipos.

Ya sea un experto en Sketch o un principiante en Sketch, los diseñadores encontrarán que crear guías de estilo en Sketch puede ser un recurso valioso para su caja de herramientas de diseño que puede ahorrar mucho tiempo.

Una guía de estilo no solo ayuda a mantener la coherencia, sino que también permite actualizar elementos como colores e iconos en varios documentos con mucha menos molestia. Este tutorial recorre paso a paso el proceso de creación de una guía de estilo y un kit de interfaz de usuario y brindará a los diseñadores una mejor comprensión de los símbolos de Sketch, haciendo referencia a una biblioteca de Sketch para sus diseños y confianza en la organización de sus activos de diseño.

Creación de su guía de estilo de boceto

“Una guía de estilo es un 'documento vivo' integral que realiza un seguimiento de todos los elementos repetitivos de un proyecto, desde las reglas de marca hasta la cantidad de biselado para los botones de llamada a la acción”, según UXPin. Una guía de estilo puede incluir cualquier cosa, desde elementos visuales simples hasta vocabulario e imágenes aprobadas. Este tutorial cubre la organización, los colores, los íconos, las fuentes, los estilos de texto y los activos.

Paso uno: Organización

1. Cree una carpeta maestra para contener archivos de bocetos, complementos y otros activos necesarios, como fuentes e iconografía. (Los complementos se discutirán al final del tutorial).
2. Inicie un nuevo archivo de Sketch y asígnele el nombre "Biblioteca de nombre de cliente". Por ejemplo, si su cliente es Toptal, entonces su archivo debe llamarse "Biblioteca Toptal".

Paso dos: colores

Si ya se han seleccionado colores, el siguiente paso es convertir sus colores en símbolos.

1. Para hacer esto, haga cuadrados del mismo tamaño y cambie sus colores en consecuencia. Haga clic en "Crear símbolo" y guarde estos elementos usando el sistema de etiquetado color/ @color-name . Color/@pink , color/@background-gray o color/@FFFFF son ejemplos de etiquetas adecuadas. Las convenciones de nomenclatura son importantes para mantener organizada una guía de estilo, por lo que se debe establecer y respetar un formato para todo desde el principio.
2. Una vez completado, agréguelos a la página de la guía de estilo.
3. Guarde la muestra de color en la sección de documentos de su paleta de colores.

Atajos útiles: R - herramienta de rectángulo, T - herramienta de texto, alt - medir distancia.

Paso tres: iconos

Convertir íconos en símbolos dinámicos permite que su color se cambie fácilmente a cualquiera de los colores guardados en el paso dos anterior. Esto significa que después de colocar un ícono en un diseño, el color se puede cambiar a través de un menú desplegable simple, llamado 'anular', usando el 'Inspector' a la derecha del lienzo.

1. Guarde el ícono como un símbolo (si es posible, adhiérase a .svg para el tipo de recurso).
2. Vaya a la página de símbolos, busque el icono y enmascárelo con un color predeterminado de los colores guardados anteriormente. Para ello, superponga el símbolo de color sobre el icono y haga clic en "Máscara" en la barra de herramientas (o haga clic con el botón derecho y seleccione "Máscara" en el menú emergente).
3. Después de enmascarar el ícono, elimine el relleno desmarcando la casilla de verificación debajo de la sección "Rellenos" en el Inspector.
4. Organice los iconos en la página de la guía de estilo. En la misma sección, resulta útil especificar el color de los iconos activos e inactivos, además de cualquier otra especificación de color importante.

Paso cuatro: estilos de texto

Una vez que se han elegido las fuentes, es hora de especificar los estilos de texto: H1, H2, H3, H4, H5, cuerpo, enlaces, subtítulos, etiquetas, etc. Una buena referencia para la tipografía web es esta publicación de blog de Typecast.

1. Elija el tamaño, el peso, el carácter y el espacio entre líneas para tantos estilos como sea necesario.
2. Escriba una palabra ("Escriba algo" aparece automáticamente cuando presiona T, la herramienta de texto) y formatéela para reflejar los detalles de estilo elegidos.
3. Haga clic en "Crear nuevo estilo de texto".
4. Organice los estilos de texto en la página de la guía de estilo.

Paso cinco: Activos

Ahora viene la parte divertida. Es hora de combinar todos los pasos anteriores para crear algunos activos. Si ya se han creado activos, por motivos de coherencia, es mejor volver a crearlos utilizando los estilos de texto, los iconos y los colores que ya ha elegido. Por ejemplo, podría haber muchos colores diferentes de gris dentro del documento de diseño de trabajo que un diseño no ha tenido en cuenta, por lo que recrear el activo garantizará la consistencia del color elegido. No olvide mantener la coherencia en los nombres y asegúrese de agregar recursos en la página de la guía de estilo a medida que se crean.

Aquí hay algunos activos sugeridos para trabajar:

Botones

1. Cree estos símbolos dinámicos, al igual que los íconos, enmascarando el botón en el color predeterminado y eliminando el relleno.
2. Para mantener el texto centrado en todo momento, amplíe el ancho del cuadro de texto para que sea el mismo que el del botón y centre el texto.
3. Para garantizar la coherencia, asegúrese de utilizar los estilos de texto guardados.
4. Guarde estos elementos como símbolos usando el sistema de nombres de botón/ nombre de botón .
5. Utilice la función de anulación para cambiar las etiquetas y los colores.

Barras de búsqueda

1. Aplique restricciones de cambio de tamaño al campo de búsqueda y los iconos y el texto utilizados dentro del propio campo.
2. No se olvide de aplicar estilos de texto y colores previamente guardados en la paleta de colores de su documento.
3. Guarde este elemento como un símbolo usando la búsqueda como título, o si tiene diferentes tipos de búsqueda, adhiérase al sistema de etiquetado como búsqueda/estándar y búsqueda/sin icono .

Botones de radio y casillas de verificación

1. Es posible tener un símbolo dentro de un símbolo, y una buena manera de probarlo es crear botones de opción inteligentes y recursos de casillas de verificación.
2. Primero, haga que el botón sea activo en sí mismo. Guarde este elemento como un símbolo utilizando la casilla de verificación/seleccionado y la casilla de verificación/deseleccionado como ejemplo de etiquetado.
3. Ahora crea la entrada. Agregue texto de marcador de posición junto al símbolo de la casilla de verificación y luego convierta todo el recurso en un símbolo. Dado que ahora es una entrada, se sugiere guardar el recurso como tal, por lo que una buena etiqueta sería input/checkbox/selected e input/checkbox/deseleccioned .

Sexto paso: ¡Usa la Guía de estilo!

Hacer todo este trabajo para crear una guía de estilo solo es útil si realmente hace que un proyecto funcione sin problemas. Una vez que se han creado todos los activos, es hora de aplicar la biblioteca al documento que se está diseñando. En Sketch, vaya a "Preferencias -> Agregar biblioteca..." y agregue el documento de la biblioteca.

Una vez que haya agregado una biblioteca a su archivo de diseño de proyecto, puede acceder a la biblioteca y sus símbolos en la sección de símbolos. Notarás la biblioteca de diseño de interfaz de usuario de iOS que viene con Sketch como una opción de biblioteca, así como la biblioteca que se importó recientemente.

Si desea actualizar un símbolo, haga doble clic en el símbolo mismo y debería aparecer el documento de su biblioteca. Una vez que haya realizado los cambios, vuelva al documento de diseño y haga clic en el botón Actualizar en la esquina superior derecha.

Bonus: Importación/exportación de estilos de texto

Los estilos de texto no se guardan con una biblioteca, pero el complemento Estilos de texto compartidos para Sketch lo resuelve. Una vez que haya descargado el complemento, vaya al documento de la biblioteca y luego al menú: "Complementos -> Estilos de texto compartidos -> Exportar..." Guarde este archivo en la misma carpeta que su documento de la biblioteca. Luego, en su documento de diseño, vaya al menú nuevamente: "Complementos ‐> Estilos de texto compartidos ‐> Importar estilos de texto..." e importe el archivo que acaba de guardar. Aparecerán sus estilos de texto.

Bono: importar/exportar paletas de colores

Al igual que los estilos de texto, los colores de los documentos no se guardan con una biblioteca de Sketch, pero el complemento Sketch Palettes lo resuelve. Al igual que arriba, exporte la paleta usando "Complementos -> Paleta de bocetos -> Colores del documento -> Guardar paleta" e impórtelo con "Complementos -> Paleta de bocetos -> Colores del documento -> Cargar paleta". Recuerde guardarlo en la misma carpeta que sus otros documentos de la biblioteca.

Bono: Fuentes

Craft by InVision es un conjunto de complementos que llevan el software Sketch al siguiente nivel. Craft le permite reemplazar imágenes con fotos de stock, crear prototipos y sincronizar con InVision, crear bibliotecas y más. Si se descarga Craft, presione "cmd-shift-c" en el documento y se generará una hoja de estilo. Las fuentes se enumerarán aquí.

Seguir los seis pasos descritos anteriormente hará que los proyectos de diseño grandes y pequeños funcionen mejor y el resultado final será más pulido. Si son únicos o muy específicos, la guía de estilo, la biblioteca y el kit de interfaz de usuario se pueden usar para un cliente o para muchos proyectos si se crean constantemente elementos de interfaz de usuario estándar, como estructuras alámbricas y prototipos. Dedicar tiempo, al principio, para crear correctamente estos componentes de la interfaz de usuario de Sketch ahorrará mucho tiempo en el futuro y, potencialmente, en muchos proyectos.

Lectura adicional en el blog de diseño de Toptal:

• Por qué las startups necesitan una guía de estilo
• Cosas que quizás no sepas sobre la tipografía en Sketch
• La lista definitiva de 50 de los mejores complementos de Sketch
• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Cómo crear un marco de diseño efectivo (incluye un marco de interfaz de usuario de Sketch gratuito)