Comenzando con el diseño UX en Sketch

Una cartilla para nuevos diseñadores de UX y estudiantes de diseño

Hemos escrito mucho sobre consejos de Sketch en UX Power Tools durante los últimos dos años y quería organizarlos de una manera que ayudara a los diseñadores que recién comienzan a usar UX.

También debo mencionar que no voy a debatir qué herramienta es la mejor. Supongo que ya te has dado cuenta de que Sketch es la mejor (por ahora) y quieres saber cómo usarla como UX Designer

He dividido nuestros artículos en 5 secciones que muestran cómo creo que los nuevos diseñadores progresan de principiantes a maestros:

  • Sacando ideas
  • Empezando
  • Cada vez más rápido
  • Cada vez más inteligente
  • Getting Visual

Sacando ideas

El diseño de UX comienza antes de que llegue a las herramientas: comienza en el punto de sacar ideas de su cabeza (... en realidad comienza mucho antes de eso con la investigación, pero mantengamos este artículo en menos de 20 minutos).

Es cierto que me lanzo directamente a las herramientas digitales desde el principio. Pero eso se debe principalmente a que hago más cosas en mi cabeza y dibujo en colaboración en una pizarra con mi equipo de diseño. Los diseñadores de experiencia de usuario que recién comienzan deberían permanecer en baja fidelidad mientras exploran el espacio del problema y cometen errores.

Una vez que esté listo para obtener algo en la pantalla, creo que hay dos herramientas que facilitan esto realmente bien. La primera es una herramienta InVision llamada Freehand, que revisamos:

La segunda herramienta que facilita esta fase de diseño es un conjunto de bibliotecas premium para Sketch llamado Flowkit por Matt D. Smith. Vale la pena el precio de $ 29.

No solo es excelente para la estructura de alambre de baja fidelidad, sino que se puede usar en etapas posteriores de su diseño cuando necesite mapear flujos de trabajo clave en alta fidelidad para comunicar su diseño.

Empezando

De lejos, la mayor fortaleza de Sketch for UX Design es su énfasis en hacer que las cosas sean repetibles y rápidas.

Todavía es bastante alarmante ver cuántos diseñadores de Sketch no usan cosas tan simples y poderosas como los Estilos compartidos, o avances más recientes como Símbolos anidados. Supongo que es porque los diseñadores se impacientan y solo quieren sacar las cosas. Lo entiendo totalmente.

Pero un gran diseño es tan bueno como un diseñador está organizado. Nos gusta la metáfora de la cocina:

Y también nos gusta expandir el concepto de hojas de estilo del código al diseño (desde que escribimos esto, los sistemas de diseño realmente han explotado en la escena, pero la mayoría de estas técnicas aún son relevantes hoy en día):

Y finalmente, para el santo grial de artículos sobre cómo iniciar un proyecto en Sketch, que lo cubre todo (hasta la estructura de la carpeta):

Con un artículo adicional sobre cómo configurar diseños en Sketch de manera receptiva:

Cada vez más rápido

Bien, ahora que tiene una idea de cómo iniciar un proyecto de Sketch de manera efectiva, es hora de comenzar a acelerar con la herramienta. Personalmente, me resulta ofensivo ver a un diseñador que no usa ningún atajo mientras diseña, es decir, realmente me duele el alma. No seas ese chico / chica:

Desde que escribimos este artículo, han surgido alrededor de un millón y medio de nuevas herramientas y complementos, pero en verdad, los mejores compañeros para Sketch realmente no han cambiado en mi opinión (Nudg.it ahora es compatible de forma nativa en Sketch, Anima sigue siendo útil también a pesar de que parte de él se ha integrado en la funcionalidad de diseño de Sketch):

Consejos y trucos

Jon Moore ha impartido su sabiduría de usuario avanzado en algunos artículos que le sorprenderán en su simplicidad y poder:

Cada vez más inteligente

Sabes cómo configurar un proyecto, has aprendido cómo acelerar con Sketch y ahora es el momento de aplicar todo eso al diseño de UX.

Como dije antes, Sketch es perfecto para el diseño de UX porque facilita la repetición, la consistencia y la modularidad. Aquí hay algunos ejemplos de cómo usar Sketch para hacer elementos de la interfaz de usuario de forma inteligente (y todos vienen con obsequios ):

Manejo eficiente de íconos y gráficos

Cubriremos el lado del diseño visual de UX en la siguiente sección, pero lidiar con los gráficos a menudo está fuera del control de un diseñador de UX. En lugar de preocuparte por crear iconos, sé más inteligente en cómo los usas:

Los símbolos anidados pueden automatizarse bastante:

Finalmente, sería negligente si no señalara el mayor avance de Sketch en los últimos 12 meses - Bibliotecas:

Getting Visual

Como si todo eso no fuera suficiente, los diseñadores de UX de hoy tienen un estándar mucho más alto que cumplir en lo que respecta al diseño visual.

Cuando comencé a diseñar UX, me resultó difícil familiarizarme con los "materiales" que necesitaba diseñar: relaciones de aspecto, tamaños de fuente, pesos, contraste de color, etc.

Para mejorar, comencé copiando los productos existentes para poder tener una idea de cómo estaba compuesta la IU.

Cubrimos este último año y proporcionamos enlaces a algunos productos comunes recreados en Sketch (aunque algunos de ellos han sido rediseñados desde entonces):

A partir de ahí, realmente puede comenzar a usar algunas técnicas pequeñas para agregar un poco de estilo a sus diseños:

Pero no olvide que los datos de muestra precisos son tan críticos para el diseño visual como las imágenes mismas:

* nunca escribimos la parte 2

Por último, pero no menos importante, en algún momento de su carrera tendrá que diseñar un tablero de instrumentos y, a menudo, es una de las mayores pesadillas para un diseñador de UX. Personalmente, considero que los paneles aportan un valor marginal a la tabla, por lo que prefiero no pasar días haciendo que los gráficos se vean bien:

Han pasado 18 meses increíbles ayudando a la comunidad de diseño a través de UX Power Tools. Y aunque Sketch ciertamente no es la única herramienta que un diseñador debe tener en su arsenal, es sin duda la más poderosa. Espero que este apéndice ayude a aquellos de ustedes que recién están comenzando una carrera en UX, o que están haciendo el cambio a Sketch para su flujo de trabajo de diseño.

Si está interesado en un sistema de diseño vainilla que sea perfecto para comenzar nuevos proyectos, nos encantaría que eche un vistazo a los que hemos creado. Le ahorrarán miles de horas de tiempo de diseño:

Cuando no estoy recopilando artículos de Sketch en Medium, estoy trabajando en herramientas de diseño de Sketch en UX Power Tools para que seas un diseñador mejor y más eficiente.

Sigue a UX Power Tools en Twitter
Sigueme en Twitter