Principios básicos para un diseño web en armonía

Sonja Hoffmann Actualizado por última vez el 21.10.2020
7 min.
Principios básicos de diseño web
Actualizado por última vez el 21.10.2020

Como dice el refrán: no hay una segunda oportunidad para dar una primera buena impresión. Accedes a un sitio web desconocido y, en cuestión de pocos segundos, juzgas en si este es "bueno" o "malo". En particular, con las propias creaciones es infinitamente difícil llevar a cabo un análisis objetivo. Afortunadamente, hay principios de diseño fiables comprobados que podrás usar como guía. He aquí una descripción general.

¿Qué es lo que hace a un "buen" diseño web?

El diseño web es una tarea compleja: requiere tener más de un buen ojo para la tipografía adecuada y un don especial sobre diseño visual atractivo. El diseño web ofrece una increíble variedad de posibilidades para expresarse creativamente. No obstante, también ofrece demasiadas posibilidades, suficientes para perderse en el proceso de diseño. Especialmente, si estás profundamente arraigado en tal proceso, es fácil perder de vista el bosque entre tantos árboles. Esto puede resultar, posiblemente, en la creación de un diseño calificable como "malo".

Nuestra valoración sucede a menudo intuitivamente, por lo que es difícil explicar por qué el mismo elemento de diseño encaja perfectamente en un sitio web mientras que se aprecia extraño y fuera de lugar en otro.

¿Qué hace que un sitio web adquiera éxito?

Los buenos sitios web presentan la información de manera clara y eficiente para que los usuarios encuentren sutilmente el camino que buscan a través de las páginas. La mayoría de las veces, un sitio web orientado al usuario tiene éxito gracias a una interacción bien equilibrada de tipografía, elementos interactivos y mucho pulido visual. 

Y como esto no es lo suficientemente complicado, también nos vemos limitados por lo que puedan mostrar los navegadores de usuarios potenciales y posiblemente también por las habilidades técnicas del desarrollador o la herramienta que usemos para crear el sitio web en cuestión. 

A esto se le añade el hecho de tener en cuenta las tendencias actuales y la identidad corporativa (IVC) de los clientes. El diseño web es básicamente la suma del diseño UX-, UI- y el diseño gráfico, la IVC o identidad visual corporativa así como las tendencias actuales bajo la consideración de todas las circunstancias técnicas.

La creación de un sitio web es un proyecto bastante extenso. No es de extrañar que normalmente todo un equipo completo esté detrás de este reto. A menudo, particulares (y desafortunadamente también equipos) tienden a prestar más atención a las áreas donde son particularmente fuertes. Por el contrario, como consecuencia, otras áreas reciben menos atención, o en casos extremos ninguna. Esto crea un desequilibrio y provoca una impresión poco armoniosa y de poca calidad del sitio web.

Un "buen" diseño web es el resultado de un equilibrio entre las diferentes áreas de diseño y las condiciones técnicas.

Dado que una consideración detallada de todas las áreas iría más allá del alcance de este artículo, en este artículo me centraré principalmente en el diseño visual. 

Contraste, espacio en blanco y color

El contraste va a menudo acompañado de la selección de los colores primarios del diseño, así como el espacio en blanco en la composición. Sin embargo, el espacio en blanco aquí no significa necesariamente el espacio que se deja en blanco. Más bien se refiere al espacio entre los diferentes elementos. Este espacio intermedio también se conoce como "negative Space" (espacio negativo) y, en cambio, incluso puede ser de color.

Mediante la introducción de espacios en blanco, una página suele dar una apariencia más ordenada y clara. Este enfoque también suele ir de la mano del minimalismo. Esto se equivale a eliminar sistemáticamente todo lo que no es necesario y no añade ningún valor reconocible al diseño. Ya sea un texto, elementos decorativos o una avalancha de CTAs.

Consejo

Durante la planificación del contraste y color, también deberás tener en cuenta lo siguiente: el contenido de lectura difícil impedirá que personas con discapacidades visuales (por ejemplo, en el reconocimiento de colores) puedan ver tal contenido.

