Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Construyendo Jerarquía Visual en tus Diseños

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Building Content Hierarchy Through Design
All About Trends in Web Design

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Es importante recordar que la jerarquía no sólo tiene que ver con el contenido y las palabras que tienes en una página. Las imágenes que incluyes en tus diseños, desde fotos hasta iconos, botones y otros elementos visuales que no sean de texto, tienen un gran impacto en la jerarquía y la percepción de tu sitio Web.

Cuando estás diseñando un sitio web las imágenes que utilices ayudarán mucho a establecer el tono del sitio, junto a los colores, la tipografía y más. Si los elementos visuales no se ajustan bien en el sitio, entonces éstos pueden a menudo romper la impresión que deseas establecer.

Neonmob is all about the visuals on their website - and rightly so as it has everything to do with their product Neonmob display their images in a great way though almost semi-realistically as if youre holding the card decks themselves
Neonmob; todo sobre las imágenes en su página web - y con razón, ya que tiene todo que ver con su producto. Neonmob exhibe sus imágenes en una gran manera casi semi realista, como si estuvieras sosteniendo el mazo de cartas mismo. Esto es genial, ya que ayuda a contar más de una historia.

Crear una jerarquía visual buena implica entender cómo usar estos elementos visuales para mejorar la experiencia de los usuarios en tu sitio web, sin romper el flujo del contenido.

Las imágenes son también otra forma de narración que puede ayudarnos a explicarle aún más a nuestros usuarios donde deben ir, lo que deben hacer y lo que pueden esperar del sitio Web. Incluso más que contar historias con contenido, las imágenes son una forma de ayuda muy visual para contarle a tus usuarios tu historia.

El uso de elementos visuales como las imágenes y los iconos también ayuda en la creación formas más emocionantes visualmente  y creativas de atraer la atención de los usuarios, permitiéndote destacar las áreas clave de un diseño que desees resaltar.


Jerarquía Visual por Imágenes

Caminemos a través de unos consejos, los cuales te ayudarán a lograr una fuerte jerarquía visual.

Piensa en el Tono que Quieres Establecer

Las imágenes en tu diseño retratan el tono de tu sitio. Si el estilo que quieres mostraa es profesional, relajado, casual, práctico (o algún otro estilo) entonces debes asegurarte que tus imágenes reflejen eso.

Es importante que utilices imágenes para mejorar tu sitio web, en lugar de tener imágenes para ayudarte a explicar lo que debe hacer el usuario. Un sitio web sin imágenes aún debería ser capaz de contar la misma historia como si tuviese las imágenes en su lugar, ya que las imágenes están ahí para realzar la historia y hacerlo aún mejor. Sin embargo, las imágenes no son una ocurrencia tardía; todavía deben demostrar el cuidado y la atención que debes prodigar en otras áreas del diseño para que funcionen también con tu contenido como puedan.

Hopskoch need to tell their users about their product - and to do that they show it in action This type of strong single visual works well as it helps immediately attract users attention
Hopskoch necesita decirle a sus usuarios sobre su producto - y para hacerlo, lo muestran en acción. Este tipo de obras visuales fuertes, individuales funcionan bien ya que ayudan a atraer la atención del usuario inmediatamente.

Nunca utilices imágenes como un reemplazo para el texto

Nunca asumas que tus imágenes son fáciles de entender. Siempre recomiendo que tus imágenes tengan un título o un subtítulo para ayudarle a los usuarios a entender tu historia y hacer una conexión entre la imagen y el texto. Esto también hace tu contenido accesible bajo circunstancias donde las imágenes talvez sean apagadas.

¿Fotos de Stock o Fotos Personalizadas?

Todo esto depende del estilo de la página web y el diseño que quieras ponerle, pero la decisión es contigo mismo sobre si deseas utilizar fotografías de stock o fotografías personalizadas.

Personalmente siempre pienso que la fotografía de stock puede parecer muy genérica, especialmente si vas por un un aspecto de oficina estándar. Dicho esto, la fotografía personalizada también puede terminar así, particularmente si es tomada de una manera muy casera.

La fotografía personalizada, sobre todo cuando se contrata a un fotógrafo profesional, puede tener un efecto brillante en tus diseños, ya que a menudo te da la fuerza visualque necesitas para levantar un diseño y agregarle algo de contraste.

A veces también puede ser necesaria la fotografía personalizada, tal como es el caso de los sitios de e-commerce, y luego, es importante recordar que necesitas tener fotografía que concuerde con el estilo y la apariencia de tu diseño. De lo contrario se corre el riesgo de tener un sitio web muy bien diseñado y una fotografía impresionante, pero que se siente inconexo cuando se juntan los dos elementos.

Hopskoch also use custom icons to display their product and how it works - if these had been done in a stockdefault style the brand message and look wouldnt have been half as strong
Hopskoch también utiliza iconos personalizados para mostrar su producto y cómo funciona - si éstos se hubieran hecho en un estilo de stock/por defecto, el mensaje de la marca y el aspecto no habrían sido ni la mitad de fuertes.

Se Cuidadoso con Tamaño & Contraste

