miércoles, 30 de mayo de 2018

Estilos de Tipografía para la Web y Diseño Editorial e Impreso



Cameron 869ebe1c5036a3b2480339378d36fcdfBY CAMERON CHAPMAN - DESIGN BLOG EDITOR @ TOPTAL (TRANSLATED BY YESICA DANDERFER)




 La gran mayoría de las personas son bombardeadas con tipos de letra desde el momento en que se despiertan por la mañana hasta el momento en que se van a la cama por la noche. Desde las aplicaciones en sus teléfonos hasta los productos de arreglo personal en sus baños hasta los letreros que ven en sus viajes diarios a la mañana, la tipografía está en todas partes. Pero ¿cuántas personas realmente notan los estilos tipográficos que rodean todos los días?

Incluso los diseñadores subestiman los estilos de tipografías y, a menudo, toman decisiones de tipografías basadas en una opinión vaga en lugar de una comprensión objetiva. ¿La mayoría de los diseñadores siquiera conocen los contextos industriales originales para los cuales se diseñaron varios tipos de letra? ¿Qué significan estos contextos e historias para determinar la legibilidad, el carácter apropiado y el uso de un tipo de letra dado? No importa en qué disciplina de diseño se esté trabajando, ya sea diseño visual o UX o tradicional diseño de impresión, los estilos de tipografía son elementos esenciales de prácticamente todo el diseño producido.
Algunos de los tipos de letra más influyentes actualmente en uso a menudo se pasan por alto a favor de diseños de tipografía únicos que son más nuevos en el mercado, y a veces con razón. Cada uno de los tipos de letra en este artículo tiene décadas, si no siglos, y fueron diseñados para diferentes contextos tecnológicos. Por lo tanto, se han creado muchas alternativas o actualizaciones desde que se introdujeron. Incluso algunas de las fuentes originalmente diseñadas para pantallas se han quedado obsoletas ya que las pantallas e impresoras se vuelven de mayor resolución y son capaces de mostrar formas más complejas con precisión.

Tipografías Serif

Ejemplos de tipos de letra serif diferentes para la tipografía web

Baskerville, Georgia, Garamond, y Times New Roman son ejemplos populares de tipos de letras serif.
Comprender la diferencia entre los estilos de letra serif y sans-serif es una de las reglas de tipo más fundamentales. Para muchos esto puede ser obvio, pero el serif es el trazo dado al final de las principales líneas horizontales y verticales de un caracter. Hay muchas subclases dentro de serifs, incluyendo rayitas, cuñas y serifas de losas, que describen las cualidades visuales del serif.
Serif vs. sans tipografías, comparando diferentes tipos de letra
En general, las serifas tienen una historia más larga que las san serifs, ya que fueron las primeras tipografías usadas para imprimir libros después de la invención de Gutenberg Press. Esencialmente, las serifas permiten una lectura más cómoda en detalle, ya que las serifas guían el ojo suavemente de un personaje a otro, por lo que el serif es ideal para trabajos impresos largos. Debido a esto, las serifas aún son generalmente la fuente de referencia para trabajos impresos, como libros o informes, aunque no es una regla absoluta. Cada tipo de letra tiene sus propias cualidades específicas, y hay algunos tipos de letra serif que no son realmente adecuados para grandes fragmentos de texto corporal (y algunos tipos de letra sans-serif que son perfectamente legibles y legibles para trabajos largos).

Baskerville

Baskerville es una de las serifas clásicas que ha resistido la prueba del tiempo y todavía se usa ampliamente hoy en día. Baskerville fue diseñada en un período de transición entre las primeras caras tipográficas (Bodoni y Didot) y los tipos de letra de los siglos XIX y XX por venir. Baskerville ha tenido éxito debido a sus formas de letras de alto contraste.
El diseñador, John Baskerville, era un perfeccionista intenso y creó una fuente con hermosos detalles. El tipo de letra solo se puede imprimir en sus propias máquinas para garantizar que las formas de letras se transfieran correctamente a la página. Esta historia es significativa, ya que Baskerville se ha adaptado a los diversos medios en los que trabajamos hoy. Los detalles incorporados en cada forma de letra hacen que Baskerville no sea adecuado para medios de baja resolución, incluidas pantallas de baja resolución o impresoras defectuosas. Dicho esto, cuando Baskerville tiene la oportunidad de expresar su calidad, es una excelente tipografía serif.
Un buen ejemplo de una tipografía digital moderna en la que Baskerville ha influenciado mucho es la tipografía que Amazon ha encargado para Kindle, Bookerly. Si estás buscando una alternativa a Baskerville que mantenga su riqueza de 200 años mientras se actualiza para ser legible en la pantalla, Bookerly podría ser una buena solución. Otras alternativas incluyen Sra. Eaves y Plantin.

