Carlos es emprendedor. Pero está atascado con su proyecto (una app). ¿El problema? Necesita crear un prototipo para testear y validar con clientes, pero no sabe de diseño ni de UX (experiencia de usuario) y no tiene ni idea de por dónde empezar.
Si estás emprendiendo con un proyecto digital y tú también te sientes un poco como Carlos, no puedes perderte este post.
Manuel Medina, (Consultor de Experiencia de Usuario en Santander Global Tech y emprendedor), nos desveló en una TalkX de Santander X los 3 pasos y los muchos recursos disponibles para prototipar y darle vida a tu proyecto digital con un diseño profesional, atractivo y que genere una percepción positiva en el usuario.
Lo primero, unas nociones básicas de UX:
Diferencia UX vs UI
Cuando vas a desarrollar un producto digital, una web… necesitas hacerlo teniendo en cuenta la experiencia de usuario (UX o user experience), facilitando y pensando en el camino que debe recorrer el usuario para llegar a su objetivo de la manera más sencilla, intuitiva y cómoda posible.
Las siglas UX están relacionadas con la planificación del boceto, ese prototipo que muestra el contenido y cómo se va a interactuar dentro de tu web o app: primero bocetas la estructura a nivel baja fidelidad (sin mucho detalle y sin ser definitivo: menús, contenido más importante arriba, bloques y secciones… aún no es momento de poner iconos ni pensar en diseños específicos).
En una etapa posterior ya te adentras en el diseño, la interfaz de usuario (UI o user interface): la parte más visual, la apariencia de tu estructura y de las acciones de tu producto digital. Aquí es donde se aplica la creatividad, conceptos de diseño, gama cromática, iconografía, tipografía…
3 pasos (y muchas herramientas) para crear tu prototipo
1. Haz tu boceto en papel (sí, en papel)
Es importante dibujarlo a mano, porque al hacerlo de forma manual, activamos el hemisferio creativo del cerebro. Necesitas plasmar la estructura básica y los contenidos, así como los botones principales que te harán pasar de una pantalla a otra. A veces ayuda ponerlo en vídeo (grabar papel tras papel las diferentes pantallas, replicando las acciones que debe hacer el usuario en cada una).
Fuente: Kelly Sikkema – Unsplash
2. Pásalo a prototipo digital o Wireframe
Al pasar tu boceto de papel a digital dejarás bloques con X para identificar dónde va a ir una fotografía o ilustración. Las imágenes pueden no ser definitivas, pero quizás ya sabes que necesitas tener una tab bar (menú en la parte inferior de la pantalla con iconos para pasar de una sección de la app a otra). Vas viendo cómo va a ser tu menú, qué partes van a aparecer destacadas, qué notificaciones, qué campos tendrá tu buscador… Hay varias herramientas que puedes usar:
- Sketch + Marvel o Invision: a nivel profesional se usa Sketch en entorno Mac. Para crear las interacciones (navegar entre pantallas) te apoyas en otras apps, como Marvel o Invision
- Figma: es un software online, por lo que se puede usar tanto en Mac como en PC. Lo bueno es que es sencillo y puedes hacer la interacción de Marvel o Invision dentro de ella. Tiene 30 días de prueba, puedes hacer tests de usuario y del producto final, se puede configurar para tener diferentes usuarios… Además tiene un página de ayuda.
- Otras: hay más disponibles, como Axure o Adobe XD… pero no son tan recomendables para alguien que está emprendiendo.
Pero aunque esto te puede agobiar, tienes que saber que cuentas con muchos recursos para inspirarte a la hora de hacer tu prototipo digital:
Y para soluciones mobile también tienes:
Además puedes utilizar una herramienta como Design System, una librería de componentes visuales donde puedes aplicar botones, elementos de formulario, iconografía… simplemente arrastrando desde su librería hasta tu producto. Ahorrarás tiempo diseñando botones, el walk-through (las pantallas que te van saliendo cuando te descargas una app para mostrarte cómo se usa), etc. Para Sketch es gratuito, para Figma tiene un coste, pero facilita mucho la vida.
Fuente: marvelapp
3. Aplica el diseño visual
Ya estás en el paso final, en la “alta fidelidad”, es decir, un diseño mucho más aproximado a lo que se construya en el futuro: ya aparecen colores, iconos dentro de los tab bar, tipografía final… Para ese diseño te puedes apoyar en estas otras herramientas:
1. Paleta de colores
Una vez que tienes ya los elementos de tu pantalla, el software y la estructura, ¿qué colores usas? Es importante diferenciar entre colores primarios y secundarios: los primarios están en tu logo y los secundarios se relacionan y conectan con el logo. Tengas o no tengas ya tu logo, para elegir los colores que visualmente funcionan juntos puedes usar:
Acuérdate de la regla 60-40 para tus colores cuando estás trabajando en una app móvil o una web (sobre todo en una app móvil):
Necesitas un 60% de contenido visual con colores primarios (para que el usuario, sin ver el logotipo, identifique que está dentro de tu aplicación o web), y el 40% restante en colores secundarios.
2. Ilustraciones
3. Fotografías
Hay decenas imágenes libres de derechos:solo necesitas referenciar el enlace o el autor en alguna parte de la web o de la app. El portal más conocido es Unsplash, pero tienes muchos más bancos de imágenes para encontrar la foto perfecta.
4. Fotomontajes
Para presentaciones o vender tu app descargas un fondo en formato fichero PSD (Photoshop) y le añades un pantallazo de tu app, que quizás no esté construida pero queda más real y vende mucho, a la hora de conseguir financiación o demostrar que tu aplicación ya está prácticamente en producción.
Fuente: Santander Global Tech
Si te interesa indagar más en el tema UX, puedes suscribirte a blogs donde encontrarás información actualizada en temas que van cambiando cada pocos meses, por ejemplo:
https://www.smashingmagazine.com/
Esperamos que este post te haya servido de ayuda a la hora de construir tu prototipo digital. Si te ha gustado, ¡comparte!
