Los 7 principios del diseño aplicados a las páginas web

“Aprende las reglas como un profesional para que puedas romperlas como un artista”, dijo Pablo Picasso, refiriéndose a las bases que han allanado el camino a los artistas desde hace siglos. En pocas palabras, estos principios esenciales explican cómo usar los elementos de una composición (forma, color, valor, figura, textura y espacio) para crear efectos específicos y transmitir una intención. Seguirlos no significa que una obra maestra será igual que otra. Por ejemplo, a pesar de que se basan en los mismo principios, la Mona Lisa de Leonardo da Vinci es muy diferente a la obra moderna, Balloon Dog de Jeff Koon.

Estos conceptos eternos también fueron adoptados por los diseñadores, que comenzaron a aplicarlos en todas las categoría de su floreciente campo, desde la arquitectura hasta el diseño gráfico, y por supuesto, la creación de páginas web. Hablando de páginas web, debes prestar mucha atención a su composición visual. ¿Por qué? Porque además de agradar a los visitantes, una gran composición tiene un impacto directo en el rendimiento de tu página web (navegación, conversión, retención, etc.). Tener algunas nociones teóricas sobre equilibrio, movimiento, énfasis y demás te será muy útil. En este artículo definiremos cuáles son los 7 principios del diseño y cómo aplicarlos a las páginas web.

¿Alguna vez has visto a un yogui infeliz? Encontrar el equilibrio parece ser la clave de la buena fortuna, la estabilidad, la felicidad profesional … y las composiciones artísticas. En términos de diseño, el equilibrio es asegurarse que ningún elemento domine a otro, lo que hace que los otros componentes se reduzcan de manera insignificante a un segundo plano y no sirvan para nada. Hay tres tipos de equilibrio para elegir:

Cómo aplicarlo a tu página web:

Desde tu línea o punto central, mantén el peso visual distribuido equitativamente en tu página web. Ten cuidado con cada elemento que agregues, ya sea una imagen, un párrafo de texto o incluso un botón: cada elemento nuevo puede potencialmente alterar el equilibrio. Una manera fácil de tener las cosas organizadas, especialmente cuando tienes planeado mostrar bastante contenido en una sola página, es usar un diseño de cuadrícula. ¿Cómo lo logras? Comienza dividiendo tu página horizontalmente con franjas, usando una para cada sección (“Quienes somos”, “Contacto”, Instagram, etc.). Una vez que hayas terminado, puedes simplemente dividir esas franjas en varias columnas, para agregar así una partición vertical a tu página. Como resultado, tu página web estará compuesta por una serie de cuadros que se ajustan a los tamaños y resoluciones de todas las pantallas. Lo único que queda por hacer es personalizar tu diseño y agregar tu contenido para obtener un resultado ordenado y profesional. ¿Estás buscando una página web con un diseño de cuadrícula? Esta increíble plantilla es un excelente comienzo.
 

Pintar solo una de tus uñas con un color más atrevido o usar unos zapatos llamativos con un esmoquin negro: algunos de nosotros estamos practicando el principio del contraste sin siquiera darnos cuenta. Además de los colores, se puede alcanzar el contraste con el uso de formas redondas y nítidas, espacio negativo vs. positivo, texturas suaves vs. rugosas, y esencialmente cualquier elemento que sea intrínsecamente opuesto entre sí. Esta yuxtaposición crea emoción y exige la atención del espectador. El contraste es una expresión poderosa en el mundo del arte y el diseño, hará maravillas para tu propia obra maestra.

Cómo aplicarlo a tu página web:
 

La monotonía es a menudo agotadora y aburrida. Experimenta y prueba cosas nuevas para darle un toque diferente a tu página web que estimule a tu público como un litro de cafeína. Pero no lo hagas a la ligera, piensa que elementos quieres resaltar y ¡actúa!. Puede ser tu nombre en tu página de inicio, tu información de contacto si deseas que los clientes potenciales te contacten o un enlace a tu galería si eres un fotógrafo que busca más exposición. Diferencia el aspecto de estos elementos del resto de tu contenido jugando con el tipo de letra y el tamaño, agregando más espacio en blanco a su alrededor o usando una forma diferente.

Por encima de todo, el efecto dominante de contraste en el diseño web es el color. Recordemos por un momento a tu mejor amigo de la escuela primaria: la rueda de color. Ahora digamos que los elementos de tu página web están cubiertos con una mezcla de amarillos y naranjas. El otro lado de la rueda de color, los colores contrastantes, son azules y violetas. Por lo tanto, estos son los matices que debes usar en tus elementos de contraste para que se destaquen. También puedes optar por una opción más convencional, como elegir un fondo blanco (o negro) y permitirle a los elementos importantes ser resaltados con cualquier color brillante. Si quieres jugar con ventaja, aquí hay una plantilla completamente personalizable que domina el contraste mejor que ninguna.