Times New Roman

Times New Roman, al igual que muchas fuentes ampliamente utilizadas desde hace un tiempo, es una tipografía polarizante que es amada por muchos pero también es detestada por algunos. A menudo, lo que las personas aman u odian sobre TNR es lo mismo: su neutralidad apática.
Matthew Butterick escribe “Times New Roman no es una elección de letra, sino la ausencia de una elección de fuente, como la negrura del espacio profundo no es un color. Mirar Times New Roman es contemplar el vacío”. Times New Roman se siente tan claro en gran parte debido a su abrumadora ubicuidad como resultado de su exposición del periódico para el que fue diseñado, el Times of London.
Times New Roman se diseñó para los intereses comerciales del periódico, que era mantener la legibilidad mientras metía tantas palabras en una línea y por lo tanto, en la página como fuera posible. Los diseñadores fueron muy públicos acerca del uso de la fuente con los periódicos, ya que es más estrecha y más legible en columnas delgadas, pero no es ideal para libros con longitudes de línea más largas. Esta eficiencia se logró aumentando la altura xy redujo significativamente el seguimiento o espacio entre caracteres.
Debido al éxito de la tipografía con The Times, Times New Roman fue adoptada poco después por la mayoría de los periódicos estadounidenses, convirtiéndose así en uno de los tipos de letra más ubicuos. Debido a esta ubicuidad, algunos diseñadores desaconsejan utilizar Times New Roman, ya que puede dar la impresión de apatía o baratura. Algunas otras fuentes de estilo editorial que podría considerar son ArnhemLe Monde Journal, o Plantin.

Garamond

Garamond Antiqua es un tipo de letra purista de estilo antiguo diseñado por el emblemático perforador parisino Claude Garamond. Garamond fue una de las primeras caras diseñadas para el tipo de conjunto, lo que significa que era ideal para los textos de cuerpo largo de la última moda de su tiempo: las novelas.
Como una cualidad inherente de la época en la que fue diseñado, Garamond da al texto un sentido del estilo del viejo mundo. Sin embargo, sus serifs redondeadas mantienen el texto más informal que muchos de sus equivalentes serif. Garamond ha seguido siendo una fuente prolífica en virtud de sus formas claras, lo que permite a los usuarios leer detenidamente sin cansarse. Los cuerpos grandes de los personajes y las altas x alturas crean una gran cantidad de espacio alrededor de cada letra, haciendo que las palabras sean perceptiblemente más grandes y, por lo tanto, más legibles.
Aunque muchos diseñadores argumentan a favor de la intemporalidad de Garamond, sus formas simplemente no son ideales para la tipografía web. Las virtudes de Garamond en la impresión incluyen sus curvas suaves que se mezclan de personaje a personaje, haciéndolo más legible por largos períodos de tiempo. La desventaja es que estas curvas se vuelven borrosas en tamaños más pequeños en la pantalla, lo que impide su legibilidad. Por lo tanto, a pesar de las numerosas recreaciones de Garamond que puede encontrar en línea, la mayoría de los diseñadores de la pantalla creen que se ha vuelto obsoleta. Dicho esto, los diseñadores de EB Garamond aún piensan lo contrario y están tratando de revitalizar este clásico en la comunidad de código abierto.
Si estás buscando alternativas a Garamond, echa un vistazo aSabon o Minion.

Georgia

