35 sitios web con barras laterales creativas y hermosas

¿Cuánto tiempo llevas pensando cómo hacer que tu barra lateral sea más atractiva? Debes haber enfrentado el gran problema de aburrido y aburrido. diseños de barra lateral. En este artículo, encontrará una descripción general rápida de las características de la barra lateral superior. Además, le ofrecemos una gran colección para alimentar su creatividad.

Componentes de la diseño de la barra lateral:

  1. Altura y peso
  2. Paleta de color
  3. Tipografía
  4. Posición

Esta lista nos ayudará a descifrar todo. Entonces, el primer problema a resolver es la barra lateral Talla. Este elemento debe construirse de acuerdo con el contenido de la página. La barra lateral no debe ser demasiado ancha, suele ser unas tres veces menor que la sección de contenido principal. El límite es la mitad, o el 50%. Luego, la altura: una barra lateral es genial cuando es completamente visible por encima del pliegue. Sin embargo, ¿podrías pensar cómo debería ser para la versión móvil? Olvídese de las barras laterales en su sitio web móvil, porque si divide la pantalla del iPhone en dos columnas de contenido, los usuarios no verán nada.

adherirse a lo simple color combos, cuando diseñas una barra lateral. Lo sé, suena controvertido, porque estamos tratando de hacer que su barra lateral sea más prominente. Pero piense: incluso si colorea una barra lateral en rojo, se notará, pero puede irritar a los usuarios. Es mejor hacer una barra lateral en tonos tranquilos, pero haz acentos a través de las imágenes, las fuentes y, finalmente, el contraste.

Tipografía es importante, y no quiero aburrirlos con todo esto de por qué y es así (lo saben con seguridad). Me gustaría decir otra cosa: puedes cambiar todo el aspecto de la barra lateral si eliges la fuente correcta y, lo que es más, hazla un poco más grande que el texto principal. Es la manera correcta de resaltar cualquier cosa que tengas en esta sección.

Posición de la barra lateral suele ser izquierda o derecha. Ya hemos mencionado el concepto Fold, que también es esencial para la posición de la barra lateral. Las barras laterales izquierdas ganan más atención. Es fácil de explicar: leemos de izquierda a derecha, por lo que todo lo de la izquierda cae primero ante nuestros ojos. Sin embargo, las barras laterales derechas parecen ser comunes y se usan con más frecuencia. Esto puede provocar que los usuarios que vienen de otros sitios miren primero en el lado derecho (por la fuerza de la costumbre). Ambas posiciones tienen sus pros y sus contras, por lo que debes tener en cuenta tu público objetivo, tu contenido y tu objetivo. Estos factores le ayudarán a tomar una decisión.

En cuanto a contenido de la barra lateral, se sale de las reglas y estereotipos. Puede usar una barra lateral como navegación a través de su sitio web, como una forma de alentar a nuevos seguidores, anunciar cualquier cosa, categorizar el contenido web (por ejemplo, Tienda), mostrar contenido reciente, etc.

Esa es la teoría, y probablemente pienses ‘finalmente’. Ahora, verá una impresionante colección de sitios web con varios tipos de barra lateral. Estos son diseños de barra lateral con diferente posición, combinación de colores, tipografía y, por supuesto, contenido. Hay barras laterales del menú de navegación, las que alimentan la comunicación con los usuarios en las redes sociales, anuncios, categorías de tiendas y más.

Barras laterales creativas en diseño web

Blog Smoke & Croak con barras laterales multicolores dibujadas a mano

Además de una barra lateral tenue normal debajo del pliegue, hay tres barras laterales bien hechas encima del pliegue. Estos elementos parecen estar dibujados a mano y con diferentes crayones. El propósito de cada barra lateral varía, así como el contenido. Mientras que el primero ofrece una suscripción a un boletín informativo, el otro ofrece un libro electrónico gratuito y el último anuncia el estudio de música.

Sitio web de Eat Drink Inc con barra lateral de navegación no estándar

Aquí, la barra lateral del menú de navegación incluye iconos, no solo texto. Por ejemplo, hay una imagen de vaca.

Sitio web de FLIPP con barra lateral izquierda para navegación

Esta es una barra lateral de menú bastante regular, pero es de gran tamaño y con un logotipo genial.

Diseño de sitio web en blanco y negro de Goltz Group con barra lateral de navegación

Este menú de navegación está diseñado con un efecto ligeramente transparente.

Sitio web de diseño de lienzo web con barra lateral de navegación creativa

Este menú de navegación de la barra lateral consta de pestañas de iconos con función de deslizamiento lateral.

Plantilla web de hipotecas con barra lateral naranja para tarifas

Aquí, la barra lateral permanece destacada en el lienzo gracias a un color naranja brillante.

Sitio web de Osborn Barr con barra lateral desplazable

Esta barra lateral sirve para la navegación, pero también presenta un bloque desplazable con imágenes.

Sitio web de LS5 con barra lateral de navegación derecha

Esta es otra variación del diseño del menú de la barra lateral.

