Con la constante evolución y popularidad de los dispositivos móviles, el diseño de sitios web adaptativos se hace esencial. Y aunque cada proyecto de responsive design o diseño web responsive, grande o pequeño, tiene sus propios requerimientos, existen una serie de pasos que si los seguís os ayudarán finalizar vuestro proyecto en responsive web design de forma exitosa.
Diseño Web estático
Hace tan solo unos pocos años, cuando la mayoría de las páginas web que nosotros desarrollábamos eran estáticas, nuestros proyectos fluían a través de una serie de pasos en cascada que hemos ilustrado en la imagen de más abajo. En aquellos tiempos no se le dedicaba mucho tiempo a las revisiones, lo que los clientes veían era o wireframes (bocetos más o menos elaborados) o diseños casi terminados realizados en Photoshop.
Este modelo “estándar” era antes el más utilizado por la mayoría de diseñadores web para trabajar. Pero ahora este modelo no es útil cuando se combina con el diseño adaptativo, donde hay que priorizar contenidos, decidir la disposición de los distintos elementos en diferentes resoluciones de pantalla, etc.
diseño estático vs web responsable
Diseño web Responsable
Con las nuevas tendencias donde los dispositivos móviles son cada vez más utilizados por los usuarios para navegar por Internet, hemos evolucionado hacia un nuevo proceso de diseño web adaptativo o responsive web design que hemos dividido en cuatro fases: investigación, diseño, desarrollo y entrega.
INVESTIGACIÓN
1. Toma de contacto y proyecto a la carta
En esta primera reunión conocemos a nuestro cliente, nos presentarnos y descubrimos cuales son sus necesidades. Establecemos las vías de comunicación, los interlocutores, los hitos y calendarios del proyecto, fechas de entrega, alcances y expectativas.
2. Análisis del proyecto
Intentamos tener una mejor comprensión de su negocio, sus competidores, los objetivos principales del proyecto y a donde quiere llegar en un futuro. En esta etapa puede ser muy útil contar con un formulario de preguntas que ayuden a conocer todos los aspectos del proyecto. Preguntas del tipo ¿para qué?, ¿para quién? ¿dónde? harán reflexionar al cliente sobre su modelo de negocio online. Podemos incluso crear una ficha del perfil de usuario objetivo o varias si pretende acceder a varios nichos de mercado.
Sin un conocimiento correcto de todo esto sería casi imposible saber lo que el cliente realmente necesita/quiere.
Trabajamos con nuestro cliente para ayudarle a determinar los requerimientos del proyecto, desde una perspectiva técnica, creativa y de usabilidad. Analizamos los contenidos, la redacción de los textos y el estilo de diseño de la página.
Todo esto nos guiará a ofrecerle una solución que sea eficaz y rentable. También invertimos tiempo en comprender su marca y analizar sus estrategias de marketing pasadas y presentes, y discutimos sobre su estrategias de marketing futuras, para alinearlas con su proyecto web.
3. Estudio de la competencia
Conocer qué está haciendo la competencia y cómo está posicionando su negocio en la red, tanto a nivel de sitio web como de redes sociales y marketing online, nos ayudará a recoger ideas y mejorar sus acciones. A nivel diseño web, podemos seleccionar buenas webs y analizar con detalle su contenido. Esto se denomina benchmarking (aprender de la competencia comparándose con ella). Es recomendable enfocarse en aquellas que tengan un mayor tamaño e imagen de marca que la de nuestro cliente, incluso las líderes del mercado.
4. Estructura y estrategia de contenidos
Con toda la información que contamos de reuniones anteriores, si nuestro cliente ya cuenta con un sitio web previo, auditamos el contenido existente, tanto cuantitativa como cualitativamente. ¿Qué existe en su web? Y, más importante, ¿está haciendo en él lo que necesita hacer?
Creamos un mapa del sitio para su proyecto y le mostramos cómo será la estructura de secciones de su nueva web. Este proceso le ayuda a comprender qué y cómo vamos a comunicar y establecer las funcionalidades que los usuarios necesitarán.
Los contenidos bien planificada y bien estructurados nos ayudarán a crear tanto el sistema de interacción como el diseño visual.
5. Estrategias de optimización
Desarrollamos un documento resumiendo las mejores prácticas para la optimización en buscadores, incluyendo estructura de páginas, sintaxis de URLs, metadata, y organización de contenidos. Con esto ayudamos al sitio web a tener sentido tanto para usuarios humanos como robots (Googlebot).
6. Dirección estratégica
Toda la información recopilada durante la fase de investigación será compilada en un detallado documento que describe las estrategias de contenidos, técnicas, creativas y de optimización a desarrollar. Este documento servirá de mapa de ruta para el proyecto, manteniendo a todos los miembros del equipo orientados a la estrategia diseñada.
DISEÑO
1. Priorización de contenidos
Junto con el cliente estableceremos el orden de prioridad que tendrán los contenidos de las páginas más importantes. Esto nos ayudará a situar por orden de mayor a menor relevancia los contenidos que compondrán cada página con independencia del dispositivo en el que se esté visualizando la web. Además identificaremos los mensajes más importantes a comunicar en cada area de dichas página y que estén alineados con los objetivos que desea alcanzar en la web.
2. Prototipado
A partir de la priorización de contenidos, trabajamos con el cliente a través de un proceso iterativo para diseñar un prototipado o boceto muy esquemático (en inglés, wireframe) de las principales páginas de la web. Esto ayudará al cliente a conocer cómo se organizará y será mostrado el contenido en dispositivos móviles, tablets y ordenadores de sobremesa.
3. Diseño interacción
Una vez que todos estamos de acuerdo en cómo se ha de distribuir el contenido, a partir del documento de priorización de contenidos y los prototipados, se crearán unos prototipados esquemáticos en HTML sin imágenes ni estilos, simplemente texto y recuadros grises que simularán las zonas donde se incluirá algún elemento gráfico como imágenes o banners. Estos prototipados en HTML darán una idea al cliente de cómo se comportará la web en los distintos dispositivos.
4. Diseño visual
Con todas las funcionalidades bien documentadas en los prototipados, nos enfocaremos en el estilo de diseño de los elementos de la marca, logotipo, paleta de colores y tipografía para dotar al sitio web de una apariencia única. A través de un proceso iterativo entre nuestro equipo y el equipo del cliente, tomaremos importantes decisiones sobre la jerarquía tipográfica, el ritmo vertical y los detalles de la interface.
5. Guía de estilos
A continuación, creamos una guía de estilos que documentará el sistema de diseño a fin de que sea correctamente implementado. Todos los elementos que incluirá la web como recuadros, tipografía, muestras de colores, estilo y estados de botones, cabecera, menú de navegación, enlaces, imágenes, etc. serán detallados en el documento. Esta guía mostrará de forma muy visual las sensaciones, emociones y personalidad que transmitirá la web. Dependiendo de la complejidad del sitio, podemos crear una hoja de estilos estática realizada con Photoshop o prototipos basados en HTML o ambos.
DESARROLLO
1. Construcción plantilla web responsable
En este punto comenzamos a crear la plantilla de la web con HTML5. Este paso es a menudo un trabajo de colaboración estrecha entre diseñadores y desarrolladores. La codificación adaptativa empezará con el diseño web móvil y usaremos la lista de priorización de contenidos o el prototipado como mapa de ruta para priorizar los contenidos en la versión móvil. Incorporaremos los diferentes estilos de diseño según lo especificado en la guía de estilos mediante CSS3 y nos aseguraremos de que cumple con los estándares de W3C. Usaremos JQuery y JavaScript para eventos interactivos, en lugar de Flash o Silverlight. También aplicaremos las mejores prácticas para facilitar la lectura online y la impresión de contenidos añadiendo el código específico en CSS.
2. Integración en CMS
En esta etapa, realizamos la integración de la plantilla en el CMS o plataforma del cliente. Se crearán los componentes necesarios para el proyecto como por ejemplo una tienda online, blog, zonas de registro de usuarios, etc.
3. Compatibilidad y testeo de dispositivos
Esta etapa requiere de mucha paciencia, hay que ir probando el sitio web en los principales navegadores y dispositivos móviles (es decir, iPad, iPhone, Android, Blackberry, etc.). Es importante informar al cliente de que el diseño de su web ha de visualizarse correctamente, pero que los contenidos y la experiencia puede verse ligeramente diferente debido a las características del dispositivo y el navegador. No se trata de hacer que todo parezca idéntico, sino de crear experiencias coherentes en todos los dispositivos.
ENTREGA
1. SUBIR LA WEB AL SERVIDOR
Una vez que hemos comprobado que todo funciona correctamente, subimos el sitio web responsive al servidor del cliente. Desarrollamos un plan de mantenimiento del sitio web y cómo se actualizará y revisará periódicamente el sitio. Es importante ayudar a entender al cliente que para mantener su sitio seguro y optimizado es necesario realizar una serie de tareas de mantenimiento periódicas.
2. PRUEBAS DE ACEPTACIÓN DEL CLIENTE
Las pruebas de aceptación del cliente nos ayudan a confirmar que su sitio web cumple con los objetivos y requisitos definidos al principio del proyecto. Al principio le será necesario conocer cómo funciona cada parte de la web, sentirse cómodo con ella. Necesitará algo de tiempo para saber cómo hacer modificaciones y ajustes respetando al máximo el estilo de diseño.
3. DOCUMENTACIÓN Y FORMACIÓN
Ayudaremos a nuestros clientes a conocer cómo funciona su nuevo CMS. Por lo general nosotros entregamos documentación escrita y realizamos formación online o presencial. También ofrecemos un periodo de prueba después de la transferencia para estar absolutamente seguros de que todo se ajusta a sus necesidades. Ofrecemos apoyo para resolución de dudas técnicas y la resolución de posibles errores. Queremos estar totalmente seguros de que su sitio web está listo para su lanzamiento.
4. PLAN DE LANZAMIENTO E INICIO
El siguiente paso es crear un plan de copias de seguridad, es mejor prevenir que curar. Damos de alta la web en los principales buscadores, instalamos el código de seguimiento estadístico de Google Analytics y comprobamos que se ha configurado correctamente. Si así nos lo demanda el cliente les ayudamos a entender cómo acceder a sus reportes de analíticas y qué datos son más importantes realizar un seguimiento.
5. INICIO DEL PLAN OPERACIONAL
Una página web es algo vivo, que sigue creciendo y cambiando a lo largo del tiempo. Así que en cierto modo, el trabajo nunca termina (lo sentimos pero es así). Es momento de celebrar y felicitar a todo el equipo por el trabajo duro realizado. ¡Y ahora es momento de volver al trabajo!
¿Sigues tú algún otro proceso para tus proyecto de diseño web adaptativo? ¿Conoces tú algún otro recurso interesante para diseño web responsive?
Web Responsable_Descripción
Si necesitas que te ayudemos a poner en marcha un proyecto web responsive eficaz y rentable, no lo dudes y contáctanos. Somos especialistas en diseño de páginas web adaptativas y marketing online. Rellena nuestro formulario de contacto con tus inquietudes. Para nosotros será un placer poder atenderte.