Principios de diseño: comparación y similitud (3)
Dos puntos clave son la relación entre los elementos visuales mostrados y sus principales características. Si dos elementos están relacionados de alguna manera, deben exhibir características visuales similares. Si el contenido es diferente, es diferente.
Cómo hacer que los elementos muestren diferencia y singularidad radica en las características básicas de los elementos. Las características esenciales son las características o propiedades intrínsecas de un elemento. Por ejemplo, ¿qué son los elementos? ¿Qué tan grande es? ¿Cómo debería verse?
Todos los elementos transmiten alguna información en función de sus características básicas. Si un título es más grande que el otro, entonces podemos considerar que el título es más importante, y también podemos utilizar formas irregulares y afiladas como elementos de peligro.
A veces tiene más sentido que un elemento tenga las mismas características que otro. Por ejemplo, el título del párrafo anterior será más importante sólo si es más grande que el otro título, por eso podemos comparar mediante similitud y contraste.
Al dotar a varios elementos de características visualmente similares, podemos conseguir contenidos relacionados similares. Si hay dos círculos con elementos rojos en una página web, los espectadores naturalmente querrán saber por qué. ¿Por qué es rojo? ¿Por qué dos círculos? Una posible conclusión es que los elementos estarán relacionados de alguna manera más allá de su apariencia, y la similitud de los elementos sugiere que contienen información similar.
De manera similar, aplicando las diferentes propiedades de los elementos en la visión, podemos ver que diferentes elementos de otras cosas llevan información diferente a la de otros elementos.
Las propiedades de cualquier elemento se pueden transformar para que se vean iguales o diferentes. Las siguientes características se utilizan con mayor frecuencia para expresar contraste y similitud, sin ningún orden en particular. Ellos son:
(1) Tamaño
2) Forma
(3) Color
(4) Valor
(5) Textura
(6) Posición
(7) Dirección
Un rectángulo y un círculo contrastan en forma, dos objetos rojos tienen formas similares. bandera. Rectángulos y formas rojos que parecen círculos rojos contrastantes. La forma de equilibrar la similitud y el contraste entre elementos con sus características visuales dependerá en gran medida de lo que se transmita a la audiencia.
Nota: Aunque la función original es mostrar visualmente el contraste y la similitud, también se puede mostrar de otras formas, dependiendo del contenido real que transmita el elemento. Las palabras "parar" y "salir" son opuestas. Y "detener" y "prohibido" son similares. También hay comparaciones entre imágenes y texto; comparaciones entre párrafos largos y párrafos cortos, etc.
La gente prestará atención deliberadamente a la diferencia. Este es un mecanismo de instinto de supervivencia para distinguir rápidamente quién es su enemigo. También regresa a la cueva de forma rápida y precisa, lo cual es muy importante por la noche.
También tenemos la capacidad de predecir variaciones rápidamente. Entre ellos, el contraste es muy fácil de notar y de detectar. Al comparar la diferencia visual de un elemento con los elementos que lo rodean, podemos encontrar el elemento que nos interesa. De hecho, el contraste con los elementos circundantes llama más nuestra atención, lo que hace que este enfoque sea la forma más eficaz de añadir interés y emoción a un diseño.
El contraste no sólo llama la atención sino que también establece límites entre elementos. Por ejemplo, el color de fondo del contenido principal contrasta y el borde se muestra en otro color de principio a fin.
Las diferencias resaltadas pueden resaltar información importante del contenido. Cuanto mayor es la diferencia, más fuerte es el contraste y más elementos importantes se resaltan. Por ejemplo, hay dos formas de resaltar el texto en negrita y en cursiva, lo que creará un contraste más fuerte para resaltar. Muy sencillo. Unas pocas gotas de sangre en el texto en negrita harán que sea más fácil detectarlo desde la distancia que el texto en cursiva.
Si dos elementos quieren eliminar este contraste, elimina el contraste. Y asegúrese de que la audiencia no piense que es intencionalmente falso, porque el contraste es obviamente intencional y puede llevar a algunos malentendidos innecesarios. La diferencia de tamaño entre fuentes de 15px y 16px no suele ser fácil de detectar. Si los espectadores fueran conscientes de esto, cometerían más errores.
Ten cuidado con el contraste y no te excedas.
Si utilizas el contraste, debes prestar atención a algunas cosas, para no terminar resaltando lo que quieres resaltar, lo que eventualmente generará confusión causada por el ruido visual.
Si el contraste es demasiado grande romperá la armonía y la unidad en el diseño, provocando caos y confusión. También conducirá a lo que queremos diseñar, pero no será así en el. final.Esto requiere que juzguemos cuidadosamente qué elementos deben resaltarse mediante el contraste.
Cada principio Gestalt es adecuado para mostrar algún aspecto de similitud y contraste. Creo que hay dos puntos. El contraste determina la relación entre el fondo y la figura y muestra los resaltados y los nodos.
(1) Figuras y fondo: Al determinar la composición principal de una cosa, se determinarán inmediatamente los elementos principales y el fondo. Esta relación facilita la comprensión contextual, necesaria para determinar qué es ilegible y qué es cierto entre figura y fondo.
(2) Nodos: estos lugares son áreas relativamente prominentes, lo que hace que los elementos de diseño sean algo diferentes del entorno circundante. El contraste puede ayudarles a distinguir bien y llamar la atención. Los elementos destacados ocuparán los factores principales en la combinación de elementos, y estos elementos destacados serán nodos en relación con los elementos discretos.
Del mismo modo, obligados por el mecanismo de supervivencia, podemos ver rápidamente las diferencias y también podemos ver rápidamente las similitudes. Esto le permite saber qué es digno de confianza y qué es peligroso. Los humanos tienen una ventaja natural para encontrar estas similitudes. Este modelo puede ayudarnos a comprender y reconocer el entorno que nos rodea, hacer que el aprendizaje sea más rápido y eficiente y, finalmente, convertirse en una intuición o instinto.
Muestra qué es la verdadera equivalencia cuando diseñamos dos o más elementos que se ven muy similares. Si un elemento es importante, entonces otro elemento similar también lo es. Si se puede hacer clic visualmente en este elemento, también se puede hacer clic en otro elemento similar, lo que le permitirá identificar rápidamente cuáles son enlaces de texto. Visualmente, la diferencia entre el texto de un enlace y otro texto es que existe una conexión entre ellos, lo que nos indica que se puede hacer clic en él. Una vez que encontremos uno como este, otros tendrán efectos similares.
Similitud significa que en múltiples proyectos, los elementos mostrados y las conexiones mostradas están relacionadas hasta cierto punto, lo que nos dará una sensación de familiaridad y un diseño consistente.
La similitud complementa nuestras estrategias de procesamiento de información natural. Cuando intentamos comprender y percibir en un entorno visual, categorizamos la información natural y almacenamos sus detalles. Esto pasará a formar parte de nuestra memoria a largo plazo.
Cada vez más elementos parecen similares, haciendo que los usuarios sientan que son más similares o incluso iguales. Y a medida que se profundiza en la comprensión, se irán agrupando de una determinada manera, y qué ritmos tienen sólo una característica común. Además, cuanto más idénticas son las características, más se consideran iguales.
Utilizaremos patrones de similitud para construir estructuras y distinguir similitudes entre elementos combinados y estructuras equivalentes. Agregue información para completar el modelo estructural, como relaciones de patrón, textura y densidad.
Por supuesto, no todas las pantallas similares son iguales. En la siguiente imagen, ¿usarías forma o color para dividirlos? ¿Diferencias entre un círculo y un cuadrado o un conjunto de rojos y azules?
En primer lugar, puedes notar los colores, los elementos se dividen en rojo y azul. Esto significa que las diferencias de color son más fáciles de identificar que las diferencias de forma, pero esto no es absoluto. Por ejemplo, algunas personas que tienen daltonismo rojo y verde tienen menos probabilidades de notar la diferencia de color al dividir por primera vez, pero priorizan la diferencia de forma.
Del mismo modo, cada principio de la Gestalt también trata sobre cómo percibimos las similitudes o diferencias entre los objetos. Se puede leer que muchos de ellos sugieren similitudes.
(1) Cierre: diferentes elementos pueden ser similares a partes del todo;
(2) Simetría: refleja si los elementos están juntos;
( 3) Unificación y coherencia: similitud visual a través de la conexión;
(4) Área común: elementos similares juntos
(5) Proximidad: sentirse similar a través de la apariencia
<; p>(6) Continuidad: mantener la similitud a través del ritmo;(7)*** Misma tendencia: tendencia de movimiento consistente
(8) Paralelismo: paralelo Similitud en la orientación;
El contraste y la similitud se encuentran en cada sitio web y ambos deben estar presentes. Imagine un sitio web sin contrastes. Si su fondo es del mismo color nos costará mucho leer el texto.
Como si fuera difícil diferenciar entre diferentes estilos de palabras o frases.
Señalaré más diferencias y * * en cada ejemplo del sitio siguiente. Espero haber proporcionado suficientes ejemplos para que pienses y luego seas flexible. Y observe y aprenda de diferentes diseños para mejorar realmente sus habilidades para equilibrar el contraste y la similitud.
David Simon
Lo primero que llama la atención en la web de David Simon es el contraste entre los colores de fondo, lo que facilita distinguir las diferentes páginas. El logo también destaca porque se utilizan elementos luminosos en el espacio sobre un fondo negro.
El contraste entre imágenes es la base para llamar la atención. En este artículo, la fecha está sobre un fondo negro y los dígitos de la fecha están representados en letras mayúsculas. En la página actual, la visión y la coherencia se dibujan a través del contraste.
El estilo de enlace de las publicaciones recientes en el menú es el mismo, con líneas horizontales claras que separan las publicaciones, lo cual es más débil que en otros menús. La fuente siempre es consistente. Se compararon las fuentes de los títulos y del cuerpo del texto, pero se mantuvo la coherencia general del sitio.
Los estilos de enlaces internos son más prominentes para aclarar la relación entre ellos, aunque los diseñadores pueden hacer intencionalmente que el número de vistas sea menos obvio. Además, los títulos son secciones adicionales, por lo que no forman parte del texto principal.
Mike Kus
El trabajo de Mike Kus se centra en diferentes proyectos. La mayor parte de la página está en blanco, pero debes prestar atención a cómo hacer que cada elemento se destaque y contraste con el texto del fondo, así que usa la textura de la pared para expresarlo.
En esta captura de pantalla, solo la parte central de la imagen usa un color diferente y el resto del espacio en blanco es el mismo gris claro. Observe también el mismo cuadro, que ilustra sus similitudes. En este caso, cada uno de ellos representa un proyecto. Además, tenga en cuenta que los fondos en la parte posterior son todos similares y se distinguen por el patrón de los ladrillos y el sombreado de los bordes, lo que facilita saber cuál es el fondo.
La siguiente es la página "Acerca de" de Mike Cuse, que es la única comparación con la imagen solitaria de Mike. El botón azul "Stay Connected" es el único elemento de color. Es posible que no pueda tocar el micrófono y que no sepa cómo usarlo. De hecho, los botones para saltar entre páginas también son azules.
El nombre de Mike aparece repetidamente como marca registrada en el título principal, y el contraste entre el título y el fondo también sirve como fondo para otras partes de la página. Todos los botones del menú para compartir usan la misma forma redonda. En la parte superior de la barra de navegación, una línea gruesa actúa como base para alternar entre menús. Las fuentes también son consistentes, utilizan fuentes serif sans-serif como el texto y contrastan entre sí.
Electric Pulp
El logo de plasma utiliza un círculo rojo de tamaño mediano. Crea un bonito contraste en toda la página y vale la pena señalar que la barra de navegación superior también tiene un color similar cuando indica la página actual.
El título de todo el sitio web es el más grande, en negrita y todo en mayúsculas. El título contrasta con el cuerpo del texto, el primero usando una fuente sans-serif y el segundo usando una fuente serif.
Haga clic para ingresar a la página "Observaciones" y verá que el color de fondo y el color de fondo principal de la página se comparan con los enlaces a la página anterior y a la página siguiente, y el color de fondo es Se utiliza para distinguir diferentes páginas.
La mayoría de los botones de este sitio utilizan colores rojo y azul contrastantes al pasar el mouse. Sin embargo, en la página Trabajo, el primer botón cambia de azul a rojo al pasar el mouse. No está claro si esto fue intencional por parte de los diseñadores, pero el contraste se mantiene bien.
Lowdi
El último sitio web a considerar es Lowdi. Aquí hay una captura de pantalla de la página de inicio. Tenga en cuenta el uso del contraste y la coherencia en las variaciones de color.
El color puede indicar claramente dónde empezar y terminar. Y la repetición de colores y colores crea una sensación de ritmo en toda la página. Observe cómo el elemento queda resaltado por el fondo amarillo, mientras que los visitantes que miran hacia abajo pueden centrarse en la imagen del producto.
El contraste y la similitud tienen funciones diferentes y se utilizan juntos en distintos grados. Siempre hay algo más que no está ahí, por lo que cambiar uno significa cambiar el otro.
Algunas cosas parecen iguales y otras parecen diferentes. La primera mirada en la comunicación visual es la forma básica para que la audiencia obtenga el significado principal.
Pistas de contraste y similitud Las diferencias en los elementos de diseño llaman nuestra atención, y elementos similares transmiten una funcionalidad similar en otros elementos.
El objetivo final es determinar jerarquías de contraste y similitud: hacer que los elementos de un grupo se vean similares entre sí, pero diferentes de otro elemento similar.
El contraste y elementos similares nos permitirán crear un equilibrio entre capas, proporciones y composiciones, que mencionaremos en el próximo artículo.
/2014/09/principios-de-diseño-conectar-y-separar-elementos-mediante-el-contraste-y-similitud/