Usar el énfasis en las maquetas

Énfasis
Proporcionar un diseño que satisfaga las necesidades de tus usuarios es siempre el objetivo del
diseño en UX. Una forma en la que puedes asegurarte de que tus usuarios comprendan y
encuentren las áreas importantes de tu diseño es mediante el uso de énfasis. El énfasis
significa que un objeto o elemento atrae la atención. Cuando parte de un diseño tiene énfasis, el
ojo del usuario se ve atraído al mirar la pantalla de una aplicación o página web. Hay varias
maneras de agregar énfasis a tus diseños.
Tamaño
La implementación de cambios en el tamaño de los elementos en tus diseños es una manera
fácil de dar énfasis a los usuarios para llamar su atención a objetos más grandes y, al mismo
tiempo, transmitir que un objeto es más importante que otro.
Un buen ejemplo de tamaño es el texto visible en el diseño de una aplicación. Usar un tamaño
más grande para el título de la página, como «sandía» en la imagen de abajo, ayuda a orientar
al usuario. El nombre de esa página debe ser más grande o estar más destacado en negrita que
el resto del texto de esa página para mostrar la importancia de ese texto específico.

Contraste
El contraste es la creación de elementos visuales opuestos para transmitir énfasis o
comparación. El contraste es una excelente manera de enfatizar los elementos de un diseño que
son diferentes o importantes. En la imagen de abajo, el carrito de pago y los botones de
«pedido» son de color rojo brillante y morado, lo que contrasta con la aplicación que de otro
modo sería blanca y gris.
También puedes presentar contraste si cambias el aspecto del texto. Hay varias formas de
agregar contraste al texto, como destacar en negrita, sumar color, subrayar, usar cursiva y
resaltar información importante que el usuario debe tener en cuenta.

Textura
La textura son los elementos dentro de un objeto que le agregan profundidad o un patrón. La
textura puede hacer que un objeto se destaque de otros en un diseño y se debe usar con
moderación para atraer la mirada del usuario.
Una forma de crear énfasis con la textura es colocar líneas o formas sobre una imagen que se
usa repetidamente. Sumar textura ofrece una ruptura en el patrón de la misma imagen y brinda
a los usuarios algo con lo que interactuar. Por ejemplo, si estás diseñando una página para
mostrar a los usuarios información sobre tu marca, como en la imagen de la aplicación a
continuación, agregar textura es una excelente manera de enfatizar y atraer la atención del
usuario a una parte del diseño. En el gráfico, el «80% de nuestros compradores» está
representado por la sección de puntos del gráfico circular. En otras palabras, la sección más
importante del gráfico se enfatiza con textura.

"80% of our shoppers prefer our store brands to our competitors."

«El 80% de nuestros compradores prefieren las marcas de nuestra tienda a las de la
competencia».

Énfasis en el mundo real

Consulta este ejemplo de diseño de la página Acerca de Google, que demuestra el uso efectivo
del énfasis. La declaración de misión de Google utiliza el contraste de colores para captar la
atención del usuario y enfatizar los puntos principales de la misión de la empresa de un vistazo.

El diseño de la página ayuda al usuario a identificar dos cosas importantes al mismo tiempo:
● La importancia de la declaración de objetivos de Google, con una fuente negra fácil de
leer sobre un fondo blanco que no distraiga al lector de su interacción con la página.
● El contraste de colores destaca los pilares de la marca de Google, las áreas más
importantes dentro de la declaración de la misión.
Estas opciones de diseño agregan énfasis y ayudan a guiar la atención del usuario hacia un
área específica de la página.
A medida que diseñes, considera por qué un usuario visitaría tu sitio web o utilizaría tu
aplicación. Si pones énfasis en un lugar determinado de la página o la pantalla, el usuario no
tiene que esforzarse tanto para encontrar lo que necesita. Y eso ayuda a los usuarios a tener
una mejor experiencia cuando interactúan con tu diseño.

Recursos adicionales
Agregar énfasis ayuda a que tus diseños sean visualmente atractivos y más funcionales para los
usuarios, ¡y eso es beneficioso para todos! Consulta los recursos a continuación para obtener
más información sobre cómo incorporar énfasis en tus diseños.
● Para conocer más formas en las que puedes agregar énfasis a tus diseños, lee Énfasis:
configuración del punto focal de tu diseño de Interaction Design Foundation. Analiza la
mecánica de crear puntos focales visuales dentro de tus diseños.
● Los principios del diseño van a ser la caja de herramientas que utilizarás a lo largo de tu
carrera como diseñador de UX. El artículo Desglosar los principios del diseño de Toptal
hace referencia a muchos tipos diferentes de principios de diseño que debes tener en
cuenta.

Usar jerarquías en maquetas

Jerarquía

Como recordatorio, el objetivo principal de usar la jerarquía en tus diseños es guiar al usuario.
La jerarquía ayuda al usuario a saber dónde centrarse primero y qué acciones tomar.

Para entender visualmente cómo funciona la jerarquía, aquí hay un gráfico que puede darte una
idea de cómo se puede agrupar la información. Si piensas en la información que se debe
compartir como un rectángulo gigante, la jerarquía toma ese bloque de información y lo analiza
de lo más a lo menos importante.

La jerarquía es diferente del énfasis porque se trata de guiar la atención del usuario a través de
grupos de elementos, en lugar de centrarse en la importancia de un elemento en particular.

El uso de jerarquías es importante para organizar la información dentro de agrupaciones lógicas,

lo que ayuda a los usuarios a encontrar la información que necesitan y enfatiza los elementos en
orden de importancia. La jerarquía también ayuda al usuario a evitar confundirse y sentirse
abrumado por la información.

Implementar jerarquías en tus diseños

