Tutorial de croquis

Una guía de inicio rápido para el sistema de diseño de cabaña

¡Aprenda cómo mejorar fácilmente su flujo de trabajo de diseño en Sketch aquí, ahora mismo!

En noviembre de 2017 (con un poco de música un tanto extraña y un desvanecimiento de pantalla tambaleante) decidí comenzar a construir un Sistema de diseño / Archivo de inicio de bocetos llamado Cabana. Puedes leer mi artículo original sobre eso aquí.

Desde entonces, he creado una buena cantidad de artículos, algunos con gran detalle sobre cómo construí el Sistema, y ​​también cómo puedes trabajar con un Sistema de Diseño listo ...

  • Cómo crear un sistema de diseño en croquis
  • Crear con un sistema de diseño en croquis

Pero sabes qué (y aunque las instrucciones incluidas dentro de Cabana son bastante detalladas por derecho propio), no les había dado a los usuarios de Cabana una guía de instrucciones más detallada ...

... pero eso es lo que pretendo hacer aquí, y darle instrucciones de manera más detallada para que pueda saltar a Cabana y decir "Maldita sea, soy un Cabana Design System Pro, solo espere hasta que el resto del equipo obtener un pedazo de mí, promoción aquí vengo ", o posiblemente algo un poco más moderado que eso?

Con este artículo, quiero que puedas salir no solo con la confianza de usar el Sistema de diseño de Cabana en tu flujo de trabajo diario, sino también con una comprensión de cuán beneficioso para tu flujo de trabajo puede ser un Sistema como Cabana.

Antes de comenzar, tome un café, una copia de Cabana y permítame mostrarle cómo poner en práctica este pequeño Sistema de Diseño de la Alegría.

Primero lo primero

  • Toma una copia de Cabana aquí
  • Instale las fuentes Poppins y Open Sans
  • Enciende tu copia de Sketch
  • ¡Hagámoslo!

Cuando abras Cabana por primera vez, se te presentarán 4 páginas de genialidad sin adulterar ...

  • Por favor comience aquí
  • Guía de estilo
  • Componentes
  • Diseño del sistema de demostración
  • Los símbolos

Por supuesto, primero nos centraremos en la página Por favor, comience aquí. Tiene perfecto sentido ¿verdad?

Comience aquí

En esta página es donde ocurre la mayoría de la magia del Sistema de diseño. ¡Oh, la la!

Aquí encontrarás 3 mesas de trabajo separadas ...

  • Colores
  • Tipografía
  • Varios

Colores base

Veamos cómo ajustar los colores base dentro de Cabana, ¿de acuerdo?

Aquí nos centraremos en el Color primario, y le mostraré lo simple que es hacer un solo ajuste en esta página y hacer que se propague por todo el Sistema. ¡Aquí hay algo de hechicería de Sketch / Design System en funcionamiento!

Simplemente arrastre el cursor alrededor del bloque Color primario, esto a su vez seleccionará tanto el Color de relleno como el Color del borde. ¡No se preocupe por esas pequeñas etiquetas seleccionadas, todos los títulos y etiquetas están bloqueados, no se pueden seleccionar y no se mueven a ningún lado!

Luego, desde el Inspector, simplemente actualice el Color de relleno y borde a algo más adecuado para su proyecto en cuestión, y luego haga clic en el icono Sincronizar para estos nuevos estilos para aplicar los cambios.

Si salta rápidamente a una de otras páginas, ya sean símbolos o componentes, por ejemplo, verá este simple ajuste de color en toda su gloria propagada.

Este tipo de ahorro de tiempo seguramente haría que Doc Brown de Back to the Future gritara "¡Gran bosquejo!".

Dentro del Cabana DS (Sistema de diseño) también tiene los siguientes colores para ayudarlo desde el principio ...

  • Secundario
  • Terciario
  • Negro
  • Gris
  • Gris claro
  • Éxito
  • Advertencia
  • Error

Con el resto de los colores disponibles, puede usar solo lo que se requiere para el proyecto en cuestión y dejar el resto tal como están. No es un problema. Raramente me encuentro usando el color terciario, por ejemplo, pero es justo cuando un proyecto puede recurrir a él, ¡y usted garantiza que si no estuviera allí, el proyecto 'siguiente' lo solicitaría! ¿Tu sabes como va?

Superposiciones de color

Las superposiciones de color simplemente están ahí para fines de marca y legibilidad consistentes en todo su proyecto. Con las opciones de Primario, Secundario y Negro para elegir.