Sculpt Communications Website con elegante diseño de barra lateral en gris

El sitio web incluye una barra lateral bien diseñada en un esquema de color sobrio y profesional.

Blog de Tripexpert con barra lateral de Tweets

Hay algunas barras laterales que usan diferentes ideas. Por lo tanto, hay una mini presentación de diapositivas de imágenes, una barra lateral de contenido reciente y una con los últimos Tweets del blog.

EVA Air Boeing 777-300ER con barra lateral de navegación original

Este sitio web encanta con su música de fondo, pero también tiene un brillante diseño de barra lateral. Está hecho en un agradable tono verde y las pestañas del menú son tanto ilustraciones como texto.

Tercer sitio web elevado con barra lateral de archivo de blog

Otro diseño de sitio web con dos barras laterales. El de la izquierda no tiene nada especial que mencionar, sin embargo, la barra de la derecha se puede desplazar y contiene bonitas imágenes junto con texto.

Tienda en línea Vision Direct con barra lateral de categorías de productos

Este sitio web le muestra cómo categorizar su catálogo de productos dentro de una barra lateral.

Sitio web de WebAppers con una gran barra lateral bien diseñada

Este sitio web rico en contenido tiene barras laterales de dos columnas. Estas son en realidad barras laterales separadas, una es más estricta con solo líneas de texto y la otra muestra banners publicitarios coloridos.

Demostración Mesacreativa Blog con Photostream Sidebar

Una secuencia de fotos está bien presentada en este sitio web minimalista y limpio con barra lateral.

Sitio web de Lauren Vidal con barra lateral para navegación y boletín informativo por correo electrónico

Esta barra lateral izquierda ofrece a los usuarios navegar por el sitio web y suscribirse a los boletines.

Sitio web de CHEF con la barra lateral principal del menú de la semana

Los sitios web de alimentos pueden implementar barras laterales a su manera y este es un ejemplo. Los visitantes de un sitio web de este tipo estarán encantados con este hermoso diseño de barra lateral que presenta la entrada del menú superior con la foto y el ícono de precio rojo.

Sitio web de información de entretenimiento ISO con pestañas de menú de navegación en la barra lateral

Aquí hay una barra lateral de menú más para su inspiración.

Sitio web de Candy’s Cupcakes con barra lateral de fans de Facebook

La barra lateral con fans de Facebook es una idea brillante para atraer a más personas a unirse.

Plantilla de sitio web de marketing con barra lateral bien diseñada

Esta es una barra lateral bien presentada en un diseño web comercial.

Diseño de cartera de la agencia Ciquattro con Nice Sidebar

Una barra lateral de menú con función desplegable está aquí para usted.

Sitio web de la Universidad de Cornell con barra lateral de noticias

Esta es una barra lateral informativa en el lado derecho de la página.

Ballard diseña un sitio web con una hermosa imagen en la barra lateral

¿Estás buscando una barra lateral lacónica, pegadiza y visualmente agradable?

Sitio web de muebles modernos con barra lateral de Facebook

Las barras laterales de las redes sociales son bastante populares en la web.

Sitio web de salón con barra lateral precisa de seguimiento de redes sociales

Esta es una barra lateral de seguimiento perfecta (porque es concisa).

Eric Garcetti con la barra lateral de inicio de sesión

Los sitios web políticos también usan barras laterales.

Blog de noticias de América con barra lateral de artículos recomendados

Además de una barra lateral de anuncios, hay una barra lateral de múltiples pestañas con contenido popular, más reciente, comentarios y etiquetas.

Sitio web de Time con barra lateral rica en contenido

Echa un vistazo a estas barras laterales diseñadas para un sitio web de noticias.

Sitio web de Fox Sports con gran diseño de barra lateral

Debe desplazarse mucho hacia abajo para ver todas las barras laterales de este sitio web. Sin embargo, todos están en su lugar y el desplazamiento no hace daño.

El sitio web de The Daily Board con barra lateral manuscrita

Una barra lateral con fuentes escritas a mano es genial en este sitio.

Sitio de PlayMag con barra lateral ilustrativa en negro

Esta barra lateral negra con imágenes circulares no es más que hermosa.

El sitio web de Pink Plumber con la barra lateral del formulario de preguntas

Este sitio web rosado invita a los usuarios a dejar un comentario (hacer una pregunta) a través de este excelente formulario de barra lateral.

Cofa Media Website con Cool Social Media Sidebar

La barra lateral de redes sociales lacónica se encuentra en la parte inferior de esta página web.

Sitio web de Infule con barra lateral de suscripción de curso gratuito

El color verde claro se elige bien para una barra lateral.

Sitio web Adsy con barra lateral animada creativa

¡Estar atento! Las ardillas en esta barra lateral se mueven.

Conclusión

Esta colección es solo una pequeña selección de los cientos de sitios web diversos con barras laterales que se presentan en la web. Deje un enlace a sus ejemplos en la sección de comentarios a continuación. ¡Y no te olvides de compartir tus ideas en la publicación!

0 Shares:
Te Recomendamos