# data[].attributes.body
ÍNDICE

1.- Principios de la Gestalt.

2.- Contraste.

3.- Jerarquía Visual.

4.- Equilibrio.

5.- Proporción Áurea.

6.- Psicología de la Forma.

7.- El color. Psicología del color.

8.- Tipografía.

# data[].attributes.body
La Gestalt es una corriente psicológica alemana que, entre otras cosas, nos permite entender cómo funciona la percepción visual.

Los teóricos de la Gestalt fueron el primer grupo de psicólogos que estudiaron la organización perceptual. Sus trabajos comenzaron en Alemania alrededor de 1920 y estaban encabezados por el psicólogo Max Wertheimer.

Se llegó a la conclusión que en el proceso de la percepción humana no solo intervienen los sentidos, sino que también interviene la memoria. Dándose cuenta de que el ojo humano (a partir de percepción)  puede identificar contornos donde no los hay.

El principio fundamental de la Gestalt es que el todo es mucho más que la suma de sus partes. Esto significa que cuando vemos los elementos del campo perceptivo, estos tienden a la estructuración, es decir, intentan organizarse en formas o totalidad.

# data[].attributes.body
Principio de de la semejanza, proximidad y simetría (también conocido como principio de agrupación): Cuando los objetos se ven similares entre si somos capaces de ver el conjunto como un todo independientemente de las partes que lo forman. Para crear un patrón o grupo uno de los recursos que se utilizan es la repetición capaz de conectar visualmente grupos de información. Esta repetición puede ser de forma, color, tamaño, textura, etc. Dentro de este principio se llama anomalía cuando dentro de una composición uno de los elementos se hace diferenciador para enfatizar o hacer una llamada de atención.

Principio de la continuidad: Es el principio por el que el ojo es atraído por los elementos continuos aunque estén interrumpidos entre sí. (uno de los más usados en la representación de marca) .

Principio de cierre o clausura: Es el principio que utiliza la tendencia del ojo humano para ver las formas cerradas.

Principio de fondo y figura: Este principio describe la tendencia del ojo humano a ver un objeto separado de lo que rodea.

Principio de pregnancia o simplicidad: Percibimos los elementos de la manera más simple posible destacando el conjunto lo que realmente es importante.

Principio de la experiencia: La experiencia previa de cada persona interviene en la construcción de la forma. (es fundamental investigar al target)

Principio del movimiento común: Los elementos forman un todo cuando se mueven en conjunto en la misma dirección.

# data[].attributes.body
Al ojo humano le encanta el contraste (en cuanto a tamaño, color, etc.) ¿Qué conseguimos con el contraste? Llamar la atención.

El contraste se utiliza para generar impacto, crear interés, organizar la información, facilitar la comprensión y seguir el flujo lógico de los elementos.

Si queremos aplicar contraste: formas, colores, tipografías diferentes.

Podemos generar contraste a:

Escala

Entorno

Color (colores complementarios)

# data[].attributes.body
En la jerarquía visual se diferencian los elementos en base a la forma en cómo lucen, su apariencia es un indicador de su orden de importancia y su relación con otros elementos. Por esta misma razón, la jerarquía es un importante fundamento del diseño.
Existen diferentes técnicas para crear jerarquía visual. Usualmente no sólo se emplea una de ellas sino que se combinan. Básicamente son seis: tamaño, contraste, color, proximidad, alineación y repetición. Esto principios del diseño son tus mejores armas para poder generar jerarquía visual. Profundizaremos sobre cada uno de ellas a continuación:

Tamaño, los elementos de mayor tamaño captan tu atención más rápidamente. Además, el tamaño indica la importancia de cada elemento. Esta técnica es excelente para poder guiar la atención de tus usuarios y es una de las más empleadas también.
Si todos los elementos fueran del mismo tamaño es complicado para el usuario detectar qué elemento es más importante. Sin mencionar que es bastante monótono y aburrido para los usuarios.
Crear jerarquía visual en base al tamaño es una de las primeras técnicas que se aprenden como diseñador. Claro que, como sabes, en el diseño web no sólo se emplea el tamaño para indicar la importancia de los elementos, sino que se combina con otras técnicas elementales, las cuáles seguiremos explorando en este artículo.