Con la tendencia actual consistente en llenar los encabezados de los sitios web con grandes imágenes panorámicas, a menudo encontramos superposiciones de texto difíciles de descifrar.

Un ejemplo exitoso de espacios en blanco abundantes y contraste

Principios básicos para un diseño web en armonía
Principios básicos para un diseño web en armonía

https://aiven.io/

Un ejemplo de contraste flojo

En la siguiente imagen se puede observar un claro problema de contraste en la versión móvil. La CTA ("Call-to-Action" o llamada a la acción) se pierde completamente por el fondo ajetreado.

why-ux-fails
https://www.opitz-consulting.com/

A veces no es tan fácil para los diseñadores filtrar los colores adecuados para un diseño. Afortunadamente, hay herramientas que nos permiten probar rápidamente diferentes combinaciones, antes de que pasemos mucho tiempo creando un diseño laborioso.

Teoría del color: estas herramientas te ayudarán en la elección del color

Material Design Color Tool

Material Design Color Tool crea Low Fidelity Wireframes (marcos de baja fidelidad) bajo la especificación de dos colores primarios.

material-diseño-color-herramienta

Adobe Color Wheel

Adobe Color Wheel no solo te ayuda a crear diferentes paletas de colores, sino que también extrae las paletas de colores usadas en diseños existentes. Últimamente, esto también es posible a partir de los gradientes.

adobe-color-wheel

Cuando se seleccionan los colores adecuados vale la pena mirar de cerca la marca o el "branding" del cliente: ¿qué paletas de colores ya se están aplicando? ¿Hasta qué punto puedo desviarme de ellos?

Los fundamentos de la teoría del color también son inevitables: según el área profesional de tu cliente, se elegirá un color de acuerdo con el efecto psicológico correspondiente. No es una coincidencia que el azul se utilice a menudo en ramas más serias, como los seguros, la consultoría y los sitios web de comparación. El azul inspira confianza y tiene un efecto calmante. Sin embargo, es importante no ser demasiado general aquí, ya que incluso los matices del mismo color pueden evocar emociones muy diferentes.

¿Conoces la regla 60-30-10?

Esta se utiliza como regla de oro para el uso de la paleta de color. Aquí se aplica el siguiente principio: el color principal constituye alrededor del 60 por ciento del diseño, un color complementario comprende el 30 por ciento y un tercer color el 10 por ciento para resaltar la información. Esta disposición tiene un efecto particularmente equilibrado en el usuario.

Disposición simétrica o asimétrica de los elementos de diseño

En su artículo “The Principles of Design and Their Importance” (principios de diseño y su importancia), la autora y diseñadora Cameron Chapman explica los dos enfoques más importantes en torno a la problemática del equilibrio en el diseño web. También clasifica el contenido según su notoriedad, es decir, si resultan más o menos llamativos. 

El desafía consiste por lo tanto en organizar los contenidos de manera que transmitan una sensación de equilibrio. La decisión sobre el diseño "disposición simétrica o asimétrica" puede serte de ayuda.

¿Cómo funcionan ambos enfoques?

En el enfoque simétrico, los elementos con una prominencia similar se disponen juntos. En el asimétrico, por otro lado, se disponen el contenido más prominente y el menos llamativo de forma conjunta. 

El diseño o "layout" puede mantenerse, por ejemplo, limpio. Los elementos se disponen claramente separados unos de otros, como en el caso de Couro Azul . A menudo, ese contenido se coloca ligeramente descentrado para dar al elemento más débil un poco más de espacio y crear equilibrio.

Couro Azu

Zero ,en cambio, utiliza el mismo principio, aunque con una disposición más libre. Debido al abundante uso de los espacios en blanco, proporciona una apariencia más elegante y moderna.

Este enfoque funciona muy bien en pantallas más grandes (a partir del tamaño de la tableta). Los dispositivos más pequeños, como los smartphones, en cambio, se benefician de módulos claramente separados dispuestos uno debajo del otro.

Definir y establecer prioridades

Antes de comenzar con el diseño de un sitio web, debe definirse con claridad el mensaje que queremos comunicar. A menudo, la claridad en el concepto de marketing también trae claridad en el diseño.

