Tutorial de croquis

Cómo crear un sistema de diseño en croquis (primera parte)

Permíteme mostrarte las bases que deben establecerse para comenzar a construir un poderoso Sistema de Diseño

¿Desea mejorar drásticamente su flujo de trabajo con mi sistema de diseño premium para Sketch? Puedes recoger una copia de Cabana aquí.

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

Sentando las bases

Okay. Hace poco intenté construir un sistema de diseño en Sketch. Fue mucho tiempo. Fue agradable De vez en cuando era frustrante, pero chico, me alegro de haberlo hecho.

Ahora, tener un sistema de diseño (se llama Cabana por cierto) ha aumentado mi flujo de trabajo diez veces, y me ha dado una base sólida para construir cuando me lanzo de cabeza a cualquier proyecto.

Inspirado por otros sistemas con los que me había encontrado, me sorprendió el ahorro de tiempo que algo como un sistema podría aportar a mi flujo de trabajo diario. Puede que haya divagado un poco en mi última publicación, pero realmente ha aumentado la velocidad de mi flujo de trabajo de forma masiva, y es una locura que no haya traído uno a mi flujo de trabajo en una etapa anterior. Ker-raaazzzy!

Ahora, como es costumbre, hay Naysayers por ahí que gritan desde los tejados “Pero tienes que cambiar 4 Anulaciones de símbolos solo para diseñar un botón. Simplemente no estoy de acuerdo con eso ", y me inclino a estar de acuerdo con ellos ... hasta cierto punto.

Cuando empiece a trabajar con un nuevo sistema en Sketch, es posible que se encuentre (en los primeros pasos) ligeramente obstaculizado, porque es una forma diferente de abordar un proyecto dentro de Sketch y algo un poco diferente a usted ' Tal vez nos hemos acostumbrado.

Pero honestamente, créanme cuando digo que, una vez que hayan quitado esas ruedas de entrenamiento del Sistema de Diseño (que prometo que no tardarán mucho), se encontrarán trabajando en piloto automático, avanzando rápidamente a través de un proyecto, y lo hará. parece una segunda naturaleza para ti.

Me gusta llamarlo "Sketch Zen Cruise Control".

Créeme. Una vez que haya traído un Sistema de Diseño a su vida esta Navidad, no querrá volver a su antigua forma de diseñar en Sketch ...

  • Boceto abierto
  • Mire fijamente una pantalla en blanco (lo llamo "Síndrome de pantalla en blanco")
  • Toma algunos íconos de algún lugar
  • Siga el riguroso proceso de creación de Símbolo tras Símbolo
  • Configure algunos estilos de capa, y luego algunos más, y luego algunos más
  • ¡Entonces, comience realmente el proyecto!
  • Mire el reloj y diga “Oh, ¿a dónde fue todo ese tiempo? Hora de la tierra somnolienta.

Okay. Vayamos a ello, y déjame mostrarte los cimientos que deben establecerse para comenzar a construir una imponente estructura de genialidad llamada Sketch Design System ...

Comience con esos colores ...

Hazlo simple, salchicha tonta (KISYSS)

Con Cabana, y con cualquier sistema que cree, debe usar el mínimo de colores cuando sea posible. De acuerdo, puede usar tintes y sombras, pero para los colores base reales, mantenga las cosas al mínimo. No muy diferente a demasiados chefs / fuentes que estropean el caldo, lo mismo puede suceder con los colores si te vuelves loco.

El objetivo principal de crear un sistema de diseño en primer lugar es tener una biblioteca refinada de elementos y estilos que mantengan las cosas mucho más estrictas cuando se trabaja en cualquier proyecto. Un punto de referencia que lo mantiene alejado del lado oscuro del trabajo con 12 colores diferentes y una multitud de tamaños de fuente ligeramente diferentes de una pantalla a otra. He sido culpable de eso en el pasado. Pienso que todos tenemos.

Así que con Cabana mantuve una estructura universal de colores primarios, secundarios y terciarios. No más, no menos y suficiente para adaptarse a diferentes proyectos cuando sea necesario.

