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.
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.
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.
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.
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.
¡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'.
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.
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.
By