Cuando creas un diseño, la información más importante para un usuario debe estar primero.
Centrarse en el orden de importancia ofrece a los usuarios exactamente lo que necesitan sin
hacer que se sientan frustrados con su experiencia cuando usan tu producto.
Para incluir mejor la jerarquía en tu diseño, concéntrate en el objetivo principal que desees que
logren los usuarios cuando interactúen con tu producto. Por ejemplo, si el objetivo principal es
lograr que inicien sesión en tu sitio e interactúen con él, tu jerarquía debe comenzar con un
enlace claro a la página de inicio de sesión o registro de tu sitio.
Una vez que conozcas tus objetivos principales y secundarios, podrás organizar la jerarquía de
tu diseño. Echa un vistazo a estos dos diseños de Google Opinion Rewards en un teléfono
móvil:

El diseño de la derecha muestra una versión de la aplicación Google Rewards que carece de
énfasis en las áreas importantes de información para el usuario. La fuente es pequeña y no hay
un camino sólido para que el ojo del usuario lo siga. En otras palabras, el usuario no sabe dónde
enfocarse primero o qué acción tomar en esta pantalla, lo que hace que su experiencia sea
mala.

El diseño de la izquierda muestra la versión actual de la aplicación, que es más fácil de leer y
navegar. Sumar jerarquía creó énfasis en el diseño de la aplicación. Usar texto con color, más
grande y destacado en negrita llama la atención sobre las recompensas que el usuario ganó y
deja en claro qué información tendrá el usuario cuando salga de esta aplicación.
Ayudar a las personas que usan tecnología de asistencia

La jerarquía clara también es necesaria para los usuarios que dependen de la tecnología de
asistencia, como los lectores de pantalla. A medida que completes tu diseño con contenido,
imágenes y elementos, cada pantalla de tu aplicación se volverá más compleja.

Esta complejidad puede dificultar que el software de lector de pantalla siga el flujo correcto en
una pantalla y, por lo tanto, hacer que sea difícil para los usuarios comprender el diseño de tu
interfaz. La jerarquía ayuda a guiar al lector de pantalla para que siga la información dentro del
diseño en el orden en que deseas que se lea.

En el cuadro del lector de pantalla, puedes ver cómo cada encabezado que se lee corresponde
a un área dentro de la página de Google Search. Si estos encabezados estuvieran
desordenados, el usuario que usa un lector de pantalla se confundiría acerca de dónde se
encuentra en la página. Es fundamental que comuniques el nivel de encabezado de tu contenido
a fin de preparar el escenario para la información que sigue. Hacer esto respalda la arquitectura
de la información de tu diseño, lo que ayuda a la navegación y la comprensión del usuario.

Una organización clara del diseño, página por página, comunicará a los ingenieros el objetivo de
tu diseño y ofrecerá a todos los usuarios una expectativa de cómo interactuar con tus diseños, lo
que los mantendrá contentos y comprometidos.

La organización es clave

La organización de tus diseños mediante jerarquías mejora la experiencia del usuario de tu

producto. Y tener en cuenta la accesibilidad mientras trabajas en la jerarquía de cada página
mejorará el recorrido del usuario para todos. Mientras trabajas en tus maquetas, piensa en la
importancia de cada área de tu diseño en una escala desde lo más a lo menos importante.
¡Primero quieres ubicar la información más importante!

Ten en cuenta que, a medida que diseñes, la jerarquía de tu página puede cambiar según la
retroalimentación que recibas de los usuarios y los interesados.
Construir tu jerarquía

Para obtener más información sobre la importancia de agregar jerarquía a tus diseños, consulta
estos recursos adicionales.

● Comienza tu viaje hacia la creación de jerarquías visuales efectivas con el artículo

Consejos de oro y ejemplos para crear jerarquías visuales en el diseño de sitios web de
Mockplus.
● Si deseas ver una representación visual de cómo puede funcionar la jerarquía, lee este
artículo de Interaction Design Foundation, que garantiza que entiendas la pregunta
fundamental: ¿Qué es la jerarquía visual?
● La jerarquía es fundamental para crear un diseño de producto que sea accesible para
todos tus usuarios. Para obtener más información sobre el diseño inclusivo, aquí hay un
artículo de UX Collective: A se refiere a accesibilidad: 12 consejos principales para
diseñar una experiencia del usuario inclusiva.

Usar escala y proporción en maquetas

Images and of scale and proportion. Scale: Shows two of the same yellow circles, the circle to
the left is large and the circle to the right is scaled down. Proportion: Three green circles, large,
medium, and small that get smaller at the same proportions.
Imágenes de escala y proporción. Escala: muestra dos círculos amarillos, el círculo de la
izquierda es grande y el círculo de la derecha más pequeño. Proporción: tres círculos verdes,
uno grande, otro mediano y otro pequeño, que se hacen más pequeños en la misma proporción.
La escala y la proporción son conceptos de diseño que puedes incorporar estratégicamente en
tus maquetas para ayudar a que un diseño sea visualmente agradable y captar la atención del
usuario.
Escala es el concepto que se utiliza para explicar la relación de tamaño entre un elemento
determinado y los otros elementos del diseño. La proporción es el equilibrio o la armonía entre
los elementos que se escalan.
Los diseñadores de UX a menudo usan la escala para hacer que los elementos más importantes
de un diseño sean más grandes que los menos importantes, lo que ayuda a crear énfasis y
contraste. La proporción ayuda a los diseñadores de UX a asegurarse de que la relación de
tamaño entre los elementos tenga sentido y de que los elementos de la pantalla estén
equilibrados entre sí.
Implementar la escala en tus diseños
La escala se utiliza para llamar la atención sobre los elementos y ayudar a los usuarios a
encontrarlos más rápidamente. También ayudan a los usuarios a entender el tamaño relativo.
Imagina que le pides un par de pendientes nuevos a un artista local, pero no puedes ver en la
imagen qué tan grandes son. Si el artista publica una imagen de los pendientes junto a un objeto
común, como una moneda de 25 centavos, te darás una idea de la escala.
O bien, consulta el principio de escala en acción en la aplicación Google TV, en la imagen de
abajo. La imagen superior de «Amor y monstruos» es más ancha y más grande que la lista de
películas debajo de ella, en la sección «Mejores opciones para ti». El uso de la escala en este
diseño llama la atención de los usuarios hacia la película destacada (en la parte superior) en
primer lugar.

