Tutoriales de croquis

Una guía paso a paso para iniciar un nuevo proyecto de diseño de aplicaciones en Sketch

Y por qué nunca, NUNCA los comienzo desde cero.

Creo firmemente en la transparencia, así que antes de comenzar, te debo esto:
Algunas partes de esta publicación hacen referencia a un marco de diseño que yo mismo construí, y lo vendo a un lado. Dicho esto, esta guía seguirá siendo útil incluso si no vas a comprarla.

Comenzar un proyecto de diseño es difícil.

No importa si eres un diseñador independiente, trabajas para una agencia de productos de moda o ayudas a un gran equipo de diseño empresarial ... es desalentador.

Trabajo en una agencia de diseño que contrata nuevos clientes mensualmente. Mi título no oficial es algo así como Product Concept Designer, que básicamente significa que cada vez que comenzamos con un nuevo cliente, obtengo el emocionante trabajo de crear pantallas conceptuales visionarias que ayudan a inspirar su hoja de ruta de productos para el próximo año (o dos ... o tres )

Estos conceptos vienen con plazos ajustados y requieren una respuesta rápida, por lo que TODO EL MUNDO se centra en la eficiencia y la precisión; mis maquetas tienen que resolver el problema, proporcionar visión y ser pulidas para una transición suave al diseño de producción.

Por lo que puedo ver, me he vuelto bastante eficiente, y pensé que otros diseñadores podrían encontrar beneficios al ver cómo inicio nuevos proyectos.

Nota: no te estoy mostrando cómo preparar toda la comida ... solo cómo cortar los ingredientes y encender la estufa

Tabla de contenido / Versión abreviada / "No estoy leyendo todo eso":

  1. Crear las carpetas de archivos (sí, de verdad)
  2. Elige los colores
  3. Elija el tipo de letra
  4. Configurar la cuadrícula
  5. Construir un "Blockframe"
  6. Convertir a alta fidelidad

1. Crear las carpetas de archivos

Por qué: ¡Para mantener organizados mis archivos y activos de diseño!
Herramienta (s) que uso: Finder + Automation (abajo)

Si no comienza con el pie derecho, tropezará todo el camino. La estructura de mi carpeta me ayuda a mantenerme organizado y me brinda una forma de compartir recursos de diseño con varias partes (marketing, desarrollo, etc.).

Agrego un _underscore para asegurarme de que esas carpetas permanezcan en la parte superior de la lista.
  • _assets: esta carpeta generalmente se comparte con equipos de desarrollo internos / externos. Incluye todo lo que necesitarán para crear la aplicación (imágenes / contenido ficticios, fuentes, iconos, imágenes y logotipos).
  • _exportaciones: cada vez que exporto una pantalla a PNG, van aquí. Esta carpeta se comparte con el marketing, por lo que siempre tienen las últimas pantallas a mano para colocar en diversos materiales de marketing (mazos, páginas web, redes sociales).
  • ui-design: estos son mis archivos fuente. Por lo general, es solo un archivo, pero si alguna vez creo nuevos, se almacenan aquí.

Creé una automatización para crear todas estas carpetas para mí ...

... y puedes obtenerlo aquí gratis:

2. Elige los colores

Por qué: para crear una paleta de diseño base para mi proyecto.
Herramienta (s) que uso: Coolors.co

Elegir colores es la forma más fácil de comenzar. Si está trabajando en un sistema de diseño existente, estos probablemente ya estén definidos, en cuyo caso, pregúntele a alguien en marketing o diseño visual.

Mis sistemas de diseño siempre se basan en 5 colores principales:

  • Marca primaria
  • Negro
  • Acento 1 (éxito)
  • Acento 2 (Advertencia)
  • Acento 3 (peligro)

¿Por qué estos colores? (consulte la sección 2 de ese artículo)

Utilizo una aplicación llamada Coolors de Fabrizio Bianchi para ayudarme a generar una paleta. Presiona la barra espaciadora y elegirá colores al azar para usted. Cuando encuentre un color que le guste, bloquéelo y continúe generando hasta que encuentre sus otros colores. Si el color de su marca ya está definido, puede ingresar el valor hexadecimal, bloquear ese color y luego presionar la barra espaciadora para generar el resto de los colores.

¿Ves un buen color de

Una vez que haya identificado cada uno de mis colores principales, los conectaré a mi archivo de plantilla de diseño de Sketch. Este archivo de plantilla ya tiene estilos de capa definidos, por lo que los estoy actualizando con los colores que acabo de generar:

Mi plantilla también tiene un color

Para obtener detalles sobre cómo crear una hoja de estilo completa, lea esto:

3. Elija los tipos de letra

Por qué: ¡Para darle algo de carácter a mi aplicación!
Herramienta (s) que uso: Google Fonts y Font Pair

Los tipos de letra son tan importantes para el diseño como los colores, así que tómate un tiempo para elegir el (los) correcto (s). Debido a que está diseñando una aplicación para que la usen las personas, es increíblemente importante que elija una buena tipografía.

Hola Jon, ¿qué hace una buena tipografía para los diseños de aplicaciones?

Hola, me alegra que hayas preguntado Aquí hay algunas preguntas que me hago cuando elijo un tipo de letra:

  • Legibilidad: ¿es legible por largos períodos de tiempo?
  • Escalabilidad: ¿es legible cuando es grande y cuando es pequeño?
  • Variabilidad: ¿hay al menos dos variaciones de peso?

Google Fonts actualizó su interfaz el año pasado y es realmente fantástico de usar. Siempre me aseguro de probar cosas sobre un fondo blanco y negro solo para verificar que todo sigue funcionando.

