Diseño visual multidispositivo

¿Cómo elaboramos una propuesta de diseño visual para sitios web?

En plataformas digitales es cierto que una imagen vale más que mil palabras. La apariencia visual de una empresa en Internet es fundamental para el desarrollo de su marca corporativa y su reputación, por lo que debe ser el resultado de un estudio minucioso del negocio y su público.

Un buen diseño transmitirá confianza en las personas y, más importante aún, les mostrará claramente cómo interactuar con el sitio, cuáles son los contenidos más importantes y cómo pueden navegarlo. Hablando desde nuestra experiencia, las propuestas de diseño que presentamos se basan en las conclusiones emanadas de estudios de mercado, a la par con los objetivos del proyecto y los arquetipos de usuario caracterizados para este fin.

Objetivos del negocio y conclusiones del benchmark

Para crear una propuesta lo primero que hacemos es analizar los objetivos finales que se definieron en el plan estratégico, durante la primera etapa del proyecto. Luego revisamos las metas del sitio, el público objetivo y las acciones que se establecieron como conversiones, para aclarar quién usará la plataforma y qué queremos que haga en ella. Estos elementos nos entregan guías sobre el look and feel que debemos diseñar.

Luego damos el salto hacia aspectos más concretos del estilo visual. Para esto repasamos las conclusiones del benchmark, un estudio comparativo de sitios web que tiene por objeto identificar las buenas y malas prácticas. De esta forma definimos qué elementos incluiremos y cuáles evitaremos en la futura plataforma.

Por ejemplo, si el público objetivo de una empresa son niños de entre 5 y 10 años, pensaremos en un diseño que fácil de usar y atractivo para ellos. Por su parte, el estudio comparado puede indicarnos que una práctica relevante para mostrar contenidos es ubicar multimedia en el home y usar iconos grandes.

En esta etapa también es importante considerar la personalidad de la marca, sus colores corporativos y el tipo de productos y servicios que ofrece. El manual de normas gráficas guiará varias de estas decisiones, requiriendo a veces la adaptación desde el formato en papel al digital.

Colores y tipografía

Con todos estos elementos construimos dos propuestas visuales que son analizadas con el cliente. En ellas se aplican las paletas de colores y tipografías propias de la marca del cliente.

Las decisiones respecto a estos elementos deben tener las siguientes características:

• Siguen las recomendaciones de accesibilidad web para asegurar que todos puedan acceder los contenidos.
• Reflejan la personalidad de la empresa y su imagen de marca.
• Crean una jerarquía clara de los contenidos, traduciendo decisiones de arquitectura a lenguaje visual.

Es fundamental que estos objetivos se orienten a mejorar la experiencia de los usuarios y los ayuden a consumir el contenido de forma fácil y prácticamente intuitiva. El uso y aplicación de los colores y tipografía escogidas deben ayudar al público a entender la estructura de los contenidos, su importancia y lo que pueden hacer con ellos. De esta forma, todas estas decisiones influyen el nivel de usabilidad de la plataforma.

Desktop y mobile

Como todos los sitios que creamos son full responsive, las primeras propuestas incluyen una muestra del diseño en móviles y computadores de escritorio. No se trata de diseñar el sitio para distintas pantallas modificando el tamaño de los elementos, sino que las unidades de una página se reorganicen y adapten según la resolución de pantalla, para así optimizar la experiencia del usuario en cada dispositivo.

Además, una buena solución responsive modifica las prioridades de los objetivos de acuerdo al dispositivo desde el que será visitado el sitio. Por ejemplo, en un smartphone podemos apoyar el consumo de información y en un escritorio la concreción de transacciones.

¿Cómo trabajamos el diseño visual de cara a los clientes?

Es esencial integrar al cliente en las decisiones respecto al proyecto que encarga, al hacerlo partícipe del trabajo como revisor final y validador de acuerdos. En IDA acostumbramos a tomar un perfil conciliador, entendiendo las exigencias propias de los negocios específicos de cada cliente y fundamentando de forma clara la manera de plasmarlas en el diseño.

En cuanto a las etapas propias del proceso de iteración, en primer término analizamos las dos propuestas de estilo visual con el cliente, se reciben comentarios y se selecciona un estilo gráfico a seguir.

Tras esta orientación aplicamos los cambios requeridos y realizamos una segunda reunión en la que profundizamos el análisis de la nueva propuesta. Aquí es donde discutimos páginas específicas como el inicio, secciones y entradas específicas.

Luego de recoger la segunda iteración de diseño aplicamos las correcciones necesarias, consolidamos el trabajo y desarrollamos una propuesta final, que incluya todas las páginas pensadas desde los wireframes.

Conclusión

Para definir el diseño visual de un sitio web las decisiones tomadas en etapas anteriores son fundamentales, las cuales son a su vez el resultado de una investigación de la empresa, su público y sus objetivos.

Sin embargo, varios elementos del diseño pueden ser optimizados para adaptarlos a los hábitos de los usuarios y los cambios en las tendencias de uso propias de cada época. Analizando las métricas y aplicando pruebas de usabilidad podemos detectar áreas a mejorar para satisfacer las necesidades de los consumidores y ofrecer la mejor experiencia posible.

Recuerda también que estamos atentos a cualquier requerimiento para mejorar tu presencia digital.

Contáctanos.