Usar la proporción en tus diseños

La proporción se basa en cómo los objetos se relacionan entre sí. Por ejemplo, algo que a la
gente le parece gracioso de los payasos es el tamaño de sus zapatos. Sus zapatos son
desproporcionadamente grandes para el tamaño del cuerpo del payaso. ¿O viste alguna vez un
chiste de tiranosaurio rex? Por lo general, se trata de lo pequeños que son los brazos de los
dinosaurios para sus cuerpos gigantes, lo que les dificulta realizar tareas básicas (humanas).
Los brazos del tiranosaurio rex son desproporcionados en comparación con el tamaño de su
cuerpo.

Pero, ¿cómo usan los diseñadores de UX la proporción en el mundo real, además de hacer
bromas? Echa un vistazo a la imagen de abajo para ver un ejemplo de la proporción en una
pantalla diferente de la aplicación Google TV. En las categorías llamadas «Programas de
televisión románticos» y «Programas de televisión misteriosos», las imágenes son cuadrados
redondeados que tienen el mismo tamaño. Sin embargo, en la categoría llamada «Películas
familiares populares», las imágenes son rectángulos verticales, en lugar de cuadrados. Este sutil
cambio en la proporción resalta la diferencia entre categorías: las que están en la categoría
«aptas para toda la familia» contra las que no. En tus propios diseños, puedes encontrar que las
sutiles diferencias de proporción, como esta, son fáciles de entender para los usuarios y, al
mismo tiempo, hacen que tu diseño sea claro.

Crear un equilibrio para tus usuarios

Ahora ya conoces los conceptos básicos de aplicar escala y proporción para mejorar tus
diseños. A medida que continúes creando tus diseños y maquetas, recuerda que estos cambios
sutiles, cuando se hacen bien, pueden informar fácilmente el diseño de tu aplicación al usuario.
Estos principios te serán útiles a medida que crees tus maquetas equilibradas y fáciles de usar.
Echa un vistazo a este artículo de UX Planet para aprender sobre la proporción áurea y cómo
puedes aprovecharla en tus diseños: Proporción áurea: equilibrar el diseño de la IU

Usar la unidad y la variedad en maquetas

Unity: Several small circles organized together that they show the shape of a four-sided star.
Variety: Several different shapes in the same size and color.
Unidad: varios pequeños círculos organizados juntos que muestran la forma de una estrella de
cuatro lados. Variedad: varias formas diferentes del mismo tamaño y color.
En el video del curso, aprendiste cómo los conceptos de unidad y variedad se pueden incorporar
en los diseños que creas para mantener la atención de los usuarios y mejorar su compromiso
con tu producto.
La unidad mide qué tan bien funcionan juntos los elementos de diseño para crear una idea de
diseño consolidada.
La variedad se refiere a la diversificación de los elementos de tu diseño para romper la
monotonía y crear interés visual.
Si confían en un principio de diseño como la unidad, los diseñadores de UX pueden comunicar
una sola idea al utilizar la unidad entre los diferentes elementos de un diseño. ¡Esta puede ser la
diferencia entre un diseño de interfaz de usuario correcto y un diseño de interfaz de usuario
increíble! Usar variedad permite a los diseñadores utilizar elementos diferentes, pero similares,
para mantener la atención de sus usuarios. La repetición es una gran herramienta para que la
usen los diseñadores de UX, pero una cantidad excesiva puede agotar al usuario y hacer que se
desconecte del producto.
Vamos a explorar un par de ejemplos reales de unidad y variedad en acción.
Unidad
Tu diseño es mucho más que elementos en un marco. La unidad es la forma en que todos esos
elementos se unen para ayudar a los usuarios a cumplir el objetivo que estableciste para el
diseño de tu producto. Puedes pensar en ello como todos los elementos que se unen para pintar
el diseño que estuviste imaginando mientras construías esta maqueta.
A medida que empieces a pensar en la unidad para usar en todos tus productos, hay algunas
cosas que puedes analizar:
● Cómo se alinean los elementos entre sí
● La forma de los elementos
● La continuidad en los elementos de texto
Puedes ver los elementos resaltados en la aplicación YouTube Music a continuación:

Cómo se alinean los elementos entre sí

La forma en que los elementos ocupan espacio dentro de una aplicación es tan importante como
los diseños en sí. Si miras el ejemplo resaltado a la izquierda, verás que la aplicación YouTube
Music muestra los videos de la aplicación y los artistas favoritos. Los videos son rectángulos que
ocupan todo el ancho de la pantalla, y los favoritos son círculos que tienen un ancho diferente.
Estas dos formas rojas superpuestas en la aplicación tienen el mismo tamaño. Estos cuadros
rojos muestran que estos elementos se alinean entre sí no por la forma, sino por la unidad
dentro de la cantidad de espacio que ocupan en la pantalla.

La forma de los elementos

