Diseñar una página web no es una tarea fácil. Requiere tiempo de investigación, tiempo para entender al usuario ideal, estructuración, en fin, necesitamos tiempo para establecer una buena página web que cumpla con los objetivos del negocio. En ocasiones podemos pensar que establecer el diseño de nuestra web es algo sencillo pero a la vez no sabemos con exactitud qué le está faltando a nuestra web. Por eso en OCEANIKO te mostramos algunos principios y ejemplos para que lo tengas en cuenta en tu próximo sitio web. ¡Allá vamos!
Principios de diseño web centrado en el usuario
“Para lograr un diseño con armonía y que cumpla los requisitos para lograr un resultado eficaz, inconscientemente utilizamos unas reglas visuales que ayudan a que nuestro diseño sea aceptado. (…) Si aplicamos las Leyes de la Gestalt en nuestros diseños, obtendremos mejores resultados” – Carlos Pariente, product designer
👀 ¡Atento! Las leyes de Gestalt son las siguientes
1.Proximidad
Hablamos de agrupar elementos afines, así nos aseguramos de ofrecer orden y claridad a nuestro diseño, mientras cumplimos con las buenas prácticas del UX. El principio de proximidad funciona a modo de “bloques”, elementos muy cercanos unos a otros, que nos ofrecen facilidad para encontrar lo que buscamos.
Stripe
👉 Se refleja fácilmente la ley de proximidad, en el menú de navegación nos ofrece elementos agrupados.
2.Similitud
El principio de similitud es parecido al de proximidad, excepto porque aquí resaltan los recursos gráficos: forma, color, tamaños, etc. Agrupando por recursos gráficos ayuda a delimitar y diferenciar las secciones de una web.
Carrefour
Ya vimos que el principio de similitud se enfoca en la agrupación por recursos gráficos. En Carrefour tenemos el ejemplo perfecto. Al primer vistazo, nuestra mente agrupa todo por categorías de supermercado.
👉Es fácil ver las categorías diferenciadas en círculos, imágenes, los colores del texto. Así mismo es fácil ver los descuentos que nos ofrece la web, el diseño de las tarjetas es el mismo, con colores similares y estructura similar.
3.Continuidad
Aquí el diseño está orientado siguiendo la dirección de lectura que aprendimos desde el kinder. Es decir, de izquierda a derecha. No hay ninguna ciencia en ello, la mente humana funciona así de simple y por ende tendemos a revisar las cosas en ese orden. Muy sencillo, ¿verdad?
Google Play
Google utiliza el principio de continuidad para presentar su catálogo de películas en una dirección de izquierda a derecha.
👉Este principio se usa muchísimo para carruseles, sliders, etc.
https://play.google.com/store/games?hl=es
4.Figura-fondo
Este principio se apoya en que las personas diferenciamos entre el primer plano y un segundo plano (el fondo). El primer plano captará de inmediato nuestra atención, y el fondo cumplirá una función de soporte. Veamos algunos ejemplos
Tesla
En la web es fácil diferenciar entre el carro que representa la figura principal y la carretera que representa el fondo.
👉El contraste se percibe fácilmente gracias a colores y al desenfoque usado para el fondo.
League of legends
Es fácilmente evidenciable en el contraste de la figura principal y el fondo del bosque.
https://www.leagueoflegends.com/en-pl/
5. Cierre
Nuestro cerebro tiende a completar figuras incompletas. Este principio de cierre se apoya en esa incomodidad que siente el cerebro al ver algo incompleto (imagen, video, etc) ¡Necesitamos saber qué sucede!
Waaark
Gracias al motion graphics, Waaark nos cuenta los componentes de sus servicios.
👉El círculo cargándose en la web nos obliga a quedarnos hasta poder conocer conocer más sobre sus servicios. En general esta es una web ultra dinámica, llena de animaciones y full-color. ¡Asegúrate de echarle un vistazo! 😊
https://legacy.waaark.com/vision.html
6. Simetría
¡La simetría es perfección! Las imágenes simétricas se perciben como iguales y como parte de un mismo elemento. Veamos cómo funciona.
Beat
Sus íconos son simétricos y en general son: simples, agradables y fáciles de interpretar
Si tienes alguna consulta o necesitas ayuda respecto al mundo del marketing digital comunícate a [email protected] para poder ayudarte.
