Migas de pan Ejemplos de diseño web y buenas prácticas

Inspiración – Ejemplos de sitios webAndrian Valeanu – 14 de junio de 2013 – 6 minutos LEER

Las migas de pan son un elemento muy importante en el diseño de sitios web. Para ello, puedes implementar las migas de pan en tus diseños web. Aumenta el estándar de su sitio web y por lo tanto atrae a los espectadores al sitio. Básicamente, se trata de enlaces basados en texto. Normalmente, el tipo de letra de las migas de pan es unos puntos más pequeño que el tamaño del texto original del contenido de la página web.

¿Cuando se construye una página web, cuál debería ser su principal objetivo? Por supuesto, la usabilidad del sitio. Ya sea un sitio educativo, un sitio de comercio electrónico o un sitio informativo, no puede ignorar la importancia de la usabilidad del sitio web.

Los visitantes deben aprovechar la información del sitio de una manera libre de problemas. Si se trata de un sitio de comercio electrónico, los visitantes no deben tener dificultades para encontrar sus productos preferidos. Si encuentran que les lleva mucho tiempo obtener información relevante de su sitio, no dudarán en abandonar el sitio e ir a la página de búsqueda de nuevo para encontrar otro sitio web de la competencia que sea más útil para ellos. Por lo tanto, es importante hacer que el sitio sea útil y eficaz para los visitantes.

Las migas de pan, como su nombre indica, dejan un rastro para que los visitantes del sitio web vuelvan a su destino de forma más sencilla. El nombre está tomado del cuento de hadas «Hansel y Gretel». Las migas de pan son los enlaces de texto que generalmente se encuentran en los sitios web en la parte superior del cuerpo principal de la página; debajo del encabezado o/y cualquier gráfico de banner de la página, pero por encima del contenido. Las migas de pan se planifican de acuerdo con la estructura de la página de su sitio web.

Por ejemplo, si tiene una tienda de comercio electrónico y un espectador se encuentra en una página de frigoríficos, la estructura del rastro de migas de pan mostrará las principales categorías que conducen a la página y de vuelta a la página principal de acuerdo con su orden de aparición en la página. Por lo tanto, los espectadores encontrarán la miga de pan algo así como «Inicio>Dispositivos electrónicos>Aparatos domésticos>Frigoríficos». Este rastro suele basarse en la estructura de carpetas específica del sistema backend del sitio web. El usuario puede ir a cualquiera de las páginas del rastro haciendo clic en el texto. Por ejemplo, si quiere ir a la página de inicio puede ir directamente allí haciendo clic en el enlace «home» del rastro de migas de pan.

Las migas de pan se utilizan principalmente como menús de navegación. Hay varias formas en las que un usuario puede navegar por las diferentes páginas de un sitio web. Los menús de navegación tienen que ser fáciles de usar y sencillos. Por lo tanto breadcrumb es una idea brillante como un menú de navegación.

No sólo como menús de navegación, sino también para la optimización del motor de búsqueda esto es beneficioso. Especialmente en el comercio electrónico, donde la competencia puede ser alta, conseguir una posición alta en los motores de búsqueda es importante. Como las migas de pan se basan en la estructura de carpetas del sitio web, coloca las palabras clave en más lugares de todo el sitio web. Por lo tanto, si «poncho de lana» es un término de búsqueda popular en su industria, las migas de pan crearán un enlace interno más a la palabra clave relevante dentro de su sitio web.

Sin embargo, mientras se trata de los menús de migas de pan, una cosa que necesita tener en su mente, este tipo de navegación debe ser considerada como una característica extra para mejorar el atractivo del sitio y no debe reemplazar los útiles menús de navegación primaria.

Al buscar los diversos tipos de menús de migas de pan en Internet puede encontrar menús de navegación de migas de pan basados en la ubicación, en los atributos y en la ruta.

El componente está elaborado en color negro para que destaque de forma natural sobre el fondo claro y se centre en él. El lienzo texturizado colabora agradablemente con el diseño artístico general. Los enlaces se perciben rápidamente gracias a una tipografía nítida y formal, y los pequeños espacios entre cada elemento contribuyen a la legibilidad.