Ya aprendiste cómo la forma de los elementos puede usar la proporción para mejorar la manera
en que los usuarios interactúan con tus diseños. Ahora puedes ver cómo la forma de los
elementos puede mejorar la unidad de los diseños en la aplicación de música de YouTube. En la
segunda pantalla, puedes ver cómo los cuadros de las listas de reproducción tienen la misma
escala, proporción y tamaño. Todos estos cuadrados rojos tienen el mismo tamaño. Hay muchos
principios diferentes en esta pantalla de la aplicación, pero no hay duda de que el diseño de los
cuadros hace que este diseño se sienta claro, organizado y fácil de navegar.
La continuidad en los elementos de texto
Anteriormente, en este curso, hablamos sobre la importancia de elegir una fuente, un color y un
tamaño de fuente. Puedes ver cómo el texto de YouTube Music encaja y mejora la unidad de los
diseños. En el tercer y último gráfico anterior, puedes ver que hay dos tipos de elementos de
texto resaltados: encabezados de sección y descripciones. Los encabezados de sección tienen
el mismo color, la misma fuente y la misma alineación. Las descripciones también comparten el
mismo color, la misma fuente y la misma alineación, incluso cuando las descripciones son más
largas que el espacio permitido para ellas. Todas estas opciones contribuyen a mantener
unificado el flujo de aplicaciones. Cada elemento, incluido el texto, tiene un lugar y nunca sale
del espacio.

Aplicar la unidad a tus maquetas

Si piensas en la unidad en el diseño de tu producto, recuerda la declaración de metas que
creaste. Ahora piensa en todos los elementos que estás considerando agregar a tu diseño.
¿Cómo funciona cada uno de los elementos que estás creando para cumplir esa meta? Si no
puedes responder a esa pregunta, quizás sea momento de reconsiderar el propósito del
elemento en tu diseño.

Variedad
El interés de los usuarios en tus diseños a menudo depende de qué tan bien les presentes los
elementos. Como diseñador de UX, es probable que trabajes en algunos proyectos realmente
emocionantes, pero también lo harás en proyectos comunes y corrientes (¡algunos incluso serán
aburridos!). En situaciones como esa, es importante que comprendas cómo la variedad puede
mejorar la forma en que los usuarios interactúan con tu producto.
La aplicación Google Photos presenta una solución para implementar variedad en tu diseño.
Notarás la variedad de tamaño en las imágenes de arriba. Los diseñadores de Google Photos
podrían haber optado por mantener la típica cuadrícula cuadrada que representa las imágenes
en esta colección de fotos. En cambio, eligieron que algunas imágenes conservaran sus
dimensiones originales en forma de rectángulos. Estos rectángulos se intercalan entre la imagen
cuadrada de una manera estéticamente agradable. Esta variedad dentro de las imágenes
mantiene a los usuarios interesados en la aplicación.

Aplicar variedad a tus maquetas

Parte de convertirse en un diseñador de UX exitoso es encontrar formas de mantener a los
usuarios entusiasmados con tu producto. ¡Incluso si ese producto no es muy emocionante!
Aplicar algo de variedad a tus elementos puede contribuir en gran medida a mantener a tus
usuarios interesados en el diseño que creaste. ¿Hay áreas de tus maquetas que sientes que
son demasiado repetitivas? Piensa en lo que aprendiste sobre la variedad y prueba algo un
poco diferente.

Pensar en el diseño general de tu producto

Es una buena idea pensar en principios como la unidad y la variedad desde el principio del
proceso de diseño. Incorporar estos conceptos a medida que trabajas puede ayudarte a crear
productos realmente atractivos que garanticen que los usuarios continúen interactuando con el
diseño de tu producto.
Para entender cómo funciona el principio detrás de la unidad en el diseño gráfico y cómo
puedes aplicarlo a tus diseños, mira este video de DesignMantic: ¿Qué es la unidad? Luego,
podrás ver cómo un diseñador de UX se dio cuenta de que la variedad podría mejorar el diseño
de su producto cuando leyó un artículo de UX Collective: Variedad: la sal del diseño.

Modelo de la actividad: Aplicar los principios

de diseño visual a tus maquetas de proyecto
de portfolio
Aquí hay un modelo terminado, junto con una explicación de por qué el modelo cumple con los
requisitos de la actividad anterior.

Modelo
Evaluación del modelo
En el ejemplo anterior, puedes ver que había lugares para aplicar los cuatro principios de diseño
visual.
El diseñador hizo énfasis en la sección «Pizzas que te pueden gustar» al colocar el artículo en
una caja elevada. Este énfasis ayuda a aclarar la información que pertenece a esa pizza
específica. La jerarquía de los elementos de esta pantalla también se modificó para dar
protagonismo a elementos importantes, como el tiempo de espera y la cantidad de pizzas en la
cola. La escala de los botones en relación con otros elementos de la pantalla dirige
inmediatamente la atención a los elementos de acción clave. Por último, la variedad de rellenos
de color ayuda a guiar la arquitectura de la información, mientras que la paleta de colores
uniformes trabaja para mantener la apariencia general unificada.
Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho
mediante los criterios utilizados para evaluar el modelo.
¿Qué cosas hiciste bien? ¿En qué aspectos podrías mejorar? Mantén este feedback contigo a
medida que avances a lo largo del curso.

Aprender sobre los Principios Gestalt

adicionales
Como recordatorio, los Principios Gestalt describen cómo los seres humanos agrupan
elementos similares, reconocen patrones y simplifican imágenes complejas cuando perciben
objetos. En otras palabras, el cerebro humano intenta organizar la información y, para ello,
organiza inconscientemente las partes en un todo cohesivo. Aplicar los Principios Gestalt en tus
maquetas ayudará a crear diseños fáciles de usar y que se basan en la psicología y el
comportamiento humano.
Hasta ahora, en este programa de certificación, aprendiste sobre tres Principios Gestalt:
● Similitud: los elementos que se parecen se perciben como si tuvieran la misma función.
● Proximidad: los elementos que están juntos parecen estar más relacionados que los
que están más separados.
● Región común: los elementos ubicados dentro de la misma área se perciben como
agrupados.
Ahora, explorarás tres Principios Gestalt adicionales: cierre, continuidad y simetría.

