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?
¿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.
Para hacer sitemaps puedes usar la herramienta de:
¡Gracias por la herramienta!
Gracias!
Me gusta mucho como escribes profe, creo que ha sido la lectura que mas me ha gustado de los cursos de platzi
Mi audiencia son reclutadores y hiring managers en áreas de UX o Producto, así que estuve escuchando podcasts y viendo recomendaciones en Twitter y LinkedIn para tener una buena imagen de lo que esperan y lo que funcionará mejor.
Me encantó esta clase, muy clara y el resumen muy conciso. Muy valiosa para los que estamos recién explorando estos términos. Gracias!
Desde la plataforma Balsamiq también se pueden diseñar Wireframes
¿cómo le pongo un marcador a este contenido igual que se puede poner en los videos? descubrí un fallo en la matrix (bug específico) o fue en el diseño?
Hasta ahora lo noto, no se puede poner un marcador en las lecturas, te aconsejo hacer un tweet al respecto, es fácil que así te contesten
Esto hay que mirarlo con detenimiento porque hay mucho valor concentrado aquí. El proceso de diseño de la web tiene que ser algo muy pensado y meditado.
Donde hiciero sus Wiframes amigos??
¿Por qué es mejor priorizar el contenido?
Piensa en el contenido como el agua y en el diseño web como el vaso que la contiene. Si primero diseñas un vaso con una forma extraña y luego intentas meter el agua, probablemente se derrame o no encaje bien. Priorizar el contenido significa entender exactamente qué historia vas a contar, qué imágenes vas a mostrar y qué videos necesitas antes de dibujar un solo píxel. Cuando tienes tus textos persuasivos, tus imágenes de producto y tus llamados a la acción definidos, la estructura visual prácticamente se dibuja sola. Sabrás si necesitas una galería de tres columnas o un gran video a pantalla completa. Además, el contenido es lo que realmente convence a un usuario de quedarse o comprar; el diseño simplemente facilita esa digestión visual. Al poner el contenido en el centro, evitas el temido síndrome de la plantilla vacía, donde tienes un sitio hermoso pero lleno de texto falso que luego es imposible de adaptar a tus mensajes reales.
¿Que herramientas puedo utilizar para crear wireframes?
Veo como ejemplo Miro, cual sería la otra del ejemplo, Gracias
Genial, creo que me estoy enamorando... del curso :D
¿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?
Excelente, para mi caso en específico mi landing será para vender, así que teniendo claro mi buyer persona y mi Target especifico, sabré que contenido deberá tener la página.
El contenido es el corazón del sitio, siempre hay que dar valor
