fbpx

Ejemplos de diseño de interfaces web

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. 

 

stripe OCEANIKO

https://stripe.com/es-us

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. 

carrefour

https://www.carrefour.es/

👉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. 

google play OCEANIKO

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. 

tesla OCEANIKO

https://www.tesla.com/

League of legends

Es fácilmente evidenciable en el contraste de la figura principal y el fondo del bosque. 

lol OCEANIKO

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! 😊

wrk OCEANIKO

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

beat web OCEANIKO

https://thebeat.co/pe/

Si tienes alguna consulta o necesitas ayuda respecto al mundo del marketing digital comunícate a [email protected] para poder ayudarte.

Author avatar
OCEANIKO
Agencia Digital Growth con más de 5 años de experiencia en el mercado peruano ayudando a empresas a generar grandes resultados a través de estrategias digitales eficaces.
OCEANIKO

Pide una cotización sin compromiso.

Como mínimo te llevas buenas ideas y vibras.