Cómo diseñar una web en 3 pasos
Diseñar una página web puede ser un arma de doble filo. Siempre queremos diseñar una página web increíble pero no debemos perder el foco en lo más importante, que no es otra cosa que conocer y satisfacer las necesidades del cliente.
Estas pueden ser complejas y específicas o bien tan sencillas como mostrar la información comercial del cliente en su página web, pero si no prestamos atención en sus necesidades, podemos dar al traste con todo el proyecto.
Supongamos que te dedicas a la creación de páginas web Almería, si te has preguntado alguna vez cómo hacer un buen diseño web, te mostramos cual es el proceso de creación del primer wireframe o esbozo que seguimos en lorraine, parte inicial de nuestro plan de visibilidad online para pymes y autónomos, consistente en 3 acciones: Descubrir, explorar e implementar.
Descubrir
La acción de descubrir consiste básicamente en conocer al cliente y saber qué hace. Aprender esta información es crucial para poder realizar un diseño web apropiado y efectivo.
Antes de realizar cualquier entrevista con el cliente, es conveniente obtener información del negocio buscando su página web en los motores de búsqueda y, en caso de que no disponga de ella, informarse sobre en qué consiste su negocio.
Con esta información en mente, toca tener una primera entrevista con el cliente, al que se le realizarán entre otras, las siguientes preguntas:
Si el proyecto es una página web nueva:
- ¿A qué se dedica la empresa?
- ¿Cuál es su rol en la empresa?
- ¿Tiene la empresa un logo existente o marca?
- ¿Cuál es el objetivo para desarrollar una página web?
- ¿Qué información quieres mostrar?
- ¿Tienes ejemplos de páginas web que te gusten o que no te gusten?
Si el proyecto es el rediseño de una página web, también se pregunta:
- ¿Qué suelen buscar tus visitantes cuando entran en tu página web?
- ¿Cuáles son los problemas con el diseño actual?
- ¿Qué esperas conseguir con el rediseño?
- ¿Hay algún elemento que te gustaría conservar?
- ¿Cómo crees que reaccionarán tus visitantes ante el nuevo diseño?
En ambos casos:
- ¿Sabrías decirme quiénes son tus competidores?
- ¿Tienes un cliente tipo? Edad, género
Hay que evitar entrar en detalles técnicos, que probablemente digan muy poco al cliente y enfocarse en lograr toda la información posible para llegar a conocer las necesidades de éste.
Explorar
La siguiente acción en el proceso de diseño consiste en utilizar toda la información obtenida en la fase anterior, analizarla y experimentar con ella hasta encontrar la mejor forma posible de organizar toda la información, productos y servicios que el cliente desea mostrar.
En el mundo del diseño web, esto es la fase inicial de un proceso conocido como Arquitectura de la Información, o IA en su acrónimo en inglés. Para proyectos muy complejos, esto es una carrera en sí misma, pero sus principios pueden suponer una base sólida para la gran mayoría de webs para pymes y autónomos. En este punto queremos organizar el contenido y el flujo de la información de una forma adecuada.
Dos de las herramientas que mejor funcionan en esta fase son la pizarra y las tarjetas adhesivas. Se trata de hacer una lista con todas las secciones, subsecciones y páginas del sitio y organizarlas en grupos y subgrupos.
Si se dispone de tarjetas adhesiva se pueden colocar en la pared en el orden en qué aparecerían en la navegación del sitio web. Hay que alcanzar el punto óptimo entre no ofrecer demasiadas opciones al visitante y no ocultar secciones de la web demasiado, esto es, a muchos clics de distancia de la página principal.
Implementar
Una vez obtenida la información que queremos mostrar y organizada la estructura de la misma, la siguiente acción a realizar es diseñar un mock de la web.
Independientemente del proyecto, hay que evitar en esta fase centrarse en los detalles tecnológicos, da igual si la página se va a hacer en wordpress, joomla, prestashop o va a ser un desarrollo a medida hecho en ruby on rails.
El hecho cierto es que tenemos una interfaz que diseñar y un bloc en blanco, don’t panic. Con el siguiente proceso se agiliza la consecución del objetivo:
- Se realizan una serie de esbozos en papel, y entre todos ellos se decide el que más guste.
- En photoshop o la herramienta de diseño que se utilice, se traslada la estructura de la web definida en el esbozo con la herramienta de rectángulo.
- Se experimenta con los colores primarios y de fondo hasta lograr un esquema de color sólido.
- Se juega con la rejilla y el espacio en blanco hasta lograr una composición que poder enseñarle al cliente.
Bonus track: 3 points checklist
Una vez realizadas estas 3 acciones, hay 3 condiciones que el diseño debe cumplir para considerarse un “buen diseño web”.
Los usuarios están encantados con el diseño y atraídos por el contenido
Una de las cosas más importantes a conseguir en un diseño web es el tiempo que toma a los usuarios escanear la web en busca de la información que desean, ya sea el contenido, un enlace o un formulario. El diseño no puede ser un obstáculo, ha de ser un conducto entre el usuario y la información.
Los usuarios pueden moverse fácilmente a través de una navegación intuitiva
El bloque de navegación debe ser claramente visible y cada enlace debe tener un título descriptivo. Una estructura de navegación que no sólo cambia de estilo cuando el cursor se sitúa sobre ella si no que también muestra cuál es la página activa, ayuda a los usuarios a reconocer donde están.
La navegación secundaria, los campos de búsqueda y los enlaces salientes no deben ser características dominantes en la página, debe acompañar de forma sutil al contenido permitiendo el consumo de éste y facilitando la próxima acción a realizar.
Los usuarios reconocen que cada página pertenece al sitio
Incluso si hay una gran diferencia entre el diseño de la página de inicio y el resto de páginas, el diseño debe ser consistente y permitir identificar que estamos en la misma página web.