Como has visto en la clase anterior, todo proceso de diseño web tiene al menos 4 pasos básicos.
Vamos a ver cada uno en orden para que, cuando empieces verdaderamente a diseñar (que sería la última fase) sepas qué estás haciendo y por qué.
Objetivos
Lo primero que necesitas para que tu site consiga lo que quieres es definir, precisamente, qué es lo que quieres conseguir con él; la razón principal de la existencia de ese site.
- ¿Mostrar tu trabajo?
- ¿Dar a posibles clientes una forma de ponerse en contacto contigo?
- ¿Anunciar el lanzamiento o la venta de un producto?
Cuanto más claro esté el objetivo, más te servirá como guía en aquellos momentos en los que dudes sobre qué poner, dónde o cómo mostrarlo.
Cómo definir objetivos
Para definirlos y asegurarte de que son los correctos, hay una regla de oro.
Piensa en las personas que van a entrar en él; tu público objetivo, el usuario o usuaria de tu producto, tus posibles clientes, etc.
Tener en mente a las personas que van a interactuar con nuestro sitio será el truco definitivo que nos ayudará a decidir qué debe de tener.
Conocer a las personas para las que diseñas y lo que quieres que hagan en tu web simplificará todo el proceso de diseño, porque en caso de duda sólo tendrás que preguntarte:
¿Es esto útil para la gente que visite este sitio?
¿Les ayuda a llegar a aquello a lo que quiero que lleguen?
¿Les informa sobre lo que necesito informarles?
Para saber eso, antes tendrás que haber estudiado a tu audiencia para ponerte en su piel cuando estés diseñando, lo que se conoce como EMPATIZAR.
Algunas preguntas que puedes hacerte para conectar mejor con tu público objetivo o los usuarios/as de tu producto:
-
¿Quién es mi audiencia? ¿Qué otros sitios visitan? ¿Dónde suelen estar cuando navegan por internet? ¿En qué dispositivo lo hacen? ¿Qué otro tipo de productos usan?
-
¿Qué edad tienen? ¿De dónde vienen? ¿Qué redes sociales usan?
-
¿En qué estado emocional están cuando entran en mi sitio? ¿Saben lo que necesitan? ¿Conocen la existencia de mi servicio o tengo que explicárselo?
Te dejo como recurso esta herramienta que te ayudará a definir a tu público objetivo.
Contenido
Seguro que has oído mil veces la frase «Content is king».
Aunque suele oírse más en los entornos de marketing, el principio aplica exactamente igual al diseño.
El contenido es el corazón de tu sitio web. Tiene que estar en el centro de todo el proceso.
Saber qué es lo que quieres contar y cómo vas a hacerlo es lo que definirá la arquitectura del sitio; dónde van los elementos y las páginas, y cómo se va a mover el usuario o usuaria entre ellas.
Pero el contenido no solo es esencial para pensar en la estructura de tu sitio, sino que la forma que le das a ese contenido será también la encargada de atraer a la gente a él.
La forma en que dices lo que quieres decir es igual o más importante, porque es lo que hará que las personas que lo lean consigan dos cosas:
- Entender el propósito de tu web.
- Entender lo que tienen que hacer en ella.
Es decir, que tus objetivos estén alineados con los suyos.
Contenido no son solo palabras
Merece la pena destacar que, cuando hablamos de contenido, el texto es crucial, sí. Pero no debes dejar fuera de la ecuación otros elementos que también forman parte del corazón de la web y que te servirán de apoyo para transmitir mejor el mensaje:
VIDEOS. Para enseñar cómo funciona tu producto.
IMÁGENES. Que sirvan para mostrar tus trabajos.
POSTS. De un blog que recojan tus opiniones.
Todo esto combinado es lo que ayuda a contar una historia —Tu historia— que hará que la gente quiera estar en tu web y confíe en tí para llevarles donde tú quieras.
Y aquí es donde entra en juego la arquitectura de la información y los wireframes.
Arquitectura de la Información y Wireframes
Una vez tienes claros cuáles son los objetivos de tu web y quién es tu audiencia, deberás pensar en cómo vas a presentar y estructurar ese contenido.
Arquitectura de la Información
La Arquitectura de la Información es cómo llamamos al ejercicio de pensar en:
-
Las páginas que vas a necesitar
-
La jerarquía de cada una
-
Cómo se relacionan unas con otras
Para ayudarnos, usamos una herramienta llamada sitemap. Un sitemap en Diseño UX es un diagrama que nos ayuda a definir la jerarquía de un sitio web y en el que plasmaremos cómo encaja cada una de nuestras páginas en dicha jerarquía.
Estos son algunos ejemplos de sitemap sencillos:
Haciendo este ejercicio entenderás perfectamente por qué era tan importante haber definido tus objetivos al principio:
La jerarquía de tu sitio → a qué le das más o menos importancia.
Si tienes tus objetivos claros, sabrás la importancia que debe tener cada página en tu sitio. El peso que le des a cada una será lo que ayude a conseguir dichos objetivos.
Los Wireframes
Si un sitemap es un plano de tu sitio web al completo, un wireframe hace zoom in para mostrar el plano de las páginas individuales.
Ambos son necesarios para definir la jerarquía del sitio, pero en este caso atendemos a la importancia del contenido dentro de la misma página, es decir;
Todas sus secciones —y los elementos dentro de cada una de estas secciones— de arriba a abajo.
Te dejo un par de ejemplos, de más básico a más fidelidad:
Cuando haces wireframes, te fijas en cuáles serán las piezas que uses para transmitir información, que irás colocando en distintas secciones dependiendo, como siempre, de tus objetivos.
Resumen
Antes de lanzarte a diseñar es importante tener claro cómo vas a trasladar tus objetivos al sitio web. Es decir, a cuáles páginas les darás más importancia.
Para pensarlo, lo mejor es hacer un sitemap de tu web que te ayude a plasmar esa jerarquía en un pequeño esquema visual.
Una vez tienes clara la importancia de cada página y cómo se relacionan unas con otras, es momento de pensar en los elementos que mejor transmiten tu mensaje en cada una de las páginas.
Para esto hacemos wireframes, un boceto de la estructura básica de una página que nos ayude a ver cómo cada una de las secciones responde a nuestros objetivos y qué elementos podemos usar para reforzarlos.
¡Te veo en la siguiente clase!
