Tutoriales de croquis

9 consejos para diseñar más rápido y más eficientemente para que no te vuelvas loco

Sí, es una lista. Pero estos son buenos.

Nota del autor y Shameless Plug: Estas son técnicas que aprendí al construir el sistema de diseño UX Power Tools. Soy un diseñador activo y uso este sistema durante 10 horas al día, junto con todas las técnicas mencionadas en este artículo. Si no creyera en ello, no estaría escribiendo sobre eso

1. Usa estilos

Me duele la frecuencia con la que hay que decirlo, pero lo seguiré diciendo hasta que empieces a hacerlo

Los cambios fundamentales llegarán a Sketch muy pronto, lo que hará que sus vidas sean MUCHO MÁS FÁCILES si simplemente se abrocha el cinturón y comienza a usar estilos. No hay mejor momento que ahora.

El uso de estilos de texto y estilos de capa hace que su diseño sea más consistente, y lo creas o no, terminarás trabajando más rápido.

2. Haz una hoja de estilo

Lectura no requerida pero altamente alentada:

Las hojas de estilo son muy importantes en CSS porque le permiten administrar de manera centralizada cómo aparecen visualmente las cosas en un sitio web. Realice un cambio en el estilo del botón y se actualizarán todos los botones en todo el sitio.

No hay razón para no crear uno para proyectos de diseño para que tenga un nivel de control similar. Todo lo que tiene que hacer es tener una mesa de trabajo única con una sola instancia de cada estilo de texto guardado y estilo de capa. Siempre que use estos estilos en todo su diseño, siempre podrá volver a visitar esta mesa de trabajo de hoja de estilo si alguna vez desea actualizar la fuente.

El sistema de diseño UX Power Tools está construido sobre una hoja de estilo central. Puede cambiar las fuentes y los colores en una sola página, sincronizar sus cambios y todo el sistema se actualizará para reflejar sus actualizaciones. Es genial y me ahorra un montón de tiempo cuando estoy trabajando en proyectos masivos de clientes.

3. Use Transparencia

Esto es realmente un truco de fiesta divertido, pero le mostré esta técnica a un desarrollador frontend la semana pasada y todavía estoy limpiando la sala de conferencias donde explotó su mente.

¿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 de ella. 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!

Este pequeño truco también se puede usar para los bordes de los botones. ¿Sabes cómo a veces quieres un botón rojo con un borde rojo ligeramente más oscuro? Pruebe un borde interior con 25% de negro:

Un borde negro transparente te ayuda a imitar un borde de color más oscuro sin el dolor de cabeza de valor hexadecimal.

4. Hacer un símbolo de estado vacío

Hace poco comencé a hacer esto, pero es realmente un buen ahorro de tiempo. Para cosas como cuadrículas de datos o páginas donde puede haber o no datos dependiendo de lo que se haya creado o configurado, es una buena idea tener un buen estado vacío para que el usuario sepa que no se pierden todas las esperanzas.

Diseñe un símbolo de estado vacío estándar, luego puede reutilizarlo rápidamente más tarde. Por lo general, tengo un título, descripción, ilustración y botón de acción:

Ilustración de mi colega maravillosamente talentoso, Parker McCullough.

Para obtener puntos de bonificación, convierta su ilustración en un símbolo anidado para poder intercambiarlos según la página en la que se encuentre.

Lo que me lleva a ...

5. Crear una biblioteca de ilustraciones

Esta es una técnica un poco avanzada, pero es un concepto simple que facilitará su vida y la de su ilustrador favorito también (¡gracias, Parker)!

Las bibliotecas de bocetos han estado fuera por un tiempo, pero la mayoría de las personas las usan para administrar sus sistemas de diseño. ¡Recomiendo usarlo para administrar su biblioteca de ilustraciones también!

Cree un archivo de boceto separado para las ilustraciones, luego agréguelo como una biblioteca:

En su biblioteca de ilustraciones, cree mesas de trabajo para cada ilustración personalizada que necesite, luego importe esos símbolos en su archivo de diseño como marcadores de posición:

