Tutoriales de croquis

Hacer hojas de estilo en croquis

Cliente: Haz que todo sea azul. * tres semanas después * No, ¡NO ESO azul!

Si tuviera una moneda de cinco centavos por cada vez que tuviera que actualizar colores en un diseño completo, probablemente tendría ... bueno ... tal vez solo uno o dos, porque soy genial con el color. Aquí hay una foto que alguien capturó de mí diseñando una interfaz para Apple:

Justo fuera de la pantalla izquierda, Jony Ive y Dieter Rams están jugando a las damas.

Pero de verdad, sucede todo el tiempo, y la razón siempre es diferente:

• "Ah, lo siento, cambiamos la marca".
• "Dispara, te dimos una guía de estilo antiguo".
• * silencio de radio *
• “¿Puedes hacer ese color POP un poco más?”
• "Aquí hay una foto de nuestro logotipo. Simplemente "Photoshop" el color a partir de ahí ".
• "Necesitamos combinar el color Pantone de nuestras alfombrillas de ratón".
• "A mi (pareja) no le gusta el color".

Y el hecho es que, ya sea que esto suceda o no, es una buena práctica crear sus documentos de diseño para que sean escalables y mantenibles. Una solicitud para actualizar el color de la marca debería ser tan fácil como una serena lección de pintura de Bob Ross.

Aquí hay algunos consejos para crear una hoja de estilo en Sketch donde puede mantener centralmente detalles visuales como fuentes y colores.

1. Apilamiento

Llamemos a esto el "método de panqueques" porque actualmente estoy en la dieta Whole30 y todo lo que puedo pensar son panqueques. (ayuda, me muero de hambre)

El paso 1 de todo este proceso es crear estilos guardados para texto y color. Es bastante fácil, pero puede ser un poco tedioso. Cuelga ahí:

Solo mira este GIF 96 veces. Eso es sobre cuántos estilos de capa terminarás creando.

Haga esto para todos los colores que planea tener en su producto. Si agrega más en el futuro, solo asegúrese de crear estilos para ellos también. Aquí está mi hoja de color:

También hago consultoría en pintura de casas.

Bastante fácil, ¿eh? Pero esto es lo que no ves:

Para cada color en mi paleta, en realidad he creado 6 estilos de capa que preveo necesitar en varios lugares a lo largo de mi diseño. Cada uno de los seis rectángulos que ve arriba representa un estilo de capa diferente que he guardado.

Para una apariencia agradable y limpia (y para ahorrar espacio), hago rectángulos de tamaño idéntico con un estilo diferente asignado a cada uno, luego los apilo perfectamente uno encima del otro. Si alguna vez necesito actualizar el color, solo resalto todo el bloque (que selecciona las seis capas), hago mis cambios y sincronizo.

Sketch le mostrará todas las configuraciones para cada rectángulo, pero cuando sincronice sus cambios, cada estilo de capa se actualizará individualmente sin sobrescribir los demás. Es bastante útil:

ProTip: Comience en la parte inferior y vaya ascendiendo. ¡Ese selector de color siempre se interpone en el camino!

¿Adivina qué?

¡Esto también funciona para el texto! Así es como se ve mi hoja de estilo de texto:

Me siento orgullosa de esta hoja de estilo. Jajaja
Nota para el boceto: siento que no debería necesitar estilos de texto únicos para un montón de colores diferentes. ¿Tal vez se nos ocurre una forma de definir el texto base, y luego tenemos una manera de aplicar el color en la parte superior? ¡Comida para el pensamiento!

Entonces, ¿dónde entran los panqueques, errr, apilamiento? Creo que para el texto en blanco y negro, es útil tener tres niveles de transparencia. Entonces, lo que parece una columna de estilos de texto para negro, en realidad es una pila de tres estilos de texto en cada nivel de transparencia:

