La navegación de la página es sin duda el aspecto más importante de cualquier sitio web construido correctamente. La facilidad con que sus visitantes pueden viajar de página a página afectará la emoción general y la interfaz de usuario de su sitio web.
Los grandes diseñadores web siempre guardan una sorpresa en cada esquina, y los menús de navegación pueden mostrar este gran momento. Desde enlaces de página completa hasta esquinas, he compartido algunos ejemplos excelentes de navegación inusual en sitios web. Es de esperar que estas ideas puedan incitar un aluvión de creatividad dentro de ustedes y en cualquier proyecto futuro.
Algunas animaciones de lujo
Cuando Adobe (Macromedia) Flash dominaba la web, no era raro ver extrañas animaciones de navegación. Pero estos cayeron a un lado cuando los estándares HTML / XHTML comenzaron a desarrollarse en la última década del 2000. Desde entonces, hemos visto un aumento espectacular del soporte para los efectos HTML5 y CSS3, así como el soporte completo del navegador para JavaScript y, lo que es más importante, jQuery.
Los chicos de jQuery han hecho una animación web personalizada para niños. Cualquiera que entienda lo básico de los scripts puede modelar un gran sitio web en torno a biblioteca jQuery y salir con una respuesta absolutamente positiva. A continuación, he incluido una captura de pantalla de Cooper Design, que ofrece una brillante sorpresa para su navegación.
A medida que haga clic en los enlaces superiores, se le enviará volando horizontalmente sobre la página a través del efecto jQuery. Alternativamente, esto abrirá un submenú con categorías basadas en su página de encabezado. ¡Al elegir entre estos, también notará que los efectos de página se desplazan verticalmente!
Su sitio es un tablero de animaciones de rompecabezas que ofrece una sorprendente demostración del poder en el diseño web actual. Alternativamente, puede desplazarse verticalmente como es normal y hacer una transición entre las páginas a la izquierda / derecha haciendo clic en las columnas una al lado de la otra.
Otro sitio, Janette D. Council presume de una navegación única que reorganiza los elementos de su cartera en función de los datos de consulta. Con la configuración predeterminada verá todos los proyectos, pero puede orientar individualmente el trabajo de impresión, logotipo e ilustración.
Además, sus imágenes e información del sitio se abren en la misma página. ¡Esto significa que si está ejecutando soporte completo de JavaScript, nunca necesitará volver a cargar su navegador! Concedido, una inspección más detallada de su código muestra que no hay páginas alternativas para que rastree Google. Esto no es totalmente malo, ya que toda la información de la página se guarda estrictamente en un archivo.
Toma de control de la página completa
Cuando pienses en una navegación de página inusual, estos próximos ejemplos deben llevarte el trofeo a casa. heartshapedwork es aparentemente una cartera completa que se ejecuta a través de WordPress. Al ingresar a su página de inicio, notará grandes barras horizontales en cascada en la página. Todos estos muestran grandes efectos de desplazamiento y llevan a artículos externos y tomas de cartera.
Notará que cada barra tiene el título del proyecto en letras en negrita con un subtexto que contiene el tipo de trabajo desarrollado. Esto incluye sitios web, ilustraciones, dispositivos móviles y más. Su portafolio es exhaustivo y en realidad es bastante divertido hojearlo.
Otro gran ejemplo es el sitio de Work Life Balance Center. El centro fue fundado en 1991 y ha visto algunas actualizaciones de su sitio web en ese momento. Actualmente ejecutándose en Flash, todas sus funciones de navegación aumentan el objeto de navegación enfocado actualmente.
Por lo tanto, a medida que navega, observará barras grandes que se centran en páginas individuales y subpáginas con enlaces incluidos. Estos enlaces no van a ningún sitio en particular, solo lo arrastran a través del diseño de Flash. Curiosamente, este efecto se vio anteriormente en el sitio web de Cooper, todos construidos con jQuery.
Grip Limited es posiblemente otro epítome de la navegación de página a pantalla completa. Al cargar el sitio, notará que las barras se despliegan para mostrar nueva información y enlaces de páginas. Puede hacer clic en los encabezados de cada barra para contraer el contenido y mostrar más espacio en la pantalla.
Quizás no sea el mejor uso de la navegación, aunque sea absolutamente único. En la parte superior hay un bar titulado. Menú abierto que deja caer aún más enlaces delante de tu cara. Estos incluyen las páginas centrales de la empresa y los enlaces de estudios de casos.
Diseños oscuros
Cuando realmente empiezas a examinar la web, muchas carteras se destacan como simples arcanas. Yuna Kim tiene una cartera personal que realmente adquiere una vida propia. Ella ha construido toda la navegación a través de jQuery y posicionamiento CSS.
Para cada elemento del portafolio, ella ha denotado un símbolo para representar el trabajo del proyecto. Cuadrado para trabajo digital, Triángulo para marca y Círculo para impresión. A medida que se desplaza hacia abajo, notará que cada enlace del proyecto es una forma colorida que marca su trabajo.
Además, su navegación de encabezado se despliega a medida que te mueves a través de los enlaces superiores. Las tres opciones Hola, Tweetsy contactos Mostrará diferentes contenidos en función de donde se encuentre. Para ser más específicos, los tweets y contactos eliminarán la misma información: su última actualización en Twitter junto con el correo electrónico y el contacto telefónico. hola ofrecerá una breve introducción a Yuna Kim y su sitio web. ¡Cosas muy interesantes!
Big Kid es un blog que ejecuta WordPress que muestra bloques individuales de contenido. Puedes revisar su sitio por ti mismo para ver lo que quiero decir. La navegación no es muy común, aunque es bastante inusual para el diseño de un blog. Gran parte de todas las publicaciones son actualizaciones de la cartera que puede ordenar.
Lo que realmente me gusta es la individualidad implícita con su diseño. Es casi el uso más exclusivo de patrones de bloque que he visto en la web. Desde la perspectiva de la experiencia del usuario, es muy fácil desplazarse por todo y ordenar el trabajo del proyecto en función de los intereses personales. También es un sitio web muy ligero, que se carga rápidamente en muchos de los navegadores que probé (incluidos Internet Explorer y Safari para Windows).
Galería del sitio
Como hay muchos estilos de navegación raros e inusuales que cubrir, he reunido una pequeña galería de mis favoritos personales.Estos sitios web presentan estilos extraños con los que nunca me he encontrado en ningún otro lugar de la web.
La popularidad del diseño de sitios web incómodos ha aumentado dramáticamente en los últimos años. Los diseños de página extraños e inusuales, junto con la consideración de una interfaz de usuario adecuada, han estimulado algunos grandes proyectos. Si conoce diseños similares, ofrezca sus ideas en la sección de discusión a continuación.
Amore
Amore cuenta con un fondo de colores. Rápido de cargar, la navegación de la página se presenta directamente en la alineación inferior central. A medida que se mueve desde cada bloque, el área se expande para incluir texto informativo sobre la página. Toda su información se abre en una ventana de la caja de luz, lo que evita el problema de volver a cargar cada vista de página.
Rejilla organica
Michael McDonald es el creador de Organic Grid, todo construido sobre Flash. La aplicación tarda un poco en cargarse en conexiones más lentas, pero creo que realmente apreciará su estilo de diseño. Cada área de navegación aparece como una barra horizontal que le lleva a una pantalla de portafolio de página completa. Aquí hay mucho trabajo por hacer y los elementos visuales mejorados apelan de manera brillante al diseño de UX.
TinyTeam
Lo que más me gusta de TinyTeam es su creatividad en la construcción del sitio. No hay gráficos adicionales o ilustraciones llamativas, y su fondo azul sólido es maravilloso para limitar las distracciones. Otro sitio creado en Flash que demuestra cuán único puede ser el menú de una página. Al hacer clic en el cuadro central se abrirá un nuevo conjunto de opciones para navegar por la cartera de su empresa.
LoveBento
A primera vista, LoveBento no es fácil a la vista. Hay mucho contenido para consumir y no hay navegación directa. A lo largo de la parte superior derecha encontrará paneles desplegables, pero los elementos reales se encuentran a lo largo del lado izquierdo. Debajo del logotipo de la empresa, encontrará una muestra única de imágenes que se utilizan para representar los enlaces emergentes. Además, hay enlaces numerados en la parte inferior derecha para maniobrar entre páginas.
Lucuma
Aquí hemos encontrado otro uso próspero del desplazamiento horizontal. Sus efectos se construyen bajo la biblioteca jQuery. Lucuma también tiene enlaces debajo de su área de contenido central que ofrece validación de XHTML y CSS. Al diseñar carteras para la web aquí, ¡realmente son negocios!
Andreas smetana
El escaparate de la fotografía de Andreas realmente lleva la palabra inusual a la vanguardia. Una vez que la página esté completamente cargada, recibirá una notificación que explica cómo recorrer su galería de miniaturas. Usando la rueda de desplazamiento del mouse o las teclas de flecha, puede maniobrar entre las muchas categorías de fotografías. En la esquina inferior izquierda hay otro pequeño conjunto de enlaces de menú que se abren en el lado de la página en la que se encuentre. ¡Con buena pinta!
cypher13 Design Studio
Aquí llegamos a otro estudio de diseño con una cartera correspondiente ambientada en un tema en blanco y negro. El diseño está creado con HTML / CSS y utiliza los efectos de animación de jQuery para la transición entre los elementos de la cartera. Lo bueno aquí es lo elegante que se vuelve cada movimiento. Te sientes con gracia ofrecido una guía mientras navegas por su cartera. Es posible ordenar los elementos según el cliente y la categoría, o aprovechar su barra de búsqueda que muestra los resultados en tiempo real.
Salida de estudio
Studio Output trae una nueva característica en su pantalla de cartera. La página de inicio cuenta con un hermoso collage de imágenes de proyectos en las que se puede hacer clic para mostrar más información en un efecto de caja de luz. Ofrecen muchas y muchas imágenes de ejemplo e incluso muestran proyectos relacionados cuando es posible. Aquí he recortado una pieza de su portafolio de algunas ilustraciones y gráficos de Spongebob.
Duane king
El portafolio de Duane King es otro excelente ejemplo de soporte para teclado. Una vez cargado en la página de inicio, puede desplazarse entre los segmentos hacia la izquierda y hacia la derecha con las teclas de flecha. Puede hacer clic en un proyecto para ampliar la imagen y mostrar un poco más de información. Este también es otro ejemplo en el que los elementos de la cartera no se cargan en una nueva página, realmente aprovechando la biblioteca jQuery y los complementos destacados.
Sideshow Press
Lo que realmente me gusta de Sideshow Press es su uso de una marca (#) entre las páginas. Esto indica a los motores de búsqueda que todo el contenido nuevo no se carga en una página nueva, sino que se controla dinámicamente a través de JavaScript. En este caso, estamos viendo una aplicación Flash, pero esta es la razón por la que la técnica funciona tan bien. La navegación de la página ofrece algunos efectos de animación coloridos en el estado de hover. Cada transición de página también muestra un efecto deslizante, altamente único y compuesto perfectamente.
Conclusión
Espero que hayas disfrutado de estos ejemplos de técnicas de navegación inusuales y que te hayan inspirado para crear tus propios experimentos únicos.
Si conoces algún menú de navegación loco que hayamos omitido, ¡deja un comentario con un enlace a continuación para que podamos comprobarlo!