Una cosa pequeña para pensar es el tamaño de las imágenes que usas. Cuando sea posible, intenta mantener imágenes que funcionen con el ritmo vertical que has creado previamente. Esto entones, a su vez, ayudará a mantener el flujo del contenido en movimiento y no se sentirá que tartamudea o dificulta seguir navegando.

También ten en cuenta que el tamaño real de las imágenes y los elementos visuales que utilices afectará la manera en que se lee el contenido. No quieres crear un contraste demasiado drástico entre el tamaño de las imágenes y el texto, o que se vuelvan ilegibles y romper el flujo totalmente. Dicho esto, por supuesto puedes romper esta regla y donde sea útil para tu diseño tener imágenes más grandes, no dudes en utilizarlas y añadir interés visual a la página.

Fitbit is all about the product - and they use size and contrast to help display their products in action whilst also displaying the other products that they also have
En Fitbit todo es sobre el producto - y utilizan tamaño y contraste para ayudar a mostrar sus productos en acción, mientras que también muestran los otros productos que también tienen.

Usa el Color Para Tu Ventaja

Cuando estás usando elementos visuales en tu diseño, debe haber una razón para ello. Como sea que elijas usar el color, usualmente una de las razones será para llamar la atención en esa parte del diseño o para separarla de la sección previa o siguiente.

Usar el color de esta manera puede ser realmente efectivo y es una forma rápida de asegurar que tus elementos pueden lograr el peso visual que quieres que tengan. Tembién puedes usar el color inteligentemente con elementos que contrasten así puedes ayudar a dirigir la atención hacia lo que es más importante. Jugar con el color de esta manera para ver cómo los colores que usas en algunos iconos, por ejemplo, posiblemente pueden cambiar la percepción y el mensaje que se retrata para ese elemento particular en tu diseño.

Fitbit are one of those companies that seem to get their brand and how they should work with it on the web - they use their colours consistently throughout their website - and also their other online services - and in their badge designs which helps subtly bring the whole design together
Fitbit es una de esas compañías que parecen tomar su marca y cómo se debería trabajar en la web - ellos usan sus colores consistentemente a través de su sitio web - y también sus otros servcios en línea - y los diseños de sus insignias, que ayudan sutilmente a juntar todo el diseño.

¡No te Olvides de la Forma!

La forma es una de esas cosas subestimadas y a menudo olvidadas cuando se trata de nuestros elementos visuales. No te preocupes de jugar con la forma para mezclar las cosas entre tu contenido y tus imágenes. A pesar de que los círculos son muy populares en el diseño hoy en día, tómate la libertad de mirar otras formas y ver cómo las puedes usar en tu diseño. Si es la forma de un icono o la forma en la que visualmente enmascaras una foto, esto puede hacer la diferencia en el impacto que tiene tu diseño.


Patrones Típicos de Jerarquía Visual 

Hay un par de composiciones visuales que nos pueden ayudar cuando intentamos trabajar con una jerarquía visual fuerte. Estas son discutidas con más detalle en los artículos sobre composición, pero aquí son brevemente mencionadas ya que pueden ayudar realmente en pensar sobre la jerarquía visual.

La distribución en Z

El diseño en Z es un esquema compositivo común que se ve en muchos diseños. Se refiere a donde es dirigido el ojo en un patrón sobre un sitio, donde se observa de arriba a la izquierda, hacia la derecha, baja diagonalmente a la izquierda y de nuevo cruza hacia la derecha, con la forma de una letra 'Z'.

The Z-Layout as seen in action on BBC News
El diagrama en Z ha sido visto en acción en BBC News

Proporción Áurea

La Proporción Áurea es bastante conocida en la industria impresa y del diseño. Se refiere a una particular (muy matemática) forma de descubrir cuál es la parte más efectiva de un diseño para colocar un elemento y cómo puede prestar un peso visual particular a esas áreas. Muy similar a la regla de los tercios, el contenido principal se coloca generalmente en la porción más grande de esta sección con el menos importante contenido secundario que se ubica en la porción más pequeña.

The golden ratio seen in action on Twitter Screenshot taken by Ryan Schroeder
La proporción Áurea, vista en Twitter. Captura de Pantalla tomada por Shroeder

Esto puede funcionar muy bien con nuestros elementos visuales también - podemos elegir mostrar las imágenes más importantes en las secciones más grandes junto con nuestro contenido principal, con las imágenes secundarias en las secciones más pequeñas. También podemos cruzar estos dos, posiblemente usando fotos medianas alineadas con otra columna en la cuadrícula y terminadas al final de la sección más pequeña - pero vale la pena totalmente experimentar con ver qué funciona bien en el contexto de tu propio diseño.


Tareas

Ahora deberías saber todo acerca de la jerarquía, en cuanto al contenido y visualmente. Deberías haber jugado con la jerarquía del contenido y ahora quieres hacer lo mismo, pero con los elementos visuales en tu página. Mira que se alineen con tu ritmo vertical, mira cómo puedes hacerlas visualmente más interesantes o contrastar y utilizar las técnicas anteriores para mejorar sus diseños.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.