Image Image Image Image Image Image Image Image Image Image á
Scroll to top

Top

Sin Comentarios

8 pasos para diseñar una página web

8 pasos para diseñar una página web
Jorge Camí

Los proyectos web son complejos por la multiplicidad de variables que en ellos intervienen (clientes, público objetivo, usuarios, funcionalidades, estructuras, actualizaciones, soportes, diseñadores, consultores de marketing, programadores…) y por la tendencia “casi natural” a extender los plazos de trabajo y entrega.

Un grafista que recibe un encargo de diseño web puede lanzarse a trabajar “a lo bonzo” consiguiendo resultados visuales muy sorprendentes pero que, sin embargo, no son operativos de cara la ejecución final del site. Por otro lado tiene la opción de formalizar un proceso de trabajo y de diseño digital ordenado por fases coherentes.

Trabajar el diseño de una web de forma directa (sin tener encuenta otros procesos y/o agentes) puede hacer que el estilismo planteado sea incompatible con el soporte o desarrollo de programación posterior, que los usuarios del site no estén acostumbrados/preparados a una “nueva” interacción o estructura propuesta (fruto de la mente alocada y/o el ego creativo del diseñador) o que simplemente el enfoque del la interface no sea el oportuno para el tipo de entidad con la que trabajamos.

Para poder asentar cada paso del proceso de diseño web y marcar unas pautas procedimentales que aseguren al viabilidad del proyecto, es aconsejable atender a algunas de las siguientes fases:

disenar_web_barcelona

1.Reunión personal  y/o de calidad con el cliente.

El contacto cara a cara con el cliente final es fundamental ya que puede aportarnos muchas pistas sobre el tipo de perfil personal/profesional que nos está encargado el proyecto. Cómo se expresa, cómo se mueve o qué tipo de ropa viste nuestro cliente supone (ante un grafista atento y curioso) un volumen de información valiosísima. Datos importantes que nos ayudarán a ubicar el proyecto antes de iniciarlo. Sabremos pues “por dónde van los tiros” y de “qué pie cojea” ese tipo!

En caso de no poder mantener una reunión directa, es aconsejable establecer contacto por vías que generen empatía y que nos permitan interactuar con mayor nivel de fiabilidad. Esto nos facilitará recoger un volumen de información más útil que la que podremos extraer de un simple mail. Una videoconferencia o unas cuantas llamadas telefónicas (varias, las que sean necesarias…) serían una buena opción para poder expresarse con fluidez y concreción.

En este primer contacto hemos de escuchar con atención. Dejar hablar al cliente, observar y ser cautos para no condicionar su proposición inicial (la web idílica que el/ella espera). Una vez recogida la información inicial hemos de reconducir su encargo si fuera necesario, aconsejando y proponiendo en base a nuestra experiencia las soluciones u opciones más válidas para su requerimientos.

Para concluir se deben sentar las bases de un briefing conciso y se le debe explicar con claridad cuales van a ser las fases concretas que va a tener el proyecto.

A parte de ello hemos de intentar hacer partícipe a nuestro cliente, tratando de involucrarle de forma activa en el proceso (esto oxigenará los procesos y agilizará todas las fases).

Antes de comenzar el cliente debería introducirnos en su sector pasándonos referencias de sites que le agraden, webs de referencia en el mercado; nos debe ayudar y aconsejar a la hora de generar las estructura de navegación de partida, indicar cuál de sus productos/servicios tiene preferencia frente al resto…

No olvidemos que él es el verdadero experto en su área. Nosotros como grafistas somos meros traductores visuales (que nos encontramos en el medio de un proceso largo y complejo). No somos protagonistas. Los protagonistas son los usuarios finales.

 

2. Análisis del sector y búsqueda de referentes.

A parte de la información que nos pueda trasladar el cliente en los primeros contactos, hemos de emprender una investigación propia en la que nos solo busquemos referentes estéticos o de diseño.

Habremos de profundizar en el sector, contextos de mercado, tipos de público, modelos de negocio, tipologías de servicios…

Como punto de partida podríamos analizar las marcas competidoras que operan en nuestro mismo sector de actuación. El tipo de comunicación offline que hacen estas entidades, las redes sociales en las que se mueven (y como lo hacen) y finalmente que tipo de arquitecturas web presentan (corporativas, landing pages, microsites, módulos de contacto directo, ventas cruzada…). En este punto todo es relevante.

Una vez que hemos afianzado cual va a ser el contexto general en el que debe operar nuestra nueva página, será cuando podremos realizar una investigación estética a nivel de diseño web.

En este punto podremos fijarnos en webs de nuestro sector, en sites de otros sectores que presenten funcionalidades o módulos concretos que podríamos incorporar a nuestra propuesta.

Para realizar esta búsqueda podemos acceder a sites como:

RECURSOS:

http://www.webdesign-inspiration.com/

http://www.designmadeingermany.de/sites-we-like/

http://www.siteinspire.com

http://www.awwwards.com/

inspiracion_web_site_modelos_plantillasweb

3. Generar un mapa web: La clave del proceso.

Antes de embarcarnos con el diseño o una aproximación estilística de mayor fidelidad, debemos acotar cuáes serán los apartados del site a diseñar y la jerarquía que hay entre ellos. Saber de antemano cuáles serán los bloques matriz, las categorías, subcategorías y fichas finales así como definir los apartados de contacto o corporativos.

