La página web de tu empresa o tu marca personal es el pilar fundamental de tu ecosistema digital con el que te vas a mostrar a los usuarios y potenciales clientes.
El diseño y aspecto visual de tu web son claves que van a definir la primera impresión del usuario hacia tu producto en los primeros segundos de navegación. Debemos captar la atención y mantenerla, por lo tanto, debemos prestar mucha atención al diseño gráfico, la estructura y el contenido.
Seguro que tienes una gran propuesta, vamos a ver paso a paso cómo a través del diseño podemos sacarle el máximo partido y ganar conversiones.
Alinear el diseño con los objetivos de marketing
El propósito de tu sitio web es la razón fundamental que debes tener presente en todo momento, no sólo durante la creación y construcción del mismo. Siempre que muestres tu web al mundo debes poder confirmar que tu portal cumple con el objetivo para el que se ha creado, de otra manera, por bonito, llamativo o moderno que sea, perderá su sentido y con ello seguramente las visitas y conversiones. Si tienes un producto útil e interesante para los usuarios, tu web debe reflejarlo.
En este caso tener un plan estratégico de marketing te ayudará a definir en todo momento las metas a conseguir a lo largo del tiempo, para poder ajustar o adaptar el contenido y el diseño en función del propósito.
Rodéate de especialistas en materia de diseño, de creación de páginas web, de marketing digital y asegúrate de que incluyes en el proceso a todo tipo de stakeholders y partes interesadas, sin olvidar nunca a tu público o audiencia. Cuánto mejor conozcas a las personas a las que te diriges, más eficaz será tu mensaje.
Usabilidad
Todo producto digital, tenga el objetivo que tenga, debe ser usable. El diseño de una página web y el diseño gráfico aplicado deben atenerse a unos principios de usabilidad para garantizar el éxito.
Peter Morville detalla los factores a tener en cuenta para la usabilidad de un producto, lo cual puede aplicarse perfectamente a tu página web:
1. Debe ser útil, relevante para el usuario, debe cubrir una necesidad o resolver un problema.
2. Debe ser deseable, si no gusta o no apetece su uso no funcionará.
3. Debe ser accesible, para cualquier persona tenga las capacidades que tenga.
4. Debe inspirar confianza, ser creíble, aportar valor.
5. Debe ser organizada, para que se encuentre lo que se busque, debe tener una correcta arquitectura de la información.
6. Debe ser sencilla y de fácil manejo, si es muy complicada el usuario se frustrará y abandonará el sitio.
7. Cumplir todo esto convierte tu página web en un lugar valioso al que el usuario recurrirá.
Diseño de Wireframes
Es bueno empezar por bocetos sencillos, antes incluso de ponerse al ordenador, se pueden empezar a definir las primeras estructuras a mano, con papel y lápiz o en tu pizarra, a menudo es más rápido esta técnica al principio, cuando se está empezando a pintar lo que será, pues hay muchos cambios.
Estos primeros diseños deben determinar el flujo de navegación, la jerarquía de los contenidos y posición de los distintos elementos, no debemos buscar en este punto el detalle, no tienen porqué tener color, las imágenes o iconos definitivos ni el texto, se trata de ver a grosso modo la estructura.
En productos digitales que abarquen mucha información, es interesante contar con especialistas en la arquitectura de la información, para una correcta organización de la información y los contenidos, puesto que son los profesionales que dominan esta fase del proceso que hace de puente entre la primera parte de investigación y definición de objetivos y la última que recae en el aspecto más gráfico y visual y es un gran aliado del SEO.
Elaboración de Prototipos
Una vez tenemos la idea, la estructura y contamos con el contenido podemos empezar a crear diseños y prototipos más fieles que indiquen con exactitud cómo va a lucir la web.
En este punto sí hay que determinar el estilo visual de todos los elementos, para esto es fundamental contar con un manual de marca o guía de estilo, si no lo tenemos, podemos elaborarlo. Esta pauta detalla con precisión el branding de la marca y nos ayuda a saber cómo debemos adaptar su estilo corporativo a distintos formatos, en este caso en web.
Es muy útil y cada vez más necesario, crear en este paso un Design System. Tener un sistema de diseño es contar con un ecosistema de elementos basados en la marca y que conformarán nuestra web en todas sus variantes y adaptaciones. Nos ayuda a crear todos los componentes reutilizables de nuestra web. El método más interesante para crear y desarrollar un buen Design System es el propuesto en Atomic Design. Esta metodología, basada en las estructuras químicas, nos propone empezar por los ingredientes más pequeños de la web, como serían los átomos, que unidos forman moléculas, que agrupadas forman organismos y a su vez crean plantillas que finalmente se convierten en páginas. Esta perspectiva permite optimizar los recursos y el trabajo de diseño, además de que facilita la escalabilidad del producto.
Si buscas pautas de buenas prácticas mundialmente reconocidas e implementadas, existen varios referentes muy consolidados para abordar el diseño web: Material design de Google, Fluent Design de Microsoft y Human Interface Guidelines de Apple.
También existen multitud de herramientas para prototipar, las más sofisticadas y usadas por los creativos y diseñadores actualmente son Sketch (app para Apple y de pago), Adobe XD (gratuita para todos los sistemas operativos) y Figma (de pago y apto para todos los SO) que el último año ha ganado terreno a las anteriores y se ha consolidado como la mejor herramienta de diseño y prototipado del mercado.
Elementos gráficos a tener en cuenta:
1. Colores
Seguramente la marca o producto tenga un color principal en el que basarse, este puede ser el que usemos en los componentes a resaltar, por ejemplo, en los botones, en los enlaces, en titulares o en el menú. No debe estar por todas partes, puede ser simplemente una nota de color, siempre y cuando el color principal nos ayude a destacar dentro de la composición y en harmonía. Debe ayudar a captar la atención del usuario sin distraer ni perturbar la comprensión de lo que está haciendo.
Es interesante crear una paleta de 2 o 3 colores, en función de la marca, y usarlos como secundarios o complementarios. El buen uso de esta paleta debe reforzar la jerarquía de contenidos y el branding.
Breve resumen sobre la teoría del color https://graffica.info/teoria-del-color-guia-definitiva/ para entender mejor cómo crear paletas harmoniosas y qué significan los colores. Aunque siempre puedes animarte a romper las reglas establecidas.
También existen múltiples plataformas para crear tu colorimetría como coolors.co o Adobe color
También es importante tener en cuenta el brillo y contraste de los colores, en este caso los colores oscuros sobre fondo blanco (el que por defecto tiene toda la web) son más reconocibles y legibles que los brillantes como el amarillo o turquesa, sin embargo, estos últimos dan más vida y dinamismo. Lo correcto sería, por ejemplo, no escribir texto blanco sobre un fondo amarillo y utilizar el blanco para destacar algo sobre fondos oscuros.
No hay que olvidar que una web debe ser ACCESIBLE por cualquier usuario, esto quiere decir que debemos diseñar pensando también en las personas que tienen discapacidades visuales o cognitivas. Para ello aconsejamos seguir las buenas prácticas recomendadas por el estándar W3C.
2. Tipografía
Las fuentes tipográficas que usemos no sólo añaden estilo, si no que determinan la legibilidad del producto.
Históricamente las fuentes más legibles sobre papel son las de tipo Serif como Times New Roman o Didot, pero actualmente, sobre pantallas lumínicas el ojo reconoce mejor las de tipo Sans serif o de palo seco, como la Arial o Helvética.
Para enriquecer el diseño es muy común utilizar dos familias tipográficas, una para titulares y encabezados, que puede ser más detallista y otra más simple para el cuerpo de texto general.
La referencia internacional en materia de tipografías es Google Fonts, con su banco de más de 1000 familias tipográficas gratuitas, perfectamente preparadas para su uso online.
3. Imágenes
“Una imagen vale más que mil palabras”
Apoyarnos en el uso de imágenes es una solución ideal para transmitir conceptos, emociones y mensajes de una forma rápida y poderosa.
No nos referimos solamente al uso de fotografías, también la utilización de ilustraciones, estampados, geometrías, iconos, etc. Estos elementos gráficos enriquecen la composición, nos ayudan a guiar la atención del usuario y por tanto, su navegación.
Existen multitud de bancos de imágenes, los de pago te aseguran los derechos de uso, pero también los hay gratuitos con licencia de uso como: unsplash o pixabay, o bancos de iconografía como flaticon.
4. Distribución de los contenidos
Si hablamos de páginas web que conviertan, que vendan, que generen descargas o clicks, la estructura debe ajustarse también a los estándares de los buscadores, que en nuestro contexto significa que debemos adaptarnos a las buenas prácticas que recomienda Google a nivel de SEO, para favorecer nuestro posicionamiento en internet.
No se trata únicamente de añadir un plugin que revise snippets y metadescrptions, se trata de organizar el contenido de forma jerárquica, priorizando los mensajes con más relevancia y trabajando las keywords y etiquetas HTML adecuadas. En esta web hay mucho buenos ejemplos de plantillas y estructuras que lo ponen en práctica: https://www.honed.co/wireframe-seo/
Si ya tienes un sitio web pero buscas un rediseño es muy interesante realizar primero una auditoría SEO y tenerla en cuenta en el plan estratégico de marketing para alinear objetivos y diseñar la web en consecuencia.
5. CTA´s
Estos componentes de “Call to action” son recurrentes en portales que buscan la conversión, pues indican exactamente al usuario la acción que queremos que lleven a cabo. Desde simples botones a banners más complejos, conviene integrarlos en nuestra web si queremos crear flujos de navegación ricos y una correcta distribución de los contenidos.
Los CTA´s deben ser el camino que lleva al visitante hacia nuestras micro y macro conversiones, tales como: formularios de contacto, añadir al carrito, comprar, acceder a una sección o página; y representan el objetivo del sitio web; por ello deben ser pensados y estructurados acorde al recorrido de compra de nuestros clientes (momento desde que llega al sitio web, hasta que se convierte en cliente)
Maquetación web
Con el diseño y el prototipo listo, podemos “crear” el sitio web definitivo. Para esta parte tenemos dos grandes opciones: crear la web desde cero, con el apoyo de personas expertas en desarrollo y programación para la estructura y el estilo, o bien, hacer uso de un CMS (Content Management System) que permiten, de forma más intuitiva “volcar” el contenido y crear el diseño a partir de módulos establecidos y plantillas.
Wordpress es el CMS más utilizado, creado originalmente para extender el uso de blogs, cuenta con una vasta comunidad de usuarios y mucho soporte técnico. Además, es fácil integrarlo con constructores y plantillas, es decir, software complementario que hace más rápida y sencilla la maquetación y más visual el proceso, acercando el lenguaje web al proceso de diseño. Por ejemplo, Elementor o Divi son buenas combinaciones para trabajar tu página web en Wordpress.
Otros CMS Open Source conocidos son: Prestashop, especialmente poderoso para eCommerce, Drupal, para sitios web grandes y complejos o Joomla, aunque tiene una mayor curva de aprendizaje, es muy potente y versátil.
En este artículo podrás encontrar información más detallada sobre los mejores CMS para tu página web o ecommerce.
Responsive – Mobile First
Se debe tener en cuenta en el proceso de diseño el tipo de dispositivo en el que se va a ver nuestra web y aplicarlo rigurosamente en la maquetación. No es lo mismo pintar un lienzo para una valla publicitaria que pintarlo para un folleto. El modo en el que los usuarios utilizan los dispositivos y el contexto en el que lo hacen cambia por completo de un móvil a un ordenador y el tamaño de las pantallas es un factor decisivo.
El diseño y los contenidos deben ser adaptables y responsivos, es decir, que se ajusten a las características del espacio en el que se visualizan.
Los smartphones se han ido imponiendo a lo largo de los años, y actualmente el uso de dispositivos móviles supera a los de escritorio, es por eso que la norma de diseñar para “Mobile First” debe imperar a la hora de atacar un diseño digital. Primero debe diseñarse para pantallas pequeñas y luego adaptar ese diseño a las grandes.
CONCLUSIÓN
Diseñar una buena página web es un proceso complejo, pero no tiene por qué ser complicado. El diseño gráfico es un aspecto fundamental porque es lo primero que entra por los ojos, pero debe estar bien estructurado, configurado y sobre todo, alineado con los objetivos del negocio.
