Home Blog/ Estilo de vida/
Estilo de vida

Ejemplos de dise√Īo de interfaces: ¬°Estas webs te volar√°n la cabeza!

Tatiana Forero - 15 May 21

Articulo

7 min.

¬Ņ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 ūüė≠.

¬ŅTe interesa este art√≠culo? Te encantar√° nuestro MicroDegree en Product Management. ¬°Inscribite Aqu√≠!

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?

 

Bacanika interfaz

Fuente: Home de Bac√°nika.

 

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.

 

Gmail Interfaz

Fuente: Bandeja de entrada de Gmail.

 

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.

 

Apple Colombia interfaz

Fuente: Apple Colombia.

 

ūüĎČ 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.

 

Dafiti interfaz

Fuente: Dafiti Colombia.

 

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.

 

League of Legends interfaz

Fuente: Home de League of Legends.

 

ūüí° Por cierto, ¬Ņviste c√≥mo a este ejemplo de interfaz gr√°fica le aplicaron Motion Graphics? El efecto que proporciona entretiene bastante. ¬ŅTe gustar√≠a aprender a hacerlo? Entonces, no te puedes perder el curso online de Motion Design en el dise√Īo de interfaces, un programa avanzado en el que aprender√°s las mejores pr√°cticas en animaci√≥n para el dise√Īo UI y UX.

 

 

 

5. Cierre

Adem√°s de distinguir la figura del fondo, nuestro cerebro tambi√©n es capaz de completar figuras incompletas, m√°s que todo porque le causa una incomodidad similar a la que sientes cuando le env√≠as un WhatsApp a tu ex por error: ¬°nada de borrarlo, hay que seguir hacia adelante! ūü§∑‚Äć‚ôÄÔłŹūü§∑‚Äć‚ôāÔłŹ

En el tipo de dise√Īo web creativo, ¬Ņc√≥mo se aplica el principio del cierre? Estos ejemplos de dise√Īo de interfaces web te volar√°n la cabeza. En una p√°gina del sitio web de Waaark explican la visi√≥n de su compa√Ī√≠a de una forma muy entretenida.

ūüĎČ Dise√Īaron un c√≠rculo con varias etapas con Motion Graphics. Como usuarios, es poco probable que nos vayamos de la web antes de que el c√≠rculo se complete. De esta manera, Waaark se asegur√≥ de que conoci√©ramos su visi√≥n hasta el final. Entonces, el principio del cierre se utiliza en el dise√Īo web centrado en el usuario para llamar y mantener su atenci√≥n.


Waaark interfaz

Fuente: P√°gina de Waaark.

 

6. Simetría

El √ļltimo principio que se aplica al dise√Īo de interfaces de usuario es el de la simetr√≠a. Este nos dice que percibimos las im√°genes sim√©tricas como iguales y parte de un solo elemento.

Para entender c√≥mo se aplica este principio, te traemos dos ejemplos de dise√Īo de interfaces. ūüĎČ El primero es de Beat. Mira c√≥mo los √≠conos con los que ense√Īa sus diferentes servicios son sim√©tricos, simples, agradables y f√°ciles de interpretar. ¬°Hacen parte de una unidad!

 

Beat interfaz

Fuente: Home de Beat.


Ahora, una vez dominas la regla, ¬°puedes romperla como un rockstar! ūüĎČ Nuestro segundo ejemplo de dise√Īo de interfaces es de la Home de Melville. Mira c√≥mo todos los elementos se ubican fuera de la ret√≠cula. Esto le da a la p√°gina web un dinamismo y una est√©tica √ļnica.

 

Melville interfaz

Fuente: Home de Melville.

 

 

 

Ejemplos de dise√Īo de interfaces creativos

Ya que conoces cu√°les son los principios del dise√Īo web centrado en el usuario y c√≥mo se aplican por medio de los ejemplos de dise√Īo de interfaces que revisamos, ahora queremos darte una colecci√≥n de ideas s√ļper creativas para que las uses cuando te preguntes c√≥mo crear una interfaz. ¬°Eso s√≠, siempre cuida que tu dise√Īo sea responsive! ūüí°

S, C, P, F

S, C, P, F es una agencia de publicidad espa√Īola que tiene un sitio con un dise√Īo web para arrancarse los cabellos. ¬°Minimalismo puro y principio del cierre genialmente aplicado!

El sitio web consiste en preguntas a las que vas respondiendo. Con cada clic, te van guiando hasta llegar a donde quieres. Pero la verdad es que pica tanto la curiosidad que querr√°s hacer clic en todo. ¬°Te encantar√° explorar este ejemplo de dise√Īo de interfaces!

 

SCPF interfaz

Fuente: S, C, P, F.

 

Nurture Digital

Nurture Digital es una agencia de producci√≥n de video estadounidense. Su interfaz de usuario est√° llena de animaciones y elementos gr√°ficos llamativos que siguen el principio de la continuidad. Todas sus p√°ginas son ejemplos de dise√Īo de interfaces que incluyen un juego de colores, tipograf√≠as y mucho movimiento 100% funcional.

 

Nurture Digital interfaz

Fuente: Nurture Digital.

 

Ombia Studio

Ombia Studio es un estudio de escultura y dise√Īo de cer√°mica con sede en Los √Āngeles, por eso, el dise√Īo de la p√°gina web evoca la naturalidad. Adem√°s del color, si navegas por √©l te dar√°s cuenta de que sigue y, a la vez, rompe con el principio de la simetr√≠a de forma magn√≠fica. 

 

Ombia Studio interfaz

Fuente: Ombia Studio.

 

Prometheus Fuels

Prometheus Fuels es una empresa estadounidense de energ√≠a que extrae el CO2 del aire para producir combustibles con cero emisiones netas de carbono. ¬°Su p√°gina es uno de los mejores ejemplos de dise√Īo de interfaces! Funciona como un minijuego, adem√°s, se complementa con animaciones y un storytelling poderoso.

 

Prometheus Fuels interfaz

Fuente: Prometheus Fuels.

 

Bonus: Plantillas gratis de dise√Īo de interfaces

Esperamos que al revisar estos ejemplos de dise√Īo de interfaces ahora la inspiraci√≥n est√© en el aire. ¬°Aprov√©chala y ponte manos a la obra con el prototipado descargando nuestras plantillas gratuitas para dise√Īar interfaces de usuario!

 

Plantillas para Adobe XD

Ahorra horas de trabajo en el prototipado del dise√Īo de interfaces con estas 5 plantillas para Adobe XD. ¬°Da clic en el banner!

Banner Plantillas Adobe XD

 

Plantillas para Figma

Dise√Īa el prototipo de la interfaz de tu web o tu app en Figma. Usa estas plantillas para Figma haciendo clic en el banner y comp√°rtelas con tu equipo.

Banner Plantillas Figma

 

50 iconos en Sketch e Illustrator

Usa el principio de la simetr√≠a a tu favor. ¬°Descarga estos 50 √≠conos en Sketch e Illustrator para tus dise√Īos de interfaces!

Banner iconos sketch illustrator

En Crehana creemos que la pr√°ctica hace al maestro. Y ya que revisamos los ejemplos de dise√Īo de interfaces y viste c√≥mo se aplican los 6 principios de la Gestalt, ¬Ņpor qu√© no contin√ļas con tu aprendizaje con un curso de dise√Īo web? 

Te recomendamos inscribirte en el curso online de Fundamentos de UX & UI: Dise√Īo de interfaces, un programa completo con el que dominar√°s las bases del UX y el UI y mejorar la experiencia de tus usuarios. ¬°Inscr√≠bete hoy! Te vemos en clase. ūüôĆ