Tutorial de croquis

Crear con un sistema de diseño en Sketch: primera parte [Tutorial]

Construyendo y trabajando con un sistema de diseño en Sketch

¿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 MEDIO 25 para recibir un 25% de descuento

He visto muchos tutoriales que muestran los elementos que intervienen en la construcción de un Sistema de diseño en Sketch, pero no muchos, si es que hay alguno, que realmente te muestren ese Sistema brillante, fresco como una margarita que acabas de crear en la práctica.

Eso es lo que quiero hacer con esta serie de tutoriales. Le mostraré no solo cómo crear los elementos que crean un Sistema de diseño, sino también cómo diseñar una aplicación de iOS multipantalla utilizando el Sistema que acaba de crear, y también mostrarle cómo construí mi propio Sistema y los procesos de pensamiento y las decisiones detrás de eso.

Navegación en serie -

  • Parte uno
  • La segunda parte
  • Parte tres
  • Parte cuatro
  • Quinta parte
  • Sexta parte
  • Parte siete
  • Parte ocho
  • Parte nueve

Echando un vistazo al sistema de diseño

Okay. Antes de saltar de cabeza al diseño de nuestra aplicación iOS de estilo medio que canta y baila todo (¿quién dijo clon?), Déjame darte una descripción general rápida del archivo de croquis del sistema de diseño (Cabana-Lite) Invocaré en las partes posteriores de esta serie de tutoriales.

Dentro del archivo de formato (de inicio) habrá 3 páginas ...

  • Sistema de diseño (configuración)
  • Los símbolos
  • Formato

Tomémoslo desde arriba ...

Sistema de diseño (configuración)

¡Aquí es donde sucede la magia, gente! El punto de partida desde donde puede controlar al menos el 90% del estilo que se producirá en el proyecto en el que está trabajando.

Ajuste los elementos aquí, ya sean sus colores base o tipografía, por ejemplo, y estos cambios se propagarán a lo largo de su diseño.

Los cambios que realice aquí se reflejarán dentro de sus páginas de Símbolos (que abordaremos en un momento), así como, por supuesto, se filtrarán en las mesas de trabajo en las que está trabajando actualmente.

Dentro de esta página, hay 2 mesas de trabajo ...

  • Colores + Superposiciones + Duotono
  • Tipografía (tocaremos esta mesa de trabajo en la segunda parte)

Colores + Superposiciones + Duotono

Con esta mesa de trabajo, podrá ver que he organizado todos los activos relacionados con el color juntos, como colores base, superposiciones y efectos de imagen (en este caso, el efecto duotono).

Ahora en mi sistema de diseño de cabaña he hecho un poco más de separación, donde la mesa de trabajo de colores contiene solo los colores base y las superposiciones de color, y elementos como el duotono se separan en otra mesa de trabajo etiquetada como Varios, que también incluye elementos como degradados, y Box Shadows. Pero para el propósito de este tutorial, solo estoy tratando de mantener las cosas un poco más compactas para usted. ¿Todo bien?

Colores base

Para esta serie de tutoriales, verá que solo necesitaremos 4 colores base al diseñar nuestra aplicación para iOS. Por supuesto, si está construyendo su propio Sistema, y ​​para cubrir todas las bases cuando trabaja en un proyecto grande, sería prudente crear Colores base para (y estas son solo sugerencias) ...

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

Puede ajustar la lista mencionada a algo que elija. Elimine el Terciario y agregue otro tono de Gris, por ejemplo, para tener algo que cree que será el adecuado para los muchos proyectos a los que podría aplicar su propio Sistema.

Okay. Regrese a esos colores base y permítame darle algunos consejos sobre cómo configuro los colores base, usando estilos de capa, en mi propio sistema.

Centrándome primero en el Color primario, y en particular en el Estilo de borde, simplemente creé un Rectángulo (R) 200x200, eliminé el Relleno, le di un Borde de 1px con mi valor Hex elegido, con un Radio de 4.

Entonces simplemente creé un nuevo estilo de capa ...

... y lo etiquetó como Border / Primary ...

Para el relleno primario, una vez más creé un Rectángulo (R) 200x200, apliqué el valor de Hex elegido y le di un radio de 4.

Luego creó un nuevo Estilo de capa y lo etiquetó Relleno / Primario.

Luego alineé ambos elementos (Rectángulos) uno encima del otro. ¿Por qué puedes preguntar?

Esto me permitió a mí y a ti mismo, cuando trabajas con un sistema de diseño como este, cambiar fácilmente los estilos de capa de borde y color de relleno en un barrido limpio.

Ocupa menos espacio en la pantalla y le permite más que nada hacer cambios aún más rápido que tener el Elemento A aquí y el Elemento B allá.

Después de eso, bloqueé los títulos (es decir, primario, negro, gris, etc.) una vez que tuve todos mis colores base y sus estilos de capa acompañantes en su lugar.

