Una de las maneras más fáciles e intuitivas de navegar dentro de las páginas webs es a través de los diferentes menús. Es por eso que te hemos recopilado algunos de los más creativos e interesantes menús para que puedas apreciar sus diseños e inspirarte.
El primer ejemplo es el menú de un portafolio. El diseño resulta realmente interesante por las inmensas letras con los nombres de los proyectos esquinadas a la izquierda y el sencillo efecto hover al pasar por encima de ellas que destaca los nombres y deja visualizar una pequeña imagen del proyecto.
¿Qué es lo más llamativo de este menú?
Diseño llamativo con un trabajo de color a banco y negro
Tipografía impactante y grande para los títulos que conforman el menú
Efecto hover sencillo al pasar por encima de los títulos de los proyectos
Para este caso tomamos el ejemplo del menú del header. Al posicionarnos encima de los títulos desplegamos todo el contenido al que tenemos acceso a través de él.
Uno de los elementos que lo hace más creativo son los íconos que acompañan a cada uno de ellos, muy coloridos y con una estética acorde al diseño de la página web.
Detalles interesantes de este menú
Menú grande y organizado en el header de la web
Se despliega al posicionarnos en cada uno de los títulos
Íconos coloridos y atractivos para los contenidos del menú
En este caso nos encontramos con un menú hamburguesa posicionado en la esquina superior derecha que al tocarlo accede al contenido del menú con un diseño en pantalla completa.
Al acceder nos encontramos con un fondo gris y unos atractivos rectángulos de colores para cada una de las secciones del menú que delimitan las informaciones. Además, resulta muy interesante el efecto hover que destaca cada uno de los títulos agrandando sus tamaños y alargando la dimensión del rectángulo.
Qué nos encantó en este menú
Muy atractivo por tratarse de un menú que despliega la información a pantalla completa
Diseño sencillo pero colorido para delimitar los distintos títulos de las opciones del menú
Efecto hover atractivo al posicionarnos encima de cada una de las opciones
Este menú, bastante sencillo, lo encontramos al acceder al botón llamado ‘’menú’’ con un signo ‘’+’’ ubicado en la esquina superior izquierda de la home page. Al entrar nos encontramos con un menú a pantalla completa con su contenido agrupado en el lado izquierdo y con un fondo conformado por un patrón de colores atractivos.
¿Por qué nos ha gustado este menú?
Diseño sencillo, con un fondo colorido y tipografías grandes y altas que llaman la atención
Menú a pantalla completa
Accedemos a él a través de un botón llamado menú en la home page
Nos encontramos esta vez con un menú al que accedemos nuevamente al presionar el botón de ‘’menú’’ pero esta vez desplegamos un pantalla grande y negra que se superpone a la home page y ocupa poco más de la mitad de esta.
El diseño es súper sencillo pero muy profesional. La combinación de fondo negro, letras grandes y finas y poca información hacen de este menú uno de los diseños más minimalistas.
Lo más atractivo de este menú
Al acceder desplegamos una gran pantalla negra con un diseño minimalista y profesional
Se utilizan tipografías finas, sencillas y blancas que contrastan con el fondo negro del menú
Se incluyen enlaces e información de contacto útil
En este caso tenemos uno de los menús más creativos y fuera de lo común de la lista ya que al acceder a él entramos en una pantalla en la que todo el contenido y títulos de las opciones del menú se encuentran animados en un constante y lento movimiento y con las palabras repetidas en forma de franja horizontal.
Qué detalles hacen a este menú uno de los más interesantes
Tipografía construida a líneas que le brinda un gran atractivo al diseño de las palabras
Animación que mantiene a lo títulos en constante movimiento
Palabras repetidas de manera horizontal a lo largo de toda la pantalla
Para este caso te dejamos uno de los menús más grandes de la lista. Al posicionarnos encima de algunos de los títulos desplegamos su contenido y podemos apreciar no solo las opciones a las que accedemos, si no tambiénpequeños gráficos explicativos, íconos y muchísimo más contenido.
Qué hace a este menú realmente genial
Sus grandes dimensiones al desplegar las opciones de cada pestaña son muy impresionantes
Incluye íconos, gráficos y muchísimo contenido dentro del propio menú
Gran organización por lo que es muy funcional a pesar de su gran contenido
Aunque pudiera parecer que este menú se encuentra oculto es fácil acceder a él por ser el tipo de menú de opciones de los ‘’tres puntitos’’ o ‘’3dots’’.
Al acceder podemos visualizar una ventana con no solo unas geniales animaciones de movimiento en las palabras del menú, sino que además estas se encuentran repetidas y varían sus tipografías de una manera muy creativa y original.
¿Por qué este es uno de los menús más creativos que hemos encontrado?
Animaciones atractivas con las palabras del menú
Tipografías diferentes y contrastantes para cada una de las palabras repetidas en los títulos
Nos encontramos aquí con un menú hamburguesa diseñado con cuatro y no tres líneas al que podemos acceder de manera sencilla y desplegamos un menú a pantalla completa.
El diseño es muy sencillo, se trata de un fondo sólido con todo el contenido centrado en el medio de la pantalla con una tipografía sencilla y sutil. Su estilo es muy minimalista.
Qué es lo más llamativo de este menú
Estilo minimalista muy agradable, con un fondo sólido y tipografías sencillas
Menú a pantalla completa con la información y contenido centrado en la pantalla
Se trata de un menú hamburguesa con un diseño de cuatro y no tres líneas, lo que lo hace particular
Este menú hamburguesa demuestra que a veces lo más sencillo puede ser también muy poderoso. Al acceder visualizamos un fondo negro con los títulos del menú en blanco de la manera más sencilla y minimalista posible, y es precisamente esto su principal encanto.
Qué hace a este menú estar en esta lista
Diseño minimalista y muy sencillo, pero con un gran atractivo
Efecto hover muy sutil al pasar por los nombres de las opciones
Este menú posee un estilo elegante y profesional. Esto podemos verlo al acceder a sus opciones y ver su estilo minimalista y sofisticado acorde al diseño de toda la web. Se trata de un menú hamburguesa al que accedemos en una pantalla de fondo gris y tipografías muy finas, con pequeños detalles azules realmente muy encantadores.
Este menú hamburguesa está diseñado de una manera muy minimalista. Primeramente, accedemos a él con un ícono de dos líneas y no de tres como suele ser habitualmente en este tipo de menú.
Al acceder nos encontramos con una pantalla con un fondo sólido y todo el listado de las opciones centradas en el medio de la pantalla. Este diseño minimalista encuentra un gran punto llamativo en la combinación y contraste de dos colores muy atractivos.
Qué podemos destacar de este menú
Diseño sencillo, pero con colores muy atractivos y contrastantes
Menú hamburguesa minimalista con un diseño de dos líneas en vez de tres
A este sencillo menú hamburguesa entramos con el correspondiente ícono saliente desde el extremo derecho. Luego de acceder se despliega una pantalla con una leve transición muy atractiva que muestra las opciones del menú.
A este menú podemos acceder desde cualquier pantalla y su diseño es muy sencillo y minimalista.
Que llama la atención de este menú
Su sencillez y minimalismo en el diseño
Accedemos a él a través de una leve y atractiva transición
Una de las cosas más llamativas de este diseño de menú son sin duda los colores saturados y estridentes que se han utilizado como parte del diseño de toda la web. Su estructura es de las más sencillas pero los contrastes de colores y el efecto hover al movernos por encima de los elementos lo vuelven atractivo y diferente a todo lo demás.
En este caso, el visible menú hamburguesa se trata de la página de contactos de esta web. Al acceder podemos ver una pantalla negra con la correspondiente información de contactos y enlaces de este tipo de contenidos, diseñado con tipografías blancas de una de las maneras más sencillas que podremos ver.
Este menú, ubicado en el header de esta web podemos desplegarlo y cerrarlo accediendo al botón con el ícono de menú hamburguesa y de esta manera damos acceso a una pequeña barra con todas las opciones y posibilidades de desplazarnos por la página.
Su diseño es sencillo: negro y blanco y minimalista, y su funcionamiento es uno de los más intuitivos, garantizando un excelente responsive design.
Lo más interesante de este menú
Diseño sencillo y minimalista
Funcionamiento intuitivo y sencillo
Alejandra González Arteaga
Alejandra González Arteaga se graduó en diseño gráfico en el Instituto Superior de Diseño (ISDi) de La Universidad de La Habana. Ejerce como diseñadora principalmente en la rama de ilustración para libros infantiles en el medio físico y digital, así como el diseño editorial y edición de d...
