¿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 incluir: 

  • El árbol de la web: secciones principales, secciones secundarias, intranet, etc. 
  • La distribución visual de los elementos que formaran cada pantalla: pantallas principales y generales de una web: por ejemplo, para una tienda online: 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 lleva a cabo 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. 

  • Dan una visión global del proyecto.
  • Dan una visión global de la complejidad y profundidad de las funcionalidades: un sistema de reservas puede realizarse en 20h o en 20 veces más. hasta que no se pinta en un prototipado o se definen muy bien lso requerimeintos, es difícil de saber.    
  • Eliminan o limitan enormemente el factor "ensayo error".
  • Facilitan la comunicación entre los distintos actores del desarrollo: cliente, programadores, diseñadores.
    En una primera fase, a nivel de planteamiento del proyecto y posteriormente para la realización realización web.
  • Definen y ponen límites claros al proyecto y facilitan la comparación de presupeustos. 
    • Al pedir un presupuesto el cliente sabe que todos los profesionales están valorando lo mismo.
    • Al pactar el trabajo queda cerrado: queda 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 dado que 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: