Principios básicos para un diseño armonioso de la web

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

Como dice el refrán: No hay una segunda oportunidad para una primera impresión. Ves a un sitio web desconocido y juzgas en pocos segundos si este sitio es "bueno" o "malo". Especialmente con sus propias creaciones es infinitamente difícil llevar a cabo un análisis objetivo. Afortunadamente, hay principios de diseño bien probados que puedes usar como guía. Una visión general.

¿Qué es un "buen" diseño web de todos modos?

El diseño web es bastante complejo: requiere más que un ojo para una buena tipografía y una sensación de un diseño visual atractivo. El diseño web ofrece una increíble variedad de posibilidades para expresarse creativamente. Pero también ofrece al menos tantas oportunidades para perderse en el proceso de diseño. Especialmente si estás profundamente arraigado en el proceso de diseño, es fácil perder de vista el bosque por tantos árboles. El resultado puede ser un diseño que percibimos como "malo".

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

¿Qué hace que una página web tenga éxito?

Los buenos sitios web presentan la información de manera clara y eficiente para que los usuarios encuentren intuitivamente su camino a través de ellossitio . En la mayoría de los casos, una websitio orientada al usuario tiene éxito gracias a una interacción equilibrada de tipografía, elementos interactivos y un gran ajuste visual. 

Y como eso no es lo suficientemente complicado, también estamos limitados por lo que pueden mostrar los navegadores de nuestros usuarios potenciales. Y posiblemente también por las habilidades técnicas del desarrollador o la herramienta que usamos para crear el sitio web en cuestión. 

También hay que tener en cuenta las tendencias actuales y la identidad corporativa de tus clientes. El diseño web es básicamente la suma de UX-, UI- y el diseño gráfico, la CI así como las tendencias actuales en consideración de las circunstancias técnicas.

La creación de un sitio web es un proyecto bastante extenso. No es de extrañar que normalmente un equipo entero esté detrás de esto. A menudo los individuos (y desafortunadamente los equipos) tienden a prestar más atención a las áreas donde son particularmente fuertes. Por el contrario, otras áreas reciben menos atención - o en casos extremos ninguna - en absoluto. Esto crea un desequilibrio que podría hacerte sentir que un sitio web es de calidad inferior y poco armonioso.

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, me centraré ahora principalmente en el diseño visual. 

Contraste, espacio en blanco y color

El contraste a menudo va de la mano con la elecció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 a los espacios entre los elementos. Este espacio intermedio también se llama "espacio negativo" y, por cierto, todavía puede ser coloreado.

Con muchos espacios en blanco, uno sitio suele aparecer más ordenado y claro. Este enfoque también suele ir de la mano de Minimalismo. Esto significa 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 CTA.

Consejo

Cuando planifiques el contraste y el color también debes tener en cuenta lo siguiente: El contenido de difícil lectura puede hacer que las personas con discapacidades visuales (por ejemplo, reconocimiento de colores) no puedan ver este contenido en absoluto.

Especialmente con la tendencia a llenar los encabezados de los sitios web con grandes imágenes panorámicas, a menudo encontramos superposiciones de texto que son difíciles de descifrar.

Un ejemplo exitoso para muchos espacios en blanco y contraste

Principios básicos para un diseño armonioso de la web
Principios básicos para un diseño armonioso de la web

https://aiven.io/

Un débil ejemplo de contraste

Aquí hay un ejemplo, que es un problema de contraste especialmente en la versión móvil. La llamada a la acción desaparece completamente contra el inquieto fondo.

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 costoso diseño.

Teoría del color: Estas herramientas te ayudan a elegir los colores

Herramienta de color de diseño de materiales

Herramienta de color de diseño de materiales crea Low Fidelity Wireframes (marcos de baja fidelidad) con un predeterminado de dos colores primarios.

material-diseño-color-herramienta

Adobe Color Wheel

Adobe Color Wheel no sólo te ayuda a crear diferentes paletas de colores, sino que también extrae las paletas de colores usadas de los diseños existentes. Recientemente 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 del cliente: ¿Qué paletas de colores ya están en uso? ¿Hasta qué punto puedo desviarme de ellos?

Los fundamentos de la teoría del color también son inevitables: según el respectivo campo de tu cliente, se puede elegir un color con el efecto psicológico adecuado. 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?