Cierre
El Principio Gestalt de cierre describe que cuando un ser humano mira un objeto incompleto,
inconscientemente completa la imagen para ver un objeto completo y entero. Mira el gráfico de
arriba como ejemplo. Técnicamente, el gráfico muestra un montón de líneas de colores
diferentes, pero el cerebro percibe esas líneas como un cuadrado rojo, un círculo azul y un
triángulo amarillo debido al deseo de cierre. Usar el Principio Gestalt de cierre puede mantener a
los usuarios comprometidos con tus diseños si mejoras su atención en los objetos.

Fedex
¿Qué pasa con el cierre en el mundo real? En el logotipo de FedEx, que se muestra arriba, hay
un ejemplo sutil de cierre. ¿Puedes localizarlo? Entre la E y la x, el espacio en blanco forma una
flecha que apunta a la derecha. No hay contorno ni distinción en esta flecha, pero los usuarios
pueden ver la flecha porque la forma de la E y la x se unen para crear la ilusión de ella. Para
FedEx, esta flecha es más que el principio de cierre; también encaja con el propósito de su
marca de enviar artículos a sus usuarios porque la flecha implica avanzar.
Para leer más sobre el cierre en el diseño, aquí hay un artículo de UX Collective: Mejora tus
diseños con los principios de cierre y figura y fondo.
Continuidad
El Principio Gestalt de continuidad establece que los elementos que están dispuestos en una
línea o en una curva parecen estar más relacionados que los elementos que no están en la línea
o la curva. En otras palabras, la continuidad guía el ojo del usuario de un objeto a otro,
siguiendo una línea, y centra la atención en partes específicas de la pantalla.
Por ejemplo, en el gráfico de arriba, los ojos se dirigen desde el primer círculo, pasando por el
segundo círculo y hasta el tercer círculo porque los ojos siguen la línea blanca a medida que se
mueve por el gráfico.
En el mundo real, el Principio Gestalt de continuidad se usa a menudo cuando se muestran
procesos paso a paso y cuando se muestra una lista de elementos que están relacionados entre
sí.
Imagina que buscas información sobre el envío de un paquete. En primer lugar, debes hacer clic
en «Enviar» en el menú de navegación. A continuación, tu mirada se mueve al encabezado
«Más información» porque estás interesado en aprender a enviar un paquete. Luego, tu mirada
se mueve hacia abajo hasta el subencabezado «Envío», donde encontrarás el enlace para
aprender sobre el envío de paquetes. ¿Por qué? Pues bien, el principio de continuidad se utiliza
para guiar la vista en línea vertical a través del menú de navegación. ¡Seguir una línea como
esta ocurre tan rápido que probablemente ni siquiera te des cuenta de que has pasado por tres
niveles de menús para encontrar el enlace que estás buscando!

Otra forma en que los usuarios pueden percibir los elementos de un diseño se basa en la forma
en que se ven entre sí, o si los elementos de un diseño son simétricos o asimétricos.
El Principio Gestalt de simetría describe que los elementos son más agradables visualmente
cuando las partes de un objeto están equilibradas o son imágenes especulares entre sí. Además
de verse bien, los objetos que son simétricos también se perciben como relacionados entre sí.
En el gráfico de arriba, la forma de color verde oscuro de la izquierda se duplica en una forma de
color verde claro a la derecha. La única diferencia entre estas dos formas simétricas es el tono
de verde utilizado.
Por otro lado, la asimetría, que es una falta de equilibrio e igualdad, puede enfatizar la
importancia de un elemento y crear interés visual. El uso de la asimetría en tus diseños puede
ayudar a llamar la atención sobre un artículo específico o un grupo de artículos. En el gráfico de
arriba, la forma verde de la izquierda usa líneas rectas y la forma amarilla de la derecha usa
líneas curvas, lo que las hace asimétricas.
La imagen de abajo muestra el sitio web del Instituto Alan Turing, donde la asimetría está en
acción. Aquí, los diferentes tamaños de texto y la ubicación de los cuadros de texto guían a los
usuarios a la información más importante de la página.

Mientras piensas en cómo usar la simetría y la asimetría en tus diseños, consulta este video de
Skillshare sobre la simetría frente a la asimetría para obtener más información.

Con los Principios Gestalt en mente, ya puedes crear diseños que sean inteligentes, visualmente
atractivos y fáciles de usar. ¡Recuerda pensar en las necesidades de tus usuarios mientras
diseñas y no tengas miedo de volver a la mesa de dibujo para dar vida a algunos de estos
principios en tus diseños!

Modelo de la actividad: aplicar los Principios

de la Gestalt a tus maquetas de proyecto de
portfolio
Aquí hay un modelo terminado, junto con una explicación de por qué el modelo cumple con los
requisitos de la actividad anterior.
Modelo
Evaluación del modelo
En el ejemplo anterior, el diseñador aplicó el diseño visual y los Principios Gestalt al diseño de la
aplicación de Zia's Pizza.
Centrándose en el proceso específico de personalización de una pizza, el diseñador aprovechó
los Principios de la Gestalt en todo momento. El principio de similitud se aplicó a los elementos
de cobertura, que son todos muy similares. Se tomó la decisión de cambiar los elementos de la
corteza y la salsa a un diseño rotativo para diferenciarlos de la sección de ingredientes. Esta
elección refleja cómo la corteza y la salsa son elementos de una sola elección, mientras que el
usuario puede seleccionar varios ingredientes. Se aplicó una región común para separar las
secciones similares, pero distintas, del proceso de personalización de la pizza: corteza, salsa e
ingredientes. Finalmente, se usó la proximidad para reforzar elementos similares, como
ingredientes, y se le dio más espacio a los elementos diferentes, como la salsa y la corteza.
Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho
mediante los criterios utilizados para evaluar el modelo.

