Jerarquía Visual en Diseño de Interfaz con Adobe XD

Clase 24 de 38 • Curso de Diseño de Interfaces Únicas

Contenido del curso

Interfaces

Productos digitales

Definición y Producción

Preparación para implementación

Cierre

37
Evaluación y Mejora Continua en Diseño de Interfaces y UX
01:43 min

Contenido Bonus

38
Diferencias entre Diseñador UX y Diseñador UI
02:51 min

Tomar examen

Resumen

La jerarquía visual define el nivel de importancia de cada uno de nuestros elementos mediante:

Posición
Tamaño
Color

Comentarios

Jorge Trujillo

student•

Efraín Hernández García

student•

Tu imagen lo hizo demasiado entendible

José María Cuevas Ramírez

student•

Yo lo leí así 😅: "Después esto, primero vas a leer esto, después vas a leer esto de acá" y no me había fijado en el "Por ultimo esto de acá arriba"

Jonathan Mancilla

student•

Juan Carlos Barbaran Meza

student•

Esta hermoso.

Daniel Alcudia

student•

rifadísimo

Juan David ROJAS

student•

Carlos Corona Pestana

student•

Visualmente es muy atractiva esta pantalla.

Roberto Fernandez Mata

student•

Con la Jerarquia VIsual, identificamos que es mas importante, luego los elementos secundarios y asi En la siguiente imagen, la parte derecha tiene jerarquia la de la izquierda no

En las siguientes imagenes podemos ver numerados los pesos de jerarquia con base en tamaño, Color(contraste) y posicion

Tomado del curso de Introduccion al diseño de Platzi. Super Recomendado

Pedro Isaac Aguilar

student•

Excelente, gracias por la aportación!!

Naza maurice

student•

Mi Login

Jimmy Caicedo

student•

@Naza maurice Me recuerda a los posters clásicos de rock, muy bueno 😎

Naza maurice

student•

jajajaj gracias, quería un vibe vintage

Maria Julieta Rincón Díaz

student•

Yo lo estoy haciendo con un pequeño emprendimiento que tengo

Juan Esteban Galvis

student•

Para profundizar en el tema de jerarquía:

Módulo "Peso" en el Curso Práctico de Composición Visual
Módulo "Jerarquía" en el Curso de Introducción al Diseño

JUAN FELIPE OSORIO HERRERA

student•

Joshua Santiago Alcantara

student•

Jorge Trujillo

student•

Saber organizar el contenido y los elementos en una composición gráfica nos ayudará a transmitir el mensaje objetivo de forma más clara y efectiva. Hacer un buen uso de la jerarquización es el secreto para saber cómo resaltar, ordenar y presentar los diferentes elementos de cualquiera de nuestros proyectos.

Angela Illiano

student•

Para descargar iconos también hay una página llamada "the noun project" - https://thenounproject.com/

Edgar Geovani Xuc Xol

student•

disculpen en que programa hacen los logos de diseños web

María Luisa Barboza Restrepo

student•

Yo los hago en Illustrator, se me hace más fácil y el curso lo estoy haciendo en Figma

Joel Subiabre Aravena

student•

para logos recomiendo Illustrator por su set de herramientas, tambien tienes otras opciones como Affinity designer o InkScape

Carolina Gómez

student•

Trabajando en documento XD
Generando GERARQUÍA VISUAL, se define entre posición, tamaño y color.
Ejemplo con botón de facebook: Este en este caso es el más grande, tiene el color más vistoso y está centrado, así que cumple las 3 características importantes.
El diseño coherente y bien estructurado ayuda a que esta jerarquía sea buena.

Vanessa Rojo Quero

student•

Juan Esteban Deossa Pertuz

student•

Es muy importante la jerarquía visual en toda parte de nuestras interfaces, las jerarquías visuales es el grado de importancia que le damos a cada elemento y se clasifican por tres conceptos, tamaño, posición y color. Para clasificar correctamente la jerarquía visual de nuestra interfaz podremos calificar en base a estos tres conceptos su jerarquía.

Ada Rosa Quispe Mamani

student•

Nicoll Diaz

student•

Emeli Nahir Fernandez

student•

DANIELA FRANCO TOBON

student•

DANIELA FRANCO TOBON

student•

Jerarquía Visual en Diseño de Interfaz con Adobe XD

Interfaces

Diseño de Interfaces: Bases y Metodologías para el Futuro

Diseño de Interfaces: Conceptos y Ejemplos Prácticos

Fundamentos del User Experience: Más Allá del Diseño de Interfaces

Interfaces: Límites y Posibilidades en la Comunicación Humano-Máquina

Principios del Diseño Centrado en Humanos de Don Norman

Productos digitales

Diseño y Construcción de Productos Digitales Innovadores

Diseño de Aplicaciones para Entrega de Pizzas en la Luna

Instalación de Adobe XD para Diseño de Interfaces

Fundamentos y Principios en el Diseño de Interfaces Digitales

Creación de Foundations en Adobe XD: Colores y Tipografía

Diseño de Productos: Del Problema a la Solución Realista

Diagramas de flujo básicos con Coggle

Diseño de Flujos de Información en Aplicaciones Móviles

Definición y Producción

Construcción de Wireframes en Diseño de Producto

Creación de Wireframe Básico en Adobe XD para Aplicaciones Móviles

Prototipado de Interfaces: Herramientas y Técnicas Esenciales

Prototipado de Interfaces con Adobe XD

Diseño de Sección de Domicilios en Aplicaciones Móviles

Patrones y Componentes UI: Definición y Aplicación Práctica

Creación de Mood Boards para Identidad Visual de Productos Digitales

Creación de Moodboard para Personalización de Aplicaciones

Diseño de Interfaz en Adobe XD: Creación de Pantallas y Splash

Diseño de Microinteracciones en Software