Tal vez en respuesta a tipos de letra como la falla de Garamond en la pantalla, Microsoft encargó a Matthew Carter en la década de 1990 que diseñara un tipo de letra específicamente para la legibilidad en pantalla. Y así es como Georgia nació.
Muchos creen que Georgia carece de la calidad neutral de otras serifas producidas en serie, como TNR, y le da al texto una calidad amigable y encantadora. Por lo tanto, la hazaña impresionante del diseño de Carter es que logró resolver el problema de la legibilidad en pantalla al tiempo que mantiene el atractivo carácter de las caras impresas.
La historia es que Carter diseñó Georgia mientras trabajaba en una nueva versión de la fuente Scotch Roman del siglo XIX. Georgia mantiene muchas de las cualidades de su predecesor. Sin embargo, para diseñar Georgia para la pantalla, Carter hizo algunos cambios esenciales: aumentar la altura x, redondear los números y crear ligeras desalineaciones para mantener el sentido del carácter.
Aunque Georgia ahora se establece como un clásico, también se considera que tiene una sensación más moderna que muchos otros tipos de letras serif. Miller y Abril tienen una sensación similar y son buenas alternativas.

Tipografías Sans-Serif

Ejemplos de diferentes tipos de letra sans-serif
Verdana, Gill Sans, Helvetica, Franklin Gothic, y Futura son algunos de los tipos de letra sans-serif más utilizados.
Aunque algunos pueden argumentar que el tipo de letra sans-serif primero se produjo en la antigüedad, no se incorporaron oficialmente al uso generalizado y la sociedad moderna hasta el siglo XIX. A medida que la publicidad, los periódicos y los medios se dispararon, hubo una necesidad de tipos de letra que pudieran leerse como encabezamientos claros desde la distancia y ser representativos de una nueva era de la industria.

Verdana

Verdana comparte una historia similar con su primo, Georgia, ya que ambos fueron diseñados por Matthew Carter para Microsoft en la década de los 90. Por lo tanto, Verdana es un sans-serif diseñado específicamente para la pantalla. Al igual que muchas fuentes que buscan claridad, Verdana tiene una gran altura x para aumentar la legibilidad. Verdana se conoce como humanista sans-serif, lo que significa que mantiene algunas de las cualidades y la lógica de diseño de las tipografías serif.
Sin embargo, Matthew Carter era consciente de los espacios potencialmente restrictivos en los que puede introducirse algo de texto en la pantalla, por lo que el tamaño de los caracteres de Verdana está equilibrado lo suficiente como para evitar apilamientos en aplicaciones o en plataformas sin una ventaja estable. Teniendo en cuenta que Verdana fue diseñada para su uso en los años 90, es especialmente efectivo aún en dispositivos de baja resolución. Sin embargo, a medida que las pantallas se vuelven más altas en calidad, las fortalezas de Verdana se pierden y su rendimiento no es tan bueno como antes.

Si usa Verdana en forma impresa, su espaciado de amplio espacio le otorga la calidad de una fuente de máquina de escribir monoespaciada. Esta calidad hace que Verdana sea una mala elección para grandes volúmenes de texto impresos. Una alternativa que puede considerar ahora es Colfax. Los diseñadores de Colfax tienen en cuenta la falta de restricciones mecánicas en el diseño de tipos de hoy en día y han diseñado una fuente que es más apropiada tanto para pantallas de alta resolución como para impresión de inyección de tinta.
Gesta y PT Sans son ambas buenas alternativas a Verdana.

Franklin Gothic

Franklin Gothic es un tipo de letra realista sans-serif que fue creada originalmente en 1902 por Morris Fuller Benton de American Type Founders (ATF) y se expandió para incluir más pesos en los años 1970 y 1990 por ITC. Las versiones digitales del tipo de letra han sido creadas por Adobe, International Typeface Corporation (ITC), Monotype Imaging y URW.
El tipo de letra original que Benton admitió que fue diseñado como un homenaje a Benjamin Franklin, fue más adecuado para los titulares y el uso comercial en lugar de largos bloques de texto del cuerpo. Las actualizaciones con pesos y estilos adicionales han ampliado las opciones de uso desde entonces.
La calidad intemporal de Franklin Gothic lo convierte en una opción popular para muchos medios de comunicación aún, más de un siglo después de su lanzamiento original. Time Magazine y The New York Times lo usan para varios titulares, las fichas de Scrabble en las versiones estadounidense y canadiense del juego lo incluyen, y la versión condensada incluso se usó para el primer rastreo en las películas de Star Wars.
Aunque Franklin Gothic es increíblemente popular, una alternativa popular es News Gothic, el popular sucesor de Benton al original, con una construcción más estrecha y menos contraste de trazo. Otras alternativas incluyen Trade GothicBenton Sans y Maple.

