Proceso de diseño web

Muchas veces nos surge la duda si al empezar un proyecto web es bueno «perder el tiempo» en briefings, bocetos, propuestas… o pasar directamente a la acción y diseñar. Pensamos que quizás antes de tomar una decisión, es bueno analizar cual sería un proceso de diseño lógico y aplicable a cada proyecto web. Independientemente de la magnitud del mismo, estos procesos de diseño tendrán que estar adaptados a las particularidades de cada uno de ellos.

Vamos al lio:

1. Hacer partícipe al cliente – El brief

Debemos tener en cuenta que el cliente para quien trabajamos debe participar en todo el proceso, el primero de todos el briefing, aunque para que los resultados sean precisos y se ajusten a las necesidades del usuario nuestro cliente tiene que formar parte de todos y cada uno de los pasos de este proceso de diseño.

Un brief o briefing puede traducirse por “Informe” y es usado con frecuencia en el mundo de la publicidad y el marketing. Mediante un briefing se proporciona información sustancial de una empresa, marca o producto sobre las que los debemos elaborar una campaña o proyecto concreto. También, mediante un briefing, se informa a la fuerza de ventas sobre las características de las novedades del catálogo de referencias de la empresa.

2. Diagramas de flujo

Es imprescindible para bocetar tener claro de donde y a donde va el usuario en la pantalla. Los diagramas de flujo nos ayudan a representar graficamente como se moverá el usuario en nuestra web o aplicación.

Un diagrama de flujo es una representación gráfica de un proceso. Cada paso del proceso es representado por un símbolo diferente que contiene una breve descripción de la etapa de proceso. Los símbolos gráficos del flujo del proceso están unidos entre sí con flechas que indican la dirección de flujo del proceso.

El diagrama de flujo ofrece una descripción visual de las actividades implicadas en un proceso mostrando la relación secuencial ente ellas, facilitando la rápida comprensión de cada actividad y su relación con las demás, el flujo de la información y los materiales, las ramas en el proceso, la existencia de bucles repetitivos, el número de pasos del proceso, las operaciones de interdepartamentales… Facilita también la selección de indicadores de proceso.

Para ayudarte a esta tarea uno de los mejores software es: www.gliffy.com

3. Wireframe

Wireframe (esquema de página o plano de pantalla) es una guía visual que representa el esqueleto o estructura de un site web. Generalmente, es un gráfico bastante esquemático donde se ubican los elementos principales de la interfaz de usuario que se mostrarán en pantalla. El uso de un wireframe es exclusivo del equipo de desarrollo (dentro del equipo de desarrollo debería estar el cliente) y sus ventajas son evidentes para el diseñador pero los clientes, en general, no llegan a visualizar claramente que aspecto tendrá su página web.

Podemos decir que al menos hay dos clases de wireframe diferenciadas:

Baja fidelidad Caracterizado por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Estos wireframes ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Contenido de prueba, texto de relleno simulado, muestra o contenido simbólico son utilizados para representar datos cuando el contenido real no está disponible. Para estos dibujos sencillos, los bocetos o prototipos en papel es una técnica habitual.

ejemplo de wireframe de baja fidelidad

Alta fidelidad Los wireframes de alta fidelidad son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado. Por lo que es adecuado a proyectos de mayor envergadura, donde se pueda invertir mayor tiempo en los primeros pasos del proceso para ser creado. Para estos proyectos más complejos, representar wireframes con software es popular. Algunas herramientas permiten incorporar interactividad.

4. Propuesta o prototipos

Una propuesta o varias concretas ayudarán a que el cliente sepa como será exactamente su web. Es el último paso antes de empezar a maquetar y programar. A su vez se obtiene un buen feedback del cliente para cambios o correcciones. Normalmente podemos dibujar la interface de usuario con software específico, con photoshop por ejemplo.

Un propotipo web tiene mayor funcionalidad y le otorga una navegabilidad así como un pequeña interacción con el usuario con el fin de hacer un versión anterior de la Alpha o la Beta del site en concreto.

5. El código

Con estos 4 pasos ya podemos tener una herramienta de comunicación entre todo el equipo, hacer que el cliente se involucre en el proceso para que el producto final sea lo que necesita cliente y usuarios. Y nos han ayudado comprobar aspectos importantes y tomar elecciones concretas, como:  en que plataforma se lanzará el producto, el lenguaje apropiado, usabilidad, aspecto visual, etc.

Ahora toca pasar lo que está dibujado o prototipado a la red. Maquetar y etiquetar el html, hojas de estilo, programación, versiones móviles, compatibilidad con navegadores… Esto nos daría para escribir otro artículo ya que este paso es la segunda parte del proceso web: el diseño y programación del site. Y una tercera parte una vez acabado el site web o aplicación que es lanzar a motores de búsqueda, corregir bugs, hacer mejoras…