Guía de diseño web 2020
Comparte:
Tabla de contenidos
Las reglas del diseño web profesional han cambiado
Es un hecho que con la llegada de la digitalización, todo cambia a velocidad de rayo. Las técnicas de marketing digital que daban resultados hace 3 meses, hoy están obsoletas. En lo que respecta a las tendencias visuales y funcionales del diseño web profesional, esta característica de cambio constante se ve aún más presente.
Quédate a leer esta guía de diseño web 2020 y aprende las claves para no fallar en el desarrollo de tu proyecto.
Te hacemos un adelanto de los contenidos que trataremos en esta guía:
- Bases del diseño web
- Claves para un diseño que atrape usuarios
- Presentación de la técnica Growth Driven Design
- El papel del diseño web dentro de tu estrategia de Inbound Marketing
- Tendencias de diseño web profesional 2020
Diseño web, ¿qué es?
Lógicamente intuyes qué es el diseño web.
Para trabajar de forma práctica un concepto, primero debemos entender las bases teóricas, así que vamos a definir qué es el diseño web.
Entendemos por diseño web el trabajo que realizan los profesionales de diseño a nivel de página web. Para la construcción de estos canales digitales se pueden utilizar un sinfín de herramientas o gestores de contenido como son WordPress, Drupal o incluso construcción a base de código.
El trabajo de un diseñador web no termina ahí. Incluye otras tareas como las siguientes:
- Definir la estructura de la información
- Establecer las líneas estéticas visuales
- Encargarse de la funcionalidad de la web (usabilidad y navegabilidad)
¿Por qué es importante el diseño web?
Es totalmente normal que te hagas esta pregunta. Si vas a realizar una inversión, querrás asegurarte que verás resultados. Por aquí te dejamos un listado de hechos que justifican la afirmación de que debes invertir en diseño web:
- Será tu primer contacto con clientes potenciales
- Te ayudará a subir posiciones en Google (posicionamiento SEO)
- Te permite generar sensación de confianza y profesionalidad
- Si lo combinas con técnicas de Inbound Marketing, será un canal para atraer clientes potenciales
La interfaz dentro de estrategia de diseño web: consejos y claves
Llamamos interfaz a ese conjuntos de elementos que verá tu usuario en su pantalla cuando entre tu URL y através de los cuales podrá interaccionar.
Cuanto mejor (más currada), sea tu interfaz, mejores serán tus KPIS. Hablamos de métricas como el tiempo de permanencia, el número de páginas visitadas, el número de clics o la tasa de rebote. Tu objetivo debe ser siempre asegurarte de proporcionar una navegación sencilla e intuitiva a tus usuarios. Es el único modo de orientar tu web a la conversión.
Entremos en profundidad con consejos y claves. Toma nota de los siguientes aspectos para crear interfaces que atrapen usuarios.
1. Equilibrio de elementos
Es fundamental que tu web comunique limpieza y orden. Esto se consigue a través de equilibrio de elementos visuales y textuales. Te recomendamos apostar siempre por incluir una mayor cantidad de elementos visuales como imágenes, vídeos o infografías. Recuerda que una imagen tiene más carga significativa que una palabra.
Por otra parte, es importante que respetes espacios en blanco. Tu web no debe parecer sobrecargada de elementos. En relación a este consejo, evita a toda costa incluir grandes párrafos de texto.
2. Poca profundidad
Cuando hablamos de profundidad en diseño web, nos referimos al número de niveles o de clics que debe hacer un usuario para llegar al contenido que está buscando. Vemos un ejemplo.
Imagina que un usuario ha entrado en tu web buscando un producto en concreto: una blusa de mujer.
No debería de tardar más de 3 clics en encontrar el producto. Los niveles podría ser los siguientes:
Ropa de mujer > Blusas
Esto significa que solo hay dos niveles de profundidad.
La mayoría de los profesionales del diseño web afirman que la profundidad no debe superar nunca los 4 niveles.
Antes de lanzarte a crear una página web, utiliza boli y papel para diseñar tu estructura web. Parece sencillo y una tarea que se puede hacer sobre la marca.
Error.
Necesitarás tiempo e incluso realizar varias pruebas. Ten en cuenta que estás construyendo el esqueleto de tu web.
3. Prepara tu contenido visual
En lo que respecta al contenido que volcarás en tu web, queremos hacerte un par de recomendaciones.
- Crea carpetas con una nomenclatura de organización.
- Guarda en esas carpetas cualquier contenido que produzcas (logo, variaciones, botones sociales…). Nunca sabrás cuando volverás a utilizarlos
- Respeta las direcciones de tu manual de identidad corporativa (colores, tipografía, espacios…)
- Trabaja sobre una estrategia
Que no te lo hemos dicho antes, pero cuando hablamos de contenido visual nos referimos, por ejemplo, a los siguientes elementos:
- Logotipo
- Favicon
- Imágenes de cabecera
- Botonera social
- Imágenes o ilustraciones decorativas
- Vídeos de presentación
- Vídeos para slider
- Imágenes de productos en caso de e-commerce
- Fotos de equipo o de autores de contenido
Existen muchos más elementos pero estos serán los básicos.
4. Tus textos o copy
Ya hemos hablado de tu contenido visual. Pasemos entonces a tus textos. (Puede suceder que esta tarea no la realice el diseñador web, y más bien se encargue a un copy o a algún profesional del departamento de contenido).
Por si acaso, te damos a continuación una serie de consejos para implementar a nivel de copy. ¡Vamos!
Di adiós a los grandes párrafos de texto. Tu usuario no tiene tiempo y busca una comunicación sencilla y rápida. Además, te aseguramos que más de la mitad de tus usuarios entrarán a tu web desde su móvil.
¿Has escuchado hablar de la técnica Storytelling? Pues deberás utilizarla para tus copy.
Entendemos por Storytelling el hecho de contar una historias. En marketing digital se utiliza para llamar la atención del usuario a través de la apelación a sus sentimientos. Cuando tratas de convertir, aludir a las emociones es crucial. Aquí te dejamos una guía para crear una landing page y conviertas emocionando.
Deberás también hacer uso de palabras que inviten a realizar una acción, por ejemplo “entra, descubre…”
Y lo más importante de todo (de todo), ¡no te olvides del SEO! Sí, el SEO también se trabaja a nivel de web.
¿En dónde? De forma básica podríamos mencionar:
- En el menú de navegación
- En los titulares de las páginas
- Completar meta datos como el título o descripción del sitio
Growth Driven Design. La revolución del diseño web
Si es la primera vez que escuchas hablar del Growth Driven Design no puedes abandonarnos ahora. ¡Sigue leyendo para descubrir esta revolucionaria metodología!
En la mayoría de las ocasiones, la creación de una página web puede ser un dolor de cabeza. Si seguimos la metodología tradicional de diseño web, tu proyecto web se desarrollará un tiempos largos y para cuando esté terminada, esta será obsoleta. ¡Tranquilidad! Este problema de complejidad se resuelve con el Growth Driven Design.
Antes de pasar a descirbir el GDD, nos gustaría explicarte otras razones por las que los métodos tradicionales deben quedarse en el pasado:
- Requieren una alta inversión
- Su periodo de creación es de 3 a 6 meses
- Debes realizar una planificación exhaustiva de todas las acciones
¿Te vale con estas razones para pasarte a la nueva metodología? ¿Sí? Veamos entonces sus etapas de aplicación.
Etapas del GDD
Un pequeño recordatorio de la importancia de tu web:
Es la #1 imagen que tendrán tus usuarios de tu empresa dentro de tu estategia de Inbound Marketing.
Es el #1 escalón en tu estrategia de Inbound Sales.
Volvamos a lo que estabamos. El Growth Driven Design se articula en 3 etapas: creación de estrategia, lanzamiento y mejoras. Veamos cada una de estas etapas en profundidad.
Etapa de estrategia
Esta es la primera etapa de tu plan de Growth. La misión aquí será entender a la audiencia e intentar resolver esos problemas latentes a través la página web. Pero antes de nada, si ya tienes página, una auditoría web no te vendría nada mal.
Para construir la estrategia se necesitará cierta información u acciones:
- Concretar objetivos de la empresa y de la web.
- Realizar una investigación de experiencia de usuario.
- Programar una una lista de “trabajos a realizar”.
- Identificar lo que conocemos como propuesta de valor, así como Insights y Pain Points de los usuarios
- Definir fichas Buyer persona (Por aquí te dejamos un artículo que te será de ayuda).
- Crear el Buyer´s Journey de esas Buyer Personas en relación con la web. Es decir deberás concretar qué es lo que pasa antes, durante y después de que un usuario interaccione con tu web.
- Definir la estrategia global. Esto es el momento de concretar acciones. Por ejemplo: integraciones, cambios técnicos, rediseñar la estructura…
- Hacer una lluvia de ideas. El objetivo de este último paso es proponer diferentes ideas que puedan resolver los retos de los usuarios. Dentro de tu lluvia de ideas debes tener en cuenta aspectos como elementos, páginas, o características a proponer.
Etapa de lanzamiento
Te podrá sonar extraño de primeras pero el objetivo de esta etapa es crear de forma rápida una versión nueva tu web. Una versión con un mejor aspecto y con mejores niveles de funcionalidad.
Pero ojo, esta versión no será el producto final. Esto es lo que llamaremos plataforma de lanzamiento.
Esta plataforma de lanzamiento será la base sobre la que irás construyendo y optimizando tu nuevo proyecto web.
¿Qué sentido tiene acción? ¡Recoger datos reales de interacción!
Al publicar esta nueva versión, podrás observar cómo es el comportamiento de los usuarios. En función de esta información, tomarás decisiones de diseño para la versión definitiva de tu web.
Suena bien, ¿eh?
Pero, ¿cómo creo una plataforma de lanzamiento en poco tiempo?
Una buena idea es crear sprints de diseño web. Esto son periodos intensos, concentrado y cortos en los que se proponen e implementas ideas.
Será fundamental contar con una metodología de generación de contenido de calidad efectivo. Si ya has construido antes una web, conoces el papel que juega contenido como imágenes y vídeos.
Etapa de mejoras continuas
Llegados a este punto, ya tienes tu estrategia y tu plataforma de lanzamiento publicada. Ha llegado la hora de observar qué ideas o acciones son las que obtienen mejores resultados.
El esquema que estamos siguiendo entonces podría ser el siguiente:
PLANIFICAR > CONSTRUIR > APRENDER > INTEGRAR
¿Qué significan estos conceptos?
- Planificar. Es elegir los elementos más interesantes a optimizar para conseguir nuestros objetivos. (Cuidado aquí, concentra tus esfuerzos en pocos elementos). Un recurso muy interesante para establecer la prioridad de los elementos a modificar es el siguiente esquema:
Como [PERSONA], cuando [SITUACIÓN], quiero [MOTIVACIÓN] para así poder [RESULTADO]
*Trasladamos este esquema a nuestro nivel de diseñadores*
Para [PERSONA], al visitar [PÁGINA], creemos que cambiando [ELEMENTO] por [PROPUESTA SOLUCIÓN] se obtendrá [RESULTADO].
- Construir. Llegados a este punto, el objetivo es organizar sprints de acciones para cambiar el mayor número de elementos determinados en la fase anterior de planificación. Es aquí cuando se deberá poner en marcha los experimentos o testeos para a continuación confirmar o rechar las hipótesis.
- Aprender. Después de dejar cierto periodo los testeos activos, se recogerán los resultados obtenidos. Es decir, se extrae conocimiento de las hipótesis. Si la hipótesis se confirma, habrá que implementar el cambio en nuestra página web, exactamente igual que cuando haces tests A/B con tus landing pages. Si la hipótesis se rechaza, deberemos olvidarnos de este cambio.
- Comunicar e integrar. Ya tienes definidas qué acciones funcionan. Ha llegado el momento de comunicar las ideas al resto del equipo y elegir conjuntamente cuáles implementar.
Tendencias diseño web 2020
Cada años (cada 3 meses) las tendencias y modas en diseño cambian. Sentimos darte esta noticia, pero es verdad. (¡Otro punto a favor del Growth Driven Desing!)
Por aquí te dejamos las tendencias de diseño web 2020 para que estés al día y tu web consiga los mejores resultados. ¡Vamos!
Crea tu diseño y estructura pensado en modo “Móvil”
Cuando nos disponemos a diseñar una página web, lo hacemos en versión escritorio. Nuestra forma de trabajar por predeterminado nos presenta una hora de trabajo horizontal. ¡Es hora de cambiar! El diseño vertical debe ser tu prioridad.
Ahora, deberás diseñar pensando en una pantalla de un smartphone y hacer la versión responsive para escritorio. Sí, es curioso. Pero es la realidad. Te aseguramos que siguiendo este consejo, mejorarás la experiencia de tus usuarios.
El diseño sencillo ha llegado para quedarse
“Cuanta más información y elementos publique en mi web mejor”. Esa afirmación es muy 2015. Welcome to 2020. Hoy, el diseño web apuesta por el minimalismo, la limpieza y una composición con grandes espacios en blanco. Llámalo poco tiempo de lectura o usuario saturado.
Puedes dar por hecho que las páginas con pocos elementos convertirán mejor. Prueba y verás.
Elementos multimedia por aquí y por allá
Ya te lo decíamos antes, los contenidos visuales como imágenes y vídeos tiene muchísima carga significativa. ¡Saca todo el provecho de estos elementos!
Te proponemos algunas ideas:
- Vídeo de presentación en tu home
- Vídeos de Casos de Éxito
- Vídeos de presentación del equipo en la sección Nosotros
Los elementos animados también son tendencia. Aquí un ejemplo. Pero eh, siempre equilibrio.
WPO y velocidad de carga
Las siglas WPO se refieren a Web Performance Optimization. Su objetivo es mejorar y optimizar tu web para conseguir buenas posiciones en Google.
Imagina que tienes el diseño web perfecto. Sin embargo como no está optimizado, tu página no llega a los usuarios. ¿De qué serviría? De nada. Así que ya sabes, la clave del éxito aquí es mezclar diseño y optimización.
Elementos 3D
Las modas siempre vuelven. En diseño parece haber un patrón de moda constante. Un año la tendencia son elementos 3 D y al año siguiente, elementos planos.
Este 2020 sin duda, decántate por diseños 3D . Darán ese toque de modernidad y juventud a tu web.
Sombras elementos flotantes
El objetivo es crear sensación de profundidad (un poco lo mismo que los elementos 3D).
Esta tendencia la puedes aplicar tanto a imágenes como a textos. De esta forma obtendrás un diseño a medio camino entre el estilo 3D y el estilo plano.
Elementor va a ser tu mejor amigo
En los últimos años, Elementor se ha posicionado como la herramienta de diseño web por excelencia.
Permite crear un diseño web de forma intuitiva y sus opciones y funcionalidades son infinitas.
Con esta herramienta podrás crear desde cero tu página web. Es un plugging que puedes instalar en WordPress.
Cuenta con una versión gratuita y con una versión Pro. Te recomendamos que empieces probando las funciones gratuitas (son muy potentes).
Si no has tocado nunca esta herramienta, no pasa nada. En Youtube podrás encontrar un gran número de tutoriales paso a paso. Además, como te decíamos antes, es una herramienta muy intuitiva. No necesitas conocimientos de programación.
Nos gustaría cerrar esta guía con un vídeo que nos ha sido de mucha ayuda:
Recuerda: el diseño web cambia constantemente. Date la oportunidad de probar la metodología de Growth Driven Design y súmate a esta ola de diseño inteligente.
