Prototipo de interfaz de usuario: qué es y qué herramientas hay para crearlo

La mejor experiencia web desde el inicio

Si nunca has oído hablar del prototipo de interfaz de usuario, de primera mano podemos decirte que es el protagonista silencioso detrás de actividades tan simples y cotidianas como revisar tu correo electrónico por las mañanas, hacer el súper por la tarde o “maratonear” tu serie favorita por la noche.

Sigue leyendo para que aprendas más sobre cómo hacer una página web usando wireframes y prototipos, así como las herramientas que necesitas para crearlos.

¿Qué es un prototipo de UI?

Como vimos en un artículo anterior de este blog, en sitios web la interfaz de usuario (UI en inglés) es “el diseño de cualquier aplicación web que utiliza un usuario a través de la interacción con sistemas en internet”.

¿Qué es el prototipo de interfaz de usuario?

Pero vamos un paso más atrás ya que, antes de llegar a la aplicación web en sí, algún experto –en programación o diseño web– tuvo que crear prototipos.

La definición formal de la palabra prototipo habla de aquel “ejemplar original o primer molde” de un artefacto a fabricarse. En sentido general, también podemos decir que se trata de “una implementación parcial pero concreta de un sistema, que se crea para explorar aspectos diversos durante el desarrollo del mismo”.

Si lo aplicamos a una interfaz de usuario –como las páginas web– entonces podemos decir que la función principal de un prototipo de UI es “explorar los aspectos interactivos del sistema como la usabilidad, la accesibilidad y/o la funcionalidad”.

Muchas veces se utilizan conceptos como sketch (bosquejo), mockup (maqueta) o wireframe (diagrama) para referirse a los prototipos pero, como bien señala Lynda.com, estos sólo son diseños estáticos, es decir, mapas o guías visuales

En cambio, un modelo o prototipo de UI es una simulación interactiva y real de cómo funcionará una aplicación web, ya que permite ver los flujos de entradas y salidas, ya sea de una sola sección o de un producto digital completo.

Importancia de los prototipos de UI

Los prototipos de UI nos ayudan a “ordenar las ideas, explorar diferentes caminos de concepto o diseño, y detectar posibles problemas o carencias antes de empezar la fase de programación de nuestro proyecto digital”. 

Con esto, puedes probar, analizar, ajustar y perfeccionar los elementos con los que van a interactuar los usuarios de tu aplicación web.

Asimismo, estos modelos te ayudan a tener certeza de los lenguajes y códigos de programación que necesitas para desarrollar y operar tu página web, de modo que puedas ahorrar tiempo y recursos valiosos pues un prototipo suele ser más barato que desarrollar un sistema real.

Recuerda también que la creación de prototipos es un proceso iterativo, es decir, que pasa por un ciclo donde se prueban las características de diseño y funcionalidad, mismas que deben cumplir con criterios bien definidos hasta llegar a los resultados deseados.

Proceso iterativo para crear prototipos UI
Creación de prototipos UI (Fuente: Agile Modeling)

Así, un prototipo de UI forzosamente pasará por cambios y refinamientos en varias ocasiones. Por eso, en la etapa de sketches o mockups no es necesario que uses los colores o gráficos exactos, ya que éstos se pulirán en la fase de diseño.

Herramientas para crear prototipos de UI

En la actualidad existen decenas de aplicaciones (gratuitas, de pago y freemium) para realizar maquetas, wireframes o directamente prototipos de UI. Aquí te dejamos una lista de las 10 más reseñadas por portales sobre diseño web y experiencia de usuario:

Nombre  Características destacadas Precio (en dólares)
invision logo

InVision

  • Diseño minimalista.
  • Herramientas para dibujar vectores y para animaciones y efectos visuales.
  • Integración con otros programas de diseño como Photoshop o Sketch.
  • Plan gratuito = hasta 3 proyectos.
  • Plan Pro = $9.95/mes (proyectos ilimitados).

Justinmind

  • Plantillas listas para su uso.
  • Integración con Google Fonts.
  • Plan gratuito = proyectos ilimitados.
  • Plan Pro = $19/mes por usuario.
  • Plan Empresarial = $39/mes por usuario.