Este paso es esencial ya que condiciona el 100% del diseño final y el tipo de desarrollo posterior que los programadores tendrán que implementar.

Se debe “exigir” al cliente que nos pase un primer borrador de mapa web. Posteriormente el grafista apoyado por personal de estrategia o marketing digital (si contamos con esta opción) habrá de reconfigurar este sitemap para hacerlo más usable y coherente.

No se debería pasar a la siguiente fase sin contar con un OK por escrito en el que el cliente exponga su conformidad con el armazón web que después se vestirá con capas visuales y de interacción.

RECURSOS:

http://www.xmind.net/

site_map_mapa_web_grafismo

4. Estructura en Mock Ups.

Tras aprobar el árbol matriz de contenido, se debe iniciar una aproximación formal de diseño e interacción. Generar un diseño modular de baja fidelidad supone traducir el mapa web a bloque visuales que permitirán validar parte a parte cada sector de la web y el tipo de interacción entre cada uno de ellos.

Esta fase es sensible pero muy efectiva. El cliente entenderá cuales serán los bloques principales de su web, donde se ubicarán, que tipo de proporción tendrán y como el usuario podría interactuar con ellos.

Dichos mock ups deben ser validados por el cliente. Durante su presentación deberían surgir nuevas opciones o modelos de interacción (fruto de la relación de confianza establecida previamente), pues el cliente comenzará a ser consciente de la forma que tomará su nuevo site y nos propondrá algunos cambios que mejorar el funcionamiento general de la página.  Hemos de escuchar sus recomendaciones y tratar de implementar todo aquello que aporte mejoras relevantes al proyecto.

De igual modo que en la fase de mapa web el cliente habría de facilitarnos un OK por escrito con el que cerrar este proceso y arrancar con la fase de diseño final.

RECURSOS:

https://balsamiq.com/products/mockups/

http://www.axure.com/

Overview1

5. Diseño Final.

Ahora es el momento en el que el diseñador puede, con toda la información y pasos previos bien abordados, comenzar a desplegar su destreza gráfica.

Atendiendo a las referencias y estructuras aprobadas previamente por el cliente, nuestro diseño de interfaces será mucho más efectivo y operativo.

Para ser operativos en el desarrollo del estilo es recomendable no diseñar todos los apartados o url’s del site, sino hacer una muestra de los apartados más relevantes para validarlos con el cliente antes de concluir todo el diseño. Estos apartados nos permiten verificar si nuestro estilismo encaja con las expectativas.  En caso contrario podemos corregir con agilidad unos cuantos slides y no tener que emprender un diseño nuevo de forma completa.

En este apartado se debería presentar al menos la Home, categoría, subcategoría, Ficha final o de producto (entendiendo este como el último nivel), apartado de contacto y un apartado básico o corporativo. Ah! Y también hay que diseñar la página de 404.

Posteriormente, habiendo contado con la verificación del cliente, podremos diseñar el resto de apartados siguiendo el estilo ya validado.

diseno_final_web

7. Especificaciones y seguimiento.

Cuando concluimos el diseño y lo tenemos aprobado al 100% no hemos de dejarlo ir como una animalito de Dios. ¿Quién le dará forma? ¿Cómo se hará? ¿Cuándo y bajo qué soporte?

Como diseñadores hemos de empatizar con el resto de agentes que intervienen en el proceso. La parte final y más compleja es la programación. Si queremos que el desarrollador sea sensible con el grafismo propuesto hemos de ayudarle a comprender los puntos clave de nuestro estilismo.

Por ello debemos especificar con máximo nivel de detalle todas y cada una de las variantes de estilo que se presentan y todas y cada una de las páginas diseñadas. Hemos de especificar los colores, anchuras, alturas, tipografías, tamaños de fuente, cambios de color o formato por interacción, funcionalidades, dirección de los enlaces… TODO! Absolutamente todo!

Recordemos que los programadores web son otro perfil profesional. No tienen por qué tener una sensibilidad gráfica especial y tampoco un respeto pulcro por lo visual. Si no les indicamos de forma fehaciente qué y cómo deben hacerlo…¿Cómo pretendemos que al final del proceso la web esté “clavada”?

En ocasiones especificar supone un esfuerzo casi mayor que el propio diseño, pero a la larga acortará el proceso de entrega ya que se evitan multitud de correcciones finales.

especificaciones_web_diseno_programacion

8. Test y Validación.

Para concluir, deberemos hacer un repaso global del site, junto al equipo de programación, para validar que lo presentado a cliente es lo que realmente se entregará. De este modo la anticipamos posibles conflictos cliente-proveedor por desajustes entre navegadores o, quizá, por una carga ineficiente del contenido.

Sólo cuando hemos testeado todo el site será cuando podremos lanzarlo para que nuestro cliente y sus clientes comiencen a disfrutarla.

Las fases aquí propuestas son un modelo de trabajo concreto. Ayudarán a que tu diseño web llegue a buen puerto, pero no son los únicos procedimientos que puedes usar. Sea como fuere lo aconsejable es fraccionar el trabajo por fases y controlar cada paso de un modo consciente.

Envíanos tu comentario