¿Que es un wireframe web?

Wireframes Drupal

Como complemento a la consultoría en Drupal, está el campo de los prototipajes web, más conocidos con el término anglosajón Wireframe. Los wireframes son representaciones esquemáticas, sobre papel,  que permiten planificar de manera global los proyectos web y la interacción entre ésta y sus futuros usuarios. 

Un wireframe debe planificar: 

  • El árbol de la web, secciones principales, secciones secundarias, intranet, etc. 
  • La distribución visual de los elementos que formaran las pantallas principales y generales de una web: p.ej: página de inicio, sección general, sección de contacto, sección de parrilla de productos, ficha del producto, etc.
  • Flujo de navegación (se deberá indicar como se prevé la navegación indicando en las pantallas los elementos de navegación).
  • Flujo de procesos (se deberá indicar como se prevén los procesos, los pasos que debe hacer un usuario cuando por ejemplo, hace una compra, o se registra en una intranet de una comunidad).
  • Definición de funcionalidades (se deberá indicar que sucede en cada momento en relación a las funcionalidades web).

Ventajas de los wireframes. 

  • Nos dan una visión global del proyecto.
  • Eliminan o limitan enormemente el factor "ensayo error". 
  • Nos facilitan la comunicación entre los distintos actores del proceso de construcción. A nivel de ideación del proyecto y posteriormente de la realización web.
  • Nos definen y cierran los proyecto de cara a los profesionales, programadores y diseñadores web: 
    • Al pedir un presupuesto sabes que todos los profesionales están valorando lo mismo.
    • Al pactar el trabajo queda cerrado y bien definido que es lo que entra y que no entra en el presupuesto. 
  • Reducen los presupuestos de realización web:
    • El profesional web va a contemplar menos horas de gestión y va a olvidarse de prever partidas para imprevistos que suelen inflar los proyectos. 

Los Wireframes deben ser realizados profesionales experimentados. Un profesional debe tener:

  • Experiencia contrastada en la realización de proyectos web (si puede ser en proyectos del mismo sector para el que se prototipa).
  • Conocimientos en comunicación.
  • Conocimientos en diseño a nivel de distribución de elementos.
  • Conocimientos de usabilidad web.

Consultores profesionales Drupal

Y en el caso de Drupal, es importante tener conocimientos avanzados y experiencia en Drupal. Si la persona que hace el prototipaje no está familiarizado con Drupal, seguramente plantee realizaciones que van a tener un coste mayor de desarrollo, dado que los habrá diseñado sin conocer demasiado ni Drupal ni sus módulos. Sin embargo si la persona que hace el prototipaje conoce Drupal diseñará las pantallas incluyendo procesos familiarizados con los distintos módulos que haya creído óptimos para el proyecto, siguiendo algunos estándares que marca Drupal y por lo tanto el proyecto será más realizable: probablemente a menor coste y sin sin que ello implique que el proyecto pierda ni diseño ni originalidad. 

Ejemplo de prototipo web

A continuación os dejamos algunas pantallas de ejemplo de un prototipo web realizado en Comunic-art. 

En este caso se trata de una pequeña parte de pantallas de front-end y otras de back-end de un portal de micromecenazgo (crowdfounding).

*En las pantallas hay una serie de marcas (letras y números) que sirven para extender las explicaciones necesarias y funcionalidades que pueda tener el portal y no se puedan inferir simplemente con las pantallas.

Se trata como decimos de una pequeña parte de un ejemplo, pero que creemos que sirve de orientación para tener una idea más aproximada del del tipo de trabajo que supone un wireframe.

 

Solicitar presupuesto para prototipo web

Artículos relacionados: