Project Overview

Criação de uma landing page para promoção e download do aplicativo Crypto.

Esse projeto é, na verdade, uma continuação do meu projeto anterior, do aplicativo Crypto.

O objetivo aqui era criar uma landing page para download do app.

My role

Desenvolvi o projeto por completo (prototipação e UI).

Design process

Como esse era um projeto mais focado na parte visual, usei apenas algumas etapas do processo de Design Thinking, que foram:

1. Ideate

2. Prototype

Design Toolkit

Utilizei exclusivamente o Figma para esse projeto.

Como comecei o projeto

Quando vou construir uma landing page, sempre gosto de começar buscando inspirações e vendo quais são as tendências de design do momento.

Pra isso, eu costumo visitar sites como dribbble ou o awwwards, eles sempre tem muito material bom pra servir de inspiração.

Como o aplicativo se trata do tema de NFT’s e o estilo dele é mais futurista e tecnológico, estava buscando inspirações nesse sentido, pra conseguir construir uma página que fosse atrativa e não fugisse muito do estilo principal do app.

Sketches

Sempre gosto de colocar minhas ideias iniciais no papel (ou ipad nesse caso) antes de qualquer coisa. Então fiz meus sketches de como eu imaginava a landing page. Esses desenhos me ajudam a ter uma visão um pouco mais concreta das ideias e também me ajudam a não esquecer de nenhum detalhe.

Wireframes

Após minhas ideias estarem desenhadas, eu começo a pensar um pouco melhor nelas e fazer os wireframes no Figma. Os wireframes são importantes para ter uma visão mais clara com relação a viabilidade técnica da página (o que dá e o que não dá pra ser feito).

Style Guide

Para esse projeto eu utilizei o mesmo style guide do aplicativo, com as mesmas cores e tipografia, com o intuito de manter a harmonia visual entre a página e o app.

Resultado Final

Agora, com as ideias mais claras e o style guide definido, comecei a fazer o protótipo de alta fidelidade do aplicativo, usando o Figma.

Nessa landing page, eu queria chamar a atenção do usuário e agregar valor para o aplicativo, então usei bastante ilustrações e cores no estilo ‘neon’ para dar um destaque bem legal para o conteúdo.

Fiz o protótipo da versão Web e da versão Web Mobile, conforme a imagem abaixo.

Protótipo de Alta Fidelidade

Abaixo você poderá navegar nos protótipos desenvolvido, confira os detalhes no Figma e espero que goste!

Você pode ver o protótipo da versão Web, clicando aqui!

E aqui, você pode testar o protótipo da versão Web Mobile!

Navegue nos protótipos e se divirta!

Conclusão

Foi muito legal trabalhar nesse projeto. O fato de poder fazer uma página para divulgação de um aplicativo, foi uma proposta nova para mim, mas que eu gostei muito. Foi uma ótima forma de colocar os conhecimentos e técnicas aprendidos durante o curso de Figma!

Muito obrigado por ter lido até aqui! 🙂