Contraste, el contraste también tiene un efecto en la jerarquía y se puede aplicar contraste en cualquier elemento, por ejemplo, al elegir una paleta de colores. El impacto se genera en base a los cambios que existen entre un elemento y otro, mientras más dramático sea este cambio, mejor. Por eso, en un diseño web, se eligen colores que generen contraste a modo de generar impacto y llamar la atención.

Color, el color es una de las maneras más poderosas de captar la atención de tus usuarios. No sólo te sirve para organizar y generar jerarquía visual, sino para darle estilo y personalidad a tu sitio web. Tal vez por esta razón el color es un arma de doble filo ya que debes tener en cuenta la personalidad de marca y el público objetivo, mientras que, al mismo tiempo, intentas generar una combinación de colores armónica.

Es probable que la selección de colores sea un proceso bastante largo y se logre mediante ensayo y error. Es decir, probando cómo lucen los colores uno con otro hasta llegar a la combinación ideal para tu diseño web.
Usualmente, los colores vibrantes suelen destacar, mientras que los colores pastel suelen pasar desapercibidos si se ponen al lado de un color saturado. Claro, también hay casos exitosos de uso de colores pasteles en la web así como de colores saturados, pero no es una tarea sencilla de lograr. Y en muchos casos necesitarás algún color de acento.

Proximidad, la proximidad es una manera de separar y agrupar elementos. Mientras más próximos estén son considerados como un grupo y se pueden identificar como sub-jerarquías. La proximidad sirve para agrupar elementos similares y separar aquellos que son distintos, por eso es de mucha importancia al momento de diseñar un sitio web.

Agrupar elementos sirve para organizar tu sitio y ayudar al usuario a identificar secciones o zonas comunes. Por ejemplo, en un blog, la barra lateral suele contener widgets, cada uno con un título y contenido propio. Cada elemento funciona por separado, pero también se les reconoce como un grupo.

Alineación, la ubicación de los elementos también puede indicar importancia. Siguiendo el ejemplo anterior, sabemos que los elementos ubicados en la barra lateral son de menor importancia que los elementos que se ubican en el centro pues ocupan un mayor espacio. De igual manera, los elementos que se colocan en la parte superior suelen ser de mayor importancia, por eso ese lugar es el común para la barra de menú y el logo. En una tienda online, el carrito de compras también se suele ubicar en la parte superior.

También puedes usar la alineación para generar interés y movimiento en tu página web. De manera usual, los elementos similares se suelen alinear de forma igual. Pero si quieres generar impacto en una zona, podrías cambiar la alineación de ciertos elementos.

Repetición, la repetición es un elemento que también sirve para agrupar elementos. Si tomamos como ejemplo el texto dentro de una página web vemos que cada párrafo tiene una fuente y una puntaje igual. Esto permite al usuario reconocer fácilmente los elementos similares.

Aunque la repetición es importantes, es también esencial saber cómo romper esa repetición para generar interés, de lo contrario la página se vería demasiado estática y aburrida. Tomando como ejemplo el texto, vemos que cada cierto número de párrafos se coloca un subtítulo, usualmente en mayor puntaje o en negritas o con algún tipo de formato distinto que el del párrafo. Este subtítulo funciona como un elemento que genera quiebre visual.

# data[].attributes.body
La proporción áurea junto con la regla de los 3 tercios, se utiliza en los diseños íntimamente diseñado con la perfección visual para atraer la mirada y que el diseño resulte lo más armonioso y equilibrado posible.

Fue definida por el padre de la geometría euclides, hace más de 2.000 años, basándose en las evidencias encontradas en la naturaleza y en el cuerpo humano de la proporción áurea. Ejemplos: cartílago de la oreja, pétalos de flores.

Fue desarrollada por el matemático italiano Fibonacci.  A lo largo de la historia ha recibido varios nombres: NÚMERO DE ORO, NÚMERO DE ORO, razón dorada, la medida áurea, etc. Y se reconoce por la letra griega FI en honor al grán escultor griego Fidias.