Moqups logo

Moqups

  • Aplicación basada en web.
  • Interfaz similar a Photoshop.
  • Integración con Slack y Trello.
  • Plan gratuito = 1 proyecto.
  • Plan Pro = $23/mes por 3 usuarios.
  • Plan Ilimitado = $69/mes.
Balsamiq logo

Balsamiq

  • Interacciones simples.
  • Comandos rápidos.
  • Diseño lo-fi en wireframes y sketches.
  • Prueba gratis de 30 días.
  • $9-$199/mes dependiendo del # de proyectos (con descuentos por suscripción anual).

Adobe XD

  • Creación de sistemas de diseño. 
  • Integración directa con suite Adobe.
  • Integración con Dropbox, Slack o Trello vía plugins.
  • Versión gratuita = 1 proyecto colaborativo.
  • $9.99/mes individual.
  • $22.99/mes equipo.
Mockflow logo

MockFlow

  • Creación de mapas de sitio (sitemaps). 
  • Anotaciones interactivas.
  • Add-ons para seguimiento.
  • Versión gratuita = 1 proyecto, 2 colaboradores.
  • $15/mes individual.
  • $36/mes equipo.
  • $160/mes empresas.
Sketch logo

Sketch

  • Elementos reutilizables y escalables. 
  • Comandos rápidos.
  • Extensiones e integraciones para agregar características.
  • Prueba gratis de 30 días.
  • $99 licencia individual permanente.
  • $9/mes por usuario en licencia de equipo.
Figma logo

Figma

  • Aplicación basada en la nube.
  • Fácil transición de diseño a simulación interactiva.
  • Muchas herramientas de edición.
  • Versión gratuita = 3 proyectos, 2 colaboradores.
  • Pro = $15/mes por editor.
  • Organization = $45/año por editor.
Webflow logo

Webflow

  • Enfoque en animaciones y páginas web responsive
  • Herramienta para exportar diseño a código HTML, CSS y JavaScript.
  • Versión gratuita = 2 proyectos.
  • Personal = $16/mes
  • Pro = $35/mes
Axure logo

Axure

  • Aplicación basada en la nube. 
  • Vistas previas adaptables al tamaño de la pantalla 
  • Se pueden personalizar las animaciones de prototipos.
  • Prueba gratis de 30 días.
  • Pro = $25/mes por editor.
  • Team = $42/mes por editor.

 

Como podrás ver, tu elección de plataforma para crear prototipos dependerá de las necesidades de tu proyecto, así como de la experiencia que tengas con software de edición y las características que te hagan más eficiente el trabajo. Por ejemplo:

  • Curva de aprendizaje. ¿Qué tan fácil de usar es y cuánto tardas en dominarla? ¿Ofrece tutoriales, capacitación y/o soporte?  
  • Equipo. ¿Permite la colaboración en tiempo real de varios usuarios?
  • Compatibilidad. ¿Sus plantillas tienen diseño adaptable a dispositivos móviles (responsive)?
  • Presentación. ¿Puedes convertir tu proyecto en un prototipo para demostraciones?
  • Integraciones. ¿Puedes conectar con otras herramientas de diseño web?

Conclusión

El desarrollo temprano de prototipos de UI puede ser la diferencia entre un proyecto web exitoso y uno que luche por salir del anonimato.

Así, una vez que el prototipo ha sido validado por usuarios reales, su estructura de código podrá ser tratada como plataforma base y cualquier ajuste deberá estar controlado por un mecanismo de solicitud de cambios.

Por eso, es importante que cuentes con apoyo de expertos en interfaces de usuario y con experiencia en desarrollar plataformas digitales fáciles de usar, sobre todo si tu meta es construir un sitio web funcional e intuitivo desde cero.

Con GoDaddy tienes dos opciones para hacer la página web de tu proyecto digital. Por un lado, Páginas Web + Marketing tiene un constructor de sitios con plantillas de diseño responsive y un editor muy intuitivo y completo. O puedes contratar nuestros servicios de Diseño Web con profesionales especializados en prototipos de UI y aplicaciones web interactivas que te ayudarán a hacer de tu idea una realidad.