Fases del Diseño UX: De Bocetos a Prototipos
Contenido del curso
Hasta ahora hemos conocido los conceptos correspondientes a las primeras etapas del diseño de productos, conociendo el significado de términos relacionados con la reunión de lanzamiento, a la investigación con usuarios y los conceptos básicos de UX, como las dimensiones del diseño UX, la arquitectura de la información y las Leyes UX.
Actualmente nos encontramos en el momento de inicio del diseño de la Experiencia de Usuario del producto que vamos a diseñar. Es el momento de comenzar a crear los primeros bocetos del producto.
Cuando se comienza a diseñar un producto, una vez se han concretado las necesidades de los usuarios que se buscan satisfacer, se deberá pasar por diferentes fases para desarrollar los bocetos y prototipos del producto. A continuación vamos a conocer las fases por las que puede pasar un diseño desde las ideas más básicas creadas en un dibujo sencillo hasta los prototipos finales que poseen todos los detalles del producto.
Los conceptos que vamos a conocer en esta clase corresponden únicamente al diseño de UX, es decir, nos ayudan a determinar cómo debe ser el diseño para que proporcione experiencias positivas, en vez de centrarnos en el aspecto visual. Para comprobar que estos diseños, que creemos, se ajusten a las necesidades de las personas, tendremos que realizar Testing con usuarios, pero estos conceptos los veremos en próximas clases.
Existen diferentes etapas cuando hablamos de la creación del diseño de productos, que corresponden a nivel de detalle incluimos en los diseños.
Los diseños con un nivel de detalle menor son los sketches, que son representaciones creadas a mano para plantear una primera idea de la composición de los elementos que compondrán la interfaz. Tras estos diseños encontramos los wireframes de baja fidelidad, que tienen la cantidad de detalle algo superior, y los wireframes de alta fidelidad que tienen una apariencia más parecida a la que tendrá el producto final. Finalmente encontramos los prototipos, que son diseños que incluyen las interacciones que se producen entre las pantallas.
A continuación vamos a ver con un poco más de detalle cada uno de estos conceptos.
Sketching o bocetos en papel
Técnica que nos permite comenzar a pensar en soluciones para las necesidades de los clientes. Consiste en dibujar sobre papel las pantallas del producto (todas o parte de ellas), los procesos y las relaciones entre las distintas pantallas.
Los bocetos en papel se suelen realizar con rotuladores de un solo color y utilizando folios en blanco. Cuanto más sencillos son los materiales utilizados en esta técnica más atención podremos poner en incluir las funcionalidades necesarias para que los usuarios puedan satisfacer sus necesidades.
Aquí se puede ver un ejemplo de un Sketch de un producto digital. En él podemos ver diferentes tarjetas de contenido compuestas por una parte escrita y una imagen. También podemos ver más abajo un espacio en el que se incluirán vídeos.
Wireframes
Es un conjunto de dibujos en el que se representa cómo estarán organizados los elementos en las diferentes páginas o pantallas de un sitio web o aplicación, implementando aspectos generales referidos a su apariencia estructural, sin entrar en detalle.
La técnica de wireframing consiste en el diseño esquemático de una interfaz, es decir, de los elementos que aparecerán en pantalla. El wireframing debe ser la columna vertebral del producto y, en ningún caso, se trata de estética, sino que debe incluir elementos que faciliten la realización de las tareas de usuario y satisfagan los objetivos del proyecto.
A continuación se puede ver un ejemplo de wireframes de baja fidelidad de una landing page. En él se aprecian los lugares que se han destinado al logotipo, a la barra de búsqueda, e incluso a las imágenes.
Dentro del diseño de los wireframes podemos encontrar un formato un poco más avanzado del diseño del producto, en el que se incluyen las relaciones que podremos encontrar entre las pantallas.
Los wireflows son una especificación de diseño en un formato que combina páginas de wireframes, con las características de diseño visual que se hayan especificado, con flowcharts que representan las interacciones.
Su uso nos permite documentar el proceso del usuario utilizando una tarea común del producto (por ejemplo, enviar un mensaje directo a algún contacto) en cada paso en el flujo de trabajo a través de un wireframe simple o un mockup de alta fidelidad.
Se puede ver un ejemplo de que flow de un producto digital.
Finalmente, la última técnica que podemos encontrar en el diseño UX es la creación de prototipos.
Prototipado
Es una técnica que sirve para diseñar y ejecutar la interacción entre las pantallas que componen los procesos de un producto.
Estos diseños pueden ser de alta o de baja fidelidad:
Cuando realizamos los procesos de diseño de un producto, no siempre es necesario pasar por todos los pasos que hemos visto. Sin embargo, lo más recomendable es que podamos ir avanzando poco a poco en los detalles del producto a medida que vamos testeando que el diseño sea correcto. Por este motivo, es recomendable pasar por todas estas fases.
CONCLUSIÓN:
En esta clase hemos visto las diferentes etapas que forman parte del diseño de productos, comenzando por los diseños con un nivel de detalle, como los Sketches o los wireframes de baja fidelidad, y terminando la clase conociendo el concepto de prototipo, que es el diseño en el que se incluyen las interacciones entre las diferentes pantallas.
RETO:
Escoge una idea de un producto digital y realiza un Sketch o boceto en papel del diseño. Muestra a la comunidad de Platzi el aspecto que tiene este diseño inicial.
Guadalupe Lucía Fernández
Ingrid Rojas
Maria Eugenia Gentile
Pedro Isaac Aguilar
Jimena Haran
Daniel Guerra
Marco Rodrigo Polo Silva
Daniel Steven Carrera Osorno
Deyvid Castellanos
Francisco Xavier Nuñez Garcia
Juan Pablo Lozano Villota
Kevin Gabriel Chanamé Yafac
Sandry Valentina Pino Prada
Camila Ossa
Juan Diego Paredes Hoyos
Julian Monroy
Marielvis Oliveros
Yadira Avila
Iván Villegas
Raúl Adolfo Sánchez Rodríguez
Fabián Téllez
Realicé un sketch de una página para comprar videojuegos:
Yo hice el Sketch pensando en una app de Mindfulness que te ofrece frases motivadoras de diferentes temas
Mi sketch es sobre una app de una marca de chocolate en donde se puede ver recetas para hacer con ese producto. 1- En la parte superior, a la izquierda ubiqué un menú desplegable y a la derecha el acceso a las redes sociales. 2- Luego está el logo y abajo una caja de búsqueda. 3- Un texto recomendando recetas 4- Luego puse categorías (pueden ser “tortas”, “ galletitas”, “postres”) 5- El título “Los más buscados” 6- Videos con recetas más buscadas por las personas usuarias.
El uso de wireflows (combinación de wireframes) nos facilita entender de mejor manera las interacciones entre pantallas, y así poder documentar cada parte del proceso que lleva al usuario de un punto A a uno B, para acabar una tarea o completar el flujo de tarea completo en la app o producto digital.
Elegí hacer una página para vender café, en granos y en cápsulas
Recomiendo https://whimsical.com/, es una herramienta que nos ayuda precisamente en esto
Hice un sketch de una app para ver videos basándome en YouTube
Aplicación para marcar tus zonas favoritas en una ciudad.
Los wireframes de baja fidelidad (lo-fi) son representaciones esquemáticas simples que muestran la disposición básica de los elementos en una interfaz, sin detalles visuales. En cambio, los wireframes de alta fidelidad (hi-fi) tienen un mayor nivel de detalle y se asemejan más al producto final, incluyendo elementos estéticos, tipografía y colores.
Un prototipo, por otro lado, es un modelo interactivo que simula la experiencia del usuario, mostrando cómo funcionarán las interacciones entre las pantallas. Mientras los wireframes son más estáticos y estructurales, los prototipos permiten evaluar la usabilidad y el flujo de navegación.
Una aplicación donde puedes asignarte metas personalizadas.
¿Cómo adjunto imágenes?
Puedes adjuntar imágenes hay 2 formas:
Subiéndolo a un sitio de alojamiento y luego poniendo la URL en la opción que te sale llamado 'imagen'
Tener la imagen que quieras subir en tu ordenador y solo arrastrarla en la sección de aporte.
Mi sketch es sobre una app para realizar pedidos de donas, agregue el menú hamburguesa, el carrito para agregar las donas, una imagen de presentación, y por ultimo las imágenes de las donas el nombre, los detalles y el precio.
Hice un primer boceto de lo que sería una tienda de infornática, con la cabecera donde va el logo y un menú. Luego un slider y finalmente productos destacados en tarjetas.
Hello guys! 💻 I made an sketch of an App that will offer you the option to organize your time and also to verified the goals that you have achieved along the week -and month if you want- this will be like a personalized agenda where you are going to be able to left your thoughts
1- 📲 Firtst part left: will be the view for new members first part right: will be the view for common users
2- 📲
on the top left we will the date below we will have the goals and agenda for today and finaly below then we will have a part where the member can acces to see some advises and knowledge he will be intereted
On the top right we will see a chart that has the pending task that the user has Below that we will have an option to the user to share the advance he & she has had
Boceto para una miniweb de una psicologa.
Yo escogí como producto una app para hacer citas en una barbería.
En caso de que no sea vea o aprecie del todo bien (porque, sí, ya sé que tengo una letra feísima 😂), acá lo explico:
SKETCH
Realicé un sketch de un proyecto de una calculadora que quiero realizar utilizando JavaScript
Escogí un sitio web para la venta de productos y servicios de una sastrería, a continuación se puede ver un ejemplo de wireframes de baja fidelidad. En él se puede apreciar los lugares para el logotipo, la barras de menú, algunas imagenes e incluso el carrito de compras.
