Tutoriales de croquis

5 maneras de mantener limpia tu cocina de croquis

¡Mira qué bien se agrupa esa comida dentro de su caja delimitadora! ¡Tan fresco! ¡Muy limpio!

Descargo de responsabilidad: acabo de comer, así que la comida está en mi mente. Solo rueda conmigo.

Si miras The Travel Channel o The Food Network tanto como yo, habrás visto muchas cocinas increíbles de los mejores restaurantes de todo el mundo. ¿Algo que todos tienen en común? Cocinas impecablemente limpias.

¡Una cocina tan limpia que dejan ver a los clientes!

Restaurantes como The Alinea en Chicago toman su limpieza muy en serio, y la prueba está en su budín (aunque dudo que un restaurante con 3 estrellas Michelin sirva budín). Esto es lo que alguien dijo sobre el ritual de limpieza de la cocina Alinea:

Limpiamos al menos 4 veces durante las 9 a 10 horas que estuve allí [visitando]. Cuatro grandes limpiezas y numerosas limpiezas más pequeñas. Agregue eso a los barridos de línea constantes y aspire cada 20 minutos. La estación de todos estaba impecable, y si era menos que perfecta, el chef se aseguraría de barrerlo, regañarlo y arreglarlo. Fue propicio para trabajar limpio, tener un ambiente tan limpio. Todo estaba brillante, no había "suciedad de cocina" en ningún lado. Todo el equipo: los refrigeradores, el estante inferior de la mesa de preparación, el fondo de las ollas y sartenes, el fondo de las sartenes del hotel, la parte posterior del equipo, los estantes debajo de la línea, las ventanas, todo estaba limpio. Esta era una cocina en la que cualquier superficie estaba lo suficientemente limpia como para comer. (más aquí)

Cuanto más limpia esté su cocina, mejor será su producto. Aquí hay un par de recomendaciones para evitar la "suciedad de la cocina" en sus diseños de Sketch para que sea eficiente y sus entregas se mantengan pulidas:

1. Se adhieren a una cuadrícula de referencia

No te voy a decir que uses ningún tamaño en particular, siempre y cuando lo mantengas. Personalmente, prefiero una cuadrícula de referencia de 8px porque funciona muy bien con varios estándares tipográficos y tiene más divisores (1, 2, 4, 8px) frente a (1, 5, 10px), pero sé que las cuadrículas de referencia de 10px son populares ya que todo el diseño Las aplicaciones se envían con Shift + ← como 10px. Así que usa lo que flote en tu remolcador. Puede usar Nudg.it para cambiar la distancia predeterminada Shift + ← para ahorrar tiempo. Esto hace maravillas cuando está diseñando en un estilo como Google Material Design que funciona fuera de una cuadrícula de 8px.

Pegarse a una cuadrícula hará que los componentes de espaciado sean muy fáciles y garantizará un ritmo visual perfecto. Elimina las conjeturas al espaciar los componentes, porque las distancias deben ser múltiplos del valor de la cuadrícula de referencia. Como beneficio adicional, sus desarrolladores lo amarán porque probablemente estarán trabajando con un marco de diseño que se adhiera a un sistema de cuadrícula.

2. Use cuadros delimitadores

Una vez que haya configurado su cuadrícula de referencia, es increíblemente útil usar cuadros delimitadores para mantener los objetos en su mesa de trabajo organizados y espaciados de manera consistente. En la imagen a continuación, uso cuadros delimitadores para cada elemento de pestaña, y en realidad no tengo que poner ningún espacio entre los grupos de pestañas. El espacio está integrado en el cuadro delimitador, por lo que cada pestaña está ajustada contra la que está al lado. El uso de un complemento como el botón Relabel de Ken Moore le permitirá crear pestañas espaciadas uniformemente como esta en segundos.

Además, los objetos con cuadros delimitadores tienen áreas de clic más grandes y le permiten usar cosas como sombras internas como divisores o marcadores. Lo que nos lleva a ...

3. Nunca use líneas para divisores

Mientras estamos en el tema de los tamaños de área de clic, ¿podemos hablar sobre lo difícil que es tomar un segmento de línea? Es como si Sketch dijera "Sabemos que hay 2 millones de píxeles en la pantalla, pero debe hacer clic en este. No es que ... no ... el ... no ... casi ... clavado ... no.

En segundo lugar, incluso si selecciona la opción Ajustar al píxel en Preferencias de boceto, arrastrar el tamaño de una línea siempre la colocará en subpíxeles. Súper agravante, y realmente arruinará su espacio en otro lugar porque la regla redondeará los valores para cualquier objeto que se encuentre en subpíxeles.

Entonces, ¿qué deberías hacer en su lugar? Recomiendo usar sombras internas para dibujar líneas. Dibuja un rectángulo y dale una sombra interior así:

¿Por qué es esto mejor? Ahora tiene un área de clic mucho más grande, está protegido del temido subpíxel y, lo más importante, puede usarlo como estilo. Imagine que está creando una lista de elementos y desea una línea que separe cada elemento. En lugar de un montón de texto más una línea, ahora puede configurar su cuadro delimitador y darle una sombra interna. ¡¿Cuan genial es eso?!

Nota: Hasta que Sketch admita bordes con lados controlables, he descubierto que las sombras internas son el mejor método para cosas como esta.

4. Organiza tus estilos y símbolos

Este es fácil. ¿Sabía que puede crear submenús de estilo y símbolo en Sketch? Al poner barras en sus nombres de estilo y símbolo, puede crear una estructura organizada de "carpeta" para encontrar cosas más tarde.

¡Incluso alfabetiza las cosas en tu submenú para ti! Gracias Sketch!

5. Nombra tus capas ... todas ellas

Seleccione un objeto en su mesa de trabajo y aprenda esta secuencia de teclas de acceso rápido:

Comando + Mayús + J
Comando + R

¡¿Entendido?! Debe seleccionar la capa en su lista de capas, luego resaltar el nombre de la capa para permitirle cambiarla. Sugerencia: ¡Use la tecla Tab para saltar a la siguiente capa en su lista de capas para cambiarle el nombre a esa también! ¡Recomiendo este complemento de Rodrigo Soares para cambiar el nombre de varias capas a la vez, buscar y reemplazar y cambiar el nombre con secuencia!

En la captura de pantalla anterior, verá que he llamado a la capa "Jason Burke" "Nombre". ¿Por qué? Bueno porque eso es lo que es. De forma predeterminada, Sketch asignará un nombre a la capa según el texto que contenga, pero ver "Jason Burke" en una lista de potencialmente cientos de capas no es particularmente útil para mí.

Entonces, ¿qué ... no es un gran problema? No, realmente no. Pero donde se vuelve excepcionalmente útil es cuando puedes hacer cosas como esta:

Confesión: nunca usé la función de búsqueda para buscar capas, pero una vez que comencé a nombrar las capas semánticamente para describir cuál era el contenido y no lo que decía el contenido, me di cuenta del poder de buscar capas.

Una última cosa ... limpia a medida que avanzas. Cuando termine de diseñar ese elemento de la lista, cámbiele el nombre. Agruparlo! Si te sientes salvaje ... ¡simbolízalo! Pequeñas cantidades de trabajo en el camino le ahorrarán un montón de tiempo a largo plazo.

A nadie le gusta limpiar una torre de platos sucios después de pasar una hora cocinando la cena, ¡así que hazte un favor y limpia a medida que avanzas! ¡Feliz bosquejo!

Muchas de las imágenes utilizadas en esta publicación fueron tomadas directamente de UX Power Tools que hemos diseñado meticulosamente teniendo en cuenta estas (y otras) técnicas.

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