¿Llevas horas con el software de diseño y nada que vienen las ideas? ¡No más bloqueo! Estos ejemplos de diseño de interfaces te pueden dar el empujón que necesitas para diseñar una app o una web visualmente encantadora y perfectamente funcional. 

Y es que, entre todas las cosas que un diseñador web debe manejar para saber cómo crear una interfaz, es probable que romperse la cabeza para crear nuevos layouts de interfaces sea una de las que más lágrimas genera 😭.

Basta de llorar, pues en esta nota encontrarás ejemplos de  interfaz de usuario para que la inspiración llegue a tu puerta. 

Primero, revisaremos con casos concretos cómo se aplican los principios del diseño de interfaces. Enseguida, descubrirás 4 ejemplos de  diseño web creativos que combinan o “rompen” estos principios. Al final, te dejamos varias plantillas para descargar gratis con las que conseguirás crear una interfaz que eleve la experiencia de usuario al infinito. 

¡Entonces, sécate esas lágrimas y veamos los ejemplos de diseño de interfaces! 😉

Ejemplos de los principios de diseño web centrado en el usuario

Antes de comenzar, primero haremos un breve repaso sobre cuáles son los principios del diseño de interfaces web. Al respecto, Carlos Pariente, product designer y profesor del curso Diseño de Interfaces web y móviles, nos enseña lo siguiente:

“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”.

¿Y cuáles son las leyes de la Gestalt que se pueden aplicar al diseño de interfaces web? Carlos Pariente nos dice que son seis:

1. Proximidad
2. Similitud
3. Continuidad
4. Figura-fondo
5. Cierre
6. Simetría

Veamos en qué consiste cada uno de estos principios, por supuesto, incluyendo ejemplos de diseño de interfaces para que veas cómo se aplican. ¡Seguro que así sales de ese bloqueo! 💡

1. Proximidad

Se trata de agrupar elementos con un mismo fin por medio del uso del espacio. ⭐ Al aplicar el principio de proximidad en la interfaz de usuario web, se favorece el orden y la claridad, permitiendo a las personas escanear rápidamente una página para saber en dónde dar clic dependiendo de sus intereses. Este es un buen tip de UX.

¿Quieres saber cómo se aplica el principio de proximidad en la interfaz web? Revisemos la web de Bacánika. Este medio agrupa sus publicaciones en diferentes categorías: Cultura, Tendencias, Historias, Diseño, Arte, etc. 

👉 En este ejemplo de diseño de interfaces, fíjate cómo armaron su página Home usando los espacios en gris para crear separadores con los que diferencian las secciones entre sí. 

De esta manera, consiguen que cualquier usuario identifique rápidamente la sección de su interés, favoreciendo la navegabilidad. Nada como encontrar rápidamente lo que uno está buscando gracias a una interfaz de usuario gráfica, ¿no?

2. Similitud

Si en el principio de la proximidad la variable determinante era el espacio, en el de la similitud se utilizan recursos gráficos, como la forma, el tamaño o el color, para agrupar los contenidos de una interfaz de usuario de acuerdo con una función. ✅ 

Una de las características del diseño web aplicando el principio de la similitud es que los elementos con una misma forma, tamaño o color se entienden como una unidad. Así, puedes demarcar las diferentes secciones de una  app o web. 

La Home de Bacánika usa la ley de la similitud coloreando en negro los nombres de las categorías. 👉 Pero para mostrarte otros ejemplos de diseño de interfaces que aplican el principio de la similitud, tomaremos el caso presentado por Carlos Pariente: la bandeja de Gmail.

Ve a tu bandeja de entrada. Mira que algunos de tus correos están en color blanco, lo que significa que aún no los has leído. Otros están en color gris, mostrándote que ya los revisaste. Y si haces clic sobre uno, ves cómo se resalta en color azul. En Google son gurús creando excelentes ejemplos de diseño de interfaces.

3. Continuidad

Este principio consiste en ubicar los diferentes elementos de una  interfaz web siguiendo el orden de lectura que aprendimos desde niños. ¿Cómo es esto? En español leemos de izquierda a derecha y de arriba a abajo. Por eso, si ubicas tus elementos siguiendo este orden, automáticamente tus usuarios tenderán a agruparlos. Cósmico, ¿no?

👉 Mira estos ejemplos de diseño de interfaces. El primero es de la página web de Apple Colombia. Observa cómo ponen los diferentes modelos del iPhone en la parte superior y de izquierda a derecha. Así, nuestros ojos siguen un camino natural que va desde el primer elemento hasta el último.

👉 Ahora, el segundo ejemplo de diseño de interfaz de usuario es de Dafiti. ¿Ves cómo los productos siguen esta misma ubicación de izquierda a derecha? De hecho, el principio de la continuidad es ampliamente usado en la creación de e-commerce, pues orienta a nuestros ojos a escanear toda la interfaz web para observar, de forma práctica, todos los productos disponibles.

4. Figura-fondo

¿Sabías que nuestro cerebro interpreta cada objeto como figura (elemento destacado) o fondo (elemento en segundo plano)? El principio de figura-fondo parte desde aquí. Al aplicarlo, puedes conseguir un diseño de interfaces de aplicaciones o páginas mucho más dinámico e integrado, como todo un experto.

👉 ¡Este ejemplo de diseño de interfaces te viene como anillo al dedo si eres gamer! Esta es la Home de League of Legends. Observa cómo es posible diferenciar el fondo (el bosque) de la figura (el personaje) gracias al contraste generado por los colores, una imagen más detallada y la inclusión de texto con todo el poder de las técnicas de copywriting.