Considerar elementos y principios de diseño

visual adicionales
Ahora que aprendiste sobre los principios de diseño estándar, como el énfasis, la jerarquía y la
proporción, es momento de considerar algunos elementos de diseño adicionales. A medida que
continúes desarrollando diseños de alta fidelidad, te centrarás más en las imágenes, la estética
y la funcionalidad. En esta lectura explorarás cómo usar elementos visuales, como el valor, la
saturación y la orientación, para mejorar la experiencia del usuario.

Mientras que tono se refiere a la familia de colores (como el rojo, el verde o el azul), el valor es
la luminosidad u oscuridad de un color. El valor más claro de cualquier color es el blanco y el
más oscuro es el negro (como en el gráfico anterior). Muchos programas tienen ajustes de
valores, como una escala móvil que permite agregar blanco o negro a un color seleccionado. El
valor es clave para crear contraste en tus diseños. Por ejemplo, un color con un valor más claro
destaca sobre un fondo oscuro, lo que puede hacer que un diseño sea más fácil de ver.
Saturación
La saturación se refiere a la intensidad y la riqueza del color. Piensa en la saturación más alta
como la forma más pura de un color. Por ejemplo, el rojo, en su estado más saturado, es audaz
y brillante. Puedes suavizar el rojo puro si disminuyes la saturación y haces que parezca más
apagado. Reducir la saturación por completo te dejaría tonos de gris, como una película en
blanco y negro.
La saturación que elijas depende de qué tan atrevidos quieres que sean los colores de tu
diseño. Los colores muy saturados son ideales para captar la atención del usuario. Piensa en
carteles de neón, resaltadores y sirenas, todos usan una saturación intensa para enfatizar su
importancia.

Orientación
La orientación se refiere a la distribución de tu diseño. La orientación a menudo se corresponde
con la plataforma o el dispositivo para el que estás diseñando. Por ejemplo, las computadoras
de escritorio tienden a tener orientaciones horizontales (o apaisadas), mientras que los teléfonos
móviles y las tabletas permiten a los usuarios alternar entre orientaciones vertical y horizontal.
Algunos dispositivos no están orientados horizontal ni verticalmente. Los relojes inteligentes, por
ejemplo, suelen ser cuadrados, por lo que los diseñadores de aplicaciones de relojes
inteligentes deben tenerlo en cuenta. Puedes pensar en la orientación como una cuadrícula que
te ayuda a planificar tus diseños para que se ajusten a diferentes formas.
Interés intrínseco
El interés intrínseco se refiere a qué tan llamativo es un elemento visual para los usuarios.
Ciertos elementos de diseño, como logotipos o animaciones, pretenden captar la atención del
usuario. Por ejemplo, en la imagen de arriba, el título del capítulo es grande y está destacado en
negrita, lo que atrae la atención del lector. El texto del capítulo, por otro lado, es más pequeño y
legible.
El gráfico del lado izquierdo de la imagen utiliza variaciones en el color, la escala y la
composición, lo que hace que destaque aún más que el título del capítulo. La imagen del
embudo también ayuda a llamar la atención del usuario porque las imágenes suelen ser más
llamativas que el texto.
Puedes utilizar el interés intrínseco en tus diseños a asegurarte de que los elementos más
importantes se destaquen y de que los menos importantes se integren. Por ejemplo, muchas
revistas usan fuentes serif para el título de los artículos y fuentes sans serif para el cuerpo del
texto. Las fuentes serifs agregan estilo a los títulos que los distinguen del resto del contenido.

Peso físico percibido

El peso físico percibido es la ilusión de peso y volumen que transmite cada elemento visual.
Cuando crees elementos que simulen objetos con peso físico, querrás que las dimensiones de
cada uno se relacionen proporcionalmente con las demás.
En el gráfico anterior, cada recipiente parece contener un volumen diferente de líquido, desde
una taza medidora hasta una jarra de leche. El tamaño relativo de los contenedores varían
desde pequeños y ligeros hasta grandes y pesados. ¡Es la diferencia entre una sola porción y
suficiente para una multitud!
Enriquecer el recorrido del usuario
La elección de diferentes elementos visuales te permite crear diseños más interesantes,
atractivos y utilizables. A medida que continúas tu viaje de diseño, recuerda que cada elemento
puede enriquecer la experiencia del usuario y las interacciones con tus productos. Tómate el
tiempo para marcar tus elecciones visuales y tus razones para elegirlas. ¡En el diseño de UX no
hay coincidencias!
● Para obtener más información sobre estos elementos y otras opciones de diseño,
consulta este artículo sobre Principios de diseño de Interaction Design Foundation.
● Este artículo de Springboard explora 16 principios importantes de diseño de UX para
principiantes.
● Para conocer los fundamentos de los diseños exitosos, consulta Las 4 reglas de oro del
diseño de IU de Adobe.
● Usability.gov tiene una gran lista de Conceptos básicos del diseño de la interfaz de
usuario que debes tener en cuenta cuando diseñes.

Incluir navegación en maquetas

