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.

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.

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»fjBxv» default_tab=»result» user=»VlaFiser»][/codepen_embed]

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:

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»KHDEI» default_tab=»result» user=»pwsm50″][/codepen_embed]

 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:

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»AGoBq» default_tab=»result» user=»bery54″][/codepen_embed]

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:

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»IzAvx» default_tab=»result» user=»Jeplaa»][/codepen_embed]

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:

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»aBGAy» default_tab=»result» user=»EduardL»][/codepen_embed]

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.

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»tmCqK» default_tab=»result» user=»charlie-volpe»][/codepen_embed]

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:

[codepen_embed height=»268″ theme_id=»0″ slug_hash=»adnoH» default_tab=»result» user=»Jeplaa»][/codepen_embed]

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:

[codepen_embed height=»268″ theme_id=»0″ slug_hash=»bNdMwZ» default_tab=»result» user=»fbrz»][/codepen_embed]

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:

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»smEFC» default_tab=»result» user=»mallendeo»][/codepen_embed]

10. Desplegable Móvil:

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

[codepen_embed height=»300″ theme_id=»0″ slug_hash=»sAxJy» default_tab=»result» user=»berdejitendra»][/codepen_embed]