Entonces sé que tengo mis títulos en su lugar para una referencia fácil, y puedo arrastrar mi cursor alrededor, por ejemplo, el color primario, seleccionarlo, hacer los ajustes de estilo de capa si es necesario, todo sin sudar, o en términos de boceto sin el dolor de decir "¡No! ¡No! ¡No! No quise seleccionar ese elemento ”. Sí, todos hemos estado allí ¿verdad?

Luego repetiría el proceso que acabo de mencionar para todos mis otros colores base (negro, gris, etc.) bloqueando esos estilos de borde / primario y relleno / capa primaria en su lugar.

Superposiciones de color

Con la superposición de color, y nuevamente para el propósito de este tutorial, acabo de configurar una superposición. Negro para ser exactos.

Esto se puede superponer fácilmente sobre cualquier imagen para ayudar en el contraste, y su valor Hex se toma del Color base negro para lograr uniformidad.

Como mencioné con los colores base, al construir un sistema completo de grasa, no sostenga el sistema de diseño Mayo al que realmente desea apuntar (nuevamente solo una sugerencia) superposiciones para combinar con los siguientes colores base ...

  • Primario
  • Secundario
  • Negro (que estamos usando en este Tutorial)

Permítame darle algunos consejos sobre cómo configuro las superposiciones de color, una vez más usando estilos de capa, en mi propio sistema de diseño.

Me centraré en la superposición de color negro que usaremos más adelante en el tutorial.

Así que simplemente creé un Rectangle (R) 432x248 (ahora esta puede ser cualquier medida que desee, esto es justo lo que elegí al azar), con un Radio de 4 (nuevamente preferencia personal, simplemente se veía mejor estéticamente), pegado en el Valor hexadecimal del color base negro que había creado anteriormente y redujo la opacidad al 60%.

Luego creé un nuevo Estilo de capa y lo etiqueté como Superposición / Negro.

Ahora podría haberlo dejado allí. Pero pensé lo más sensato, y también teniendo en cuenta que esta superposición sería, el 99% del tiempo, aparecer sobre una imagen, para agregar una pequeña vista previa de referencia junto con el nuevo estilo de capa superpuesta. Esto solo significaba que podría tener una mejor idea de cómo funcionaría la Superposición cuando, como mencioné, se asienta sobre una imagen en mi diseño, y me permite ajustar tal vez sea Opacidad hasta que esté contento con el resultado.

Déjame mostrarte cómo puse eso en su lugar ...

Primero, dibujé un Rectángulo (R) con las mismas dimensiones que la Superposición de color que había creado anteriormente, y luego simplemente le di un relleno de Imagen.

Luego creé un nuevo Rectángulo (R), exactamente de las mismas dimensiones, lo coloqué sobre la imagen y luego apliqué el Estilo de superposición / capa negra que había creado anteriormente.

Como mencioné antes, ahora tenía un punto de referencia razonablemente sólido sobre cómo se verían mis Superposiciones cuando se usaban contra una imagen, y las ajustaba en consecuencia hasta que estuviera contento con el resultado.

Duotono

Finalmente, para la imagen Duotone, nos centraremos en el estilo único para este tutorial, pero en el Sistema de diseño Cabana creé alrededor de 9 variantes de estilo.

Sí, algo como Duotone o Gradients puede estar ahí solo para los ojos dulces, y no es realmente un elemento requerido de su propio Sistema de Diseño, como Base Colors o Box Shadows, pero los introduje porque, bueno, ¿por qué no? Nunca se sabe cuándo un proyecto puede recurrir a ellos.

Okay. Antes de terminar esta parte, permítame mostrarle cómo creé rápidamente una de las imágenes de Duotone dentro de mi propio sistema y el archivo de formato (de inicio). Llamemos a esto una sección de bonificación :)

Como había hecho anteriormente con la referencia de imagen superpuesta, creé un rectángulo (R) y luego apliqué un relleno de imagen.

Luego fue solo un caso de agregar un par de Rellenos de Color adicionales al elemento, y ajustar los modos de Fusión hasta que obtuve algo que podría pasar como "Duotono". Que en el caso del ejemplo incluido en el archivo de inicio fue un poco como esto (cue la música) ...

  • # 041674 y Aligerar
  • # 1EDE81 y multiplicar

Luego simplemente arrastré para reorganizar los rellenos en el Inspector hasta que tuve algo como lo siguiente ...

Y luego le dio un nombre kerrr-aaazzyy como referencia (es decir, Duende Verde). ¡Sí, mi ingenio no conoce límites!

Okay. Eso cierra la primera parte de esta serie de tutoriales. Acompáñenme aquí para la segunda parte, donde hablaré sobre el elemento de tipografía del sistema de diseño utilizado más adelante en el tutorial, así como algunos consejos y sugerencias invaluables sobre cómo armar esta sección de mi propio sistema de diseño.

Salta a la Parte Dos aquí ...

¿Quiere mejorar su flujo de trabajo con un sistema de diseño con todas las funciones? 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 las papitas fritas