Todos los diseñadores web pasan por fases luchando con ideas creativas. Es una parte natural del ciclo de creación, pero puede volverse frustrante ya que está atrapado en un proyecto de sitio web durante más de unos pocos días. No hay una solución única para todos. Pero podemos tomarnos un momento para analizar el proceso de diseño de mejores soluciones.
El objetivo principal de cualquier sitio web es guiar a los visitantes a través de sus páginas. Esto se logra a través de una navegación de algún tipo, más comúnmente enlaces. Puede crear barras de pestañas, pancartas, elementos de bloque o incluso hacer flotar un menú de navegación hacia un lado.
Síganos en la guía a continuación mientras observamos las tendencias comunes en el diseño del menú de navegación web. Tanto los diseñadores como los desarrolladores han ideado trucos para acelerar el proceso de creación de sitios web. Y esperamos hacer lo mismo al ofrecer algunos consejos únicos para la navegación de UI.
Planear un esquema de página web
Antes de que comience el proceso de diseño, debe tomarse un momento para considerar los diversos estilos de navegación dinámica disponibles para usted. Es posible que aparezcan submenús desplegables o desplegables desde una barra de navegación o bloque fijo, pero, alternativamente, puede hacer que los subenlaces se deslicen, aparezcan o tal vez ni siquiera necesite sub-navegación. Estas son todas ideas importantes para trabajar antes de sumergirse en Photoshop.
Con el ejemplo anterior, Fork CMS utiliza una navegación de barra superior simple que encaja muy bien. Nada resulta confuso o difícil de encontrar y tiene acceso a todos los importante Información del sitio.
Su situación puede diferir mucho en función del número de páginas importantes de su propio sitio web. Por eso sugiero esbozar un diagrama para construir una idea más sólida de cómo debería funcionar la navegación. Esto podría tomar la forma de un diagrama de flujo, donde dibuja flechas para apuntar hacia la página siguiente en un segmento.
Adjuntando submenús
Como ejemplo, la popular revista de diseño Speckyboy presenta un menú desplegable de navegación secundaria dentro de cada categoría. WordPress puede configurar esto de forma predeterminada, pero aún necesita utilizar alguna forma de jQuery. Mientras tanto, el sitio de juegos de nicho Destiny Islands usa jQuery para un submenú deslizable para cada juego en el área de la barra lateral.
También puede observar que la navegación del encabezado se combina con imágenes de reemplazo al pasar el mouse. Este pequeño efecto es útil si su diseño funciona bien con los botones de enlace de ancho fijo. jQuery es una opción, pero las transiciones CSS3 pueden parecer una alternativa mejor. Tanto CSS3 como JavaScript cuentan con una compatibilidad incomparable en el sistema operativo móvil, pero para los navegadores antiguos, es probable que tenga más éxito utilizando un método basado en jQuery.
Y un submenú tampoco tiene que quedarse dentro de los formatos estándar. Creo que el nuevo diseño de Smashing Magazine lo dice mejor con su pequeña nube de etiquetas. Pase el cursor sobre el ícono junto al logotipo de su sitio y aparecerá un menú de categorías de blog y etiquetas. Tenga en cuenta estas ideas pequeñas pero refinadas para sus propios menús emergentes.
Ajax Tabs
Para contener una gran cantidad de enlaces en un área más pequeña, parte del contenido debe estar oculto de manera predeterminada. Los menús desplegables ocultos son una forma, pero un contenedor con pestañas es otra opción. Y con Ajax puede extraer datos de su base de datos u otra página web de forma asíncrona con cada pestaña diferente en el div.
Los blogs de WordPress son conocidos por este tipo de características. La captura de pantalla anterior de Webdesigner Depot se centra en un widget de barra lateral para extraer los artículos más populares y recientes. Si cree que este método se adaptará a su diseño, es una forma de contener enlaces en un espacio muy reducido.
Si usted va grande, vaya de lujo!
Aquellos de ustedes que frecuentan galerías de diseño probablemente hayan tropezado antes en la página de Coda. Utilizan un área de contenido con pestañas para cargar información dinámica y un área de encabezado con 3 enlaces: Descargar, Comprary Ayuda.
Este es solo un ejemplo perfecto de llevar su navegación web al siguiente nivel. Las letras grandes y en negrita a menudo llaman la atención si se diseñan adecuadamente. Y los efectos de desplazamiento agregado sobre cada área de enlace pegan en el mágico Sensación de todo el trazado. Todo esto sin mencionar los deliciosos iconos enloquecidos por píxeles que aparecen junto a cada bloque grande.
Esta es una visualización muy llamativa de los efectos del sitio web y no siempre será realista dentro del alcance de cada proyecto. Pero para los enlaces de navegación de bajo número es casi mejor aumentar el tamaño un poco. Si solo tiene 3-4 páginas, debe encontrarlas y glosarlas con facilidad. En cuanto a los íconos, hay tantos recursos para revisar que lo más probable es que te encuentres con algo genial.
Normas HTML5
La web ha avanzado mucho desde 2001. En los últimos 10 años, hemos visto enormes avances de innovación entre los técnicos de todo el mundo. Y ahora, HTML5 ha barrido el mundo del diseño con una tormenta que ofrece una declaración sólida y estable incluso para algunos elementos de página complicados.
Un ejemplo es el
etiqueta que está tomando lentamente los formatos de lista desordenados (o incluso unir los dos juntos). Aquí hay una gran pregunta sobre el desbordamiento de pila sobre HTML semántico y el uso correcto del elemento de navegación. Como se cita en la página de especificaciones?El elemento de navegación representa una sección de una página que enlaces a otras páginas o a partes dentro de la página?. 
Un artículo favorito personal publicado a principios de este año se titula Cómo HTML5 cambia la forma en que pensamos en la navegación y expresa muchos beneficios importantes para el cambio de codificación. La confusión básica proviene de tantos desarrolladores que se están acostumbrando a los estándares XHTML y HTML 4.01.
Conclusión
Esta guía se ha centrado más en la semántica y el marcado de la creación de un menú de navegación dinámico. Entre los nuevos efectos de animación CSS3 y la biblioteca de jQuery UI hay toneladas de personalizaciones que puedes construir. ¡El desarrollo web front-end nunca ha sido tan divertido! Y es fácil encontrar grandes comunidades de apoyo para los desarrolladores novatos que simplemente están recogiendo el oficio.
¿Has construido algún sistema de menú dinámico en tu propio sitio web? O tal vez te has encontrado con algunos efectos realmente interesantes en otros sitios web. Háganos saber sus pensamientos e ideas en el área de discusión a continuación.