Una vez más, solo apilo uno encima del otro (Alinear → Izquierda), lo que hace que sea fácil actualizarlos todos más tarde. Al igual que con los estilos de capa anteriores, Sketch conservará los estilos únicos para cada estilo de texto que resalte, por lo que cualquier cambio que realice y sincronice se aplicará a cada estilo de texto individualmente. Por lo tanto, no se preocupe por resaltar todo, cambiar el color y Sketch sobrescribir todos sus estilos de texto en negrita de 14px. No va a suceder

2. Bloqueo de etiquetas

Por amor a Dieter Rams, etiquete todo en su hoja de estilo. Para los estilos de capa, simplemente coloque algo de texto encima que describa lo que es. Para obtener puntos de bonificación adicionales, muestre cómo podría usarse:

¿Alguna vez te has preguntado por qué se llama una malla?

Una vez que haya etiquetado todo, seleccione cualquier cosa que no sea algo que desee actualizar, agrúpelos en una carpeta "Etiquetas", luego bloquéelo como si estuviera caliente. De esta manera, nunca seleccionará accidentalmente sus etiquetas cuando intente actualizar uno de los estilos.

No olvides emocionar tus nombres de capa

Observe cómo cuando arrastro para seleccionar que solo selecciona los objetos que debería actualizar, no las etiquetas a su alrededor:

Un truco humano tan estúpido, pero me gusta ¯ \ _ (ツ) _ / ¯

3. Auto referencia

Ahora tiene todos estos estilos agradables, ¿por qué no usarlos?

Diseñé mi guía de estilo usando todos los estilos de capa y texto que definí en mi hoja de estilo. Si alguna vez actualizo la fuente o los colores, no solo esos estilos se actualizarán a lo largo de mi diseño, sino también mi guía de estilo. Fuentes, colores, todo.

Izquierda: Mi hoja de estilo. Derecha: Mi guía de estilo. Si actualizo la hoja de estilo, ¡mi guía de estilo también se actualizará!

Es un truco tonto, pero si tiene la tarea de actualizar el producto y la guía de estilo para que coincida con una nueva marca de marketing (los amo), se ahorrará mucho dolor de cabeza si no intenta ser demasiado elegante. con la guía de estilo y solo diseñala usando los estilos que ya tienes. ¡Diablos, usa tus estilos de texto para cosas como anotaciones también! Luego, si actualiza la fuente, incluso sus especificaciones coincidirán. Son las cosas pequeñas.

A finalmente, hablando de especificaciones ...

4. ¡Compártelo!

Su hoja de estilo se convertirá rápidamente en uno de los activos favoritos de su desarrollador. ¡Compártelo! Utilizo Inspect by InVision para sincronizar mi hoja de estilo directamente desde Sketch y en manos del equipo de desarrollo. Para las discusiones de diseño, también amo a Marvel por sus páginas de proyectos.

Incluso si no he terminado mis diseños, permitirles a los desarrolladores comenzar con las clases de CSS es una gran ayuda. En mi experiencia, no he tenido un solo desarrollador al que no le encante este tipo de traspaso.

Si no usa InVision, Zeplin es otra herramienta fantástica para hacer lo mismo. Zeplin es un producto maravilloso, pero personalmente me gusta mantener todos mis activos en un solo lugar en InVision.

InVision Inspect es una manera perfecta de compartir su hoja de estilo con los desarrolladores.

Ahora suelte todo y vaya a hacer una hoja de estilo para ese desordenado archivo Sketch. ¡Esperaré!

O si eres perezoso, creamos el kit de interfaz de usuario de UX Power Tools completamente usando las hojas de estilo que ves en esta publicación. Toolbox tiene estilos, símbolos y componentes, y le dará aproximadamente un mes de ventaja

Dang

Cuando no me estoy burlando de Medium, estoy trabajando en las herramientas de Sketch en UX Power Tools para hacerte un diseñador mejor, más rápido y más fuerte. Síganos en Twitter @uxpowertools. ¡Sígueme también si te entretuviste!