10 Efectos para Navegación Web y App

Los efectos de la navegación en una página web o una app juegan un papel importante en la cognición, el aprendizaje y el uso del sistema. Su diseño condiciona la experiencia de usuario, el tiempo de uso y en ultima instancia su éxito.

10 Efectos para Navegación Web
10 Efectos para Navegación Web

Estos 10 efectos para navegación web y app de CodePen sirven como inspiración y base para utilizar ejemplos en nuestros sitios. Además, se puede ver el resultado final, el código empleado para generarlo y también modificarse en vivo para adaptarlo a lo que queramos. Para un diseñador industrial seria como ver los bocetos, planos y renders en un mismo sitio y poder hacer cambios en vivo.

1. Pestañas con animación

Sencilla animación para menús de navegación móvil en pestañas, en el ejemplo se sitúa en la parte inferior, pero se puede colocar en la superior. Destaca la combinación de transición entre los iconos, texto, color y tamaño para indicar la situación.

0

2. Menú de pantalla completa

Un menú de navegación que cubre toda la pantalla mediante una transición, utiliza una capa semitransparente para seguir viendo el contenido. Resulta útil para centrar la atención en la navegación:

0

 3. Navegación tipo panel

Interesante navegación tipo panel que combina colores y transiciones junto a iconos y texto para mostrar un determinado contenido sin tener que cambiar de página:

0

4. Menú desplegable con iconos

Tipo de menú extendido y convencional, resulta un buen método de agrupación de enlaces. El ejemplo podría mejorar si la palabra fuese funcional:

0

5. Slide lateral

El menú de “corredera lateral” se ha extendido en las aplicaciones web e incluso escritorios, ocupa poco espacio y utiliza los iconos como fuente de información:

0

6. Menú dinámico en círculos:

Navegación utilizada en video juegos y apps, resulta cómoda cuando ha de usarse continuamente mientras  hay que prestar atención a la pantalla.

0

7. Navegación Simple tipo “Flat Design”

Buen ejemplo de la estética que predomina en aplicaciones, menús y páginas webs desde hace unos años. Este ejemplo puede utilizarse como base para diseñar menús de apps y webs:

0

8. Navegación por arrastre:

Interesante para menús de móvil y app en el que se navegan las opciones arrastrando la barra superior, la estética es impecable:

0

9. Animación de entrada

Este tipo de navegación se puede utilizar como presentación en la primera visita que un usuario hace de la web, no es recomendable para uso intensivo:

0

10. Desplegable Móvil:

Navegación convencional y práctica muy utilizada en diseño web para resolución móvil:

0

2 comentarios sobre “10 Efectos para Navegación Web y App

No te olvides dejar un comentario