You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
10 Hrs
46 Min
7 Seg

Principios heurísticos de relación y jerarquía

7/20
Resources

What are the heuristic principles of relationship and hierarchy?

The heuristic principles of relationship and hierarchy are fundamental keys in the visual design and organization of elements. These principles help interfaces and designs to be intuitive and functional, making it easier for users to perceive and understand them. Knowing and applying these principles is vital for any designer or professional involved in creating effective interfaces and visual content.

How does the law of common regions influence design?

The law of common regions states that elements within an area with a clearly defined boundary tend to be perceived as a group. This perception facilitates visual organization and is useful for guiding the user's attention to specific areas of a design.

  • Practical example: Imagine a menu on a web page where all the navigation buttons are within a shaded area. This area acts as a common region, causing users to perceive and associate these buttons as a related set.

What is the role of the law of proximity?

The law of proximity is based on the fact that elements close to each other tend to group together. This is crucial for visually simplifying complex interfaces and highlighting natural groupings without the need for additional visual markers.

  • Practical example: In a list of items, similar items appearing close to each other will be perceived as parts of the same category or section.

How does the law of similarity affect visual perception?

According to the law of similarity, similar items are perceived by the human eye as belonging to the same group or pattern, even when they are separated by other items. Similarity can be based on shapes, colors or textures.

  • Practical example: On a web page, icons that share a similar color or shape indicate that they perform a similar function or are related.

How important is the law of uniform connectivity?

The law of uniform connectivity emphasizes that visually connected elements are perceived as more related to each other than unconnected ones. This makes it possible to create clear and logical associations for users.

  • Practical example: Lines connecting products in a comparative graphic reinforce the relationship between them, facilitating interpretation and analysis.

How do design and meaning relate to each other?

Propositional density is another important principle that highlights the relationship between the elements of a design and the meaning they convey. It focuses on how visual elements communicate specific messages or values.

  • Case study: Obama's election logo reflects stability, change and patriotism through the colors and shapes of the design.

Why is the layering principle vital?

The layering principle states that organizing information into related groupings makes it easier to manage complexity. It reinforces the relationships between different components of the design, making it easier for the user to understand.

  • Practical example: Using visual layers in dashboards or control panels helps to separate relevant data by category, showing only what is necessary for each analysis.

What is the role of hierarchy in data organization?

Hierarchy is an essential structure for visualizing and understanding the complexity of information. Organizing elements in order of importance facilitates navigation and assimilation of content.

What does the arrangement of elements in continuity indicate?

Elements arranged in a straight line or in smooth curves are perceived as parts of a group. This is useful for guiding the user smoothly through the information.

  • Practical example: A straight-line progress indicator on a form keeps the user aware of their completed and pending steps.

How to organize information effectively?

There are five key methods for organizing information: category, time, location, alphabet and continuity. The choice will depend on the context and purpose of the content to be presented.

  • Practical example: A directory could be arranged alphabetically to facilitate quick searches for specific names.

What is the benefit of alignment in design?

Alignment organizes elements according to common edges or centers in rows or columns, improving readability and visual clarity. This reduces the effort required to process the information presented.

  • Practical example: In a product listing, aligning descriptions and prices uniformly improves the user experience, allowing them to easily compare.

Applying these principles can transform the way we present and consume information, making our creations not only attractive, but also effective and easily understandable. Continued practice and thoughtful use of these principles will strengthen our skills as designers, and we encourage you to continue to explore and apply this knowledge in your next projects!

Contributions 69

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Apuntes:

  • Ley de las regiones comunes: Tendemos a percibir limites y áreas
  • Ley de la proximidad: Agrupamos elementos próximos
  • Ley de la similitud: el ojo humano tiende a agrupar lo similar
  • Ley de conectividad uniforme: Los elementos conectados visualmente se perciben con mayor facilidad
  • Densidad proposicional: relación diseño-significado
  • Capas: Agrupar info ayuda a entender y gestionar la complejidad
  • Jerarquía: Estructura simple, comprensible, organizada
  • Continuidad: El cerebro hasta opta por completar espacios para lograr una secuencia o patrón
  • Organizar la info: Por categoría, tiempo, ubicación, alfabeto, continuidad
  • Alineación: Priorizar la legibilidad