Futura

Futura lanzado en 1927, es el resultado directo de uno de los primeros tipos de letra sans-serif geométricos (en oposición a humanist sans-serif). El mayor competidor de Futura, Erbar Grotesk (lanzado en 1926), fue diseñado en la enormemente influyente Bauhaus, con la intención de comunicar todo lo que la escuela consideraba moderna a comienzos del siglo XX. Esto significó que la lógica geométrica eliminó cualquier atisbo de ornamentación y apuntó a la lógica pura en las formas de letras creadas.
Al igual que Erbar Grotesk, Futura incluye formas de letras basadas en formas geométricas, principalmente el círculo (aunque también cuadrados y triángulos donde los círculos no eran apropiados). Incluye bajo contraste entre sus trazos, con ascendentes altos y minúsculos y caracteres en mayúsculas que comparten proporciones similares a las capitales romanas. Su diseñador, Paul Renner, creía que las tipografías modernas deberían tener sensibilidades modernas en lugar de simplemente ser reiteraciones de diseños anteriores.
Futura ha experimentado mucha fama en el transcurso del siglo 20, cuando los astronautas del Apolo 11 dejaron una placa en la luna en Futura; Volkswagen y muchas otras marcas lo han adoptado; y varios realizadores cinematográficos, incluidos Stanley Kubrick y Wes Anderson, lo han reapropiado. Si aprecias la calidad moderna de Futura pero la encuentras un poco usada, considerando probar FF Super GroteskHK Grotesk (open source), o Neuzeit.

Gill Sans

Monotype, la misma fundición tipográfica que nos trajo a Times New Roman, comisionó al erudito Eric Gill (un escultor/tipógrafo/artista gráfico) para producir una fuente para la señalización moderna de Londres. Gill Sans, al contrario de Futura, es una fuente humanista con un estilo menos regimentado que sus contemporáneos alemanes. La “R” está ligeramente acampanada y la “minúscula” gigráfica “goggle” está cerca de ser icónica. La calidad naturalmente audaz de la fuente funciona bien para las pantallas y los títulos, pero los pesos más livianos lanzados más tarde son muy adecuados para el texto del cuerpo.

Tipos de letra y el historial de tipos de letra
Gill Sans está basado en el trabajo de Edward Johnston de 1916, "Underground Alphabet" y es la fuente oficial de la London Underground.
Su historia en el metro de Londres, la BBC y la Iglesia de Inglaterra, además de su calidad moderna pero humana, hacen que el tipo de letra sea esencialmente británico. Aunque la fuente es clásica en proporción, tiene algunas bengalas artísticas que la hacen más alegre que su austera homóloga alemana, DIN.
Dicho esto, muchas de estas llamaradas artísticas han hecho que Gill Sans sea indeseable por algunos diseñadores gráficos. Específicamente, la minúscula “a” es a menudo criticada por estar desequilibrada y desechar la legibilidad.
¿Buscando alternativas a Gill Sans? Revisa ITC Johnston o P22 Underground.

Helvetica

Helvetica es el único tipo de letra que inspiró su propia película (2007). Es posiblemente la fuente más famosa/ubicua de la actualidad. La fuente nació de una competencia generalizada en los años 50 por nuevas versiones de las populares fuentes Grotesk.
Las fuentes Grotesk habían evolucionado gradualmente para aumentar la legibilidad. Sin embargo, no todos los tipos de letra funcionaban bien con los linotipos de los dispositivos y los mecánicos. La máquina de linotipo requería que los caracteres regulares y cursivos se configuraran con el mismo ancho, lo que hacía que las letras itálicas parecieran demasiado anchas y que los regulares parecieran demasiado angostos.
Helvetica fue diseñado específicamente con ajustes agudos de caracteres para mantener la belleza moderna y la legibilidad de los tipos de letra de Grotesk, al tiempo que permite a los diseñadores los beneficios de la producción en masa. Lanzado por primera vez en la feria comercial “Graphic 57”, la fuente se hizo omnipresente en todo el diseño suizo.
Otros tipos de letra que hacen buenas alternativas a Helvetica incluyen Maison NeueUnivers, y Folio.

