Unidad 8: Mockup’s y UI’s#

Contenido de la unidad#

¿Qué son los mockups?#

  • Es la representación visual de un Prototipo del proyecto que se va a realizar.

  • Una serie de imágenes que nos mostrarán el resultado que tendrá la maqueta web.


¿Qué son los UI’s?#

  • Un mockup es una interfaz de usuario.

  • Es la representación visual de la interfaz de usuario.

  • Es la parte del diseño que se encarga de la interacción del usuario con el sistema.

  • El diseño de la interfaz de usuario debe garantizar que la interacción entre el ser humano y la máquina, se realice de manera satisfactoria.


Utilidad de los mockups y UI’s en el proceso de software#

  1. Ayudan a visualizar y planificar la interfaz de usuario (UI) y la experiencia de usuario (UX) de la aplicación o sitio web antes de comenzar a programar. Esto permite a los diseñadores y desarrolladores tener una comprensión clara de cómo se verá y funcionará la aplicación antes de invertir tiempo y recursos en la programación.

  2. Permiten obtener retroalimentación temprana de los usuarios, clientes y stakeholders sobre la funcionalidad y el diseño de la aplicación. Los mockups son más fáciles de crear y modificar que el código real, lo que significa que los diseñadores pueden experimentar con diferentes opciones y recibir comentarios rápidos sobre lo que funciona y lo que no.

  3. Facilitan la comunicación entre los diseñadores y desarrolladores, ya que los mockups proporcionan una base visual para que los equipos discutan los detalles de la UI y la UX. Esto puede reducir el tiempo que se tarda en completar una tarea y disminuir la posibilidad de malentendidos o errores en la implementación.

  4. Pueden ayudar a identificar problemas potenciales en la funcionalidad o el diseño de la aplicación antes de la implementación. Si se descubre un problema en un mockup, es más fácil y económico corregirlo en esta etapa que después de que se ha escrito el código.


¿Cómo se ve un Mockup?#

Este tipo de representaciones visuales pueden ser muy variadas, desde un simple boceto en papel hasta un prototipo interactivo.


Herramientas para crear Mockups#


Proceso de creación de un Mockup#

  • Identificar los elementos que deben incluirse en esta representación visual.

  • Implementar el mockup.

  • Verificar que el mockup cumpla con los requerimientos y esté alineado a los casos de uso.

Veamos como funciona Balsamiq#

🌐 Enlaces extra#

Recursos educativos de mockups

Figma Figma Tutorial - Como utilizar Mockups - YouTube