EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

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

            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

            • 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 →

            Tutorial de 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, 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: color, tipografía e iconos
            • 10. Prototipos web
            • 11. Mapas conceptuales y mapas de navegación
            • 12. Características: usable, visual, educativa y actualizada
            • 13. Tutorial Figma
            • 14. Gestores de contenido: los CMS más utilizados

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados