3 tendências essenciais de design, junho de 2023

Essa é uma grande parte da razão pela qual tantos designers estão reduzindo os menus para estilos mais minimalistas. (Além disso, pode criar um design geral mais limpo e elegante.)

Aqui está o que é tendência em design este mês – e é tudo sobre navegação.

1. Navegação pop-out

Há uma conexão óbvia com a compatibilidade com dispositivos móveis aqui – designs de sites que usam navegação pop-up para todas as resoluções de tela e tamanhos de dispositivos.

Isso é algo que provavelmente não teríamos recomendado alguns anos atrás, mas os usuários estão cada vez mais confortáveis ​​com esse estilo de navegação por causa de sua popularidade em tamanhos de dispositivos móveis.

A semelhança neste elemento de navegação geralmente é um menu estilo hambúrguer. O ícone geralmente fica no canto superior direito, com um logotipo no canto esquerdo. Esse padrão de usuário preferencial mantém a localização do menu completo familiar para os usuários, embora você observe posicionamentos alternativos para alguns sites. (Isso lhe dá alguma pausa?)

O que acontece quando a navegação aparece pode assumir uma ampla variedade de formas e estilos de design. Aqui estão três maneiras diferentes de experimentá-lo:

Rizzardi Yachts exemplifica o uso mais popular de um estilo de navegação pop-out completo, além da localização do ícone de hambúrguer (que está no lado esquerdo aqui). O menu é aberto em uma lista de opções em tela cheia com a marca na parte superior e animações interessantes para incentivar os cliques. Eles também adicionam todas as informações de rodapé comuns na parte inferior da tela pop-up, incluindo ícones sociais e políticas do site.

O TomB usa um elemento de navegação pop-out de tela parcial na versão para desktop que imita o tamanho da navegação móvel. Isso funciona bem para itens de menu com nomes curtos e garante que a parte principal do site e a marca permaneçam visíveis o tempo todo. Você não precisa se preocupar com usuários que não sabem como fechar o elemento de navegação, o que às vezes pode acontecer com sobreposições de tela cheia.

Made by Field quebra todos os ​“regras.” A navegação está escondida dentro de um círculo na parte superior direita da tela. Em seguida, ele se expande para um menu de tela inteira, mas não possui nenhuma marca e é um pouco confuso com um design super minimalista. O que pode ser mais interessante são os estilos de foco. Passe o mouse sobre os itens no lado esquerdo e uma imagem de fundo aparecerá. Passe o mouse sobre os itens à direita e eles terão apenas uma pequena animação sem alterações no plano de fundo.

2. Menus mínimos

Embora os menus mínimos sejam um elemento de design nos exemplos acima, aqui eles assumem um nível totalmente novo. Além de terem uma aparência mínima, muitos desses sites limitam completamente o número de opções disponíveis, criando uma jornada de usuário distinta.

Esse estilo de design para navegação funciona melhor em sites pequenos sem muitas opções ou caminhos para os visitantes seguirem ou sites em que cada página é essencialmente projetada como navegação para a próxima etapa.

O truque para esse tipo de navegação é definir expectativas claras para o usuário. Está claro o que eles devem fazer a seguir? Como eles interagem com o design?

Dior by Starck é um site de rolagem longa de uma página. Isso é parte do motivo pelo qual o menu mínimo – é simplesmente um logotipo, idioma e seletor de som – é suficiente. Ter um longo bloco de texto que é parcialmente obscurecido pela rolagem torna óbvio para o usuário que há mais abaixo da rolagem e incentiva as próximas etapas de interação.

O Magma usa um estilo muito parecido com o que vimos no TomB no primeiro conjunto de exemplos, mas há um pouco mais no menu com a chamada à ação principal ao lado do ícone de hambúrguer. O design de navegação está realmente dizendo aos usuários que a coisa mais importante a fazer aqui é clicar no botão para ​“Reserve uma demonstração”, mas se isso não for para você, há opções de menu adicionais.

Little Big tem um menu mínimo no canto superior esquerdo da página inicial. Existem alguns botões, mas o design do site realmente tem apenas três opções para outras páginas além da página inicial. Os quatro botões restantes levam os usuários para fora do site, mas para canais altamente relevantes para um grupo de música, para que as pessoas possam ouvir ou transmitir suas músicas.

3. Elementos invasores

Essa tendência de design de navegação no site pode ser a mais difícil de realizar, com outros elementos de design ocupando parte do espaço dedicado à navegação. Aqui, você encontrará itens de menu mais tradicionais na parte superior da página, mas outros elementos de design invadem o espaço.

Esta é uma opção visualmente impressionante que combina elementos de design modernos com alta funcionalidade devido a um padrão de usuário comumente aceito.

O design do podcast Works Fine for Me tem uma estrutura de navegação típica de primeira linha com um logotipo, links e um CTA botão, mas o contêiner de fotos azul-esverdeado desce pelo menu. Isso ajuda a chamar sua atenção para a navegação e cria um fluxo visual na tela.

Taby vs Spacje, também um site de podcast, usa um padrão semelhante, mas em vez do elemento invasor vindo de cima, ele se infiltra na navegação de baixo. O elemento de forma é colocado entre os links de texto de navegação e um botão e, na verdade, é recolhido em tamanhos de tela menores para manter a legibilidade de todos os elementos.

Stripe Sessions tem um elemento animado que fica atrás dos itens do menu do meio com um logotipo no lado esquerdo e CTA à direita. A animação colorida leva o olhar para os elementos de navegação no centro da tela, mas o espaço em branco ao redor dos elementos de borda os torna quase mais um ponto focal. Que parte do menu realmente chama sua atenção primeiro?

Conclusão

E alguns meses, notamos tendências dentro de tendências.

Essas tendências de design de menu e navegação são algo que você pode se ver usando? O que é mais relevante para os projetos em que você está trabalhando agora? Esperamos que você tenha encontrado algo útil e funcional para ajudar a manter seus projetos modernos e atualizados aqui.