UX/UI de Landing Page ready to dev.
Landing Page para site de venda de passagens para a lua. A página contém um pouco da experiência que é estar na lua, com beleza e mistério. O objetivo é fazer com que o usuário se sinta no espaço.
Figma
Preview
Efeitos da Página
1 - Navbar
2 - Lua principal
3 - Seta e círculo
4 - Informações
5 - Linhas
6 - Galeria
7 - Como visitar a lua
8 - Passagens
9 - Linhas 2
10 - Depoimentos
11 - Background
Página Completa
Design System resumido
Efeito HOVER no item do menu: bold.
A lua ficará girando automaticamente em velocidade lenta; O usuário pode segurar e arrastar para interagir com ela.
Os 3 pontos ao redor ficarão circulando a lua.
Círculo estático; Seta com efeito bounce 'clicando' no círculo.
Informações só aparecem quando o usuário clica nos pontos em evidência na lua.
Linhas 1 e 3 rolando para a esquerda.
Linha 2 rolando para a direita.
Hover expande a imagem principal.
Ao clicar no número ou ponto correspondente, aumenta a informação abaixo e diminui a opacidade das demais.
(Exemplo: clicar no "2" expande o texto "Vestir o traje e embarcar na aeronave, semelhante à viagens de avião na Terra".)
Seta com efeito bounce clicando no círculo apenas ao passar o mouse. Além disso, o hover aumentará a opacidade da borda da categoria selecionada.
Linhas 1 e 3 rolando para a direita.
Linha 2 rolando para a esquerda. (Inverso das linhas do nº 5)
Semelhante às passagens. Hover aumenta a opacidade da borda e focaliza o texto do depoimento selecionado.
Efeito 3D/Parallax no espaço.
Estrelas em destaque brilhando e piscando individualmente.
Versão Desktop
Versão Mobile
Wireframe
Tipografia: Ariergard Rondo Book, Regular, Medium & Demibold.
Font size: Logo: 44px, Menu: 22px, Text: 24px, Títulos: 54px.
Cores: #464646, #444444, #262626, #889AC9.
Mais informações e referências direto no arquivo da landing page no Figma.
