Tutoriales de croquis

5 cosas que debe hacer antes de comenzar su próximo archivo de diseño en Sketch o preparar su diseño "mise en place"

¡Nuestra nueva Guía de estilo está disponible con todos los consejos expuestos en este artículo!

Graduarse de la escuela de chef y entrar en el mundo real no es tan glamoroso como se podría pensar (así que me he reunido). No solo obtienes tu título, te pones un sombrero de chef y abres un restaurante en una parte moderna de la ciudad.

¡No sería lindo!

No, la mayoría de los chefs se unen al mundo culinario preparando la puesta en marcha. ¿No hablas francés? ¡Yo tampoco! Mise en place significa "todo en su lugar" y se refiere a la preparación y organización de los ingredientes antes del servicio de la cena.

¿Sabes cómo Rachael Ray siempre tiene esos pequeños cuencos de ingredientes en porciones cuando hace una de sus comidas de 30 minutos que juro que en realidad toma al menos una hora? Bueno, resulta que eso no está muy lejos de lo que hacen las cocinas profesionales antes de cada servicio de cena. Mira esto:

Esta organización me hace sentir cálido y confuso.

Los jóvenes chefs de Greenhorn llegan a la cocina horas antes del servicio para picar cada verdura, recortar cada filete y preparar todas las salsas (entre muchas otras tareas). Al hacerlo, están permitiendo que el restaurante prepare exquisitos platos con múltiples platos para alimentar a su cara gorda y lo lleve a la puerta en menos de dos horas. Si esperaban hasta recibir una orden para preparar todos los ingredientes, el servicio tomaría horas, los platos serían inconsistentes y la cocina simplemente no podría sostenerse.

Los diseñadores de productos siempre deben preparar su puesta en marcha antes de sumergirse en el "servicio de cena" de diseño.

Antes de comenzar a diseñar docenas de pantallas y flujos de trabajo, es importante prepararse para el éxito del diseño sostenible. Aquí hay cinco consejos para preparar su puesta en marcha de diseño:

1. Configurar tipografía y estilos de texto

Este primero es obvio, pero puede ser una tarea real. No hay forma más directa de que los usuarios interactúen y entiendan su producto que a través de las palabras, por lo que es importante que lo hagamos bien.

Me gusta ofrecer la mayor variedad posible de tamaños y estilos de texto, por lo que mi hoja de tipografía se ve así (¡siempre creo una versión oscura también!):

Es muy rápido cambiar la fuente si cambio de opinión en el futuro: 1) Seleccionar todo, 2) Cambiar fuente, 3) Sincronizar estilos. ¡Hecho!

Cada estilo tiene cuatro subtipos:

  • Predeterminado (generalmente 80–100% de transparencia)
  • Secundario (50–70% de transparencia)
  • Discapacitados (20–40%)
  • Acento (generalmente el color de mi marca)

¿Por qué uso la transparencia en lugar de los valores hexadecimales?

Es un pequeño truco para asegurarse de que su texto se vea bien sobre cualquier color de fondo. En la imagen a continuación, la transparencia (segunda línea) se ve mucho mejor que el gris (primera línea) porque ha adquirido el tono del color debajo. No hay trucos; La segunda línea de texto es exactamente la misma en cada escenario de color. Es solo la transparencia que trabaja para usted lo que los hace parecer diferentes estilos de texto. Todo por el precio de uno. ¡Que conveniente!

No voy a entrar en la mecánica de elegir buenos tamaños de fuente en esta publicación, pero revise Tipografía en diez minutos para un curso rápido.

Por último, es imprescindible que cree un estilo de texto de boceto para cada estilo que defina. Si decide en el futuro que desea que su color "deshabilitado" sea del 25% en lugar del 30%, todo lo que tiene que hacer es cambiarlo en un solo lugar y se colocará en cascada en su documento.

Sugerencia: el uso de barras en los nombres de estilo de texto (ver arriba) creará pequeños submenús en el menú desplegable de estilos:

