top of page

2024 / UI estudo de caso

Meta

Lading Page Meta Quest 3.

Estudo de caso UI para o Desafio Design Boost 2024 (criado pelo Design Boost e UX Unicórnio) utilizando ferramenta Figma.

O Meta Quest 3 é o óculos de realidade virtual e aumentada da Meta. Ele conta com uma imersão completa em realidade mista com interações inovadores e mais realistas.

Meu papel: design e interações com Figma

Contexto.

O Design Boost lançou um desafio de UI para elevar o portfólio dos interessados na área. O desafio foi guiado ao desenvolvimento de landing page de um óculos virtual da Meta para exercitar as possibilidades de estudos e criação de layout.

Projeto.

O desafio foi desenvolver, em 4 dias, um estudo de nova landing page (focado em UI) para o lançamento do Meta Quest 3, criando novas interações e destacar o produto como a opção de melhor custo-benefício no mercado e que se sobressai também em termos de  tecnologia avançada e funcionalidades. Capturar a atenção dos consumidores para a compra do produto.

Resultado.

Uma nova solução em design de interface para landing page em versão desktop e mobile.

Capa.png
Estudos e testes

Para desenvolver a landing page, foi passada pelos criadores do Desafio um roteiro de fluxo de informações para o projeto. O foco estava em criar o UI do projeto.

Nesse processo foram pesquisados benchmarks de diferentes marcas e sites para busca de inspiração nas interações e layout, sem perder a identidade da marca já vista no site da Meta. 

Em seguida, desenhei um "rabiscoframe" com as seções e formas de layout que funcionariam para as informações.

Após os desenhos, eu ainda tinha dúvidas sobre algumas interações de seções e, por isso, fiz alguns estudos alterando layouts para avaliar leitura e hierarquia de informações.

 

Com os estudos realizados, montei o wireframe e depois comecei o UI de alta fidelidade para desktop. 

Construí alguns componentes e variações. Com o desktop finalizado, desenvolvi a versão mobile que precisou de algumas adaptações em questão de interações, por conta do device, sem fugir da visão geral do projeto.  

Responsividade

Foram pensadas as versões desktop e mobile e desenvolvidas no Figma com interações para melhor se adaptar do device.

Para o desenvolvimento do projeto, foram usados recortes do vídeos de lançamento oficial da marca.

figma desktop e mobile.png
bottom of page