Tipografías monoespaciadas

Los estilos de tipo de letra monoespaciados se diseñaron originalmente para la máquina de escribir. La principal cualidad para entender sobre esta categoría de tipo de letra es que la máquina de escribir requiere que cada carácter se escriba con el mismo espaciado. Por lo tanto, cada personaje se coloca dentro de una matriz de organización única en un cuerpo de texto, mientras que a menudo otras fuentes varían en el espacio para gestionar la legibilidad.
En definitiva, fuera del contexto de la máquina de escribir, existen pocas aplicaciones en las que tiene sentido utilizar tipos de letra monoespaciados. El espaciado equitativo significa que son menos eficientes y generalmente también menos legibles. Una excepción a esta regla se encuentra en las aplicaciones diseñadas para escribir código, donde el espaciado igual puede ayudar a la legibilidad.
Algunos ejemplos de estos son Courier, Consolas, Letter Gothic o Source Code Pro (gratis). Sin embargo, algunos diseñadores simplemente no pueden negar la estética nostálgica; por lo tanto, siguen siendo populares.

Tipo de letra de sistema

Los tipos de letra del sistema son los que vienen con su dispositivo o programa. Hay diferentes tipos de letra del sistema para Mac, Windows e incluso productos de Adobe. Todos los tipos de letra incluidos en este artículo tienen al menos algunas variaciones que son fuentes del sistema.
Hay algunas desventajas al uso de fuentes del sistema. El más grande es que estas tipografías generalmente están increíblemente sobreexpuestas. Debido a que están incluidos en la computadora de casi todos, las personas los ven día tras día, tanto en diseños buenos como terribles. Si bien no todos los proyectos tipográficos deben estar al borde de la originalidad, es importante comprender que si la marca que está diseñando para se supone que es única y original, el uso de una fuente del sistema a menudo socavará eso.
Otro inconveniente importante del uso de las fuentes del sistema es que algunas de ellas simplemente no son muy buenas. Arial me viene a la mente…
Finalmente, muchas fuentes del sistema están diseñadas específicamente para ser altamente legibles en la pantalla y pueden no ser particularmente legibles en la impresión. Esto puede no ser un problema para cada proyecto que emprende un diseñador, pero es algo que debe tenerse en cuenta.

La elección de una gran tipografía para el trabajo de diseño

Al diseñar para una marca en particular, elegir un tipo de letra profesional apropiado es un trabajo crítico para cualquier diseñador, especialmente cuando se considera que las licencias para algunas familias tipográficas pueden exceder los $ 1,000.
Elegir una familia tipográfica que incluya una gran variedad de pesos, anchuras e incluso ambas variaciones serif y sans-serif es una idea inteligente para muchos proyectos. Esto les da a los diseñadores muchas opciones para cualquier proyecto que pueda llegar a una marca en particular e incluso permite actualizaciones de material publicitario utilizando fuentes “diferentes” que no son tan diferentes (y por lo tanto, menos propensas a incienso a consumidores y leales a la marca), como ha sucedido en muchos rediseños grandes de las principales marcas). Una familia de fuentes profunda puede emparejarse consigo misma fácilmente y llevar una variedad de personalidades.
Cuando busques un tipo de letra para emparejar con una biblioteca de tipos existente para un uso más general en proyectos, concéntrate en elegir fuentes con características similares. Esto significa considerar todas las cualidades de las mayúsculas y minúsculas, x-alturas y geometría formal. Los sitios como Typewolf pueden ser muy valiosos para encontrar fuentes que se vinculen con las opciones existentes ya disponibles (así como también grandes alternativas para aquellos momentos en que un cliente dice que quiere algo “como” Helvetica pero definitivamente no Helvética).

UNDERSTANDING THE BASICS

What are the different types of fonts?

There are four basic types of fonts: serif, sans-serif, monospaced, and display. Within each of those types are multiple subtypes, such as script, slab serif, grotesque sans-serif, and old style.
What is typography and why is it important?
Typography is the visual presentation of the written word. Good typography reinforces the meaning of text and makes it more legible or readable. Bad typography can make text hard to read or convey the wrong meaning (such as using Comic Sans on a legal document, rather than something more formal like Garamond).