La configuración en el panel derecho es la forma en que me gusta abarcar mi búsqueda.

Si le gustan los tipos de letra múltiples, por ejemplo, uno para los encabezados y el otro para el contenido, cavará Par de fuentes. Hicieron el trabajo duro por usted y le mostrarán, en línea, cómo se ven dos fuentes una al lado de la otra. Hace que sea realmente sencillo elegir un par bonito. Además, obtiene todas las fuentes de Google Fonts, por lo que no tiene que preocuparse por la necesidad de pagar por nada.

Siempre pruebe las fuentes con letras, números y signos de puntuación. A veces encontrarás una hermosa fuente que tiene un extraño "9" o un extraño signo de exclamación. No querrás encontrar esa rareza cuando ya tienes 24 pantallas en tu diseño.

Una vez que haya elegido su tipo de letra, cree estilos de texto dentro de Sketch para elementos como encabezados, contenido del cuerpo y enlaces. Nunca debe agregar texto a un diseño a menos que esté vinculado a un estilo de texto. Si decide cambiar la fuente en el futuro y tiene texto "sin asignar", no se actualizarán cuando sincronice el cambio de fuente.

Mi archivo de plantilla Sketch tiene todos estos tamaños de texto estándar ya definidos, por lo que puedo seleccionarlos todos, cambiar la fuente y sincronizar:

4. Configure la cuadrícula

Por qué: para establecer la coherencia de alineación en toda la aplicación.
Herramienta (s) que uso: Sketch y una calculadora

Se ha vuelto bastante común que las cuadrículas se construyan a partir de múltiplos de 8.

¿Por qué 8?

Resulta que las resoluciones de pantalla más populares son divisibles por 8. En la tabla a continuación, las columnas prueban si el ancho y la altura son divisibles por 8px:

Más detalles aquí: https://spec.fm/specifics/8-pt-grid

Con esta información, puede comenzar a decidir el tamaño de su cuadrícula. Primero, decida cómo aparecerá su aplicación:

  • Ancho completo: una aplicación de ancho completo es de borde a borde. Si se trata de una aplicación web, su diseño se extenderá hasta los bordes del navegador.
Me gusta configurar mis canales para que tengan al menos 24 px. En este caso, los canales son divisibles por 8, pero las columnas no lo son. No es un gran problema.
  • Flotante: una aplicación flotante se adhiere a una cuadrícula de ancho fijo, generalmente en el centro de la ventana.

Para las aplicaciones flotantes, me gusta que mis canales y columnas sean divisibles por 8. Aquí hay una ecuación simple:

(12 columnas * Ancho) + (11 Canalones * Ancho) = Ancho total de diseño

  • Híbrido: una aplicación híbrida es una combinación de elementos de ancho completo y flotantes. El sitio web de Medium es una aplicación híbrida porque el encabezado superior es de ancho completo, pero el área de contenido está fijada en 740 px.
Este diseño es un diseño flotante con algunos elementos de ancho completo.

Una nota final. La distancia predeterminada Shift + → en Sketch es 10px. Esto será SUPER molesto cuando trabajes en una cuadrícula de 8px. Afortunadamente, Sketch te permite cambiar esto en las preferencias.

5. Construya un "Blockframe"

Por qué: para iterar rápidamente en diseños de aplicaciones y flujos de interacción UX.
Herramienta (s) que uso: Bueno ... rectángulos.

Antes de ingresar al modo de estructura alámbrica, me gusta construir lo que llamo un "bloque de estructura" para establecer las diversas regiones de mi (s) diseño (s) de página. La idea aquí es comenzar a tener una idea de la cuadrícula que acaba de definir y bloquear rápidamente las partes más importantes de la página.

Aquí hay un marco de bloques que hice para una aplicación de chat que estoy diseñando:

No hay razonamiento detrás de los colores. Aparentemente me sentía patriótico.

Esto solo me llevó unos 90 segundos generarlo, pero es toda la orientación que necesitaré para comenzar a diseñar la interfaz. Prefiero esto a la estructura de alambre en toda regla porque tiendo a derivar en alta fidelidad cuando trato de enmarcar cada elemento en la pantalla. ¿Tal vez solo soy un mal diseñador? Acabo de ver muchos wireframes que ya son tan detallados que bien podrías haberlo hecho con total fidelidad visual la primera vez ‘ronda de todos modos. ¡Solo es mi opinión!

Esta es básicamente la fase de UX donde bloquearé los flujos de trabajo de la aplicación de trama para asegurarme de que cada interacción genere una experiencia de usuario positiva.

6. Convertir a Hi-Fi

Así que no quiero dejarte colgando ...

... pero aquí es donde haces tu magia!

Lo más importante durante la fase de diseño de alta fidelidad es cumplir con todo lo que configuramos en los pasos 1–5.

  • Guarde las cosas en las carpetas correctas.
  • Solo use colores en su paleta.
  • No te desvíes de tus estilos de texto.
  • Siempre conforme a su cuadrícula.
  • Blockframe nuevos diseños antes de hacerlos en alta fidelidad.

Resumen

Esos son los pasos que tomo para comenzar un nuevo proyecto de diseño de aplicaciones. Si está interesado en el archivo de plantilla Sketch que uso para todos mis proyectos, lo he puesto a disposición a continuación. Más detalles disponibles aquí.

Cuando no estoy escribiendo, estoy trabajando en herramientas de diseño de bocetos como UX Power Tools para hacerte un diseñador mejor y más eficiente. Lo están utilizando todos los mejores diseñadores y equipos de Sketch, y creo que también te puede gustar. ¡Míralo en Marvel!

Sigue a UX Power Tools en Twitter
Sigueme en Twitter