Esto permite que su ilustrador trabaje por su cuenta en cualquier programa vectorial que desee (como Illustrator o Affinity Designer). Cuando terminan una ilustración, solo tienen que colocarla en la mesa de trabajo apropiada en su archivo de biblioteca de ilustraciones. Sketch le notificará las actualizaciones de la biblioteca, y todo lo que tiene que hacer es sincronizar los cambios. Ahora su nueva y brillante ilustración está allí en todo su esplendor:

Ilustración de mi colega maravillosamente talentoso, Parker McCullough.

Muy bien, ¿eh?

6. Use iconos consistentes

Los iconos de Nucleo son, con mucho, los mejores iconos que existen en Internet. El conjunto no solo es enorme y diverso, sino que su aplicación de escritorio es increíble.

Puede cambiar de iconos rellenos a iconos de línea, cambiar el peso e incluso definir un color de acento:

Como si eso no fuera suficiente, nunca he encontrado una manera más fácil de preparar íconos para desarrolladores que su función de exportación:

En serio, no es mucho más fácil que eso.

7. Use el complemento organizador de la mesa de trabajo de Ale Muñoz

Me da vergüenza decir que no sabía que esto existía hasta hace aproximadamente un mes, pero lo he estado usando obsesivamente desde entonces.

Este complemento fue creado por uno de los desarrolladores principales de Sketch, por lo que es así. sólo. trabajos.

Descarguelo aqui:

Presione Control-Option-Command-A en su teclado y todas sus mesas de trabajo se alinearán mágicamente y se agruparán vertical y horizontalmente. Las filas de las mesas de trabajo representan agrupaciones (50 píxeles entre cada mesa de trabajo), y las agrupaciones están separadas verticalmente por 250 píxeles.

Las dos mejores características de este complemento son: Artboard Snapping y Layer Reordering. Cuando arrastra una mesa de trabajo a una nueva fila, se ajustará automáticamente en su lugar, incluso si la arrastra entre otras mesas de trabajo. Aún mejor, esa mesa de trabajo se colocará en la relación correcta con todas las otras mesas de trabajo en la lista de capas. ¡Te lo digo, nunca me había sentido tan organizado en mi vida!

Tan limpio y ordenado!

8. Construir una arquitectura de producto (ver arriba)

Una vez que tenga instalado el complemento del n. ° 7, las arquitecturas de productos (probablemente haya un mejor nombre para eso) se vuelven realmente fáciles de construir. La captura de pantalla anterior es una arquitectura de producto real que creé para un proyecto de cliente. Las filas representan características, y cada mesa de trabajo representa una pantalla que hemos identificado que debe diseñarse. Los pequeños son modales.

Estos son maravillosos porque el proceso de diseño literalmente se convierte en un juego de relleno en blanco. Es fácil echar un vistazo a todo el documento para ver qué vacíos aún existen en el diseño, y será obvio si faltan mesas de trabajo.

9. Dale a los modales su propia mesa de trabajo

Este es un pequeño consejo mencionado en el n. ° 8, pero deja de poner tus modales en la parte superior de las mesas de trabajo completas. Está bien si lo haces una vez solo para asegurarte de que se siente bien en el contexto de otra pantalla, pero después de determinar el tamaño correcto, no hay necesidad de seguir mostrándolo sobre otras pantallas.

¿Por qué?

Bueno, ¿qué pasa si actualizas la pantalla bajo ese modal? Ahora tiene que actualizar esa pantalla dos veces: una vez en la pantalla misma y una segunda debajo de esa pantalla modal. Bastante molesto.

Si realiza una actualización de la pantalla de la izquierda, también deberá actualizar la pantalla de la derecha. Eso se pone realmente molesto, REAL RÁPIDO.

La otra ventaja de crear mesas de trabajo modales independientes es que puede vincularlas como cuadros de diálogo modales utilizando la herramienta de creación de prototipos de InVision. Esto permite que un usuario haga clic en un botón en su maqueta InVision y el modal que creó realmente se animará en la pantalla. Luego pueden hacer clic fuera del modal y se "cerrará" tal como lo haría en la aplicación real. ¡A los clientes les encanta esa mierda!

Cuando no busco sentimientos cálidos y confusos, estoy trabajando en recursos como UX Power Tools para hacerte un diseñador mejor y más eficiente.

  1. Sigue a UX Power Tools en Twitter
  2. Sigueme en Twitter
  3. Saluda en LinkedIn
  4. Aprende algunas cosas y suscríbete al blog de mi agencia