EniunEniunEniunEniun
  • Inicio
  • Blog
  • Cursos
  • Contactar
  • DTD
✕
            Sin resultados Ver todos los resultados

            Elementos de relación: dirección, posición, espacio, gravedad

            • Inicio
            • Diseño y Usabilidad Diseño de interfaces
            • Elementos de relación: dirección, posición, espacio, gravedad
            05/08/2019
            Elementos de relación

            Elementos de relación dirección, posición, espacio, gravedad

            7. Elementos de relación: dirección, posición, espacio, gravedad

            En los dos artículos anteriores vimos los elementos básicos conceptuales que nos permiten crear formas de todo tipo y las características visuales que las definen. Ahora vamos a ver los elementos de relación que nos ayudan a definir la ubicación y la relación entre las distintas formas. Los elementos de relación son la dirección, la posición, el espacio y la gravedad.

            Contenidos del artículo

            Toggle
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 7.1. La dirección
            • 7.2. La posición
            • 7.3. El espacio
            • 7.4. La gravedad

            7.1. La dirección

            Indica la dirección de un elemento con respecto al resto de elementos presentes en el sistema. Se puede utilizar para crear un flujo visual que guíe al usuario a través de la página. Por ejemplo, una dirección diagonal puede crear una sensación de movimiento, mientras que una dirección vertical puede dar una sensación de estabilidad y solidez.

            Elementos relación: Dirección
            Figura 7.1. Elementos de relación: Dirección.

            7.2. La posición

            Define la posición exacta de un elemento respecto a la estructura en el que se encuentra ubicado. Los elementos pueden estar posicionados de manera simétrica o asimétrica. Una disposición simétrica es más formal y puede ser útil para transmitir una sensación de orden. En cambio, una disposición asimétrica puede ser más dinámica y emocionante.

            Elementos relación: Posición
            Figura 7.2. Elementos de relación: Posición

            7.3. El espacio

            Todos los elementos presentes en un sistema ocupan un espacio. Sin embargo, este espacio puede ofrecer diferentes sensaciones en cuanto a su profundidad. El espacio negativo, también conocido como espacio en blanco, puede ser utilizado para dar un respiro al ojo del usuario y permitirle centrarse en los elementos importantes de la página. También puede utilizarse para separar los elementos y crear una jerarquía visual.

            Elementos relación: Espacio
            Figura 7.3: Elementos de relación: Espacio

            7.4. La gravedad

            La gravedad es la fuerza que ejerce sobre los objetos en una página. Gracias a la sensación de gravedad podemos dar diferentes sensaciones a los elementos: pesadez, estabilidad, inestabilidad, etc. Los objetos pueden parecer más pesados o más ligeros dependiendo de cómo se coloquen. Por ejemplo, si un objeto se coloca en la parte superior de una página, puede parecer más ligero que si se coloca en la parte inferior.

            Elementos relación: Gravedad
            Figura 7.4: Elementos de relación: Gravedad

            Como hemos visto, los elementos de relación son esenciales en el diseño ya que permiten crear una jerarquía visual y guiar al usuario a través de la página. La dirección, la posición, el espacio y la gravedad pueden ser utilizados de manera efectiva para crear un diseño atractivo y funcional. Es importante tener en cuenta que cada diseño es único y que estos elementos deben ser utilizados de manera consciente y coherente con el mensaje que se desea transmitir.

            Navegación de entradas

            ← Elementos visuales: forma, medida, color, textura
            Elementos prácticos: representación, significado y función →

            Curso Diseño de interfaces

            • 1. Evolución del diseño web
            • 2. Interacción persona-ordenador
            • 3. Elementos de identificación, navegación, contenidos e interacción
            • 4. Componentes de una interfaz web
            • 5. Elementos conceptuales: punto, línea, plano y volumen
            • 6. Elementos visuales: forma, medida, color, textura
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 8. Elementos prácticos: representación, significado y función
            • 9. Guía de estilo
            • 10. Prototipos
            • 11. Mapas conceptuales, y de navegación
            • 12. Características de una interfaz web
            • 13. Tutorial Figma
            Ver más cursos

            ¡Invítanos a un café!

            ¿Cómo donar?
            Ayúdanos a seguir creando contenido relacionado con la informática y el diseño y desarrollo web en Eniun. ¡Gracias por tu apoyo!
            Eniun

            info@eniun.com
            Reportar un error

            Servicios

            Desarrollo Web
            Diseño Web
            Marketing Digital
            Social Media
            Experiencia de Usuario
            Cursos formativos

            Suscríbete a la newsletter

            Únete a nuestra comunidad para recibir contenido exclusivo y relevante para diseñadores y desarrolladores web.

            Apuntarme

            © 2026 Eniun | Política de privacidad y cookies

                      Sin resultados Ver todos los resultados