Principios del Diseño Visual en UX

Digital Wolve's Design & UX.
4 min readNov 24, 2022

--

Hola todos soy Josefina Valls 👓 y soy UX/CX Consultant Specialist en Digital Wolves. Hoy me gustaría hablar sobre los principios del diseño aplicados a la UX. Vamos a ello.

Como diseñadores normalmente no somos conscientes de cómo nuestros conocimientos teóricos se filtran en el día a día de nuestro trabajo, muchas veces pensamos y diseñados tirando de la experiencia, los proyectos realizados o simplemente nuestra imaginación. Aunque sin darnos cuenta muchas veces aplicamos los principios del diseño visual, es bueno repasarlos y refrescarlos, re-entender su significado.

Los principios del Diseño visual que impactan en la UX son los siguientes:

· Proporción o Escala

· Jerarquía visual

· Balance o equilibrio

· Contraste

· Principios de la Gestalt

Principio de proporción o escala: este principio se refiere al uso del tamaño relativo para señalar la importancia y el rango en una composición. Es el principio más usado.

Photo by Maria Teneva on Unsplash

Básicamente se trata de que los elementos de mayor importancia tienen también un tamaño mayor, la idea es que los usuarios puedan reconocer cuáles son, por ejemplo, las noticias más destacadas en un listado de noticias o el producto más nuevo (más vendido o aquel al que se quiere dar más importancia) en un listado de productos.

Principio de jerarquía visual: este principio hace referencia a cómo los diferentes elementos de una página se muestran en orden de importancia.

Esta jerarquía se puede implementar visualmente usando colores, tamaños, posición.

Un ejemplo muy claro de la jerarquía visual es el uso de encabezados de texto (h1, h2, h3) que tienen un significado visual y semántico que marca su orden e importancia.

Photo by Edvard Alexander Rølvaag on Unsplash

Principio de balance o equilibrio: El principio de equilibrio se refiere a una disposición satisfactoria o proporcional de elementos de diseño. Tenemos equilibrio cuando todos los elementos se distribuyen de forma equitativa en un diseño y esto no es necesariamente simétrico.

El equilibrio puede ser:

· Simétrico: los elementos se distribuyen simétricamente en relación con un eje imaginario central

· Asimétrico: los elementos se distribuyen de forma asimétrica en relación con un eje central

· Radial: los elementos se irradian desde un punto común central en una dirección circular.

El tipo de equilibrio a utilizar depende de lo que se quiera transmitir: la simetría es estática y da una sensación de tranquilidad, la asimetría es dinámica y puede resultar muy atractiva ya que crea una sensación de movimiento y energía, el equilibrio radial llevará la mirada al centro de la composición donde deben estar el elemento o los elementos más importantes.

Photo by Elena Mozhvilo on Unsplash

Principio de contraste: este principio se refiere a la yuxtaposición de elementos visualmente diferentes para transmitir el hecho de que estos elementos son diferentes (por ejemplo, pertenecen a categorías diferentes, tienen funciones diferentes, se comportan de manera diferente). En otras palabras, el contraste proporciona al ojo una diferencia notable (por ejemplo, en tamaño o color) entre dos objetos (o entre dos conjuntos de objetos) para enfatizar que son distintos.

El ejemplo más claro que podemos ver en web es el del color.ç

Photo by Ivan Bandura on Unsplash

Principios de la Gestalt: Los principios de la Gestalt explican cómo los seres humanos simplifican y organizan imágenes complejas que constan de muchos elementos, disponiendo subconscientemente las partes en un sistema organizado que crea un todo, en lugar de interpretarlas como una serie de elementos dispares. En otras palabras, los principios de la Gestalt captan nuestra tendencia a percibir el todo en oposición a los elementos individuales.

· Principio de similitud

· Principio de proximidad

· Principio de simetría

· Principio de continuidad

· Principio de dirección común

· Principio de simplicidad

· Principio de igualdad o equivalencia

· Principio del cerramiento o del cierre

En Wikipedia los explican maravillosamente bien 😊

Photo by Rafael Leão on Unsplash

Todos estos principios son importantes no solo para que nuestra web o app sean “bonitas”. El uso de estos principios de forma consciente da como resultado diseños más fáciles de usar y también mucho más atractivos.

--

--