Imagina que entras en una tienda para buscar ropa de trabajo nueva. Observas manchas en el suelo, estanterías desorganizadas y un olor extraño mientras miras a tu alrededor. ¿Te quedarías en la tienda y comprarías en ella?
El diseño de las tiendas influye en el comportamiento de los clientes, y lo mismo ocurre con los sitios web.
Una encuesta realizada por Clutch a 612 personas descubrió que el 83% de los participantes se fijan en si el diseño de un sitio web es estéticamente agradable y está actualizado. Por otra parte, el 50% de los participantes abandonaría un sitio web para siempre si considera que el contenido es irrelevante o no satisface sus necesidades.
Entonces, ¿cómo diseñar un sitio web que guste a los clientes?
De eso trata este artículo. Te mostraremos por qué es esencial un buen diseño web y compartiremos 15 principios de diseño web que puedes aprovechar para construir un sitio web de alta calidad.
¿Por qué es importante un buen diseño web?
El diseñador web medio gana 57.000 dólares al año, unos 8.000 dólares más que los desarrolladores web junior, que ganan una media de 44.000 dólares al año. Los diseñadores son compensados razonablemente bien por una buena razón: su trabajo es vital.
Cuando un nuevo cliente visita tu sitio web, establece la primera impresión que da forma a sus futuras interacciones con tu marca. Es en este momento cuando desarrollan su primera opinión sobre ti.
Tu sitio web también transmite la identidad, la visión y la posición de tu marca dentro del sector. Si tienes competidores cercanos con un producto similar, un sitio web que haga que la gente diga «guau» te hará más memorable e impulsará el conocimiento de tu marca por encima de la competencia.
Además, un sitio web sólido puede mejorar tus esfuerzos de optimización en los motores de búsqueda (SEO ).
Los motores de búsqueda tienen en cuenta cómo responde la gente a los sitios web cuando los clasifican en los resultados de las búsquedas. Si tu tasa de rebote es baja y la gente visita con frecuencia varias páginas de tu sitio, es probable que los motores de búsqueda te clasifiquen mejor que un competidor con una tasa de rebote alta.
El SEO técnico también es importante aquí. Los sitios web con títulos, estructuras de página y enlaces bien diseñados son más accesibles. Así, tanto los motores de búsqueda como los clientes los favorecen. Veamos algunos principios importantes del diseño web.
15 principios del diseño web eficaz
Cuando hablamos de «principios de diseño web», nos referimos a las reglas generales para el diseño de los elementos texturales y visuales de un sitio o página web. Cada marca adopta los principios de diseño web de forma diferente: algunos se ajustan a las mejores prácticas y otros no.
Para ayudarte a crear un sitio web excelente, aquí tienes 15 principios de diseño web (además de ejemplos de sitios web que los utilizan con eficacia):
1. Las páginas deben ser fáciles de navegar
En el estudio de Clutch sobre las experiencias de los usuarios en los sitios web, el 94% de los participantes consideraron que la navegación por el sitio web es la «característica más importante del sitio web»
No es de extrañar por qué. Si un usuario de un motor de búsqueda llega a tu sitio web buscando información sobre «diseño móvil» y no la encuentra, el siguiente paso natural es hacer clic en «atrás» y probar otro sitio web.
¿Cómo puedes adoptar una navegación bien planificada? Inspírate en el sitio web de The Cool Club.
Cuando entras en la página de inicio de The Cool Club, el diseño del sitio web es extremadamente claro. Puedes navegar a las secciones de productos clave (como «juegos de cartas» y «lista de cubos») utilizando los botones de la izquierda, y puedes navegar a las páginas «sobre» y «contacto» utilizando los botones de la derecha.
Las páginas de productos de The Cool Club también son muy fáciles de navegar. La marca tiene actualmente una baraja interactiva que presenta 54 variaciones geniales y sus páginas correspondientes. Sólo tienes que desplazarte hacia abajo y hacer clic en la carta que quieras ver más.
Para crear un sitio web igual de eficaz, ordena el contenido en categorías claras para tus cabeceras y pies de página y ponles títulos descriptivos. Luego, ordena tus páginas por temas, para que la gente pueda navegar entre temas similares con facilidad.
Además, haz que tu cabecera y pie de página sean coherentes en todo tu sitio web.
2. Aprovecha siempre el espacio negativo
El espacio negativo (o «espacio en blanco») es la región que rodea a los temas de una página, ya sean imágenes, vídeos, texto o botones.
Muchos comerciantes entusiastas se apresuran a llenar todos los espacios libres de una página, con la esperanza de que dar más información a los visitantes hará que se comprometan más. Sin embargo, esto suele dar lugar a páginas abrumadoras y confusas.
Ahí es donde entra el espacio negativo. El uso del espacio negativo enfatiza los elementos más críticos de cada página, ya que la falta de color atrae los ojos del visitante hacia las zonas más brillantes.
Por supuesto, «utilizar el espacio negativo» no significa «crear un sitio web blanco y aburrido» En cambio, puedes aprovechar el espacio utilizando los colores de tu marca, como hace Garoa.
La página de inicio de Garoa utiliza una paleta de color crema para crear ambiente, al tiempo que aprovecha el espacio negativo. El resultado es que tus ojos se dirigen al contenido introductorio de la sección «cuidado de la piel para el otoño» en el centro, en lugar de las partes menos importantes.
Asegúrate de aprovechar el espacio blanco para mostrar la jerarquía en tu propio sitio web.
3. Las páginas deben ser coherentes, pero atractivas
Cuando lees nombres de marcas como «Cadbury», «Hershey’s» o «Nike», es probable que te venga a la mente inmediatamente la visión de sus logotipos, fuentes y estilos de diseño. Ese es el poder de una marca consistente.
Cuando diseñes tu sitio web, crea páginas con elementos coherentes para dar a tu marca una identidad visual clara. Eso significa:
- Utilizar los mismos tipos de letra, estilos y colores en las cabeceras
- Mantener los mismos espacios entre elementos visuales entre páginas
- Utilizar paletas de colores en lugar de colores aleatorios
- Establecer directrices de diseño para los contenidos largos, como las noticias y las entradas de blog
- Utilizar una plantilla de sitio web para todas las páginas
Las páginas coherentes no tienen por qué tener un aspecto completamente uniforme. En cambio, puedes equilibrar la coherencia y el compromiso mezclando elementos.
Por ejemplo, puedes utilizar fuentes y colores diferentes para los títulos H1, H2 y H3. O puedes modificar el diseño de los distintos tipos de páginas, para mezclar las cosas.
4. Adopta los colores complementarios
Los colores complementarios son pares de colores que puedes mezclar sin que tu diseño parezca abrumador y feo.
La forma en que se muestran los colores en una pantalla sigue el modelo de color Rojo, Verde y Azul (RGB) en lugar del modelo Cian, Magenta, Amarillo y Negro (CMYK) que se utiliza en la impresión. Los pintores también suelen utilizar el modelo de color Rojo-Amarillo-Azul (RYB) que considera que los colores complementarios son el rojo-verde, el azul-naranja y el amarillo-morado.
Independientemente del modelo que prefieras, el uso de colores complementarios consigue un propósito similar al del blanco y negro. Los colores complementarios proporcionan énfasis y crean una clara identidad visual para tu marca.
Puedes ver esto en el sitio web de Swab The World.
En la captura de pantalla de abajo, la organización benéfica contra el cáncer de sangre utiliza el verde y tonos de magenta. Estos colores cambian a otras combinaciones de colores complementarios cuando visitas diferentes secciones del sitio web (aunque todos los colores tienen una saturación similar, por lo que la marca sigue siendo coherente).
Los colores complementarios son un principio fácil de utilizar en tu diseño. Si quieres simplificar las cosas, selecciona dos colores complementarios y añádelos a elementos contrastados (como un H2 y un cuerpo de texto). O utiliza varios tonos de cada color en cada página.
5. Diseña pensando en tu público objetivo
Si observas los sitios web de The Cool Kids, Garoa y Swab The World, te darás cuenta de que cada uno de ellos tiene una «sensación» única Esa sensación proviene de la adaptación del diseño del sitio web a la audiencia.
La personalización es el objetivo final. A la mayoría de nosotros nos gusta comprar productos y servicios de marcas con las que nos sentimos alineados y representados. De hecho, las investigaciones muestran que el 72% de los consumidores valoran comprar a empresas que «se alinean con sus creencias y valores» Por tanto, si alguien visita tu sitio web y ve reflejados allí sus valores, objetivos y prioridades, es más probable que te compre.
Para personalizar el diseño de tu sitio web según tu audiencia, ten en cuenta:
- ¿Qué imágenes resuenan con tu mercado objetivo, en concreto?
- ¿Qué tono funciona para tu público? (por ejemplo, profesional, minimalista, burbujeante, etc.)
- ¿Qué temas busca tu mercado objetivo en tu sitio web?
- ¿Cómo puedes transmitir el posicionamiento de tu marca a través del diseño de tu web?
- ¿A qué llamadas a la acción (CTA) responde tu audiencia (y dónde deberías ponerlas para optimizar tu tasa de clics (CTR))?
Puntos extra si puedes utilizar las automatizaciones del sitio web para ofrecer una experiencia personal basada en el perfil del usuario y las interacciones anteriores con tu marca.
Puede ser útil inspirarse en la competencia o en marcas que venden cosas diferentes a tu público objetivo.
6. Las fuentes deben ser legibles y accesibles
Los tipos de letra que utilizas en tu sitio web determinan si tus visitantes pueden leer lo que has escrito o no. Por lo tanto, son muy importantes.
Lo primero que hay que tener en cuenta al seleccionar un tipo de letra es la seguridad web. Las fuentes seguras para la web son compatibles con los sistemas operativos y los navegadores web, por lo que funcionarán en la mayoría de los dispositivos.
También debes tener en cuenta la accesibilidad. Las fuentes accesibles deben ser claras y fáciles de leer en tamaños grandes y pequeños. Por ejemplo, las fuentes basadas en la cursiva no son muy accesibles, mientras que la Times New Roman es bastante accesible.
Además, observa las tendencias de los tipos de letra en otros sitios web cuando selecciones un tipo de letra. En 2021, el científico de datos Michael Li analizó los tipos de letra de más de 1.000 sitios web. Encontró las siguientes tendencias:
- El 85% de los tipos de letra no utilizan serifas (las pequeñas líneas añadidas a las letras en los tipos de periódico)
- Los cinco principales tipos de letra son Sans Serif, Arial, Helvetica, Helvetica Neue y Roboto
- Los encabezados H1 tienen un 58% de probabilidad de no tener serifas (en comparación con el 93% del texto de párrafo)
- Los dos tamaños más comunes para las fuentes de párrafo son 14 px y 16 px
Puedes optar por aprovechar esta información para seleccionar un estilo de letra que se ajuste a lo que la gente busca en los sitios web. O bien, puedes optar por hacer algo diferente.
Virgin es una marca que eligió la segunda opción. Virgin utilizó al menos cinco fuentes en la captura de pantalla de abajo. Estos tipos de letra separan las secciones de la página y les dan un aspecto atractivo.
7. Sigue la Ley de Fitt y la Ley de Hick
El psicólogo Paul Fitts desarrolló por primera vez la Ley de Fitt en 1954, pero sigue siendo muy relevante en el diseño web en 2022. La Ley de Fitt sostiene que el tamaño de un objetivo influye en el tiempo que tarda alguien en alcanzarlo.
En un contexto de diseño web o de experiencia de usuario (UX), esto significa que la gente tardará menos en hacer clic en los botones más grandes o más en los más pequeños. Así que, para aprovechar la Ley de Fitt, debes hacer que tus botones CTA sean extremadamente grandes y prominentes para que sea más fácil hacer clic en ellos.
«Fácil» es crucial aquí. La Ley de Hick, desarrollada por el psicólogo británico William Edmund Hick y el psicólogo estadounidense Ray Hyman, dice que las personas se fatigan cada vez que deciden algo.
Por lo tanto, cuantas más decisiones le pidas a un visitante del sitio web que tome, mayores serán las posibilidades de que se sienta demasiado fatigado para seguir adelante.
8. Utiliza la invariabilidad para resaltar la información clave
Cuando algo es «invariable», destaca como una opción única entre varias opciones muy similares. El ejemplo más obvio de invariabilidad es el resaltado en los planes de las páginas de precios, como éste de Box.
Pero esa no es la única forma en que puedes utilizar la invariabilidad. La invariabilidad puede ayudarte a establecer una jerarquía visual en tus páginas para destacar la información clave y atraer a la gente a las partes importantes de tu página.
Por ejemplo, mira cómo el Museo Frans Hals utilizó la invariabilidad para crear una jerarquía visual en su página de inicio:
La jerarquía en esta imagen es la siguiente: el cartel de «bienvenida», las imágenes, el cartel de «comprar entradas», el cartel de «todas las exposiciones», y luego el resto de contenidos.
Para utilizar la invariabilidad para crear tu propia jerarquía, clasifica los elementos de la página por orden de importancia. Luego, ajusta el tamaño, el color y la ubicación de cada elemento hasta que los ojos de los visitantes se dirijan a cada elemento en el orden que desees.
9. En los CTA: Utiliza un lenguaje claro en el que la gente quiera hacer clic
Ya hemos hablado de la importancia de que tus botones sean grandes y fáciles de pulsar, pero el tamaño no es lo único que debes tener en cuenta a la hora de crear botones.
Los botones para hacer clic son descriptivos y persuasivos al mismo tiempo. Hacen que el visitante sienta curiosidad por lo que el botón enlaza, y le dan una razón para ir allí.
Una forma de hacerlo es utilizar un texto de botón detallado como «haz clic aquí para leer nuestro blog», «encuentra nuestros secretos de marketing aquí» o «aquí está nuestro informe 2022» Otra es hacer que tus botones sean visualmente emocionantes o únicos.
Rainforest Protector adoptó ambos enfoques. Rainforest Protector te permite navegar por la selva amazónica visitando diferentes lugares. El botón de cada lugar incluye una imagen y una acción como «visita el pueblo»
10. Aprovecha el patrón F o el patrón Z
Durante 13 años, los investigadores del Grupo Nielsen Norman (Grupo NN) utilizaron el seguimiento ocular para ver cómo más de 500 personas se involucran con el contenido. Esto les llevó a desarrollar el patrón F, que dice que lo primero que hace la gente es escanear hacia abajo la página, y luego leen en líneas de izquierda a derecha. Así:
Puedes aprovechar el patrón en forma de F en tu sitio web estructurando tu contenido en torno a él o a un modelo alternativo.
Facebook es famoso por utilizar un patrón en forma de Z en su página de inicio. Cuando visitas la página, tus ojos se dirigen al logotipo de «Facebook», luego al botón de «inicio de sesión», después a la imagen de la izquierda y finalmente al botón de «crear una cuenta».
11. Las buenas páginas web son rápidas y amigables con el móvil
En el cuarto trimestre de 2021, el 54,4% del tráfico de los sitios web a nivel mundial procedía de un dispositivo móvil. Por lo tanto, si tu sitio web no es apto para móviles, podrías reducir tu tráfico a la mitad.
La velocidad también influye en el tráfico orgánico del sitio web. Un estudio de Google muestra que el 53% de las personas abandonan un sitio web si se carga en más de tres segundos.
La forma más fácil de hacer que tu sitio web sea apto para móviles o rápido es elegir un tema de sitio web rápido hecho por diseñadores expertos. O, si quieres involucrarte más en el diseño de tu sitio web, puedes construir un sitio web responsivo a medida.
Eso es lo que hicieron los diseñadores de la película 1917. el sitio web de 1917 ofrece una experiencia envolvente para que la gente se involucre en la película. Está diseñado específicamente para dispositivos móviles, ya que puedes usar tu dedo para moverte por las trincheras de la Primera Guerra Mundial.
Si eres observador, te darás cuenta de que el sitio web de 1917 también aprovecha el patrón F.
12. Divide el texto en trozos pequeños
Piensa en esto: buscas «juegos mentales» y encuentras una página web que parece prometedora. Sin embargo, cuando haces clic en ella, te ves abrumado por grandes trozos de texto difíciles de leer.
Al igual que muchas personas, es posible que hagas clic en el sitio web (¡por muy prometedor que sea el contenido!).
Una investigación de seguimiento ocular de la Universidad de Ciencia y Tecnología de Missouri muestra que los visitantes de un sitio web pasan una media de 5,59 segundos leyendo el texto. Así que, si la gente no puede consumir tu texto en ese lapso de tiempo, es poco probable que les enganches adecuadamente.
Soluciona este problema dividiendo tu texto en pequeños trozos. Además:
- Utiliza frases cortas
- Aléjate de los coloquialismos
- Proporciona definiciones para cualquier palabra específica del sector que utilices
- Evita la «prosa púrpura» (metáforas, adverbios y adjetivos innecesarios)
13. Utiliza cuadrículas
Cuando decimos «utilizar cuadrículas», no queremos decir que debas hacer que tu sitio web parezca una tabla de Excel. En su lugar, divide tu sitio web en secciones distintas que tengan un propósito específico para que los visitantes puedan localizar rápidamente el contenido.
Para ello no es necesario que utilices líneas de cuadrícula. En su lugar, crea distinciones entre los espacios de la cuadrícula con color, espacio negativo y sombreado, como hizo Atlason. La página de inicio de Atlason presenta los productos nuevos y los más vendidos en cuadrículas. Como es probable que los visitantes estén buscando estos productos, las cuadrículas les ayudan a encontrarlos en segundos.
Una de las formas más sencillas de utilizar cuadrículas en tu sitio web es seleccionar un tema de WordPress que las utilice. Algunos ejemplos son Gridframe, Masonry Grid y Shuttle Grid.
14. Recuerda el equilibrio
En el contexto del diseño web, el «equilibrio» se refiere a la forma en que los elementos del diseño se sitúan en relación con los demás y si los elementos muestran armonía. Hay muchas maneras de crear equilibrio en tu sitio web, incluyendo algunos de estos principios de diseño web:
- A través de la simetría (incluyendo la simetría bilateral, radial o traslativa)
- Utilizando colores complementarios o contrastados
- Utilizando elementos de formas y tamaños similares
- Utilizando patrones repetitivos
Puedes ver el equilibrio en acción en el sitio web de Woven. Este sitio web utiliza una paleta de colores equilibrada, blanco y negro para crear contraste en el texto, y simetría para atraer la atención de los visitantes hacia el contenido.
15. Presta atención a los detalles
La teoría de la Gestalt dice que las personas perciben algo como un todo antes de fijarse en los elementos individuales. O, como dijo Kurt Koffka «El todo existe independientemente de las partes» Aunque la gente suele referirse a la teoría de la Gestalt en relación con la psicología, también se aplica al diseño web.
Tienes que prestar atención a los pequeños detalles de tu sitio web para asegurarte de que tu diseño parece pulido y completo. Cuando se diseña algo, es fácil centrarse en elementos importantes como los títulos, las imágenes y los CTA y olvidar otras cosas:
- Iconos de pie de página y de cabecera
- Botones de redes sociales
- La eficacia de la conversión de tu sitio web a WordPress (si procede)
- Espaciado del texto
- Errores tipográficos y gramaticales
- Compatibilidad con los navegadores
- Tamaño de las imágenes
Comprueba dos veces estos elementos antes de pulsar «publicar» y asegúrate de que tu sitio web transmite profesionalidad. Puede que tú pases por alto pequeños fallos, pero los visitantes no lo harán.
Además, mantente al día de las nuevas tendencias y conceptos de los principios del diseño web. Añadirlos a tu sitio web hará que parezca nuevo, fresco y atractivo.
Resumen
Una tienda minorista bien diseñada mejora la experiencia del cliente, mientras que una deficiente podría alejar a los clientes para siempre de tu marca. Lo mismo ocurre con el diseño web.
Construir un sitio web visualmente atractivo es algo más que un proyecto divertido. Puede ayudarte:
- Transmitir profesionalidad
- Genera confianza con tus visitantes
- Destaca entre tus competidores
- Atraer tráfico orgánico de los motores de búsqueda
Aprovecha los principios de diseño web de este artículo para construir un sitio web que haga que los visitantes digan «wow»
Ahora que hemos cubierto todo lo que sabemos sobre el diseño web, nos encantaría que nos lo dijeras. ¿Qué notas cuando visitas el sitio web de una marca? Además, ¿utilizas algún principio que no hayamos mencionado en tu sitio web? Cuéntanoslo en los comentarios de abajo.
Deja una respuesta