La proporción es 1.618034...Surge de la proporción existente entre la base y la altura independientemente de su orientación (vertical u horizontal).

Una vez determinada el área de trabajo a trabajar, se realzan la subdivisión. Si unimos las subdivisiones por los vértice obtenemos la espiral de oro, y en la final de esa espiral de oro es donde encontramos.

Objetivo: definir la focalización visual en el inicio de la espiral y definir elementos alrededor de la espiral.

Se usa para generar nivel de jerarquías en la tipografía.

Los grandes diseñadores para configurar la proporción áurea acuden a la calculadora de la proporción áurea. Podemos usar también plantillas

# data[].attributes.body
En diseño hay dos tipos de equilibrio:

Equilibrio simétrico: Divide una composición en dos partes iguales el peso de los dos lados es igual o casi igual. Lo que se pretende transmitir es: regularidad, armonía, orden, etc.

Equilibrio asimétrico: Divide una composición en dos partes que no tienen el mismo peso, es decir, no existen los mismos elementos. Se pretende transmitir alegría, agitación, tensión, vitalidad, movimiento, etc.

# data[].attributes.body
Otro de los atributos de cada diseñador es conocer la psicología y emociones que se encuentran detrás de cada color, psicología del color.

Temperatura del color

Colores fríos: azules, violetas o verdosos por su asociación con el agua y la luna. Crean sensación de  melancolía, expectación, gravedad, etc. Para utilizarlos en el diseño, los colores fríos se utilizan en mayor cantidad y en el fondo.

Colores cálidos: Tonos rojos, naranjas y amarillos por su asociación con la luz del solar y el fuego. Debe utilizarse menos porque son más activos y se expanden menos. Se asocian a la fiesta, a la guerra y pasión los colores cálidos se usan en menor cantidad.

De todas formas, las reglas están para romperlas, una vez conocemos las reglas podemos romperlas para evolucionar. Ejemplo: representación de marca de IKEA y anuncio de ray-ban)

Simbología del color

Blanco, no es un color en sí, es la máxima luminosidad. Y en diseño gráfico se utiliza muchísimo porque da espacio, claridad, limpieza, permite dejar un mensaje claro y directo, se utiliza mucho como fondo, como color subordinado, en espacios negativos para crear espacios y ambientes… Y a nivel psicológico se asocia a la pureza, limpieza, maternidad, salud, comunica simplicidad, minimalismo, el bien, lo positivo…

Amarillo, junto con el rojo es uno de los colores que más estimula la actividad mental, combina perfectamente con el negro y es clave para el uso de la tipología y color por su legibilidad cromática, se usa para llamar la atención. Es el color del sol y en psicología significa optimismo, felicidad, energía, vitalidad… Una variante es el dorado, en cuya mezcla se ha utilizado más luz y más uso del marrón y está relacionado psicológicamente con  la riqueza, la fama, el lujo, el privilegio y de una supuesta felicidad comprada.

Naranja, enérgico como el rojo y alegre como el amarillo, es un color cálido que en publicidad conecta con la juventud y a nivel psicológico representa entusiasmo, confianza, éxito, generosidad..

Rojo, junto con el amarillo son los dos colores más atrayentes del circulo cromático, es un color que impulsa a la acción y es vigorizante. Se asocia al peligro, energía, pasión carnal, amor, violencia.

Azul, es el color que más reduce la presión sanguínea, que relaja y tranquiliza. Se asocia a la lealtad, la calma, la seguridad, la sabiduría. Con más luminosidad se asocia al público infantil y con más color negro se asocia a la elegancia y éxito del hombre.

Verde, al igual que el azul es un color relajante, es el color de la naturaleza y todo relacionado con el medio ambiente. Representa tranquilidad, crecimiento, frescura, fertilidad..  En un color con menos luminosidad o más cantidad del negro se asocia a la abundancia y dinero.

Rosa, representa sentimientos positivos y románticos, inocencia, feminidad, pubertad y adolescencia femenina.