Para colocar una Superposición en su lugar, por ejemplo, la Superposición primaria, simplemente necesita ir al Inspector y elegir el Valor de color hexadecimal (#) que ha configurado actualmente para su Color base primario, y luego con la pasta de Superposición seleccionada en este Valor hexadecimal y haga clic en el icono Sincronizar. ¡Todo listo!

Incluso he aparecido en una imagen de demostración para que pueda obtener una idea aproximada de cómo se verá el color elegido cuando se superponga. Si es necesario, modifique la opacidad y recuerde sincronizar los cambios que haya realizado.

Puede continuar y repetir un proceso similar para las superposiciones de color secundario y negro si es necesario.

tipografía

No dejes que esa multitud de fuentes frente a ti te envíe corriendo por una copia de Photoshop. Mantén la calma y escucha. Todo va a estar bien, lo prometo :)

El sistema de diseño Cabana actualmente utiliza 2 familias de fuentes; Poppins, para encabezados, botones, etc.

... y Open Sans, para cuerpo, plomo, etc.

Se les conoce como Font Family # 1 (Poppins) y Font Family # 2 (Open Sans).

Esto solo le permite cambiar fácilmente las familias de fuentes a algo más adecuado para su proyecto sin la necesidad de revisar sus estilos de texto y cambiar los nombres de las familias de fuentes.

Para cada familia de fuentes, tiene estilos que van desde Uber (para aquellos encabezados más grandes que los adecuados para uso web) hasta Tiny (más adecuado para texto más pequeño en un dispositivo móvil).

Ambas familias de fuentes tienen todos y cada uno de los estilos adjuntos, lo que le permite cambiar fácilmente entre las 2 familias de fuentes cuando trabaja en un proyecto.

Para cambiar fácilmente una de las familias de fuentes para adaptarla a su proyecto actual, simplemente arrastre el cursor alrededor de uno de los bloques de texto (puede seleccionar todos los bloques o solo los colores que usará en su proyecto).

Nuevamente, no se preocupe por seleccionar ninguno de los títulos (es decir, Font Family # 1 (Negro)), todos están bloqueados.

De hecho, puede alejarse para que todas las familias sean visibles en su pantalla (útil si está trabajando con una pantalla más pequeña) y aún así seleccionar con confianza los bloques de texto sin seleccionar inadvertidamente otros elementos en la mesa de trabajo.

Si observa la imagen a continuación, verá que he arrastrado el cursor desde la parte superior izquierda de la mesa de trabajo sin la preocupación de seleccionar ninguno de esos títulos molestos (pero útiles como referencia, por supuesto). ¡Felices días de selección!

Luego, desde el Panel del inspector, cambie la familia de fuentes y haga clic en el Syncicon para ver sus cambios.

Tenga en cuenta que todos los ajustes de Color, Tamaño de fuente, Peso y Alineación se guardarán al hacer clic en el icono Actualizar. Solo cambiará la familia de fuentes real. Así que no se preocupe por perder ninguno de esos ajustes que haya hecho antes de hacer clic en el icono Sincronizar.

También tenga en cuenta que Sketch puede parecer que no responde si cambia todos los estilos de texto a la vez. Solo dale un momento o dos mientras hace todas esas actualizaciones de texto.

Ahora puede notar que el color Amarillo (Advertencia) no aparece en las opciones de Tipografía. Esto se hizo a propósito, ya que me parece extremadamente raro que apliques el tipo amarillo a un diseño. Bloques de color, sí, pero para la tipografía y los posibles problemas de accesibilidad que puede traer, no lo incluí.

Eso no quiere decir que no podría aplicarlo usted mismo si fuera necesario, pero desde mi propia experiencia personal, rara vez, si alguna vez, recurrí a la tipografía amarilla en un diseño, por lo que no tiene sentido incluirlo.

Recuerde que los estilos de capa y los estilos de texto son 2 entidades separadas dentro del boceto y el color que establezca, por ejemplo, su color base primario no se propagará a la tipografía con el título primario. Deberá copiar y pegar en el valor hexadecimal y luego sincronizar para ver los cambios. Así es como funcionan los estilos de capa y texto en Sketch. Lamento decepcionar a la gente.

sombras

Aquí puede elegir entre una selección de sombras sutiles y suaves para mejorar los elementos dentro de su proyecto. Para eliminar una sombra de un elemento, simplemente elija la opción Sin sombra en el panel Estilos compartidos.

Para hacer ajustes a cualquiera de las opciones de Sombra, puede editar los valores X, Y, Blurand Spread en el panel Sombras, y para cualquier cambio de Opacidad simplemente haga clic en el Color y ajuste el valor Alfa allí. Una vez que haya realizado los cambios, verá aparecer el ícono Sincronizar, haga clic en este para actualizar sus cambios. ¡Hecho hecho!

Si decide hacer algún ajuste en la intensidad de la sombra, asegúrese de hacer clic en el icono Sincronizar una vez que se hayan realizado los cambios.

Para usar el Estilo de capa de sombra en su proyecto, simplemente cree una Capa de forma, y ​​esto podría ser un contenedor o una imagen, y luego, desde el panel Inspector, elija uno de los Estilos de capa de sombra, por ejemplo Sombra> Sombra 40%.

Si decide que una Sombra no es la adecuada para el elemento elegido, simplemente puede cambiar al Estilo Sombra> Sin capa de sombra.

¡Simple con chispas!

Gradientes

Piense en los degradados dentro del sistema de diseño Cabana como otro extra opcional. No son obligatorios, el proyecto en el que está trabajando puede no tener ninguna necesidad de ellos, pero están allí si alguna vez necesita llamarlos. Solo trato de ahorrarle un poco de tiempo si alguna vez los necesitara en un proyecto. Siempre pensando en el futuro!

Para cambiar simplemente cualquiera de los degradados dentro de Cabana, simplemente continúe y seleccione el degradado que desea cambiar (por ejemplo, Lluvia púrpura), luego ajuste el Relleno de degradado en el Inspector y una vez que esté satisfecho con los resultados, degrade Asistente, haga clic en el icono Sincronizar para bloquear su Gradiente ajustado.

Si desea cambiar la etiqueta del Estilo de capa también, siga los pasos que mencioné anteriormente y, en lugar de hacer clic en el icono Sincronizar, seleccione Crear nuevo estilo de capa en el menú desplegable y nombre en consecuencia.

Todos los degradados tienen una Opacidad del 80% aplicada para que pueda continuar fácilmente y superponerlos en sus imágenes, pero no dude en ajustar la Opacidad para satisfacer sus necesidades.

🖼 Imagen de duotono

Ahora, al igual que los degradados anteriores, podría considerar los estilos de imagen Duotone como un pequeño extra opcional, y no necesariamente necesarios para el proyecto que tiene listo, pero al igual que los degradados que acabo de mencionar, están ahí si lo necesita ellos (Sí. Duotone todavía está en tendencia) y le ahorra el trabajo adicional de crearlos en una fecha posterior.

Para editar las imágenes de duotono que ya están disponibles, simplemente seleccione una (por ejemplo, Blue Moon) y luego, desde el Inspector, modifique las distintas opciones de Mezcla de colores. Aquí puede elegir entre las opciones de Fusión como Pantalla, Multiplicar y Aclarar para encontrar algo que combine bien con los Valores de color que elija.

También puede seleccionar uno de los Rellenos y hacer clic y arrastrar para reorganizarlo en el Inspector, y probar varias combinaciones hasta que esté satisfecho con el resultado final. ¡Enloquece por la mezcla!

Cuando use su Duotone preferido en un proyecto, simplemente inserte una capa de forma, elija el Estilo compartido Duotone relevante y luego inserte una imagen de su elección (preferiblemente una imagen en blanco y negro para que el efecto sea más notable).

Guías de cuadrícula de 8 puntos

Por último, en el sistema de cuadrícula de 8 puntos, del cual soy un verdadero defensor y uso en casi todos mis proyectos.

¿Por qué? Bueno, porque crear una composición estéticamente agradable y estructurada para un Proyecto cada vez, es difícil de hacer sin un Sistema de Cuadrícula en su lugar, y "volar a ciegas" no es la forma de hacer las cosas cuando se trabaja en un Proyecto de Cliente.

"Vayamos 16 puntos aquí, y, eh, vamos con 15.75 puntos aquí, y vaya entonces, 14.5 puntos aquí por si acaso".

No ¡No es genial!

Con un sistema de cuadrícula fuerte como el 8pt que se usa dentro de Cabana, puede sentirse seguro al saber que los elementos dentro de su proyecto tienen relaciones de espaciado consistentes y definidas entre sí, y no solo eso, sino que usted y el desarrollador pueden trabajar desde el mismo sistema de cuadrícula especificado desde el diseño hasta el desarrollo y evitar problemas de espacio y alineación durante toda la producción. ¡Gente feliz por todas partes!

Con las guías de cuadrícula de 8 puntos en Cabana, puede continuar e insertar los estilos compartidos en un proyecto, agruparlos y luego mostrar / ocultar el grupo según sea necesario cuando trabaje. Si usted y sus desarrolladores están utilizando una herramienta como Zeplin, puede hacer que los 8pt Share d Styles sean visibles para su desarrollador, de modo que pueda hacer referencia a ellos fácilmente en producción.

Espero que esta Guía de inicio rápido para usar Cabana le haya ayudado a comenzar su viaje en el Sistema de diseño de alguna manera.

Y si usted es una de esas personas que no ha tenido el placer de usar un sistema como Cabana (¿En serio? ), puede obtener una copia nueva y brillante de Cabana justo debajo ...

¿Desea mejorar rápidamente su flujo de trabajo de diseño en Sketch? Obtenga una copia del Sistema de diseño de cabaña aquí.

Use el código de oferta MEDIUM25 para recibir un 25% de descuento.

Gracias por leer el articulo,

Bagazo

Diseñador, autor, padre y amante de Sunny Days