En esta parte del curso, estuviste perfeccionando tus maquetas en función de los principios de
diseño. Hay una cosa más a tener en cuenta cuando creas maquetas: La navegación que
ayudará a los usuarios a moverse por la aplicación.
Diseñar tu producto con un sistema de navegación simple e intuitivo es esencial para
proporcionar una buena experiencia del usuario. Piensa en un momento en que intentaste usar
una aplicación o un sitio web con una navegación confusa o difícil de seguir. Probablemente fue
una experiencia bastante frustrante, ¿verdad?
En esta lectura, aprenderás sobre los diferentes tipos de navegación y explorarás formas de
crear diseños con una navegación sólida y efectiva. ¡Empecemos!
Tipos de navegación
Hay algunos tipos comunes de navegación que puedes utilizar en tus propios diseños: barras de
navegación, barras de pestañas, menús de navegación y centros de navegación. Vamos a
explorar cada uno de ellos.
Barra de navegación
Las barras de navegación muestran los enlaces de navegación a las páginas más importantes
del producto en una sola barra a lo largo de un área de la pantalla. Según el diseño, esta barra
puede ser horizontal o vertical. Las barras de navegación son fáciles de encontrar y ofrecen a
los usuarios una visión clara de todas las áreas del sitio web con las que pueden interactuar.
Esto ayuda a los usuarios a llegar exactamente a donde quieren ir. En el caso de los sitios web
básicos, como un portfolio, es más beneficioso tener una barra de navegación simple a fin de
que los empleadores potenciales puedan navegar. En el ejemplo, del diseño de la aplicación
Lucere de la Googler Lisa, la barra de navegación se extiende a lo largo de la parte superior de
la pantalla para facilitar la navegación y deja en claro qué páginas puede elegir el usuario en la
barra de navegación. Para ver el proceso de diseño que usa Lisa, visita el sitio web de su
portfolio.
Este artículo de The Creative Momentum desglosa toda la información importante que necesitas
saber para crear la barra de navegación más efectiva: Diseñar la barra de navegación ideal

Barra de pestañas
Las barras de pestañas son muy similares a las barras de navegación, pero muestran los
enlaces de página como pestañas en las que se puede hacer clic y desactivar. Las barras de
pestañas pueden ser iconos, texto o ambas cosas. Cuando pienses en tus propios diseños,
debes saber que las barras de pestañas son una excelente manera de ordenar el contenido y
mantener al usuario interesado en el contenido de tu sitio. En el ejemplo, del diseño de la
aplicación Google Clock del Googler Kartik, la barra de pestañas se extiende a lo largo de la
parte superior de la pantalla. Cada opción cambia dentro de esa área de la aplicación, pero no
cambia la pantalla principal de la aplicación. El usuario puede saber en qué pestaña se
encuentra según el resaltado y el subrayado debajo del nombre y el icono. Para ver cómo Kartik
creó este diseño, visita el sitio web de su portfolio.

Menú de navegación
Un menú de navegación es un menú que aparece cuando el usuario hace clic en el icono de
tres líneas en el borde de la pantalla. A veces se llaman menús «ocultos» (porque pueden
ocultarse de nuevo) o menús de «hamburguesa» (debido a su forma). Estos menús suelen estar
ubicados en la parte superior izquierda o derecha de la pantalla y son fáciles de localizar para
los usuarios. También hacen que la pantalla parezca más atractiva visualmente, ya que
«ocultan» los detalles del menú hasta que el usuario toque para abrirlo. Un menú de navegación
es una excelente manera de mostrar todos los enlaces que deseas incluir sin tener que hacer
que se ajusten a tus parámetros de diseño. Por ejemplo, en el diseño del sitio web de portfolio
del Googler Andrew, Halo, el menú de navegación proporciona enlaces a todas las áreas
importantes de su sitio web sin tener que preocuparse por ajustar esos nueve enlaces dentro del
diseño en sí. Para ver cómo Andrew creó este diseño, visita el sitio web de su portfolio.
Este es un recurso de Enginess que explica las ventajas y los inconvenientes de los menús de
navegación y cómo y cuándo incluirlos en tu producto: Menús ocultos en diseño móvil y web.

Centro de navegación
Por último, un centro de navegación muestra una colección de enlaces en la página de inicio
del sitio web. Con un centro de navegación, el usuario a menudo tiene que volver a la página de
inicio para cambiar de página. Este formato ayuda a reducir la cantidad de contenido en la
pantalla al mismo tiempo. A menudo hay un botón de retroceso visible en cada página que te
lleva de vuelta a la página de inicio, donde se encuentran todos los enlaces de navegación. Un
centro de navegación puede ser ideal para ti si tus diseños no tienen muchas páginas. Pero si
tus usuarios necesitan realizar varias tareas a la vez y moverse de una página a otra, un centro
de navegación puede no ser la mejor opción. En el sitio web de portfolio de Tongfang, un
Googler, cada página solo tiene unas pocas opciones para ver antes de que los usuarios tengan
que volver a la página de inicio para cambiar de página.

Elementos de diseño de navegación

La navegación organiza la información para que los usuarios puedan interactuar con otras
partes de un producto. El diseño de navegación se compone de elementos, como botones e
íconos, que crean un camino claro y fácil para que los usuarios puedan alcanzar su objetivo.
¿Cómo puedes usar botones e iconos en tu navegación?
● Botones: pueden ser botones completamente diseñados o elementos en los que se
puede hacer clic, como texto o iconos. Los botones pueden estar animados para que
parezca que se puede hacer clic o tener una línea debajo de ellos para mostrar su
interactividad.
● Iconos: los iconos son como atajos visuales para el cerebro. Los iconos comunes
incluyen un icono de sobre que representa una bandeja de entrada de correo
electrónico, un icono de casa que lleva al usuario a la página de inicio o el logotipo de un
sitio web de redes sociales que lleva a los usuarios a una página de redes sociales.
Estos elementos de navegación se consideran asignaciones. Una asignación es una señal
visual del propósito de un objeto dentro de una interfaz. Esta «ofrece» la oportunidad de realizar
una acción, ya que brinda pistas sobre su contexto. Las asignaciones son una parte importante
de la creación de una navegación efectiva. Por ejemplo, si tu botón es solo texto en la página, el
usuario necesita algún tipo de asignación para saber que ese texto es interactivo.
Para obtener más información sobre las asignaciones, lee Cómo usar las asignaciones en las
interfaces de usuario de UX Planet.
Ahora sabes un poco sobre la navegación y tienes algunas pautas que seguir cuando
comiences a diseñar tus interfaces de usuario. A continuación, se incluyen algunos recursos
adicionales sobre la navegación que te proporcionarán más información para ayudarte a decidir
qué opción de navegación funciona mejor para tu producto:
● Para obtener una guía completa y detallada del mundo de la navegación, aquí hay un
artículo de JustinMind: Diseño de navegación: casi todo lo que necesitas saber.
● Puede resultar difícil descifrar qué diseño de navegación se adapta a tu producto. Aquí
hay un artículo de UX Booth que establece algunas pautas excelentes: Las reglas de la
navegación moderna.