Morado, el púrpura se encuentra a medio camino entre la estabilidad del azul y la energía del rojo y simboliza el poder, la nobleza, la ambición, la sabiduría, la creatividad, el empoderamiento femenino. Y también se utiliza con la ciencia ficción.

Marrón, representa a la tierra y a la madera, transmite simplicidad y calidez en psicología. Y en diseño se utiliza en lo masculino y lo tradicional, el confort y la seguridad.

Negro, es la ausencia absoluta de luz, en psicología está asociado con la elegancia, el buen gusto y la sofisticación, combina muy bien con el amarillo, el blanco, el gris...

# data[].attributes.body
Hablamos de las emociones que transmite una determinada forma a nuestro cerebro.

Triangulares: nuestra percepción percibe  (powerpoint)

Rectangulares: transmiten solidez, fortaleza, seguridad, estabilidad, etc. (powerpoint)

Redondeadas: armonía, feminidad, naturalidad, etc. (powerpoint)

Líneas verticales: (powerpoint)

Líneas horizontales: (powerpoint)

Líneas diagonales ascendentes: (powerpoint)

Líneas diagonale descendientes: (powerpoint)

EL COLOR

El color junto con los principios de la Gestalt son unos de los principios más importantes en el diseño gráfico y es importante conocer no solo el uso del color, si no también el significado de los colores que se utilizan.

Una combinación cromática acertada puede reforzar el mensaje que queremos transmitir, a través del color podemos implementar los principios de la Gestalt y a través del color podemos aplicar el contraste, establecer jerarquía visual, realizar esa llamada de atención para que el receptor se pare a mirar nuestro diseño.

Todos los colores están formados por tres básicos los primarios son los que no se pueden crear a través de la mezcla de otros: amarillo, rojo y azul.

Combinándolos tenemos los secundarios: amarillo + azul = verde, azul + rojo = violeta y el rojo + amarillo = naranja.
Toda la gama de colores queda representada en el circulo cromático.

Colores complementarios diametralmente opuestos en el círculo cromático, análogos (para crear contraste)

Van Gogh, fue un maestro en el uso de los colores complementarios.

En publicidad se usan mucho, rojo-verde, azul-naranja, los colores fríos son en los que se ha usado más azul que rojo y los cálidos al revés. Los cálidos acercan y los fríos alejan, los fríos se usan en mayor cantidad y de fondo, y los cálidos principalmente y en menor proporción para llamar la atención.

Cuando en el color queremos aplicar jerarquía visual se suelen usar tres colores:

Triada, un color dominante, es el color principal del diseño, que más llama la atención y más predomina. Un color subordinado que complementa al color dominante (normalmente negro y blanco)

Colores complementarios,  pares de colores enfrentados directamente en el círculo cromático logrando un contraste máximo (Van Gogh maestro de los colores complementarios aunque no sabía ni dibujar ni pintar su obra es muy llamativa). Los colores complementarios se utilizan mucho en publicidad.

Colores análogos, colores que se encuentran juntos en el círculo cromático logrando un mezcla armoniosa y natural

Cuando en el color queremos tener jerarquía visual se suelen utilizar tres colores:

Color dominante: color principal del diseño. Es el que más llama la atención y predomina

Color subordinado:  complementa al color dominante (suele ser neutro como el blanco)