Una vez que se han determinado los mensajes clave, es importante resaltarlos mediante el uso del color y/o la tipografía.

En este ejemplo puedes ver cómo se ven ambos combinados:

cowboy
https://cowboy.com

Sin embargo, también hay muchas posibilidades de aplicación. Después de todo, el contenido no se puede enfatizar solo con la tipografía y el color en negrita. También a través de imágenes, como en el caso del Jamie Oliver´s Restaurant (restaurante de Jamie Oliver) , y a través de la interacción de diferentes principios, podrás destacar el contenido seleccionado.

Jamie Oliver´s Restaurant (restaurante de Jamie Oliver)

Proporción, cohesión y jerarquía

El contenido de un sitio web debe ser presentado de manera que tenga sentido en su jerarquía. La información más importante se colocará en la parte superior. Desde esta el contenido irá ordenado de más a menos importante (parte inferior). Por lo tanto, deberías preguntarte lo siguiente: ¿Qué información podría resultar más importante para el visitante? ¿Qué información se considera adicional o secundaria? 

Esta es también la razón por la que el menú de navegación se encuentra normalmente en la parte superior. Aparte de ser un patrón de UI, es uno de los aspectos más importantes de una página, además de algo sencillo. Después de todo, el menú no es más que un resumen del contenido principal que ofreces. En otras palabras, la tabla de contenido de tu sitio web.

Jerarquía visual: Lo que verdaderamente importa

El ordenamiento jerárquico también puede ser creado a través del "movement" (sensación de movimiento). En este caso, se dispone el contenido de tal manera que pueda ser guiado por el ojo. Esto puede lograrse, por ejemplo, mediante el uso de formas ("shapes") y disposiciones. Este portafolio es un ejemplo interesante al respecto:

portafolio

El ojo es guiado a través de la pantalla de izquierda a derecha. El punto 01 de la imagen posee claramente la mayor jerarquía, incluso aunque todos los elementos sean del mismo tamaño y al principio parezcan iguales. 

La proporción también desempeña un papel importante: los elementos del mismo tamaño, color y forma nos hacen creer que pertenecen a un mismo conjunto y se le atribuyen la misma función. Especialmente con elementos interactivos, esto resulta relevante.

El ejemplo presentado anteriormente ilustra que un diseño consistente puede contribuir en gran medida a la armonía visual: 

  1. se usan formas uniformes para todas las imágenes,
  2. todas las imágenes están en sintonía con el color elegido, 
  3. en total, se utilizan solamente dos tipos de fuente y tamaño de letra diferentes, 
  4. para la tipografía y separadores se utiliza solo un color,
  5. los separadores representan un elemento de diseño recurrente y unen visualmente la imagen y los dos títulos.

Principios básicos en torno al diseño web - Conclusión

A pesar de todos los principios básicos mencionados, las reglas también están para romperse. ¡Esta es la única manera de crear diseños nuevos e interesantes!

Los enfoques que he presentado brevemente aquí no son, por supuesto, nuevos. Más bien, son variaciones de la investigación científica y/o psicológica que se han transferido a nuestros medios de comunicación actuales. Personalmente, creo que es importante conocer estas teorías y métodos. Con frecuencia implementamos reglas intuitivamente de todos modos, porque nuestro ojo creativo ha "aprendido" a hacerlo.

Además, el conocimiento de los diferentes enfoques en el diseño ayuda a evaluar los propios proyectos. Piensa en ello como una lista de control a la que puedes recurrir cuando notes que algo no funciona bien visualmente. Comúnmente no se encuentra la distancia necesaria para evaluar objetivamente un propio proyecto. 

Los principios de diseño indicados aquí no están ni mucho menos al completo. Si deseas profundizar en el tema, te invitamos a echar un vistazo a estos artículos y libros electrónicos: 

¿Cuál es tu opinión sobre los principios de diseño? ¿Qué dudas le plantearía a Sonja? No dudes en escribirnos en los comentarios. ¿Quieres estar informado/a sobre las nuevas entradas relativas al diseño y desarrollo web para agencias y autónomos? Entonces síguenos en TwitterFacebook o a través de nuestras newsletters.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño de web y su desarrollo. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.