El principio de proximidad en el diseño web
Recientemente tomé una viejo libro de diseño que no había tocado en un tiempo, y me recordó un principio de diseño que muchos de nosotros pusimos en práctica probablemente solo inconscientemente, si es que lo hacemos.
El libro trata sobre el diseño para impresión, pero pensé que sería un gran tema para debatir en el contexto del diseño web.
El principio de proximidad requiere que los elementos relacionados se agrupen visualmente, creando menos desorden y creando un diseño más organizado. Los elementos que no están relacionados entre sí deben colocarse más separados, para enfatizar su falta de relación.
Discutiré los detalles y algunas formas en que esto se puede implementar de manera efectiva, pero esta definición debería ser suficiente para lo que discutiremos en este artículo.
El uso correcto de la proximidad, junto con otros principios de diseño, tiene un gran impacto en la experiencia del usuario y, en última instancia, en el éxito general de un sitio web.
No temas el espacio en blanco
El primer paso para implementar correctamente el principio de proximidad es comprender la importancia del espacio en blanco en el diseño.
La falta de espacio en blanco es un problema común en los diseños de aficionados. El diseño es un medio de comunicar información, y cuando los aficionados intentan transmitir un mensaje a través del diseño, su inclinación natural es distribuir el contenido de manera uniforme para llenar el espacio, sin pensar demasiado en el potencial de un espacio en blanco bien organizado.
El espacio en blanco puede afectar el comportamiento del usuario tanto, si no más, que el contenido real en la página. El espacio en blanco guía los ojos del usuario en la dirección deseada, crea contraste y deja una impresión duradera.
Aunque el sitio web de W3Avenue anterior contiene una cantidad considerable de contenido (con artículos en numerosas categorías, como cualquier blog de diseño) y una serie de anuncios de la barra lateral, no agobia visualmente al usuario.
La sala generosa en el encabezado y los elementos espaciados adecuadamente en las áreas de contenido y barra lateral contribuyen a este aspecto limpio y organizado. W3Avenue no está haciendo nada particularmente único con su contenido, pero su diseño probablemente contribuya a la fuerte tráfico se pone en una corto periodo de tiempo .
Así que no se inseguro sobre el espacio vacío en su diseño. Usar correctamente el espacio en blanco es el primer paso para implementar el principio de proximidad y, por lo tanto, hacer que el diseño sea más atractivo visualmente.
Elementos relacionados visualmente grupales
El espacio en blanco, sin embargo, es solo una parte de la implementación de la proximidad. Un diseño puede tener una gran cantidad de espacio en blanco, pero si los elementos no están agrupados correctamente , el espacio en blanco tendrá poco efecto, como se ilustra en las dos tarjetas de presentación a continuación:
La tarjeta de la izquierda no está desordenada; tiene un poco de espacio en blanco. Pero los elementos no están lógicamente agrupados, por lo que el efecto es débil.
El lector se ve obligado a escanear la tarjeta varias veces. La carta de la derecha, sin embargo, tiene un efecto visual más agradable. El lector simplemente tiene que echarle un vistazo para tomar la información (más sobre esto más adelante).
La agrupación de elementos en la tarjeta de la derecha también es más lógica . En el primer conjunto de elementos vemos el nombre de la compañía en letra grande con la ubicación debajo de él. El segundo conjunto nos dice cómo obtener información sobre los servicios prestados (es decir, número de teléfono y dirección del sitio web).
Este ejemplo ilustra la importancia de la proximidad en el diseño de impresión, y una idea similar se puede utilizar para los elementos en el diseño web, como se muestra en la captura de pantalla a continuación.
Aunque el sitio web de Arora Designs no es complejo ni pesa demasiado, su uso del espacio en blanco y la separación visual de los elementos agrupados son efectivos. Cabe señalar aquí que "espacio en blanco" no tiene que ser blanco; puede ser cualquier espacio vacío entre elementos, independientemente del color.
En el caso de Arora Designs, aunque el espacio en blanco tiene color, cumple el mismo propósito de separar visualmente las áreas de encabezado, navegación y contenido.
Creando Jerarquía Visual
Usar el espacio en blanco de manera efectiva y agrupar los elementos relacionados es fundamental para darle a su sitio web una jerarquía visual clara. Por supuesto, la arquitectura del sitio web y el flujo de información son la base de la proximidad efectiva .
La jerarquía se transmite por la forma en que los elementos se agrupan y se sub-agrupan.
Esta jerarquía ayuda al usuario a comprender dónde han estado y hacia dónde quieren ir y, por lo tanto, ayuda a comunicar el propósito del sitio web. Una lista es un buen ejemplo de un elemento que tiene el potencial de comunicar jerarquía visual, como se demuestra en la siguiente imagen:
Con solo echar un vistazo a las dos listas anteriores, sin siquiera examinar el contenido, verá que la lista de la izquierda tiene una jerarquía visual clara, que muestra las relaciones entre los elementos (los elementos sangrados son subcategorías de los elementos principales).
Esta jerarquía no sería posible sin espacio en blanco (incluido macro y micro espacio en blanco). La lista de la derecha es solo una agrupación aleatoria de elementos sin aparente relación o jerarquía.
Implementar este principio en un sitio web con algo tan simple como una lista HTML es fácil. El desafío es utilizar este principio como un factor guía en la construcción del sitio web, desde la etapa de planificación y wireframing hasta el diseño.
Diseños que son fáciles de escanear y leer
El contenido organizado en una jerarquía y agrupado lógicamente es más fácil de leer y escanear .
Los encabezados, por ejemplo, deberían permitir al usuario escanear indicando claramente los puntos principales. Huelga decir que el contenido debe planificarse desde el principio para reflejar una jerarquía visual adecuada; la lista anterior con los elementos sangrados es un ejemplo pobre, porque el contenido no coincide con la jerarquía visual.
Un sitio web que utiliza la proximidad en su arquitectura y diseño no abruma al usuario con información.
Entonces, aunque es relativamente fácil implementar los principios de proximidad en sitios web que son livianos en contenido, la proximidad es mucho más importante en sitios web ricos en contenido.
Los sitios web de noticias son buenos estudios de caso de este principio. A continuación se muestra una comparación de Los Angeles Times y el Globo y Correo .
En general, el sitio web de LA Times tiene un diseño agradable principalmente debido a la elección del color y la tipografía. Pero también tiene un aspecto limpio y ordenado, especialmente en la sección de encabezado.
El logotipo es grande y se destaca, contribuyendo de manera efectiva a la marca del sitio web. El objeto más cercano al logotipo es la barra de navegación horizontal a continuación. Como la barra de navegación es oscura, contrasta con el logotipo.
Los enlaces de texto que se encuentran arriba del logo están ordenados con mucho espacio entre las dos secciones. La alineación a la izquierda del contenido en el encabezado también contribuye a la apariencia limpia.
Cada bit de información en el encabezado de LA Times está agrupado con elementos relacionados, a excepción del logotipo, que es independiente. Nada en el encabezado te confunde o hace que te preguntes dónde pertenece.
¿Qué pasa con el sitio web de Globe and Mail, que se muestra a continuación?
El sitio web de Globe and Mail tiene una sección de encabezado compleja que no implementa el principio de proximidad.
La única cantidad significativa de espacio en blanco está en el centro, al lado del logotipo, que no logra nada. Dos anuncios aparecen en el encabezado, lo que contribuye al desorden. Los anuncios pueden ser necesarios por razones financieras, por lo que los problemas son comprensibles.
El mayor problema es la sección desordenada sobre el anuncio de banner grande. No hay una distinción clara entre los elementos en esa sección.
Tres líneas verticales punteadas intentan separar el área en cuatro secciones, pero el primer separador no tiene ningún sentido. De hecho, esa sección probablemente sería más atractiva si se eliminaran los separadores de puntos.
Las grillas ayudan con la proximidad
Una forma de agrupar elementos y usar espacios en blanco de manera apropiada es comenzar con una cuadrícula .
Desde una mirada superficial a los sitios web de LA Times y Globe and Mail, solo LA Times parece haber basado su diseño en una grilla, o al menos utilizó principios basados en grillas en la etapa de planificación. El sitio web del Globe and Mail muestra poca evidencia de un formato de cuadrícula.
Un diseño basado en cuadrículas, con tamaños de canalización adecuados, permite mucho espacio entre las secciones y, en muchos casos, obliga al diseñador a implementar principios de proximidad sin siquiera pensar en ello.
A continuación se muestran capturas de pantalla de dos sitios web que han empleado el Sistema de red 960 . Ambos son bastante simples (es decir, no pesados en contenido como los sitios web de noticias discutidos anteriormente), pero muestran que las cuadrículas dan a los elementos de la página espacio para respirar, lo que le da a cada sección su propio hogar visual.
Usuarios principales en el camino correcto
Otro beneficio importante de la proximidad es que ayuda a los usuarios a navegar por un sitio web sin retrasos u obstáculos innecesarios. Cuando la navegación principal está claramente separada de los otros elementos en la página, se encontrará al instante y es menos probable que se olvide.
La jerarquía visual adecuada a través de la proximidad ayuda a los usuarios a profundizar en su sitio web sin preocuparse de dónde han estado o hacia dónde se dirigen.
Siempre se sentirán cómodos y accederán a las secciones más importantes de su sitio web de manera rápida y eficiente.
Los diseñadores web con poca o ninguna experiencia en diseño de impresión podrían beneficiarse enormemente de los principios que los diseñadores de impresión han estado poniendo en práctica desde años antes del auge de la web.
La proximidad no es el único principio de diseño que ayudará a un sitio a ser más útil y agradable a la vista, pero es un factor importante a tener en cuenta por muchas de las razones que acabamos de mencionar.
Otras lecturas
- Conceptos básicos de diseño: el principio de proximidad
- ¿Cómo es CRAP su diseño de sitio?
- Uso de agrupación en diseños de página web
Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Webs impresionantes , donde publica artículos y tutoriales sobre diseño web. Puedes seguir a Louis en Twitter o ponte en contacto con él a través de su sitio web .