¿Recuerdas esas fotos en blanco y negro de empresarios en la ciudad de Nueva York vestidos de traje, aparentemente caminando al mismo ritmo hacia los mismos trabajos mundanos? Ahora imagina que una de esas fotos incluye a un hippie caminando contra la multitud, adornado con estampados y colores locos. Esto es énfasis: cuando un elemento naturalmente se convierte en el dominante de una composición. Hay muchas formas de implementar esto en arte y diseño. A menudo se logra a través del principio mencionado anteriormente, el contraste, pero no exclusivamente. Cada diseño debe incorporar un elemento principal como este, conocido como “punto focal”, que le servirá a tu composición como puerta de acceso a los espectadores.

Cómo aplicarlo a tu página web:

Trabajaste duro en cada elemento de tu página web. Pero seamos honestos: no todas las partes son igual de importantes, lo cual está bien porque cada una cumple un propósito diferente. Algunas secciones son más decorativas, mientras que otras son claramente prácticas, ya que ayudarán a tus visitantes a alcanzar los objetivos que se les asignó. Este es generalmente el caso de tus “Llamadas a la Acción o CTA (‘Call-to-Action’ por sus siglas en inglés). Las CTA son frases cortas (“Reservar”, “Compra ahora”, “Suscríbete aquí”, etc.) que son enlazadas a las secciones de tu página web donde los visitantes realmente necesitan hacer algo. Debido a que son ellos los que impulsan el tráfico y los negocios, naturalmente se debe poner énfasis en ellos, en lugar de la imagen de fondo, que simplemente necesita lucir bella. ¿Cómo vas a poner énfasis en tus CTA? Primero, puedes jugar con el clásico cambio de fuentes y colores para que se destaquen. En segundo lugar, deja un espacio en blanco alrededor de tu botón CTA para asegurarte que las personas puedan ubicarlo fácilmente (especialmente cuando el resto de tu página está llena de otros contenidos). Por último, una buena adición es fijarlo a la pantalla, es decir, cuando el visitante se desplaza por tu página web, el CTA siempre permanecerá en la pantalla, listo para interactuar, al igual que en la increíble (y menos costosa) plantilla aquí abajo.

¿Cuál es más probable que mires fijamente durante horas y horas: una imagen fija o un objeto animado? Esa es una opción obvia para la mayoría de nosotros que sucumbimos a los videos en nuestras redes sociales (hasta qué son las 2 AM y nos damos cuenta de que todavía no nos hemos quedado dormidos). El punto es que el movimiento atrapa la atención, incluso de la manera más sutil. En el arte abstracto, es el proceso de usar diferentes elementos que crean una sensación de movimiento (como líneas diagonales y curvas y la ilusión de espacio) y hacen que los ojos tomen un paseo alrededor de la composición. En el diseño digital, el proceso es aún más fácil, ya que la tecnología te permite incorporar efectos animados, directamente en tus páginas.

Cómo aplicarlo a tu página web:

Hay muchas maneras en que puedes agregar pequeñas animaciones y movimientos sutiles en tu página web. Una tendencia de diseño web común es el desplazamiento Parallax. Esto corta tu página en diferentes tiras que se mueven a diferentes ritmos, el fondo es más lento que el primer plano. Por lo tanto, crea una ilusión 3D y agrega profundidad y movimiento a tu página web. Una funcionalidad tan sofisticada requiere típicamente habilidades de programación avanzadas, un tiempo extenso y un buen ojo para pequeños detalles de diseño. ¿Las buenas noticias? Hay una solución mucho más simple gracias al Editor Wix, que reduce todo el proceso y ayuda a agregar Efectos Parallax más fácil y rápido que nunca. Con las funciones pre-animadas disponibles de inmediato (acercar, revelar y fundir), simplemente tienes que agregar tus propias imágenes y videos a una tira en el Editor.

Incluso sin agregar animaciones reales, aún es posible lograr una sensación de movimiento al colocar los elementos de la manera correcta. Por ejemplo, inclinar el texto diagonalmente o dispersar tus imágenes puede evocar ritmo y una sensación dinámica en tu página. Como regla general, debes tener cuidado de no abusar del movimiento en tu página web, ya que confundirás a los espectadores con demasiado ‘ruido visual’. ¿Estás buscando algo de inspiración o quieres comenzar de inmediato? Comienza con esta elegante plantilla.

Ya sea besar a tu pareja al despedirte antes de salir de casa o navegar en tu blog de diseño favorito todas las mañanas, nuestras rutinas crean una sensación de certeza muy apreciada. Lo mismo se aplica a las piezas creativas. Repetir el mismo elemento una y otra vez crea un patrón que es altamente satisfactorio para el ojo. Además de esto, la repetición ayuda a crear consistencia, un factor crucial cuando se trata de imponer la unidad de tu composición, o tu identidad como marca.

Cómo aplicarlo a tu página web:

En tu página web, puedes crear un ritmo visualmente atractivo mediante la repetición de ciertos elementos de diseño. Por ejemplo, intenta alternar las mismas dos fuentes de texto y los mismos tres colores en diferentes secciones de tu página. Esto ayuda a que los visitantes recuerden tu página web de manera exclusiva, provocando que piensen en ti la próxima vez que busquen un experto en tu campo. Para activar la inspiración, observa cómo esta inteligente y creativa plantilla utiliza el mismo modelo de onda en todo su diseño, desde las pequeñas formas geométricas hasta las fuentes y los encabezados. Si no eres diseñador ni tienes talento para el dibujo, puedes optar por las miles de ilustraciones vectoriales gratuitas disponibles en el Editor de Wix. Estos divertidos diseños son completamente personalizables y redimensionables, lo que significa que puedes usarlos como quieras para así crear tus propios modelos de tu marca. Una nota importante: no importa qué modelo elijas, la repetición excesiva conduce a la monotonía. Asegúrate de agregar algunos espacios visuales y en blanco alrededor de tus elementos repetidos, para dar un poco de descanso a los ojos de tus usuarios.

Al igual que en una empresa tradicional, la jerarquía juega un papel importante en las composiciones de arte y diseño. Composiciones de excelente calidad dividen los elementos en tres niveles de jerarquía: lo más importante, lo del medio y lo menos importante. La razón es que el cerebro humano no puede otorgar el mismo nivel de importancia a cada elemento de una historia, espectáculo o composición. Por el contrario, tiende a dar más importancia a los primeros elementos que percibe, y es aquí donde los grandes artistas quieren centrar la atención de los espectadores. Elegir la ubicación de cada elemento según su nivel de importancia es la clave para dominar este principio y tu hermosa composición.

Cómo aplicarlo a tu página web:

Comienza creando un plan de diseño web con una jerarquía según el nivel de importancia de cada elemento. Deberás crear las secciones de tu página web de manera que los ojos de los usuarios vean lo que es más importante primero. Una estrategia muy útil es la de la pirámide invertida, donde comienzas con tu conclusión y trabajas hacia atrás. La ubicación es un aspecto importante a considerar de acuerdo con muchos estudios que analizan cómo las personas suelen navegar por las páginas web desde la parte superior izquierda y luego van desplazándose hacia la derecha y hacia abajo, como formando una ‘F’ o una ‘Z’ imaginaria con la mirada. Para una optimización completa, la información más importante debe ir en la parte superior izquierda y la información menos importante debe llegar a partir de la mitad inferior de la página que generalmente solo se escanea rápidamente. Todo lo demas se puede colocar en otros lugares. Por ejemplo, en esta plantilla, lo primero, y más importante, que notarás es la información que responde a “quiénes son y qué hacen”. Lo segundo que llamará la atención sin darse cuenta es el botón “reservar ahora”. El resto del contenido, como los testimonios y el desglose de cada servicio, resultará más difícil detectar.

Este principio trata de encontrar el equilibrio correcto con los elementos correctos. Para lograr esta sensación de armonía, el diseñador debe asegurarse de que cada elemento tenga un lugar y papel específico en la composición. Nada debe estar fuera de lugar, ser inútil o aleatorio. La armonía se consigue cuando los diferentes elementos y principios presentes en la página trabajan “de común acuerdo”, lo que hace a este principio merecedor de ser “el broche de oro”.

Cómo aplicarlo a tu página web:

Para lograr que tu página web transmita el mensaje o la experiencia adecuada a tus espectadores, debes crear un cierre para tu diseño incorporando elementos que están de acuerdo entre sí. Por ejemplo, esta plantilla alcanza la armonía integrando estallidos de color en todas sus imágenes, texto y franjas. Tu también puedes personalizar todos los elementos de tu página web de manera que expresen el mismo lenguaje visual, ya sea agregando tu logotipo al menú, tu localización en Google Maps a tu página “Sobre Nosotros” o tu galería de fotos. Asegúrate de que cada vez que agregues un elemento nuevo ajeno a tu página web, se ajuste al resto de tu composición. Si bien es cierto que no debes tener elementos que son demasiado exagerados entre sí, la armonía no tiene que arruinar toda la diversión. Hay espacio para jugar con formas, tamaños y pesos si todos los demás componentes se mantienen consistentes. Una vez que conozcas tus verdaderos colores, todo encajará perfectamente.

Ahora que eres un experto, ¡crea tu increíble página web con Wix y aplica estos principios de diseño!