Me recordó esto…

Acá un Wireframe rapido de los primeros tres pricipios:

  1. Ley de las Regiones Comunes.
  2. Ley de la Proximidad.
  3. Ley de la Similitud.

Algunos principios:
Jerarquia
Similitud
Alineacion
Conectividad uniforme
Relaciones comunes

Les comparto mis apuntes de esta clase! 😄

Les comparto mis wireframes del ejercicio de principios heurísticos:




Dejo un wireframe, con algunas de los principios, si tienen algún comentario o corrección quedo atenta.

Gracias

Les comparto el wireframe sobre la clase de Principios heurísticos de relación y jerarquía 😊 *Lo hice con notion y figma porque soy bastante malo con el lápiz 😅* ![](https://static.platzi.com/media/user_upload/relacion%20y%20jerarquia-7eb1d870-aed7-465d-aa6b-2874aac160aa.jpg)

Este es mi trabajo de relación y jerarquía:

Les comparto un link donde pueden encontrar más info acerca de estos principios.

https://www.soa.org/globalassets/assets/files/e-business/pd/events/2019/val-act/pd-2019-08-valact_session-048.pdf

Mis apuntes:

  • Ley regiones comunes: se agrupan por delimitaciones
  • Ley de proximidad: los elementos mas cercanos entre sí suele percibirse como un grupo.
  • Ley de la similitud: el ojo tiende a percibir objetos similares aunque este separados o distantes entre sí.
  • Ley de conectividad uniforme: los elementos conectados se perciben mas relacionados o comunes.
  • Densidad proposicional: relación entre los elementos del diseño y el significado que transmite.
  • Jerarquía: la organización como estructura más simple para entender la complejidad.
  • Continuidad: elementos en linea o curva suave se percebe continuo.
  • Organización de información: Categorías, tiempo, ubicación, alfabéticamente y continuo.
  • Alineación: la colocación de elementos ayuda a la legibilidad.

07. Principios heurísticos de relación y jerarquía

  • Heurística
    • Relación y jerarquía
      • Ley de las regiones comunes

        • Los elementos tienden a percibirse en grupo
      • Ley de la proximidad

        • Los elementos que se encuentren cerca, se perciben como si fuera un grupo
      • Ley de la similitud

        • Se percibe los elementos que se parecen como uno aunque estén separados por distancia y grupos
      • Ley de conectividad uniforme

        • Los elementos que están conectados visualmente se perciben más unidos
      • Ley Densidad proposicional

        • La relación que tienen los elementos en un diseño le da su significado
      • Principio de las capas

        • Organizar la información en grupo relacionados ayuda a digerir la información
      • Principio de la jerarquía

        • La organización jerárquica es la estructura más simple para visualizar y comprender la complejidad
      • Principio de la continuidad

        • Los elementos dispuestos en linea recta o en la misma curva se ven como un mismo elemento
      • Organización de la información

        • 5 formas de organizar la información
          • Categoría
          • Tiempo
          • Ubicación
          • Alfabeto
          • Continuo
      • Principio de la alineación

        • Alinear los elementos a un eje en común ayuda a la legibilidad

como siempre todo cuenta yla teoria nos marca una tendencia y una mejora

Literalmente el curso es de conceptos, porque en el principio de jerarquía no se detuvo ni un segundo para dejar de leer y decir algo propio…

El principio de escasez se utiliza mucho en Publicidad con mensajes como: “Solo por hoy aprovecha esta oferta X”, “20% de Dscto. para los primeros 100”. En experiencias de usuario como sitios web he visto que lo usan mucho en eCommerce, por ejemplo en Booking: “1 persona está mirando este alojamiento” o cuando venden productos: “solo quedan 10 unidades”.

Mis apuntes: ![](https://static.platzi.com/media/user_upload/Imagen5-d16423f1-3f3a-4f0d-bb4c-827bceccd2f0.jpg)
**Leyes de la Gestalt y Organización Visual** Estas leyes describen cómo nuestro cerebro tiende a agrupar y organizar elementos visuales para darles sentido: * **Ley de las Regiones Comunes:** Los elementos dentro de un área delimitada se perciben como un grupo. Ejemplo: usar un fondo de color para agrupar elementos relacionados. * **Ley de la Proximidad:** Los elementos cercanos se perciben como relacionados. Ejemplo: agrupar opciones de menú cercanas entre sí. * **Ley de la Similitud:** Los elementos similares (en forma, color, tamaño, etc.) se perciben como un grupo. Ejemplo: usar el mismo color para todos los enlaces de una página. * **Ley de Conectividad Uniforme:** Los elementos conectados visualmente se perciben como más relacionados que los que no lo están. Ejemplo: usar líneas para conectar elementos de un diagrama de flujo. * **Ley de Continuidad:** Nuestro cerebro prefiere percibir líneas continuas y patrones en lugar de líneas interrumpidas. Ejemplo: usar una línea punteada para guiar la mirada del usuario a través de una página. **Otros Principios de Diseño** * **Densidad Proposicional:** Equilibrar la cantidad de información y significado en un diseño para evitar la sobrecarga. * **Capas:** Agrupar información en capas ayuda a gestionar la complejidad y permite al usuario profundizar en los detalles si lo desea. * **Jerarquía:** Establecer una estructura clara y organizada de la información, priorizando los elementos más importantes. * **Organizar la Información:** Utilizar diferentes métodos (categorías, tiempo, ubicación, alfabeto, continuidad) para organizar la información de manera lógica y facilitar su búsqueda. * **Alineación:** Alinear elementos de texto y otros objetos visuales mejora la legibilidad y la estética del diseño. **Aplicando las Leyes en el Diseño UX** Entender cómo funcionan estas leyes nos permite diseñar interfaces más intuitivas y fáciles de usar: * **Agrupación Visual:** Usar las leyes de proximidad, similitud y regiones comunes para agrupar elementos relacionados y guiar al usuario. * **Jerarquía Visual:** Usar tamaño, color, contraste y posición para establecer una jerarquía clara de información. * **Conexión Visual:** Usar líneas, flechas u otros elementos visuales para mostrar relaciones entre elementos y guiar al usuario a través de un flujo. * **Organización Lógica:** Organizar la información de manera que tenga sentido para el usuario y sea fácil de encontrar. La jerarquía visual es fundamental para crear una experiencia de usuario satisfactoria en entornos digitales. En un mundo cada vez más lleno de distracciones, la organización y estructura de los elementos UI son cruciales para que los usuarios puedan navegar y entender los productos digitales de manera natural. ## La Importancia de la Jerarquía Visual La jerarquía visual ayuda a los usuarios a encontrar y entender la información de manera efectiva. Según Nielsen Norman Group, la jerarquía visual controla la entrega de información desde el sistema al usuario, indicando dónde debe centrar su atención. Esto es crucial para retener la información y completar tareas, lo que a su vez fomenta la confianza en el diseño y su plataforma. ## Componentes de la Jerarquía Visual La jerarquía visual se crea a través de la organización intencional de elementos en una página y sus atributos diseñados. Atributos como el color, contraste, escala y agrupación contribuyen a formar la jerarquía visual y suelen seguir los principios de la teoría de la Gestalt, como la simplicidad, la similitud, la proximidad, el cierre, la figura y el fondo, la continuidad, el orden y la simetría. ## Modelos de Jerarquía Visual Estudios han medido los patrones de movimientos oculares de los usuarios al ver una página para entender cómo se guían hacia los puntos de entrada. El modelo de Faraday de la jerarquía visual web propone que los usuarios se guían hacia los puntos de entrada inicialmente a través de la tamaño y las imágenes, pero estudios posteriores han sugerido que la posición, el estilo de texto y el color son más consistentes para indicar los puntos de entrada. La jerarquía visual activa la capacidad del cerebro para distinguir objetos basados en sus diferencias físicas. ## Conclusión La jerarquía visual es un elemento crucial en el diseño de interfaces de usuario, ya que ayuda a los usuarios a encontrar y entender la información de manera efectiva. Al entender cómo se crea y se utiliza la jerarquía visual, los diseñadores pueden crear experiencias de usuario más naturales y fáciles de usar.

Este tipo de principios al principio es raro. La cuestión es comenzar a utilizarlo y que se nos haga mas familiar.

Hubiera sido bueno que mostrara ejemplos prácticos y reales de cada uno de los conceptos como hizo con la Organización de la información para que quedaran más claros.
Wireframe hecho de los primeros tres principios: Ley de las Regiones Comunes. Ley de la Proximidad. Ley de la Similitud. ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-11-05%20a%20las%2020.07.50_9d951db7-3ed0a064-0d8e-4f72-b23c-0b52a79c46ba.jpg)
* Ley de las regiones comunes: Tienden a compartirse en grupos, y tienen un área claramente definida.  * Ley de la proximidad: Los elementos están cerca o próximos, tienden a agruparse entre si, aunque sean los mismo elementos y como en el ejemplo haya un espacio en blanco. * Ley de la similitud: El ojo humano tiende a percibir elementos similares en un diseño o composición, incluso si estos elementos están separados, ejemplo cuadrados con cuadrados y círculos con círculos. * Ley de conectividad uniforme: Los elementos que están conectados visualmente se perciben más relacionados que los elementos que están sin conección.  * Densidad proposicional: Relacion entre un diseño y el significado que trasmite, que representa lo que está puesto, colores, figura, etc… * Capas: Nos ayuda a gestionar la complejidad y tener más orden. * Jerarquía: La organización jerárquica es la estructura más simple para visualizar y comprender la complejidad.   * Continuidad: Aunque los elementos estén separados se percibe junto. * Organización de la información: * Categoría * Tiempo * Ubicación * Alfabeto * Continuo * Alineación: Tener todo organizado en un cuerpo común ayuda a la legibilidad.

Todos estos principios nos son muy útiles a la hora de estar diseñando las interfaces en Figma o en Sketch, ya que nos ayudarán a crear estructuras y elementos más armónicos que los hagan más agradables y sencillos de utilizar por los usuarios.

Wireframe con los principios heurísticos.

1. Ley de las regiones comunes: Se perciben limites de contorno que agrupan elementos. 2. Ley de la proximidad: El espacio determina la proximidad de los elementos. 3. Ley de la similitud: Elementos similares que percibe la vista y que los relaciona entre ellos. 4. Ley de conectividad: Cuando los elementos están relacionados por un conector , se percibe mas relación entre ellos que los demás. 5. Densidad proposicional: Relación de los elementos y el significado que transmite. 6. Capas: Agrupación de información de manera ordenada con el fin de generar acciones definidas. 7. Jerarquía: Estructura simple para entender la complejidad. 8. Continuidad: Aunque los elementos estén separados, la percepción nos indica que continúan unidos. 9. Organizar la info: Categoría, tiempo, ubicación, alfabeto, continuidad. 10. Alineación: Alineación de bordes comunes con el fin de facilitar la lectura.
\*Principios heurísticos de relación y jerarquía \*Ley de las regiones comunes: los elementos tienden a percibirse en grupos \*Ley de la proximidad Los elementos tienden a agruparse entre si \*Ley de la similitud: El ojo humano percibe elementos similares incluso si están separados \*Ley de conectividad uniforme: Los elementos que están conectados visualmente se perciben mas relacionados \*Densidad proporcional: La relación entre el elemento, el diseño y el significado que transmite. \*Capas Organizar la información en agrupaciones relacionadas nos ayuda a gestionar la complejidad y reforzar la relación entre si \*Jerarquia: La organización jerárquica es la estructura mas simple para visualizar y comprender la complejidad \*Continuidad: Los elementos dispuestos en linea reta o simplemente en curva se perciben como un simple grupo \*Organización de la información: Categoria Tiempo Ubicación Alfabeto Continuo \*Alineación. La colocación de elementos de modo que los bodys se alineen en fila o bordes comunes ayudan a la agilidad de la lectura
Ejemplo de los principios a un wireframe ![](https://static.platzi.com/media/user_upload/Ejemplo%20Principios%20heur%C3%ADsticos%20de%20relaci%C3%B3n%20y%20jerarqu%C3%ADa-548b794c-5c00-443f-8b34-1ba049021262.jpg)
no me deja subir imágenes pero si lo realicé, muchas gracias
Les comparto mi ejemplo usando algunas leyes en el mismo wareflames
### Principios Heurísticos de Relación y Jerarquía 1. **Jerarquía Visual** * **Descripción**: La jerarquía visual organiza la información de tal manera que los usuarios pueden entender fácilmente la importancia y la relación entre diferentes elementos. * **Importancia**: Ayuda a los usuarios a escanear y procesar la información rápidamente, guiando su atención a los elementos más importantes primero. * **Ejemplo**: En una interfaz de WhatsApp, los nombres de los contactos y los mensajes recientes se destacan con tamaños de fuente más grandes y negrita, mientras que los mensajes antiguos o menos importantes tienen una fuente más pequeña y menos prominente. 2. **Agrupamiento por Proximidad** * **Descripción**: Elementos que están cerca unos de otros se perciben como relacionados. * **Importancia**: Facilita la comprensión de que ciertos elementos o acciones están conectados. * **Ejemplo**: En una conversación de WhatsApp, los mensajes de un mismo usuario están agrupados juntos con menos espacio entre ellos, diferenciándolos claramente de los mensajes de otros usuarios. 3. **Uso de Contraste** * **Descripción**: Utilizar diferencias en color, tamaño, forma o tipografía para establecer relaciones y diferenciar elementos. * **Importancia**: Mejora la claridad y la legibilidad, destacando las diferencias y relaciones entre los elementos. * **Ejemplo**: Los mensajes no leídos en WhatsApp se muestran en negrita y con un color de fondo diferente para destacar su importancia sobre los mensajes ya leídos. 4. **Consistencia** * **Descripción**: Mantener un diseño uniforme y coherente en todos los elementos y páginas. * **Importancia**: Facilita el aprendizaje y la navegación, permitiendo a los usuarios predecir el comportamiento del sistema. * **Ejemplo**: En WhatsApp, los iconos y botones tienen un diseño y una ubicación consistentes en todas las plataformas (móvil, web), lo que ayuda a los usuarios a familiarizarse rápidamente con la interfaz. 5. **Uso de Espacio en Blanco** * **Descripción**: El espacio en blanco (o espacio negativo) es el área vacía entre elementos de una composición. * **Importancia**: Mejora la legibilidad y la organización visual, reduciendo la sobrecarga de información y permitiendo que los elementos respiren. * **Ejemplo**: En WhatsApp, el uso de espacio en blanco entre los mensajes, los encabezados y las secciones ayuda a los usuarios a distinguir y concentrarse en los diferentes bloques de información.
### **Puntos importantes de la clase:** 1. **Ley de la Región**: Los elementos agrupados por límites visuales claros tienden a percibirse como relacionados. 2. **Ley de la Proximidad**: Los elementos cercanos se perciben como parte del mismo grupo. 3. **Ley de la Similitud**: Agrupamos elementos similares en apariencia, incluso si están separados. 4. **Ley de la Conectividad Uniforme**: Los elementos visualmente conectados parecen más relacionados. 5. **Principio de Densidad Propia**: Los elementos de un diseño transmiten significado a través de su relación visual, como en los logotipos. 6. **Principio de las Capas**: Agrupar información relacionada facilita la comprensión de diseños complejos. 7. **Jerarquía**: La organización jerárquica ayuda a visualizar y comprender información compleja de manera más simple. 8. **Principio de la Continuidad**: Los elementos dispuestos en línea o curva suave se perciben como un solo grupo. 9. **Organización de la Información**: Las principales formas de organizar la información son por categoría, tiempo, ubicación, orden alfabético y continuidad. **Alineación**: La alineación mejora la legibilidad y la experiencia del usuario al hacer que el contenido sea más fácil de seguir.
**Clase 8 - Principios heurísticos de relación y jerarquía** * **¿Cuáles son los principios heurísticos de relación y jerarquía?** * Ley de las regiones comunes. * Ley de proximidad. * Ley de la similitud. * Ley de conectividad uniforme. * Densidad proposicional. * Capas. * Jerarquía. * Continuidad. * Organización de la información. * Alineación. * **¿De qué nos habla la ley de las regiones comunes?** * Esto nos habla de que el usuario puede percibir elementos en grupo cuando estos tienen un límite definido o se encuentran encerrados en alguna forma. * **¿De qué nos habla la ley de proximidad?** * Esto nos habla de que el usuario puede percibir elementos en grupo cuando estos están cerca de ellos. * **¿De qué nos habla la ley de la similitud?** * Esto nos habla de que el usuario puede percibir elementos en grupo cuando estos comparten una misma apariencia, incluso si estos se encuentran separados. * **¿De qué nos habla la ley de conectividad uniforme?** * Esto nos habla de que el usuario puede percibir elementos en grupo cuando estos están estéticamente conectados de alguna forma. * **¿De qué nos habla la densidad proposicional?** * Esto nos habla de que el usuario puede percibir la relación que hay entre elementos gracias a su diseño y significado. * **¿De qué nos hablan las capas en los principios heurísticos?** * Esto nos habla de que si la información está organizada de manera relacionada, podemos gestionar la complejidad y las relaciones entre los elementos. * **¿De qué nos habla la jerarquía en los principios heurísticos?** * Esta nos ayuda a organizar los elementos del diseño, ya que es la estructura más simple de visualizar y nos ayuda a comprender la complejidad. * **¿De qué nos habla la continuidad en los principios heurísticos?** * Esto nos habla de que el usuario es capaz de relacionar elementos cuando estos están ubicados en línea recta o en una suave curva. * **¿Cómo podemos dividir los elementos según el principio de la organización de la información?** * Categorías. * Tiempo. * Ubicación. * Alfabeto. * Continuo. * **¿De qué nos habla la alineación en los principios heurísticos?** * Esto nos dice que si somos capaces de alinear los elementos en forma de filas y columnas ayudará a que el usuario pueda leer y entender mejor los elementos dispuestos en el diseño.
A mi me gusta la forma de explicar el profesor, pero en esta clase, sobretodo cuando comienza con la Organizacion de la informacion, va extremadamente rapido.... Estaria bueno explicar un poco mas las imagenes de ejemplo
Relación y jerarquía. Ley de las regiones comunes: Se perciben en grupos y comparten áreas con límites definidos. Ley de proximidad: Los elementos que están cerca o próximos tienden a agruparse entre sí. Ley de similitud: El ojo humano percibe elementos similares y los agrupa. Conectividad uniforme: Los elementos que están conectados visualmente se perciben mejor, que los que no lo están, ejem: elementos unidos por lineas. Densidad proposicional: La relación de un elemento y el significado que transmite. Capas: Organizar la información en grupos relacionados, mejora la gestión de la complejidad y mejora la relación entre los elementos. Jerarquía: La organización jerárquica es la estructura más sencilla de visualizar y entender la complejidad. Continuidad: Los elementos dispuestos en linea recta o curva, se perciben como grupo. Organización de la información: Categoría, tiempo, ubicación alfabeto, continuo. Alineación: Colocar elementos de modo en los bordes se alinean en filas o columnas o un centro común ayuda a la legibilidad de los elementos.
![](https://static.platzi.com/media/user_upload/image-d9d782c2-2233-4937-ad23-38c2bab491c4.jpg)
![]()![]()![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-02-29%20a%20las%2017.21.21_0c7e5886-10813e51-fe88-4f86-84eb-3a2ac0b5ec98.jpg)

Creo q el de capas y densidad proposicional no estan bien, pero me deja el comentario profe

Les comparto mis wireframes ![](https://static.platzi.com/media/user_upload/image-210bfd52-e36a-4b9d-92a9-8dc09d84660b.jpg) ![](https://static.platzi.com/media/user_upload/image-e15c7cd5-882c-45d1-94b3-82220941fe22.jpg) ![](https://static.platzi.com/media/user_upload/image-480afc1d-ef15-4cf2-9644-f1787c508cb4.jpg)

Algunos principios:
Jerarquía
Similitud
Alineación
Conectividad uniforme
Relaciones comunes

![](https://miro.medium.com/v2/resize:fit:1100/format:webp/1*UiZUPnvPeQWS5D2OnyygOA.jpeg)
![]()![](Descargas)![]()
![]()![]()![]()![](C:\Users\USER\Downloads\Wireframe.jpeg)![]()
![](https://static.platzi.com/media/user_upload/image-65ee1662-9cb9-4949-aa4a-fd4fa7ccbbd5.jpg)considero que algo aplicable a la leccion es el wireframe de una tienda de ropa virtual, ya que se aplican casi todos los principios impartidos en la clase, puesto que un ejemplo practico es comprar una prenda, en esta caso una blusa, nos despliega varias opciones de la m de lo que se define como blusa, las agrupa, los resultados son elementos simulares, estan conectador y pueden estar organizados jerarquicamente y categorizados de forma variada de acuerdo a la infor de la prenda, precio, etc. y siempre alineadas.
Les comparto mi wireframe de los principios: Alineación, ley de las regiones comunes y conectividad uniforme ![](<C:\Users\Tami designer\Downloads\My first wireframe.jpeg>)![]()
Hola, por aquí compartiendo mi ejercicio: ![1000219174.jpg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1c298d46-ccf2-48bd-86aa-a4826e7d8d83/8d1e4f24-5603-42aa-93f7-d87e00b133f6/1000219174.jpg)![]()![](https://static.platzi.com/media/user_upload/1000219174-61e6ded5-3c42-4d35-8cd7-bdc0b85c7a0b.jpg)
![]()![](https://static.platzi.com/media/user_upload/wire-6bdc660f-487f-4143-ae2f-a83e0db18278.jpg)![](https://static.platzi.com/media/user_upload/wire-6eca597d-6e29-45d3-a74f-0de8170b9ee1.jpg)
¡Que buena clase gracias!
En este figma he hecho los ejercicios: <https://www.figma.com/file/N1OjRLCLMinqIRYHvoQaAU/Study-%26-Practice?type=design&node-id=0%3A1&mode=design&t=uo7M5YVl53wu5kOu-1>
![]()![]()![](file:///Users/julianaordonez/Downloads/WhatsApp%20Image%202023-10-26%20at%2013.51.15.jpeg)
![](https://static.platzi.com/media/user_upload/image-8b918e3f-5f3c-422c-a51d-3e525be118f9.jpg)
![](https://static.platzi.com/media/user_upload/image-996d6097-2559-4914-b8f2-13d358b85ca9.jpg)
![](https://static.platzi.com/media/user_upload/image-b49cea08-387c-4372-9574-b35c3267582d.jpg)
![](https://static.platzi.com/media/user_upload/image-766c8dd2-a770-4fb4-bac3-f37c31a684d8.jpg)
![](https://static.platzi.com/media/user_upload/image-ab58676f-d18e-4de3-9933-5842a75ec930.jpg)
![](https://static.platzi.com/media/user_upload/image-f8e45e01-2856-4126-90c7-930d1f7d50e0.jpg)

**Ley de las regiones comunes: **Tendemos a separar elementos al percibir limites y áreas.

Ley de proximidad: Agrupamos elementos que están mas cercanos a otros

**Ley de la similitud: **El ojo percibe elementos similares.

**Ley de conectividad uniforme: **Los elementos que estan conectados visualmente que otros sin conectarse.

Densidad proposicional: Relación Diseño y significado.

Capas: Organizar la información en grupos, ayudan a reformar las relaciones.

Jerarquia: Ayuda a visualizar y comprender por su organización

Continuidad: El cerebro completa lo que hace falta.

Organización: Es la arquitectura de información.

Alineación: La colocación de los elementos ayuda a la legibilidad.

Gracias

Es importante resaltar que la organización jerárquica en el diseño es la manera mas simple de agrupar los elementos y que al mismo tiempo es la manera mas entendible para trabajarlos, puede aplicarse en un ámbito de programación compleja o el preciso diseño de gráficos complejos que comprende este principio Asimismo se explica el principio de la continuidad que sugiere que los elementos hacen parte de un proceso mas grande así se presente una pequeña interferencia entre sí, lo que hace que exista realmente

LEY DE LA SIMILITUD
Esta ley establece que tendemos a percibir elementos visuales similares como parte de un grupo o patrón, incluso si no están físicamente conectados entre sí.
.
los elementos que comparten características visuales similares, como forma, tamaño, color o textura, son percibidos como relacionados entre sí y se agrupan en nuestra mente de manera inconsciente.

Algunos de mis apuntes de la clase:


Podría ser proximidad y consistencia

Buenas!! Qué es un wireframe? Entiendo que este es el curso para iniciar desde cero. Agradezco sus respuestas.