Mis estilos

2. Configurar colores y estilos de objetos

Hay CINCO colores base que debes descubrir antes que nada:

Colores base

  • Marca: este es el color de tu marca, bastante sencillo.
  • Negro: establezca una base negra que usará para todo tipo de diseños. Me gusta evitar el negro puro y, en cambio, crear un negro teñido con el color de mi marca (o uno complementario). Ver la imagen de abajo.
Toma el color de tu marca y coloca un cuadrado negro del 80-90% sobre él. Coloca este color como tu base negra. ¡Es sutil, pero hará la diferencia! El que está en la parte inferior derecha es lo que usaría.

Colores estatales

  • Error: alguna variante del rojo. Este estado les permite a los usuarios saber cuándo algo salió mal. El rojo puro es un poco demasiado. Tíñalo con amarillo o azul para que sea más fácil para los ojos.
  • Advertencia: alguna variante de amarillo. Este estado les permite a los usuarios saber cuándo algo aún no ha salido mal, pero podría generar problemas. No hagas este amarillo demasiado eléctrico; el mío suele ser un poco más naranja, por lo que se puede leer sobre blanco.
  • Éxito: alguna variante del verde. Este estado les permite a los usuarios saber que todo es maravilloso. Prefiero que los colores de la aplicación sean un poco más frescos, por lo que haré que mi verde sea un poco más azul.
De izquierda a derecha: marca, negro, error, advertencia, éxito.

¿Por qué solo cinco colores? Creo firmemente que los colores deben usarse muy deliberadamente en un producto. No hagas algo morado solo para hacerlo morado. Mis diseños están construidos en blanco y negro A MENOS QUE esté tratando de llamar la atención sobre algo.

Los colores adicionales son apropiados para cosas como cuadros y gráficos, pero deben usar colores diferentes a los colores de su estado base.

Estilos de objeto

Estos son un poco más difíciles de configurar por adelantado, pero siguen siendo geniales para ahorrar tiempo. Los estilos de objeto son desde fondos de tarjetas hasta cuadros de límite de elementos de lista. Aquí hay una hoja con algunos de mis estilos de objeto:

Utilizo estos estilos cada vez que creo objetos, y si quiero actualizar el estilo base, simplemente vengo a esta hoja y la sincronizo en todas mis páginas. Es un gran ahorro de tiempo, especialmente después de varios meses de diseñar pantallas para un cliente en un archivo con 97 pantallas. ¡Mama Mia!

3. Crear páginas y tableros de arte

Este es bastante fácil, pero te ayudará a mantener la cordura. Decide por adelantado cómo quieres organizar tus diseños:

  • Por característica: en una aplicación de alimentos, es posible que tenga una página configurada para todos los tableros de arte de "recetas" y una página separada para todos los tableros de arte de "perfil"
  • Por rol de usuario: en la aplicación Medium, es posible que tenga una página configurada para todos los tableros de arte de "lector" y una página separada configurada para todos los tableros de arte de "remitente"
  • Por flujo de trabajo: en la aplicación Uber, es posible que tenga una página configurada con todos los tableros de arte en su flujo de trabajo "Pedido de un automóvil", y otra para el flujo de trabajo "Agregar una tarjeta de crédito".

Cualquiera de los anteriores está bien, pero comprométete a algo temprano y quédate con él.

ProTip: si está utilizando InVision, utilizar Pages para organizar sus tableros de arte podría eventualmente dar sus frutos. Me puse en contacto con su equipo de soporte acerca de cómo se sincronizan los tableros de arte y las páginas con InVision, preguntándoles si crearían automáticamente secciones para mí basadas en los títulos de mis páginas. Es decir, cada página será una sección, y todos los tableros de arte en esa página estarán en esa sección en InVision. Dijeron que actualmente no era compatible, pero que habían recibido muchas solicitudes, por lo que todos deberían enviarles un tweet solicitando esta función. ¡Agreguemos esta característica [obvia]!

