Como hacer un prototipo de pagina web

Cómo hacer un prototipo de pagina web

Cuando se inicia el proyecto de una nueva web es un error saltarse la fase de prototipado. En esta fase muchas veces se detectan errores de organización en los contenidos y problemas de usabilidad que pueden lastrar el proyecto.

Si el trabajo se realiza para un cliente, va a ser mucho más fácil trabajar si se aprueba el prototipo antes del desarrollo. De esta forma eliminamos la cantidad de cambios que solicita el cliente en la fase final.

Pero antes de explicar el proceso para hacer un prototipo de página web vamos a ver algunos términos:

  • Arquitectura web: Se refiere al listado de todas las páginas (URLs), su jerarquía y cómo irán enlazadas. Este es un paso previo a todo proyecto en el que suelen intervenir expertos en estrategia de contenidos, expertos en SEO y perfiles similares.
  • Blueprint o plano web: Documento que representa de forma visual las páginas de una web y su enlazado a modo de organigrama.
  • Wireframe: Es un esquema básico de cómo están distribuidos los elementos en una página concreta. Se trata de un borrador que se puede hacer a mano o con alguna herramienta de diseño.
  • Prototipo de baja fidelidad: En este tipo de prototipo ya se puede ver el diseño de una página concreta incluyendo los elementos más básicos: tamaños y colores de tipografía y botones, fotografías, espaciado entre elementos, uso de iconos, etc. Normalmente se presenta en varios tamaños de pantalla.
  • Prototipo de alta fidelidad: En este documento ya se incluye el diseño tal cual se verá finalizado. Se incluyen todo tipo de detalles de diseño como texturas, sombras y se incluyen contenidos reales.
  • Prototipos interactivos: Algunas herramientas de prototipado permiten crear interacciones como crear enlaces entre páginas, desplegar menús y otras funciones básicas. Son una buena idea para proyectos importantes donde la usabilidad y experiencia de usuario son claves.

 

prototipos de baja fidelidad para una web
Ejemplo de prototipo de baja fidelidad de una misma página en diferentes tamaños de pantalla.

No es necesario que un proyecto web cuente con toda esta planificación. Cada agencia, estudio o profesional de diseño web tienen una forma de trabajar. Por lo general, la planificación se adapta a las características y presupuesto del proyecto y el cliente.

Por qué es necesario un prototipo de página web

Un prototipo de página web ayuda a resolver muchos problemas:

  • Visualizar el aspecto de un futuro sitio web en una fase temprana del ciclo de vida del proyecto
  • Permite cambiar y finalizar el proyecto con un coste mínimo
  • Evaluar los plazos y los gastos del proyecto con mayor precisión
  • Realizar el desarrollo del proyecto sin tener que hacer pausas para tomar decisiones

Es común que un cliente no tenga una visión clara de lo que quiere. A veces un equipo no puede llegar a un consenso, ya que cada uno de los miembros tiene su propia opinión. La creación de prototipos permite visualizar todas las ideas y encontrar un punto de encuentro, evitando la necesidad de rediseñar el sitio web ya terminado.

Las razones económicas también son muy importantes. Con la creación de prototipos se pueden plantear dos a mas opciones para resolver un problema y elegir aquella más fácil de desarrollar.

Por otra parte tanto diseñadores como desarrolladores pueden quemarse si el proyecto sufre de cambios no contemplados en la fase inicial del proyecto. A todos, como trabajadores, nos gusta empezar un proyecto y verle acabando y funcionando lo antes posible. Nos gusta ver que nuestro trabajo sirve para algo y cumple con su propósito.

Cómo construir un prototipo de sitio web

Vamos a repasar las distintas formas de crear prototipos. Algunas son sencillas, otras son complicadas, algunas son caras, otras son baratas, pero es mejor conocerlas todas.

Prototipos en papel o pizarra

Incluso los más profesionales suelen empezar a crear prototipos con un borrador en papel o en una pizarra de oficina, y por una buena razón. Dibujar un boceto ayuda a dar forma a la visión general antes de empezar a trabajar en el ordenador. Este método es rápido y no requiere ninguna habilidad o herramienta adicional.

Sin embargo, este enfoque tiene sus inconvenientes: es un método limitado que carece de interactividad y no ofrece la posibilidad de dejar comentarios o editar el prototipo. Tienes que volver a dibujar todo el prototipo desde cero cada vez que necesites hacer algún cambio, o de lo contrario se convertirá rápidamente en un desastre. Por eso, estos prototipos rápidos son perfectos para hacer un brainstorming y discutir las ideas, pero el desarrollo de prototipos interactivos requieren una herramienta más avanzada.

Creación de prototipos con aplicaciones profesionales

Puedes elegir entre docenas de aplicaciones especializadas para el prototipado de sitios web: Figma, Sketch, Axure Pro, Adobe XD. Un prototipo realizado con una de estas herramientas no sólo tiene un aspecto más profesional y estético, sino que también te permite visualizar todas tus ideas y elementos de la interfaz. Con algunas aplicaciones, también puedes añadir al prototipo elementos interactivos.

Es importante usar herramientas que dispongan de funciones de colaboración online. Así podrás añadir comentarios o incluso hacer edición en vivo donde todos pueden ver el proceso en tiempo real.

Además, algunas aplicaciones ofrecen plantillas ya preparadas de bloques de contenido y características que pueden ensamblarse de forma constructiva, ahorrando mucho tiempo.

Las herramientas de prototipado web suelen contar también con funciones avanzadas para exportar el diseño. Así los programadores pueden obtener el código CSS, tamaños de fuentes, espaciado entre elementos y contenidos de forma rápida.

Gracias por compartir
Recursos para Emprendedores