Y, por supuesto, el negro obligatorio, 2 tonos de gris, blanco y blanco al 50% de opacidad para actuar como una superposición para elementos como iconos.

Luego, los colores predeterminados de rojo, verde y amarillo para las notificaciones de éxito, advertencia y error serán el color de fondo para las insignias de notificación, el texto en un formulario o los bordes en un campo de texto.

¡En sus marcas, listos, fuera!

Le di a cada uno de mis colores base un color de relleno y borde (1px) del mismo valor hexadecimal, y luego creé estilos compartidos separados para cada uno (es decir, relleno / primario y luego borde / primario).

Luego, con el Rectángulo seleccionado (con el Estilo compartido de relleno aplicado), dupliqué esta forma, la puse encima del original y luego apliqué el Estilo compartido de borde que había guardado anteriormente.

Esto me permitiría en el futuro seleccionar rápidamente ambas formas (con los estilos de Relleno y Borde aplicados) y hacer los cambios de Estilo relevantes de una vez.

Una vez que tenía los colores base en su lugar, simplemente podía tomar algunos de esos colores, es decir; Primario, secundario, negro y cree una superposición de color simple al 60% de opacidad que luego se podría aplicar a cualquier imagen en un proyecto, y esto fue tan simple como tomar el valor hexadecimal de mis colores base y aplicarlo con un 60% de opacidad y creando un nuevo estilo compartido, es decir; Superposición / Primaria.

... y ahora para la tipografía ...

Al crear Cabana, y esto realmente se aplica a cualquier proyecto en el que esté trabajando. Cumplir con la regla de la familia de 2 fuentes (máx.). Uno para los títulos y el otro para la copia del cuerpo. Hay momentos en que ‘ese’ tercer miembro de la familia puede ser invitado a una ronda, pero debes darles una silla junto a la puerta.

Elegí Poppins y Open Sans debido al hecho de que se complementan muy bien como familias de fuentes base (de inicio).

Realmente no hay una forma correcta o incorrecta de configurar esto inicialmente, ya que va a adaptar la tipografía al proyecto en cuestión, pero, por ejemplo, la creación de prototipos iniciales funcionan bien para los fines a los que sirven (encabezados, cuerpo) y tomar Un asiento trasero sin demasiadas distracciones. Creo que si comenzaste con, por ejemplo, una fuente Serif como Merriweather, se distraen desde el principio si tu único objetivo era utilizar un sistema como Cabana con fines puramente de creación de prototipos.

Comenzando con la familia de fuentes Poppins. Comencé con el estilo de fuente Uber. Este no es un estilo de fuente que se utilizará la mayoría de los disponibles, pero sé por experiencia que cuando probé otros sistemas de diseño en el pasado, su estilo de fuente más grande no ha sido lo suficientemente generoso en su tamaño, y especialmente cuando estamos deseando crear productos tanto para móviles como para la web. Es por eso que puse a Uber en su lugar con un tamaño de fuente saludable de 111 puntos

Luego, revisé los sospechosos habituales de tipografía (H1 a H5) usando Modular Scaling, con el tamaño de texto de mi cuerpo establecido en 18pt, y usando una relación de 1.2.

El cuerpo que configuré en un 18pt más saludable solo para mejorar la legibilidad si yo mismo o cualquier otra persona decidiera optar por un gris oscuro o similar para la copia del cuerpo.

Además de los encabezados y los estilos de cuerpo, agregué estilos para Lead, Small, Caption y Tiny. Cumplir con el espaciado de caracteres predeterminado para todos los mencionados anteriormente, aparte de Caption.

Creé un peso Regular y Bold para cada uno de los estilos (Uber, Hero, H1, H2, Body, etc.). He visto sistemas antes de optar por un peso ligero en lugar de Regular (o incluso Bold para los encabezados, sin la opción de Regular), pero no todas las familias de fuentes son tan generosas con pesos y estilos, y confiar en un peso de fuente ligero cuando se trata de intercambiar familias de fuentes puede causar más trabajo para usted en Sketch, así que traté de evitar eso con simplemente el viejo Regular y Bold. Un medio feliz, creo!

Repetí este proceso para la fuente Open Sans (Familia de fuentes # 2), y me aseguré de que para ambas familias de fuentes también creara un Estilo de texto para Izquierda, Centro y Derecha (Sí, raramente usamos texto alineado a la derecha, pero lo incluí como red de seguridad) ...

Una vez que tuve las versiones en negro de ambas familias de fuentes (Poppins y Open Sans) con estilo de texto y listo, pasé a crear las variantes de color de cada una.

Entonces, utilizando los valores de color hexadecimales que había configurado anteriormente, los copié y creé nuevos estilos de texto con los siguientes colores aplicados ...

  • Gris
  • Gris claro
  • Blanco
  • Primario
  • Rojo (error)
  • Verde (éxito)

Varios

Oscuridad

En las diversas secciones del Sistema de diseño, me centré en Box Shadows para los elementos en primer lugar. La capacidad de crear rápidamente una forma en Sketch y asignarle una sombra de diferentes intensidades en cuestión de segundos reduce enormemente el tiempo que generalmente toma crear sombras en el Sketch Inspector.

Gradientes y Duotono

Okay. Es cierto que con los Gradientes se podía ver que estaba en una especie de misión de tendencia. No entremos en todo el debate de Gradient. Todavía tienen sus usos y pueden usarse con gran efecto cuando se usan con moderación, así que opté por incluirlos en el Sistema.

El mismo tipo de razonamiento se aplica al efecto Duotone que inserté en el Sistema. Sí, ambos elementos pueden parecer un poco superfluos para un sistema de diseño, y las etapas iniciales podrían crearse simplemente con Colores y Tipografía, pero agregué que tiene una adición práctica, para guardar pasos adicionales en una etapa posterior del proceso de diseño.

Sistema de cuadrícula de 8 puntos

Me había inspirado enormemente el sistema de cuadrícula de 8 puntos, y sí, en el pasado me había mantenido en mi propio sistema (más o menos), pero aún podría diferir mucho de un proyecto a otro. Con un sistema de cuadrícula de 8 puntos en su lugar, pude dimensionar y espaciar elementos en la página en incrementos de 8 (8, 16, 24, 32, etc.). Cuando comencé a construir mis Símbolos y Componentes en la siguiente etapa, puse este sistema de cuadrícula en muy buenas prácticas, y lo mostraré en detalle en la Parte 2 de esta serie de artículos.

Antes de usar algo como el sistema de cuadrícula de 8 puntos, confiaba en una combinación de mi ojo y la buena herramienta de medición de croquis. Por supuesto, mantendría alguna forma de consistencia, pero eventualmente en el transcurso de muchas páginas o pantallas de un diseño, y sin un punto de referencia, tiene una mezcolanza para espaciar las medidas. 20 px aquí, 15 px allá, 30 px aquí.

Medidas que varían muy ligeramente entre pantallas. Elemento X 20px del elemento Y en una pantalla, pero elemento Y 22px del elemento Z en la pantalla siguiente. Este tipo de descuido eventualmente se suma y crea una experiencia inconexa para el usuario.

Descubrí que al agregar algo como el sistema de cuadrícula de 8 puntos a Cabana, pude aportar mucha más consistencia a lo largo de todo un proyecto y también tuve un punto de referencia más sólido para que los desarrolladores lo sigan en las etapas posteriores de un proyecto.

Es por eso que con Cabana utilicé el sistema de cuadrícula de 8 puntos para alinear y medir el relleno en muchos de los elementos para lograr una consistencia constante. Te mantiene mucho más feliz y puntual, tus desarrolladores tienen un punto de referencia simple y el usuario final puede sentirlo inconscientemente.

Esperemos que con este breve, pero informativo artículo, haya podido obtener una comprensión de los elementos básicos necesarios para formar las bases de un gran Sistema de Diseño.

Una vez que los elementos base, como Color y Tipo, estén bloqueados en su lugar, puede avanzar creando varios Símbolos, Símbolos Anidados y Componentes que construirán un Sistema de Diseño sólido.

Únete a mí para la Parte 2 (que puedes ver aquí)

¿No quieres construir un sistema de diseño tú mismo? Puedes recoger una copia de Cabana 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 MacPaint