Usando la manera en que los humanos procesan la información visual en el diseño web
El diseño de sitios web y las interfaces de usuario se han vuelto más fáciles en los últimos años. Hay tantas herramientas por ahí que puedes usar que hace que sea inútil comenzar desde cero al desarrollar interfaces de usuario (consulta nuestra compilación de nuevas interfaces de usuario). Pero no estoy aquí para discutir sobre la muerte del diseño web..
En su lugar, lo que haré es tratar de explicar los conceptos básicos basados en la psicología detrás de la gran cantidad de herramientas de diseño visual (desde los kits de CSS más básicos hasta los temas premium más avanzados). No solo vas a usarlos, sino que también los entenderás.. Estoy seguro de que esto también facilitará la modificación de los existentes con éxito.
Veamos cómo funciona la mente y el cuerpo humanos cuando se trata de procesar información visual y cómo este conocimiento se interpreta en el diseño para la web..
Los principios de la organización perceptiva
Según la psicología de la Gestalt., El todo es diferente a la suma de sus partes.. Los seguidores de esta escuela de pensamiento afirman que hay algunos principios sobre cómo se oponen los grupos de la mente humana. Estas no son simples teorías, sí, sino hechos prácticos reales sobre la organización de grupos visuales..
A continuación encontrará algunas de las leyes y los usos más populares y conocidos de estos principios. Incluso podría encontrar algunas ideas nuevas para su próximo diseño..
Ley de similitud
El primer principio establece que Los objetos pequeños que son similares se perciben como un grupo., En lugar de múltiples instancias de ese mismo objeto pequeño. La similitud puede basarse en la forma, el color, el sombreado o alguna otra calidad. Este principio es la base de patrón de diseño así como muchos diseños de logotipos geométricos y minimalistas..
Por ejemplo, esta imagen se muestra como un logotipo circular en lugar de triángulos separados. La forma triangular en la parte inferior del águila nos hace pensar que la forma también es parte de la imagen..
Probablemente también utilizó esta ley sin saberlo al crear algunos, cuadros de contenido destacado del mismo tamaño para su sitio web. Si desea mostrar que ciertos elementos de contenido son de la misma importancia o compartir información similar, Crea una forma específica solo para ese propósito. De esta manera, su usuario asociará inmediatamente esa forma particular con un área particular de información.
Ley de proximidad
Segun esta ley objetos que están más cerca entre sí son considerado del mismo grupo. Los mismos cuadrados, cuando se representan uno al lado del otro en una proximidad cercana y regular, crean una sensación de agrupamiento.
Este principio se ha utilizado en gran medida en la web últimamente, especialmente cuando se trabaja con bucles de contenido, p.ej. en blogs y tiendas web.
Inmediatamente puede agrupar el título, la imagen destacada, los metadatos y el extracto, incluso sin bordes ni fondos. Es posible que pueda eliminar líneas y colores innecesarios de su diseño para hacerlo más minimalista, pero aún así completamente comprensible.
Para su conveniencia, citaré también Wikipedia que dice:
Ley de buena forma
También conocida como la Ley de Pragnanz o Buena Gestalt, esta ley establece que tendemos a agrupar objetos si Forma un patrón que sea simple, regular y ordenado.. Nuestra mente intenta separar formas complejas y perceptualmente difíciles en muchos grupos de formas simplemente comprensibles; esto condujo a la importancia de la concisión.
Esta es también una de las posibles razones detrás del éxito de diseño basado en red y esto hizo que las estructuras web basadas en tablas y marcos (afortunadamente cosas de las edades oscuras del diseño) sean tan populares.
Si tiene en cuenta este principio, es probable que no termine creando un sitio web con formas complejas de bloques de contenido que se conecten a la mente a través de las otras leyes anteriores. Aún así, puedes Agrupa tus objetos de una manera interesante., p.ej. en forma de diamante o cometa, ya que todavía se perciben como formas ordenadas y concisas.
Teoría del color, percepción y uso.
La visión del color y la percepción del color es. en gran parte subjetivo Residencia en cómo reaccionan los cerebros de los espectadores A las ondas de luz reflejadas por objetos o formas de colores. La regla es que diferentes personas, incluso sin ninguna discapacidad visual, ven el mismo objeto en un color diferente (es posible que recuerdes el vestido).
Propiedades de color
Todavía hay tres propiedades objetivas del color; matiz, valor y intensidad.
Matiz es el nombre del color como se indica en una rueda de color o en un arco iris. Hay seis (o doce, dependiendo de con quién estás hablando) tonos básicos: rojo, naranja, amarillo, verde, azul y violeta.
Amarillo, azul y rojo son primario, Naranja, verde y violeta son. secundario tonalidades también hay terciario tonos que son las mezclas directas de dos tonos primarios y secundarios (por ejemplo, amarillo verde o rojo violeta).
Valor es la claridad u oscuridad del color, referida como alto valor para colores claros o bajo valor para colores oscuros.
Intensidad se refiere a brillo o oscuridad de un color; esto significa que un color con el mismo tono y el mismo valor aún se puede atenuar o iluminar cambiando la intensidad y creando diferentes salidas de color.
La intensidad más alta de cada color es el tono que muestran en la rueda de color (ver más abajo), mientras que la más baja es el color gris..
Contrastes de color
Refiriéndose a las leyes de similitud mencionadas anteriormente, las mentes de los perceptores crean grupos de pequeños objetos que ven basados en propiedades similares y diferentes, a menudo colores.
Cuando eligió su paleta de colores para su sitio web, especialmente si opta por un enfoque minimalista o si diseña un área de contenido con mucho texto, por ejemplo. blogs o anuncios, deberías Sé consciente de los diferentes contrastes de color. Eso podría ayudarte a encontrar los valores de color correctos para obtener el mejor resultado..
Hay 7 contrastes de color según Johannes Itten, aunque solo mencionaré 3.
1. Contraste de tonalidad.
Amarillo, rojo y azul a toda intensidad. Son contrastes directos y vívidos. Los tonos secundarios hacen una distinción menos nítida, pero siguen funcionando, al igual que los tonos terciarios, aunque ninguno produce como Resultados impresionantes como con los matices primarios..
2. Contraste complementario.
Dos colores están en contraste complementario si cuando se mezclan crean un gris neutro. Estos tambien son llamados pares extraños. Si son adyacentes, aumentan la intensidad y la intensidad, mientras que combinados se cancelan entre sí. Cada color tiene uno y solo uno complementario; en la rueda de color, las parejas son diagonalmente opuestas entre sí.
3. Contraste luz-oscuridad
Si quieres experimentar con un sitio web de un solo color, usando diferentes valores del mismo tono podría producir resultados impresionantes. A menudo utilizado en el diseño web minimalista, también puede producir excelentes resultados basados en contraste claro-oscuro si desea proporcionar opciones de color de tema a su usuario. Este contraste también se utiliza para el diseño en escala de grises..
Si quieres perseguir los 4 contrastes de color restantes, puedes encontrarlos aquí..
Creando paletas y comprobando contrastes.
Saber que la teoría es genial, interpretar tus ideas es otra cosa. Sin embargo, no debe preocuparse, la web proporciona un gran soporte para sus necesidades de juegos de colores. Hay una gran cantidad de herramientas que te ayudan a crear patrones de color personalizados basados en reglas de contraste de color, por ejemplo. Paletton o Adobe Kuler.
Para fines web, es posible que desee verificar los contrastes que eligió usar en webAIM, en el sitio de Jonathan Snook o descargar una instancia del Analizador de contraste de color de The Paciello Group aquí.
Conclusión
Cuando comience a trabajar con un tema nuevo o comience a modificar los existentes, intente pensar en los principios de la percepción para organizar su contenido y recuerde considerar las reglas de color al darle a su diseño su forma y tinte final..
Nota del editor: Esta publicación de invitado está escrita para Hongkiat.com por Marton Fekete. Marton es un desarrollador de sitios húngaro recientemente enganchado a WordPress. Es un entusiasta del rediseño y escritor de contenido independiente que le gusta jugar juegos de rol en su tiempo libre..