Aquí están las páginas del kit UX Power Tools en las que estamos trabajando para que pueda ver cómo hemos dividido las cosas. Sugerencia: si agrega un guión al comienzo de su página o nombre del tablero de arte, ¡no se sincronizarán con InVision!

4. Configure su sistema de cuadrícula y diseño

El sistema de cuadrícula es tan importante que ya he hablado antes. Pero solo tendrás que escucharme hablar de eso otra vez

Todos estos consejos son para facilitarle las cosas y reducir la cantidad de decisiones que debe tomar mientras diseña.

Configurar su sistema de cuadrícula hará que el diseño y el posicionamiento sean un acto muy pasivo; ni siquiera tendrá que pensar en qué distancia deben separarse las cosas porque conoce los incrementos de su sistema de cuadrícula e incluso ha ajustado los valores predeterminados de empuje de Sketch para cumplirlos.

La cuadrícula de 12 columnas sigue siendo la más popular porque tiene la mayoría de los divisores de columna: 1, 2, 3, 4, 6 y 12.

Aquí hay un vistazo a la configuración de diseño de cuadrícula de 8px-base detrás de la pantalla de arriba:

Esta es una aplicación de ancho completo con un área de contenido flotante. A medida que crece el ancho del navegador, la cuadrícula de 12 columnas permanecerá en el centro del área de contenido.

Algo a tener en cuenta cuando está configurando su diseño. Dependiendo del diseño de su aplicación (de borde a borde versus flotante), es posible que necesite tener guías de diseño separadas en cada página.

Este es un diseño de ancho fijo (flotante) con un encabezado de ancho completo.

Bonificación adicional: sus amigos desarrolladores lo amarán por configurar y adherirse a esta cuadrícula porque cada marco se encuentra en la parte superior de un sistema de cuadrícula como este.

Una nota final: personalmente no configuro filas en Sketch porque varía mucho de una página a otra. Sin embargo, siéntase libre de hacer esto si lo desea.

5. Importar y simbolizar activos de marca

¡Casi termino! Respiracion profunda.

Lo último que debe hacer es importar cualquiera / todos los activos de marca. Esto podría ser tan simple como un logotipo o tan grande como un conjunto de iconos de aplicaciones de marca. Lo importante es que convierta cada uno de estos activos en símbolos.

¡Mantenlo simple, pero mantenlos como símbolos!

¿Por qué?

Pues ponte los pantalones de tu imaginación y supongamos que has diseñado 75 pantallas con tu logotipo y eslogan en el encabezado de navegación. El departamento de marketing ha decidido que quieren deshacerse del eslogan porque aparentemente "Just Do It" ya se ha tomado, y algunas grandes empresas amenazan con demandar. ¿Cómo podría haberme perdido eso?

Bueno, Danny, el diseñador, se burló y no simbolizó su logotipo. Entonces, Danny the Designer tiene que actualizarlo en 75 pantallas individuales porque se están utilizando en materiales de marketing y las necesidades legales que eliminó ese eslogan.

No seas como Danny.

En un golpe de genio, Sandy the Sketcher decidió simbolizar el logotipo desde el primer momento. Actualizó el símbolo base en su guía de estilo, luego presionó el botón de sincronización para actualizarlo en todas sus páginas. Mientras Sandy está bebiendo Piña Coladas, Danny está sudando a través de docenas de páginas actualizando logotipos.

Se como Sandy.

¡Eso es! Ya ha preparado su puesta en marcha de diseño y está listo para comenzar su "servicio de cena de diseño".

Auto-promoción descarada:

Todo en la Guía de estilo de UX Power Tools está construido utilizando todos los consejos expuestos en este artículo. Esa hoja de tipografía masiva? Ya configurado con docenas de estilos de texto. Esa hoja de estilos de objetos? Sí, esos también!

Compruébelo en https://www.uxpower.tools y síganos en Twitter @uxpowertools. Sígueme también, si te entretuviste: @thejmoore.