jueves, 17 de mayo de 2018

Explorando los Principios Gestalt del Diseño



CameronBY CAMERON CHAPMAN - DESIGN BLOG EDITOR @ TOPTAL (TRANSLATED BY YESICA DANDERFER)



El espacio negativo ha sido durante mucho tiempo un elemento básico de un buen diseño. Dejar un espacio en blanco alrededor de los elementos de un diseño es lo primero que se nos viene a la mente. Pero luego hay diseños que usan ese espacio en blanco para inferir un elemento que no está realmente allí (la flecha escondida entre la E y la X en el logotipo de FedEx inmediatamente viene a la mente como un ejemplo).
el espacio negativo es uno de los elementos y principios clave del diseño
La "E" y la "x" en el logotipo de FedEx crean una flecha dentro del espacio negativo entre ellas.
El cerebro humano es excepcionalmente bueno rellenando los espacios en blanco en una imagen y creando un todo que es mayor que la suma de sus partes. Es por eso que vemos caras en cosas como hojas de árboles o grietas en las aceras.
Este principio es una de las ideas subyacentes más importantes detrás de los principios gestálticos de la percepción visual. La propuesta inicial más influyente escrita sobre la teoría fue publicada por Max Wertheimer en sus leyes de organización perceptiva de 1923, aunque la discusión de Wolfgang Köhler en 1920 sobre la Gestalten física también contiene muchas ideas influyentes sobre el tema.
Independientemente de quién propuso las ideas por primera vez (ha habido ensayos que datan de hasta 1890), los principios gestalt son un conjunto importante de ideas para cualquier diseñador para aprender, y su implementación puede mejorar mucho no solo la estética de un diseño, sino también su funcionalidad y facilidad de uso.
En los términos más simples, la teoría gestalt se basa en la idea de que el cerebro humano intentará simplificar y organizar imágenes complejas o diseños que consisten en muchos elementos, al organizar inconscientemente las partes en un sistema organizado que crea un todo, en lugar de solo un serie de elementos dispares. Nuestros cerebros están diseñados para ver la estructura y los patrones con el fin de que comprendamos mejor el entorno en el que vivimos.
Hay seis principios individuales comúnmente asociados con la teoría gestalt: similitudcontinuacióncierreproximidadfigura/fondo, y simetría y orden (también llamado prägnanz). También hay algunos principios adicionales más nuevos asociados a veces con gestalt, como destino común.

Similitud

Es la naturaleza humana agrupa cosas similares. En gestalt, elementos similares se agrupan visualmente, independientemente de su proximidad entre sí. Se puede agrupar por color, forma o tamaño. Semejanza se puede usar para unir elementos que pueden no estar próximos. el otro al otro en un diseño.
ejemplo del principio gestalt de similitud
Los cuadrados aquí están todos igualmente espaciados y tienen el mismo tamaño, pero los agrupamos automáticamente por color, aunque no hay rima o razón para su ubicación.
Por supuesto, puedes hacer que las cosas sean diferentes si quieres que se destaquen entre la multitud. Es por eso que los botones para llamadas a la acción a menudo se diseñan con un color diferente al del resto de la página, por lo que se destacan y llaman la atención del visitante sobre la acción deseada.
En el diseño de UX, al usar la similitud, deja claro a los visitantes qué elementos son iguales. Por ejemplo, en una lista de características que usa elementos de diseño repetitivos (como un ícono acompañado de 3-4 líneas de texto), el principio de similitud haría que sea fácil escanearlos. Por el contrario, cambiar los elementos de diseño por las características que desea resaltar los hace destacar y les da más importancia en la percepción del visitante.
Incluso cosas tan simples como asegurarse de que los enlaces de un diseño estén formateados de la misma manera se basan en el principio de similitud en la forma en que sus visitantes percibirán la organización y la estructura de su sitio.

Continuación

La ley de la continuidad postula que el ojo humano seguirá el camino más suave al ver las líneas, independientemente de cómo las líneas en realidad fueron dibujados.

 un ejemplo del principio gestalt de continuidad