Order

Mientras que todos los elementos de la UI están marcados por sutiles degradados, las migas de pan, por el contrario, se ciñen a un fondo más limpio y plano. Sin embargo, va bastante bien con los demás y complementa la estética gracias a una coloración similar. El botón de inicio aporta un atractivo clásico. Los tonos brillantes se utilizan para delinear los títulos de manera más eficaz.

Breadcrumbs by Rob Dozier magnetiza con una apariencia extremadamente elegante, limpia y fresca. Aunque la navegación está hecha en un esquema de colores claros, sigue llamando la atención. La sutil sombra proporciona a las cajas en forma de flecha un peso visual adicional, lo que les ayuda a destacar sobre el fondo ruidoso. Para indicar claramente la posición actual, el último elemento se presenta como una simple inscripción.

Breadcrumbs/Error by Jason Mayo es una barra de navegación aerodinámica sin huecos ni elementos impresionantes. Se integra armoniosamente en la composición, convirtiéndose en un detalle esencial de la interfaz de usuario. Sin embargo, un efecto de relieve salva el día. Proporciona a cada bloque y título un aspecto más claro y nítido. El violeta, que forma parte de la paleta de colores primarios, se aplica para resaltar la página real.

Fundamentos del diseño

Allison House se deshace de todos los detalles clásicos en forma de flecha y apuesta por características más simplistas y elegantes. De este modo, el componente tiene un aspecto natural e intuitivo y un fuerte estilo educativo que se requiere para el proyecto. Cada bloque incluye un título que se refuerza con un icono que lo acompaña.

Al igual que el ejemplo anterior, Michal Vasko dispone todos los enlaces en una fila abandonando los detalles gráficos en favor de la tipografía. Los elementos están separados por pequeñas flechas minimalistas que, gracias al color azul, muestran discretamente la dirección. Sin embargo, como el elemento está perfectamente integrado en el diseño y el color gris no contrasta con el fondo, puede perderse fácilmente de vista.

JomSocial Template

JomSocial Template es otra cosa. La navegación de migas de pan tiene un gran peso visual por su tamaño relativamente enorme y su colorido brillante. Llama la atención sin abrumar a los usuarios. Mohd Izuddin Helmi manipula con la tipografía distintiva, la sombra interior, el botón de inicio sólido y algunos gradientes suaves para lograr un resultado impresionante.

Este es un ejemplo bastante básico, pero tiene derecho a existir. Es la forma más sencilla de mostrar a los usuarios sus movimientos a través del proyecto. Aunque carece de un aspecto bonito y necesita algunos retoques, cumple bastante bien su función. Incluye todas las características comunes: títulos, flechas para la dirección e incluso el color de resaltado proporcionando así a los visitantes un asistente de navegación viable.

Gestión de la galería de imágenes

La navegación con migas de pan desprende elegancia y claridad. Tiene un aspecto limpio y detallado que se obtiene del trabajo artesanal con la tipografía, el espacio en blanco y el fondo. El último elemento tiene unas formas de letra más llamativas que las demás para dirigir la atención a la página correspondiente. Aunque la navegación mantiene un aire simplista, tiene encanto y encaja como un guante.

Rediseño de gamerscouch.com

Aaron Moody ha creado con esmero el front-end del sitio web, donde las migas de pan ocupan el lugar que les corresponde y tienen un aspecto pulcro, sofisticado y moderno. La navegación complementa el diseño general y capta el estado de ánimo del proyecto. Los colores oscuros con un toque de naranja cálido perfilan el componente y evocan emociones positivas.

Conclusión

Como ayuda de navegación opcional que no sólo apoya el menú principal, sino que también revela la jerarquía y muestra el camino a la sección actual, las migas de pan son un poderoso instrumento para mejorar la experiencia del usuario.

Sin embargo, por desgracia, a menudo se pasa por alto en términos de diseño, aunque debería tratarse como cualquier elemento común de la interfaz de usuario. Los ejemplos anteriores estimulan a los usuarios a crear migas de pan bonitas e intuitivas que cumplan su misión y no sean una «oveja negra» en el diseño.