Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Business

Anatomía de un sidebar perfecto – los matices de un buen diseño

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Anatomy of a Perfect Sidebar.
Anatomy of a Perfect Sidebar – Introduction and Using the Right Layout

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En las partes anteriores de esta serie, vimos la definición y la importancia de elemento 'sidebar' en los blogs creados con WordPress y revisamos las maquetaciones con una, dos, tres y cuatro barras laterales o 'sidebars' (y también sin ellas).

En esta segunda parte, vamos a ver cómo diseñar un sidebar y cómo ordenar dentro de ella los elementos - en concreto, los widgets.


Diseñar el sidebar perfecto

Una de las razones principales por las que los visitantes no prestan atención a los sidebars se debe a su deficiente diseño. Otros motivos serían el uso de demasiados o muy pocos elementos, mostrar contenido aburrido y poco interesante y la mala organización de los elementos, y aspectos similares.

Descuidar el diseño de tu sidebar provocará un menor porcentaje de páginas vistas, un menor ratio de clics sobre los anuncios, tasas de conversión y de ventas inferiores. Incluso aunque no estés esperando ningún ingreso de tu sitio WordPress y solo esperes que la gente lea tu contenido, todavía deberías diseñar adecuadamente tu o tus sidebars para ser capaz de guiar a tus usuarios mediante los elementos de navegación de tu sidebar.

Vamos a ver tres factores principales inherentes a todo buen diseño de sidebar: dimensiones, colores y fundamentos tipográficos.

Anchura y altura del sidebar

The width of our own sidebar

El sentido común para la anchura del sidebar consiste en reducir su ancho en comparación a la anchura del área de contenido principal. Esto es lógico puesto que el contenido principal es casi siempre el elemento más importante de una página web y un área de contenido estrecho en sidebars amplios restaría énfasis al contenido.

Una anchura entre un 20 y un 40% suele ser la mejor opción cuando sólo tenemos un sidebar, pero si vas a usar más de uno, te sugiero que no excedas una anchura total de más del 50% (20% + 20% o 15% + 35%, por ejemplo).

Cuando sólo tenemos un sidebar, también puedes usar la proporción de oro, en la que el sidebar tiene una anchura de alrededor de un 38% respecto a la anchura del contenido principal. Puedes encontrar más información sobre la proporción de oro en el artículo The Golden Ratio in Web Design escrito por Jarel Remick.

En cuanto a la altura, a excepción de "the fold", no hay mucho que discutir. "The Fold" es la línea inferior de la pantalla del usuario, el punto en el que el usuario tiene que hacer scroll para poder ver el resto de la página. Yo solía aconsejar a mis clientes que intentasen mantener la altura de manera que la parte inferior del sidebar quede por encima de esta línea, pero debido al gran número de dispositivos distintos que existen (en consecuencia, tamaños de pantallas) y a que la gente está muy acostumbrada ya a realizar desplazamientos, la vida por debajo de la línea inferior de la pantalla ya no constituye un gran problema.

Dicho esto, deberías tener en cuenta que los elementos "above the Fold" son los primeros elementos que verán los usuarios. Hablaremos sobre esto al final, "Ordenar los elementos del sidebar".

A propósito, deberías tener cuidado en no exceder la altura del área de contenido principal. Si los sidebars son más altos que el contenido, el conjunto de la página tendrá un aspecto muy feo.

Uso de colores e imágenes

An extremely colorful sidebar

¿Recuerdas el lema de diseño "menos es más"? Bueno, podemos interpretarlo también como "más es menos".

Los colores pueden tanto producir el efecto de atraer como de distraer. Si usas tantos colores como en el sidebar de arriba, ninguno de estos feos y coloridos elementos atraerá mucha atención - conseguirán menos atención.

Pero si usas unos pocos colores en algunos elementos (sobre los que necesitas llamar la atención de los usuarios), conseguirás dirigir la atención hacia ellos eficazmente. Necesitas recordar que para destacar un widget, tendrás que restar relevancia a otros. El "contraste" es la clave aquí.

No obstante, las imágenes pueden ser una excepción. Mientras que todo lo que he mencionado anteriormente se aplica también a los elementos gráficos, las fotos se podrían usar para atraer la atención de forma independiente a los elementos. Pero como puedes imaginar, excesivas imágenes también distraerán al usuario - este es el motivo por el cual tus anuncios podrían o no pasar desapercibidos en el diseño de tus sidebar.

Te sugiero que, si puedes, uses imágenes atenuadas en tu sidebar, que recobren su definición cuando hacemos hover sobre ellas. Intentalo, comprueba si esto tiene buen aspecto o no.

Tamaño de las fuentes y alineación de los elementos

Font sizes and alignment of sidebar elements

La tipografía siempre es importante en el buen diseño. Una buena tipografía podría bastar para que tu página web tenga un buen aspecto.

En los sidebars que diseño, me gusta ajustar el tamaño de la tipografía de manera que sea un poco mayor al tamaño de la fuente del contenido principal, alrededor de entre un 10 y un 20% mayor. Llamará la atención pero no distraerá al usuario del contenido principal — el usuario verá lo que quiera ver, y eso es lo que pretendemos. No olvides que en ocasiones un texto pequeño podría resultar también atractivo.

También me me gusta centrar los titulares y alinear el texto del cuerpo principal a la derecha, pero puedes - y deberías - hacer cualquier cosa que creas que encaja en tu diseño. Mientras no tenga un aspecto desordenado e incoherente, estará bien.


Ordenar los elementos del sidebar

Incluso aunque tengas dos o diez elementos en el sidebar, deberías considerar como crucial la organización de esos elementos. Si se hace bien, aumentará los clics y las ventas, ¡pero si lo haces mal podría acabar siendo un desastre!

Piensa en los elementos importantes que deberían ser vistos ineludiblemente por todos los usuarios, y en aquellos de menor importancia que no es necesario que vea cada persona que visita tu sitio web.

Por ejemplo: mientras los formularios de suscripción y los botones o los artículos más populares o recientes son considerados "importantes", no podemos decir lo mismo sobre las listas de comentarios recientes o los blogrolls. Una vez hayas identificado los elementos importantes, pueden empezar a ordenarlos y conseguir un sidebar bien organizado.

Además, deberías tener en cuenta la línea inferior de la pantalla ("the Fold", ¿recuerdas?): ¿Qué elementos deberían ocupar la parte superior y cuáles la inferior? Ubicar en la parte superior los elementos más relevantes (como un formulario de suscripción y un listado con las entradas más populares y probablemente un anuncio) te beneficiará tanto a tí como a tus usuarios.


Conclusión

No creo que debes seguir reglas estrictas para lograr un buen diseño, pero siempre existen "pautas" que te ayudarán a crear mejores diseños. Esta serie es una de esas guías con pautas y espero que la hayas disfrutado.

¿Tienes algo que quieras añadir o que puedas mejorar? ¡Comparte tus ideas con nosotros a través de un comentario!

Advertisement
Advertisement
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.