Color de énfasis: encargado de focalizar la atención (los colores que más llaman la atención son el rojo y el amarillo

Los diseñadores acuden a herramientas digitales o impresas:

-Paletton, una ruleta con los colores a los que les puedes añadir luminosidad y restársela según si añades blanco o negro y cada color tiene un código y te indica las características del color. Podemos obtener colores análogos para encontrar armonía en el diseño. Podemos establecer la triada. Descargar la paleta de colores para añadirla al programa y utilizarlo.

- Color Hunter, se suele utilizar cuando en un diseño usamos muchas imágenes y queremos que la forma y la tipología combinen con esas imágenes. Subimos la imagen y nos aparece la paleta de colores usada en la imagen.

- Colormind, podemos generar paletas o partir de un color que conocemos para usarlo y crear una paleta que combine bien. Colores para página web, plantillas, obtener los colores de una imagen…

- Adobe Kuler, colores análogos y cromáticos con más o menos luminosidad, la triada de color, complementarios, dobles complementarios...

MODO DE COLOR

Modos de color RGB

Tambien llamado modo de color luz, o colores aditivos porque cuanta más luz usemos para la creación del color más nos aproximamos al blanco y a la inversa, cuanta menos luz, más nos aproximamos al negro.

Este modo de color fuinciona con tres colores: RrojoGverdeBazul y la luminosidad.

Es el modo de color utilizado para ser visualizado en formato digital (pantalla, smarphone, tablet, televisor..)

Modo de color CMYK

cian magenta amarillo negro

Es el modo de color utilizado para proyectos de impresión (offsec, trabajos de impresión en diseño) o (pigmentos de colores o de colores sustrativos) y es un modo de color formado por el cian, el magenta, el amarillo y el negro.

Qué panton o pantones corresponden con nuestra paleta cromática. Se utilizan para impresión

Para maquetar en papel distinguimos CMYK y CMYK Uncoated, este último es utilizado para imprimir en papeles naturales. Normalmente se utiliza para la papelería más elegante de tarjetas de visita, por el contrario, el CMYK Coated se utiliza para el papel satinado/plástico (flyers, carteles)

Para la tipografía en todo diseño, la principal característica es que la tipografía sea legible (que se entienda, que se vea) y para ello, los diseñadores utilizan la tabla creada por Karl Borggrafe. El número indica el color de la tipografía y el fondo el color del fondo.

# data[].attributes.body
No solo tenemos que tener en cuenta que fuente o familia utilizar si no que connotación psicológica transmite una tipología u otra.

Una mala elección en la combinación tipográfica puede hacer que el mensaje que intentamos transmitir no sea efectivo o sea contradictorio a este.

El uso de la ti en diseño es una de las disciplinas más, es considerado un arte y disciplina

La palabra tipografía es una palabra griega formada por la unión de dos vocales tipo-golpe huella y grafo- escribir y la podemos definir como el arte y la técnica en el manejo y selección de fuentes para crear trabajos de impresión en papel o digital. La tipografía también se ocupa del estudio y la clasificación de las distintas fuentes, la representación mínima es un carácter, una letra y en tipografía al igual que el cuerpo humano cada parte de una letra o carácter tiene asociado un nombre es la denominada anatomía tipográfica.

Porque están relacionadas con nombres del cuerpo humano (brazo, cuello, panza, rizo, cabeza..)

Ligadura: travesaño que une dos o más caracteres

Grado de Inclinación o modulación: trazado inclinado u horizontal o vertical

Remate Serifa: terminación de algunos caracteres o bien en forma de ángulo o de línea

Todas las fotografías pertenecen a una familia u a otra (la gran mayoría porque hay una que se llama decorativa que no se ajusta a ninguna familia) y una familia está formada por un grupo de fuentes que tienen unas características y connotaciones (lo que transmite según la psicología de la percepción) similares.

FAMILIAS TIPOGRÁFICAS

Fuentes Seriff está formada por toda slas que tienen  serifa,gracia o remate (la terminación final en forma de raya)

Una de las características principales son tipografías que tienen muchísima legitimidad y son indicadas para grandes párrafos de texto y las connotaciones que tiene son: el clasicismo la tradición la delicadeza formalidad y conservadurismo.

Y dentro de esta familia distinguimos las siguientes subfamilias:

La romana (antigua y de transición), la garamond

Todas tienen Serifa, los trazos son variables y ascendentes finos y cuando el trazo es fino va hacia arriba y es grueso cuando desciende, la inclinación (es oblicuo o inclinado)

Time, Century… Son fuentes redondeadas y se usan cuando se quiere aplicar cuando se emplea la psicología de forma redondeada.

Romanas modernas o didonas, bodoni, tiene serifa, la serifa se relaciona angularmente  (presentación)

Ortotipografia, es la parte de la ortografía técnica que se ocupa del estudio y aplicación de los principios tipográficos de estética, funcionalidad, legibilidad y eficacia comunicativa en la escritura de un texto con caracteres tipográficos. Todo diseñador tiene que tener su manual de ortotipografía

Reglas:

En cualquier diseño no podemos hacer uso de mas de dos tipografías, como mucho tres fuentes. Lo suyo ers combinar una fuente de la familia serif y otra de palo seco, y si queremos hacer contraste tipográfico también.

No abusar del uso excesivo de las mayúsculas: para títulos al principio después de puntos al principio de un párrafo.

Tienen que ser legibles

No utilizar mayúsculas para resaltar cualquier palabra utilizaremos o cursivas o versalitas.

(presentación)

Comillas españolas

Guiñes no, puntos o viñetas

Los diseñadores s gráficos tienen un glosario de tipografía que no usan, están prohibidas porque tienen connotaciones negativas comic sans.

Saber ajustar el tracking y el kerning.

Tracking: el proceso de expandir o comprimir un bloque de texto el espacio entre los caracteres. Se utiliza para corregir esos ríos o cascadas antiestéticos.

Kerning: añadir o eliminar espacios entre dos caracteres concretos w, y , t ,l , p.

NEO2 revista digital de prensa en España de tendencias y mensualmente cede una tipología de forma gratuita

# data[].attributes.body
El pensamiento divergente o pensamiento lateral es aquel que permite relacionar ideas y procesos de forma creativa, para encontrar alternativas a la resolución de un problema. Es por ello que puede incluirse dentro del pensamiento creativo, en contraposición al lógico y lineal.

Aplicar el pensamiento lateral o divergente por Edward Bono,  un tipo de pensamiento de forma imaginativa que, de cualquier objeto cotidiano, busca múltiples usos al margen del uso común que tiene.

Cuantos más usos o utilidades seamos capaces de darle a un objeto, más creativos seremos.

VÍDEO

# data[].attributes.attachment_link.title
Divergente VS. Convergente: El pensamiento

# data[].attributes.body
La creatividad es generar o crear nuevas ideas, o si estamos usando ideas ya existentes darle un toque original.
Existen personas creativas de forma innata pero la creatividad se puede trabajar, todos podemos ser creativos llevando una serie de pautas:

Ser curioso, no tener miedo a experimentar y probar lo desconocido.

Ser observadores para tener distintos puntos de vista. es mejor escuchar a hablar.

Ser abiertos de mente, sin prejuicios y sin miedo al ridículo

Ser analistas, tener la capacidad de ser críticos con el trabajo de los demás y sobre todo con el nuestro

Ser trabajadores y valorar el trabajo de los demás como el nuestro.

Leer, viajar

Todo lo que nos gusta, anotarlo

Acudir a técnicas creativas.

Con el paso del tiempo, experiencia y aprendizaje ver la forma propia de canalizar para llegar a nuestra forma de ser creativos (Mustafa Oyerli) que dota a la palabra de su significado mediante a su representación,

# data[].attributes.body
Toni Segarra ‘’Lo más importante es convertir la idea en realidad, y lo más importante es tener la idea’’.

Investigación, para documentarnos, inspirarnos…

Técnicas creativas (lluvia de ideas, crear en sueños, flor de loto, mapas mentales…)

Bocetos, dibujar todas las ideas.

Moodboard, técnica creativa que ayuda a crear el universo visual de cualquier proyecto, ayuda a establecer las bases de la identidad visual antes de empezar a diseñar.

Su principal misión o propósito es proporcionar un foco de inspiración, te da claridad de ideas, permite visualizar el camino creativo a seguir y al mezclar distintos materiales te ayuda a encontrar un estilo diferente.

Un collage donde todo cabe, imágenes, vídeos, texturas. Tiene que guardar coherencia con la idea.

Antes de empezar a configurar el moodboard, tengamos una idea en la cabeza.

MATERIALIZAR LA IDEA

Diseños (principios de diseño)

Justificación, qué significa y por qué todos los elementos que se han utilizado en el diseño.