Modelo de la actividad: crear una hoja de

pegatinas para los diseños de tu proyecto de
portfolio
Aquí hay un modelo terminado, junto con una explicación de por qué el modelo cumple con los
requisitos de la actividad anterior.

Modelo
Evaluación del modelo
El modelo identifica tipos similares de elementos de la interfaz de usuario que se clasifican y
agrupan: colores, tipografía, botones, etc. Cuando hay diversas variantes de un elemento (como
un botón activo o inactivo), se incluyen ambas versiones. Por último, el modelo etiqueta todos
los elementos individuales que tienen un uso específico, como la fuente Heading 1, a diferencia
de la fuente Button.
Ahora compara el modelo anterior con tu entregable completado. Evalúa lo que has hecho
según los criterios utilizados para evaluar el modelo.

Obtén inspiración de los sistemas de diseño

Como diseñador de UX, la creación de imágenes impactantes es fundamental para atraer
usuarios, mantener la coherencia entre los productos y establecer una marca. Por ejemplo,
piensa en la botella de champú o detergente para ropa que usas. Determinados elementos
visuales hacen que la marca de ese producto sea reconocible al instante e incluso podrían
haberte inducido a comprarlo. El diseño de la botella puede tener una fuente de firma, una
paleta de colores distintiva o un icono inteligente. ¡Las empresas trabajan arduamente para
crear diseños inteligentes y un sistema de diseño completo que puedan aplicar a todos sus
productos!
Recuerda que un sistema de diseño es una serie de elementos reutilizables que permiten a los
equipos diseñar y desarrollar un producto mediante estándares predeterminados. Un sistema de
diseño es la base visual de los productos de una empresa y es fundamental para atraer a los
usuarios. Para los diseñadores de UX, los sistemas de diseño son una excelente manera de
mantener la coherencia dentro de un diseño y entre productos.
A continuación, te mostramos una imagen de un sistema de diseño básico para una revista de
arte ficticia, Artniche. El sistema de diseño describe los elementos de diseño que utilizó Artniche,
como la tipografía, los colores y los botones. En otras palabras, esta tipografía y paleta de
colores se utilizan en la aplicación y el sitio web de la revista para garantizar la coherencia y
facilitar el diseño.

La cantidad de elementos que se incluyen en tu sistema de diseño depende de ti y del objetivo

de tu producto. Algo importante que debes recordar es que crear un sistema para definir los
elementos de diseño que utilizas es la mejor manera de crear coherencia de marca y producto, y
ahorra mucho tiempo a los diseñadores. ¡El sistema de diseño da forma al mundo detrás del
producto!
Ejemplos de sistemas de diseño del mundo real
El sistema de diseño de Google, llamado Material Design, se aplica a todos los productos, desde
Google Search hasta Gmail y Android. El material está ampliamente disponible y es gratuito
para que lo tomes prestado en tus diseños. De hecho, puedes descargar el kit de interfaz de
usuario de referencia para usarlo en tus propios diseños en Figma.
Para buscar e importar sistemas de diseño en Figma, ve a la sección Comunidad y desplázate
por las opciones. O bien, busca un sistema de diseño de una marca de la que seas fanático.
Cuando encuentres uno que te guste, haz clic en Duplicar para guardar una copia en tu carpeta
Borradores. ¡Puedes utilizar los elementos y componentes de ese sistema de diseño enseguida!
Cuando comiences a explorar la sección Comunidad, hay varios kits de interfaz de usuario que
quizás te convenga consultar o descargar:
● Material Design de Google
● Polaris de Shopify
● Fluent de Microsoft
● Salesforce Lightning
● Sistema de diseño Atlassian
● Base Web de Uber
Puedes usar estos sistemas de diseño como inspiración para tu propio trabajo, ¡así que toma
nota de los elementos que se destacan en cada sistema de diseño!

Muestra un sistema de diseño en tu portfolio

Una vez que crees un sistema de diseño para el producto que estés diseñando en este curso,
deberás incluirlo en tu portfolio. Por ejemplo, el diseñador de UX de Google, Dane, cocreó una
aplicación llamada Pocket para un proyecto de clase. En el caso práctico del portfolio de Dane,
incluyó detalles sobre el sistema de diseño del producto, como la tipografía, la iconografía y los
botones.
Para tu propio portfolio, debes documentar tus opciones de diseño en cada caso práctico. Ya
sea que crees un sistema de diseño integral con muchos elementos o simplemente definas los
iconos y colores que usas con frecuencia, incluir un sistema de diseño es una excelente manera
de destacar tus elecciones creativas y enriquecer tu portfolio.
Si quieres obtener aún más información, consulta este recurso de DesignerUp sobre Los 10
mejores sistemas de diseño y cómo aprender de ellos (y aprovecharlos).