Una buena herramienta permite a un diseñador de interacción crear una representación de cómo se verá un producto y cómo funcionará en varios niveles de fidelidad frente a esfuerzo. Una herramienta que requiere mucho esfuerzo debe generar una representación de muy alta fidelidad. La fidelidad requerida depende de las preguntas que intente responder.
Comencemos en el extremo de bajo esfuerzo de la escala.
Un bolígrafo y cuaderno de bocetos / pizarra y marcador.
Estas herramientas casi no requieren tiempo, pero crean representaciones de muy baja fidelidad. Son perfectos para responder preguntas realmente importantes sobre el producto:
- “¿Cuál debería ser el producto?”
- “¿Cuáles son las cosas más importantes que queremos que el usuario logre?”
Un diseñador debe dibujar todos los días para mejorar sus habilidades de dibujo. El valor de sus bocetos para responder preguntas es directamente proporcional a su habilidad para dibujar.
- Cómo lograr este efecto en Photoshop
- ¿Cómo se puede obstaculizar o facilitar la sostenibilidad a través del diseño?
- ¿Cuáles son las buenas universidades de diseño en la India?
- Estoy haciendo una investigación de mercado en hoteles boutique de lujo, ¿puede decirme cuál es el problema relacionado con el diseño gráfico más importante para usted?
- ¿Cuáles son algunas enormes empresas de diseño web en Londres, Reino Unido?
Me gusta usar un cuaderno de bocetos de cuadrícula de puntos de Rhodia y un marcador Pilot Razorpoint.
Sketch 3 para Wireframes
Los wireframes requieren relativamente poco esfuerzo para la cantidad de preguntas que puede responder. Esas preguntas incluyen,
- “¿Qué información y posibilidades deberían estar presentes aquí?”
- “¿Qué información y posibilidades no deberían estar presentes?”
- “¿Qué información y posibilidades son las más importantes?”
- “¿Cómo realizará el usuario tareas específicas?”
He pasado años creando wireframes en Omnigraffle, Illustrator, InDesign y Auxure, y ninguno de ellos tiene el equilibrio de potencia y facilidad presente en Sketch. Sketch es especialmente útil porque le permite pasar de wireframes a diseño visual con tanta facilidad.
Boceto 3 para diseño visual
Los diseños visuales responden a un conjunto relativamente limitado, pero importante, de preguntas:
- “¿Cómo se verá y se sentirá esto?”
- “¿Cuál es el estado emocional que esto alentará en el usuario?”
- “¿Cómo reforzará esto la marca?”
- “¿Es el énfasis visual en los elementos correctos?”
En algún momento, cuando la web aún era joven, Adobe comenzó a incorporar características de diseño interactivo a sus productos existentes, incluidos Illustrator, InDesign y Photoshop. Al final, Photoshop se convirtió en la herramienta estándar de la industria, pero se ha convertido en un software gigante e hinchado que no tiene cabida en un flujo de trabajo IxD. Me encanta Photoshop, Illustrator e InDesign, pero para UX y UI, no son la herramienta adecuada.
InVision para prototipos de baja fidelidad
Uno de los pasos más críticos en el diseño interactivo es crear una maqueta con la que las personas puedan interactuar realmente. Sin embargo, no tiene que ser de alta fidelidad. Puede aprender mucho colocando sus wireframes en InVision y vinculándolos. Las preguntas que este tipo de representación puede responder son:
- “¿Tiene sentido esto?”
- “¿Es fácil y obvio de usar?”
- “¿Se siente natural y útil?”
Hay herramientas alternativas como Marvel y UXPin, pero en este momento, me gusta más InVision. También es fantástico para comunicar sus diseños con las partes interesadas y los miembros del equipo.
Pixate o Form o Framer.js para prototipos de alta fidelidad
A veces, si está diseñando un patrón interactivo bastante novedoso, o si tiene una transición que es realmente difícil de describir, deberá crear una maqueta que se vea y funcione casi como el producto terminado. Estos tipos de prototipos requieren mucho esfuerzo y responden a un conjunto muy limitado de preguntas.
De los 3, Pixate es mi favorito en este momento. Tiene la curva de aprendizaje más corta y hace el 90% de lo que pueden hacer los otros dos. La forma es muy poderosa, pero requiere que pienses más como un ingeniero de software. Framer.js requiere que sepas Javascript. Los tres son excelentes herramientas.
Una pequeña nota sobre el diseño en código:
A algunos diseñadores / desarrolladores les gusta diseñar una aplicación mientras la codifican. Este es un enfoque fantástico para obtener representaciones de muy alta fidelidad temprano, pero la mayoría de las veces restringirá su creatividad y le impedirá llegar a una mejor solución. El diseño en código tiene su lugar, pero debe tener mucho cuidado al usarlo.
Dicho todo esto, quiero distinguir el diseño interactivo, que incluye la experiencia del usuario y el diseño de la interfaz de usuario, de otros campos de diseño, como el diseño de la marca y el diseño de la información.
El diseño de marca es cualquier diseño cuyo objetivo principal es hacer crecer o reforzar una marca. Eso incluye todo, desde logotipos, hasta anuncios de página completa, vallas publicitarias gigantes y comerciales de televisión. Las mejores herramientas para el diseño de la marca siguen siendo Photoshop, Illustrator y cada vez más After Effects, ya que cada vez más el diseño de la marca involucra algún tipo de gráficos en movimiento.
El diseño de la información incluye cualquier intento de comunicar grandes conjuntos de información en un formato fácilmente comprensible. Puede incluir todo, desde horarios de autobuses hasta libros de texto, informes trimestrales y visualizaciones de datos. Las mejores herramientas para el diseño de información son potentes herramientas de diseño como InDesign y herramientas de visualización de datos como Processing.