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
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/Preview%201.jpg?raw=true&raw=true)
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/preview%202.jpg?raw=true&raw=true)
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/1%20-%20Navbar-Menu.jpg?raw=true&raw=true)
Efeito HOVER no item do menu: bold.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/2%20-%20Lua%20principal.jpg?raw=true&raw=true)
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.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/3%20-%20Seta%20e%20c%C3%ADrculo.jpg?raw=true&raw=true)
Círculo estático; Seta com efeito bounce 'clicando' no círculo.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/4%20-%20Informa%C3%A7%C3%B5es.jpg?raw=true&raw=true)
Informações só aparecem quando o usuário clica nos pontos em evidência na lua.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/5%20-%20Linhas.jpg?raw=true&raw=true)
Linhas 1 e 3 rolando para a esquerda.
Linha 2 rolando para a direita.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/6%20-%20Galeria.jpg?raw=true&raw=true)
Hover expande a imagem principal.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/7%20-%20Como%20visitar%20a%20lua.jpg?raw=true&raw=true)
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".)
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/8%20-%20Passagens.jpg?raw=true&raw=true)
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.
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/9%20-%20Linhas%202.jpg?raw=true&raw=true)
Linhas 1 e 3 rolando para a direita.
Linha 2 rolando para a esquerda. (Inverso das linhas do nº 5)
![](https://github.com/vitorgaioso/Visit-Moon/raw/main/media/10%20-%20Depoimentos.jpg?raw=true&raw=true)
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.