El ojo tiende a querer seguir la línea recta desde un extremo de esta figura a la otra, y la línea curva desde la parte superior a la inferior, incluso cuando las líneas cambian de color a la mitad.
Esta continuación puede ser una herramienta valiosa cuando el objetivo es guiar la mirada del visitante en cierta dirección. Seguirán el camino más simple en la página, así que asegúrese de que las partes más vitales que deberían ver caigan dentro de ese camino.
Como el ojo sigue naturalmente una línea, colocar los elementos de una serie en una línea atraerá la atención de un elemento al siguiente. Los deslizadores horizontales son uno de esos ejemplos, al igual que los listados de productos relacionados en sitios como Amazon.

Cierre

Closure es uno de los principios más geniales de Gestalt y uno que ya tocado al principio de esta pieza. Es la idea de que su cerebro completará las partes faltantes de un diseño o imagen para crear un todo.
En su forma más simple, el principio de cierre le permite a su ojo seguir algo así como una línea punteada hasta su final. Pero aplicaciones más complejas se ven a menudo en logotipos, como el del World Wildlife Fund. Grandes trozos del contorno del panda faltan, pero tu cerebro no tiene problemas para completar las secciones faltantes y ver todo el animal.
el logotipo del fondo mundial de vida silvestre es un ejemplo del principio gestalt de cierre
El principio de cierre gestalt se ilustra bellamente en el logotipo de panda del Fondo Mundial para la Naturaleza. El cerebro completa las formas blancas, a pesar de que no están bien definidas.

El cierre se utiliza muy a menudo en el diseño de logotipos, con otros ejemplos que incluyen los de la red estadounidense, NBC, Sun Microsystems e incluso Adobe.
Otro ejemplo muy importante de cierre en el trabajo en UX y diseño de la interfaz de usuario es cuando se muestra una imagen parcial desapareciendo de la pantalla del usuario para mostrarles que hay más para encontrar si deslizan hacia la izquierda o hacia la derecha. Sin una imagen parcial, es decir, si solo se muestran imágenes completas, el cerebro no interpreta inmediatamente que podría haber más para ser visto, y por lo tanto es menos probable que el usuario se desplace (ya que el cierre ya es aparente).

Proximidad

Proximidad se refiere a qué tan cerca están los elementos entre sí. Las relaciones de proximidad más fuertes son aquellas entre superposición de sujetos, pero simplemente agrupar objetos en una sola área también puede tener un fuerte efecto de proximidad.
Lo opuesto también es cierto, por supuesto. Al poner espacio entre los elementos, puede agregar separación incluso cuando sus otras características son las mismas.
Tome este grupo de círculos, por ejemplo:
el principio gestalt de proximidad ilustrado con grupos de círculos

Lo único que diferencia al grupo de la izquierda de los de la derecha es la proximidad de las líneas. Y sin embargo, su cerebro interpreta la imagen de la derecha como tres grupos distintos.
ejemplo del principio gestalt de proximidad en acción que afecta el ux
Un PDF de USPS forma ejemplo donde el principio gestalt de proximidad está perjudicando a UX. Debido a que las etiquetas de campo están más cerca de los campos debajo de ellos, la gente erróneamente cree que es donde la información va para "c". y "d" Sin embargo, se supone que la información debe proporcionarse en los campos sobre las etiquetas de texto.
En el diseño UX, la proximidad se usa con mayor frecuencia para que los usuarios agrupen ciertas cosas juntas sin el uso de elementos como bordes rígidos. Al poner las cosas similares más cerca entre sí, con espacio entre cada grupo, el espectador reconocerá de inmediato la organización y la estructura que desea que perciban.

Figura/Fondo

