Diseños atractivos de menú en diferentes páginas webs

Diseño de ilustración vectorial sobre menu web

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. 

Letras blancas sobre fondo negro en el menú de la página web de Sam Goddard

Sam Goddard

https://samgoddard.co.uk/

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
Captura de pantalla del menú de la página web "Stripe"

Stripe

https://stripe.com/es-us/pricing

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ú
Rectángulos de colores en el menú de la página web de "Sandbox Films"

SandBox Films

https://www.sandboxfilms.org/

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
Captura de pantalla del menú de la página web "Pier 70"

Pier 70

https://pier70sf.com/

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
Captura del menú de la web de "Spine Group"

Spline Group

https://www.splinegroup.ca/

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
Menú de la web "Le Petit Salon"

Le petit salon

https://www.lpslyon.fr/#

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
Menú de la página web "Omnisend"

Omnisend

https://www.omnisend.com/

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én pequeñ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
Menú de la página web de Rogue Studio

Rogue

https://rogue.studio/

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
  • Efecto hover al posicionarnos en las palabras
Letras rosas sobre fondo azul en el menú la web de Collage Studio

Collage Studio

https://collagestudio.ca/en

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
Letras blancas sobre fondo negro en el menú de la web "Discovery Land Company"

Discovery Land Company

https://discoverylandco.com/

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
Captura de pantalla del menú de la web "Aquest"

Aquest

https://www.aquest.it/it

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.

Qué es lo más atractivo de este menú

  • Diseño elegante y sofisticado
  • Tipografías minimalistas y finas
  • Detalles azules sutiles muy llamativos
  • Menú hamburguesa a pantalla completa
Letras doradas sobre fondo azul en captura de pantalla del menú de la web "Swab the world"

Swab the world

https://swabtheworld.com/en/

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
Menú de la página web "Koox"

Koox

https://koox.co.uk/about/

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
Letras blancas sobre fondo violeta en captura de pantalla de la web "Web Effectual"

Web Effectual

https://webeffectual.com/

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.

¿Qué es lo más llamativo de este menú?

  • Su diseño con colores saturados y llamativos
  • Efecto hover al movernos por sus opciones
  • Sencillez en su contenido
Captura de pantalla de la web "UX design"

UX design

https://ux-design.agency/

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.

Que nos llamó la atención de este menú

  • Diseño sencillo y muy discreto
  • Fondo negro y tipografías blancas que contrastan
  • Menú a pantalla completa
Fotografía de mujer con el pelo rizo en captura de pantalla de la web "The stylist group"

The stylist group

https://www.thestylistgroup.com/

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

Como ves, hay mucha variedad donde inspirarte aunque, si lo tuyo no es el Diseño Web, o bien no tienes tiempo de ocuparte de estas cosas, te invito a visitar el artículo sobre los factores a considerar en el precio de una página web.

Si no sabes cómo contratar al mejor diseñador web, echa un vistazo al post en el que te revelo todos los secretos.

Imagen del autor

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...

Leer más y ver todos los artículos de este autor

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario