Cuando navegamos por una web nos fijamos en la parte visual y si conseguimos con agilidad el objetivo que nos habíamos propuesto al entrar en ese site, debemos considerar en términos generales, que el diseño de la web funciona. Ya sea encontrar un teléfono, la dirección física de la tienda o bien leer los servicios que ofrece la compañía.

Para llegar a esa culminación del viaje del usuario, hay que pasar por varias fases previas antes de ponernos a diseñar. Y son tan importantes o más que el propio diseño. Porque diseñar una web no es sólo poner “en bonito” los contenidos, implica mucho más.

Estar en internet, pero ¿para qué?

Es evidente que hay que estar en internet pero se puede estar de muchas formas y para conseguir un objetivo muy específico. Puede ser ofrecer los datos de contacto y la localización en el caso de un negocio físico, el menú en el caso de un restaurante con servicio a domicilio o el listado de proyectos realizados si ofrecemos servicios online.

Y partiendo de estos objetivos orientar todo el desarrollo de la web. Todas las decisiones que tomemos a partir de este momento deben orientarse a satisfacer estos objetivos y siempre poniendo al usuario en primer lugar. 

Investigar, mirar referencias y rastrear la competencia

Es importante el proceso de investigación. Nos ayuda ver qué está haciendo la competencia, qué funcionalidades tienen implementadas y cómo estructura la información. También para ver tendencias de diseño, cuestiones de usabilidad web y ejemplos de sitemap. Y visitar no sólo las webs de la competencia, sino las de cualquier sector. 

El mapa para encontrar el tesoro

El mapa web guiará al usuario por el contenido de la web así que se presenta como otro paso crucial. Hay que ordenar las secciones, agrupando contenidos de la misma naturaleza en un mismo apartado, teniendo en cuenta las funcionalidades que requerirá el usuario, entendiendo cómo navegará y si encontrará lo que busca en un máximo de tres clics.

El wireframe o el andamiaje de la web

Mi compañera Elena Cejudo (@bodycopy) lo comentaba en una reunión haciendo una analogía entre el diseño web y la construcción de una casa. Si la investigación de referencias es la memoria de calidades y el sitemap la vivienda en plano, la fase del wireframe sería el encofrado y la vivienda en bruto. Por supuesto el diseño final sería elegir el color de las cortinas y el tapizado del sofá.

Pues eso es el wireframe, un diseño de baja densidad con la distribución de contenidos. Su objetivo es definir la jerarquía de los contenidos, cómo se distribuirán los diferentes módulos así como identificar las funcionalidades y la interacción del usuario con ellas.

El último paso

Y una vez hemos culminado estas fases previas pasamos al diseño puro y duro. De esta forma reducimos la incertidumbre al mínimo, sin olvidar nunca los objetivos ni al usuario. Y ahora sí, a diseñar.