El principio de figura/fondo es similar al principio de cierre porque aprovecha la forma en que el cerebro procesa el espacio negativo. Probablemente haya visto ejemplos de este principio flotando en los memes en las redes sociales, o como parte de logotipos (como el logotipo de FedEx ya mencionado).
Su cerebro distinguirá entre los objetos que considera que están en el primer plano de una imagen (la figura o punto focal) y el fondo (el área en la que descansan las figuras). Donde las cosas se ponen interesantes es cuando el primer plano y el fondo en realidad contienen dos imágenes distintas, como esta:
un ejemplo de la relación figura-fondo que forma elementos y principios de diseño
Algunas personas verán inmediatamente el árbol y las aves cuando vean el logotipo del Zoológico de Pittsburgh& PPG Aquarium, mientras que otros verán al gorila y al león mirándose el uno al otro.
gran ejemplo del principio gestalt de la figura-base
Otro gran ejemplo del principio gestalt de figura/tierra.
un simple ejemplo de principio de figura-fondo, un principio de diseño gestalt
En esta famosa ilusión desarrollada por el psicólogo danés Edgar Rubin, al espectador generalmente se le presentan dos interpretaciones de formas: dos rostros o un jarrón. Es otro excelente ejemplo del principio figura/fondo.
En términos generales, su cerebro interpretará el área más grande de una imagen como el suelo y la más pequeña como la figura. Como se muestra en la imagen de arriba, puedes ver que los colores más claros y más oscuros pueden influir en lo que se ve como la figura y lo que se ve como el suelo.
El principio figura/fondo puede ser muy útil cuando los diseñadores de productos desean resaltar un punto focal, particularmente cuando está activo o en uso, por ejemplo, cuando aparece una ventana modal y el resto del sitio se desvanece en el fondo, o cuando se hace clic en una barra de búsqueda y el contraste se incrementa entre él y el resto del sitio.

Simetría y orden

La ley de simetría y orden también se conoce como prägnanz, la palabra alemana para “buena figura”. Lo que este principio dice es que su cerebro percibirá formas ambiguas de la manera más simple posible. Por ejemplo, una versión monocromática del logotipo Olímpico se ve como una serie de círculos superpuestos en lugar de una colección de líneas curvas.
otro de los principios de diseño gestalt, el principio de pragnanz se ilustra con el logotipo de las Olimpiadas
Aquí hay otro buen ejemplo del principio de diseño gestalt “prägnanz”:
un ejemplo complejo del principio de pragnanz, otro principio gestáltico
Su cerebro interpretará la imagen de la izquierda como un rectángulo, círculo y triángulo, incluso cuando los contornos de cada uno estén incompletos porque son formas más simples que la imagen en general.

Destino común

Si bien destino común no era originalmente incluido en la teoría gestalt, se ha agregado desde entonces. En el diseño UX, su utilidad no puede pasarse por alto. Este principio establece que las personas agruparán las cosas que apuntan o se mueven en la misma dirección.
En la naturaleza, vemos esto en cosas como bandadas de pájaros o bancos de peces. Están formados por un conjunto de elementos individuales, pero debido a que se mueven aparentemente como uno solo, nuestros cerebros los agrupan y los consideran un único estímulo.
a flock of birds illustrates the principle of common fate
Una bandada de pájaros se ve como una sola unidad cuando vuela en la misma dirección y, por lo tanto, comparte un destino común. (por Martin Adams en Unsplash)
Esto es muy útil en UX ya que los efectos animados se vuelven más frecuentes en el diseño moderno. Tenga en cuenta que los elementos en realidad no tienen que moverse para beneficiarse de este principio, pero tienen que dar la impresión de movimiento.

Principios de Gestalt en el Diseño UX

Al igual que con cualquier principio psicológico, aprender a incorporar los principios de percepción visual de gestalt en su trabajo de diseño puede mejorar enormemente la experiencia del usuario. Comprender cómo funciona el cerebro humano y luego explotar las tendencias naturales de una persona crea una interacción más fluida que hace que el usuario se sienta cómodo en un sitio web, incluso si es su primera visita.
Los principios de Gestalt son relativamente fáciles de incorporar en casi cualquier diseño y pueden elevar rápidamente un diseño que parece aleatorio o como luchar por la atención de un usuario a uno que ofrece una interacción perfecta y natural que guía a los usuarios hacia la acción que desean que tomen.

UNDERSTANDING THE BASICS

What are the gestalt principles of design?

The classic principles of the gestalt theory of visual perception include similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also known as prägnanz). Others, such as “common fate,” have been added in recent years.

Why is gestalt theory important?

Gestalt principles can quickly elevate a design that seems haphazard or like it’s fighting for a user’s attention to one that offers a seamless, natural interaction that makes your site feel familiar while guiding users toward the action you want them to take.