Esto se recomienda como una regla de oro para el uso de las paletas de colores. Aquí está el principio aplicado: el color principal constituye alrededor del 60 por ciento del diseño, un color complementario comprende el 30 por ciento y un tercer color añade más resaltes con el 10 por ciento. 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 "Los principios del diseño y su importancia" la autora y diseñadora Cameron Chapman explica sus dos enfoques más importantes para el equilibrio en el diseño web. Diferencia el contenido según su notoriedad, es decir, si es más o menos prominente. 

Por consiguiente, el siguiente reto es organizar los contenidos de manera que transmitan una sensación de equilibrio. La decisión de diseño de "organizar simétrica o asimétricamente" puede ayudar aquí.

¿Cómo funcionan ambos enfoques?

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

La disposición puede mantenerse limpia, por ejemplo. Los elementos están claramente separados unos de otros, como en Couro Azul es el caso. A menudo ese contenido se coloca ligeramente descentrado para dar al elemento más débil un poco más de espacio y crear un equilibrio.

Couro Azu

Cero sin embargo utiliza el mismo principio, aunque con un arreglo más libre. Debido al alto uso de los espacios en blanco, parece elegante y contemporáneo.

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 claramente qué mensaje debe ser comunicado. 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.

Como ambos pueden verse combinados, puedes ver en este ejemplo:

cowboy
https://cowboy.com

Sin embargo, también hay muchas posibilidades de aplicación. Después de todo, el contenido no se puede enfatizar sólo con la tipografía y el color en negrita. También a través de imágenes, como con el restaurante de Jamie Oliver y a través de una interacción de diferentes principios, se pone de relieve el contenido seleccionado.

el restaurante de Jamie Oliver

Proporción, cohesión y jerarquía

El contenido de un sitio debe ser presentado de manera que tenga sentido en su jerarquía. Por lo tanto, colocas lo más importante en la parte superior. Con la disminución de la importancia, deberías trabajar en tu camino hacia abajo. Por lo tanto, deberías preguntarte: ¿Qué información es más importante para el visitante de mi sitio? ¿Qué es sólo información adicional? 

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 simplemente uno de los aspectos más importantes de una página. Después de todo, el menú no es más que un resumen del contenido principal que ofrece. Por así decirlo, la tabla de contenido de tu sitio web.

Jerarquía visual: Lo que es realmente importante

La jerarquía también puede ser creada por el llamado movimiento. Aquí arreglamos el contenido sitio de tal manera que el ojo es guiado a través de él. Esto puede lograrse, por ejemplo, mediante el uso de formas y disposiciones. Este Portafolio es un ejemplo interesante de lo que podría parecer:

Portafolio

El ojo es guiado a través de la pantalla de izquierda a derecha. El punto 01 aquí claramente tiene la mayor jerarquía - incluso todos los elementos son del mismo tamaño y al principio parecen iguales. 

Por lo tanto, la proporción también juega un papel: elementos del mismo tamaño, color y forma nos dan básicamente la sensación de pertenecer juntos y tener la misma función. Esto es especialmente importante con los elementos interactivos.

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 fotos,
  2. todas las imágenes armonizan en color, 
  3. en total, sólo se utilizan dos fuentes y tamaños de letra diferentes, 
  4. sólo se utiliza un color para el error de imprenta y los separadores
  5. los separadores representan un elemento de diseño recurrente - y unen visualmente la imagen y los dos titulares.

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

A pesar de todos los principios básicos mencionados, las reglas están ahí para ser rotas. ¡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 encuentro importante conocer estas teorías y métodos. A menudo 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. A menudo no encuentras la distancia necesaria para evaluar objetivamente tu propio proyecto. 

Los principios de diseño indicados aquí están lejos de ser completos. Si deseas profundizar en el tema, te invitamos a echar un vistazo a estos artículos e E-Books: 

¿Cuál es su tu opinión sobre los principios de diseño? ¿Qué preguntas tienes para Sonja? Puedes utilizar la función de comentarios. ¿Quieres estar informado sobre las nuevas contribuciones al diseño y desarrollo web para agencias y autónomos? Entonces síguenos en TwitterFacebook o sobre nuestro Boletín de noticias.

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

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

tu La dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con * marcado.