Please enable JavaScript.
Coggle requires JavaScript to display documents.
15 reglas de jerarquía visual, image - Coggle Diagram
15 reglas de jerarquía visual
PUNTO FOCAL (MARIO)
Se arrefiere a colocar espacio visual importante en el centro para llamar la atencion del espectador
Movimiento (Vidal) Crea un camino visual utilizando líneas o elementos repetitivos para dirigir al espectador a través del diseño.
Ejemplo; El ojo humano siempre busca un punto de partida. En el BYD Seal, el diseño frontal (llamado Ocean X) utiliza faros LED en forma de "U" invertida y líneas de capó que convergen hacia el centro.
golden ratio (pichardo) se utiliza como guía para organizar elementos de forma estéticamente agradable, asegurando que el ojo del espectador fluya de manera natural por el diseño
Ejemplos
Twitter
National Geographic
4;Balance (Cristian)
Distribución equilibrada de los elementos dentro de un diseño para que se vea estable y agradable.
Repetition (Ricardo)
Consiste en utilizar elementos identicos o similares (como colores, tipografía o formas) a lo largo de toda una compocición. ayuda a organizar la información, crea familiaridades y guía la mirada del espectador de forma lógica.
6: white space ( Ariel) Es el espacio vacío alrededor de un elemento no es espacio desperdiciado ya que es una herramienta de aislamiento. Cuanto más espacio en blanco rodee a un objeto, más importa, ya que nada compite con él.
7: visual Triangle ( lazaro) organiza elementos formando una figura triangular imaginaria para dirigir la mirada y mejorar la composicion del diseño se usa para diseño grafico, publicidad etc ejemplo: pagina web. arriba titulo principal, a un lado imagen, otro lado boto de registrarse otro ejemplo posters de pelucula, personaje pincipal arriba, secundarios abajo
TEXTURA
(caro) Elemento visual que genera profundidad y jerarquía mediante variaciones de densidad o patrón, permitiendo diferenciar elementos principales de fondos. :
typo (Mario) Se basa en llamar la atención del espectador con distintos tipos de tipografía, la tipografia puede verse mas formal o llamativa dependiendo de esta
Random (Vidal) Rompe intencionalmente el patrón o el orden para generar un contraste dramático que llame la atención.
Ejemplo: Mientras la silueta general es redonda y amigable, de repente te topas con rines de aleación que tienen insertos de color aleatorios o patrones geométricos asimétricos
regla del elemento impar (Ariel) Es el cual busca patrones y simetría de forma constante. Colocar un número impar de elementos hace que el elemento central actúe de forma natural como el punto focal o el más importante.
12.alineacion (Cristian)
Mantener elementos alineados mejora el orden y la lectura visual.
lineas (Pichardo)
Uso de elementos lineales trazos líneas visuales implícita para estructurar el diseño, dirigir la mirada del espectador y conectar la información de manera ordenada
Ejemplos
Figma y Canva
Xbox
Contraste (Ricardo)
Es su herramienta principal,
al asentuar diferencias en tamaño,
color, tipografía y espacio, se crea
un flujo de lectura natural que permite
procesar el mensaje en segundos.
EJEMPLO:
Mercado Libre
En la tarjeta de un producto, el contraste se aplica en tres elementos clave:
El Precio: Es el texto más grande, negro y en negrita de la tarjeta. Contrasta fuertemente con el fondo blanco y resalta sobre los textos secundarios.
El Envío Gratis: Utiliza tipografía de color verde brillante. Este color contrasta con el texto negro del precio y el fondo claro, avisando un beneficio inmediato.
El Botón "Comprar ahora": Es un rectángulo azul fuerte con texto blanco. Contrasta con el resto de la tarjeta (que es mayormente blanca y gris) para obligar al usuario a hacer clic.
cuadricula (Azul)
15.- La cuadrícula es como una guía invisible que divide la página en filas y columnas, parecido a una tabla o al cuaderno cuadriculado.
Sirve para acomodar todos los elementos (títulos, imágenes, botones y textos) de manera ordenada y alineada.
Beneficios
Mantiene el diseño organizado y uniforme
Facilitan la lectura y comprension del contenido
Mejoran la estetica del sitio web
Permiten adaptar el diseño a diferentes tamaños de pantalla (diseño responsivo)
En Netflix, las películas y series se acomodan en filas horizontales, y cada portada tiene el mismo tamaño. Eso también es una cuadrícula.
apple.com
