top of page

Projetos UX/UI:

logo cashforce.png

Estudo de ui design. Criação de um layout para uma Landing Page, voltada para cadastro de leads e entrega de conteúdo rico (ebook).

download (20).png

O DESAFIO

Neste estudo eu tenho como objetivo criar um layout no formato desktop e mobile de uma Landing Page, com entrega de conteúdo rico (ebook), voltada para cadastro de leads, juntamente com a página de obrigado.

ESBOÇO

Inicialmente eu entrei no site da Cashforce e observei o layout e o design system originais (para eu ter uma ideia de como começar o esboço da landing page em um formato compatível com a identidade visual da empresa). Logo em seguida, coloquei no papel a minha ideia inicial de como eu gostaria que ficasse a landing page, o que me deu a oportunidade de observar a interface inicial de uma forma geral e aplicar melhorias.

download (21).png
download (22).png

WIREFRAME DE MÉDIA FIDELIDADE

Após finalizar o esboço da interface no papel, comecei a desenvolver o wireframe de média fidelidade no figma, organizando onde cada objeto, texto e imagem deveriam ficar.

download (23).png
download (24).png
download (25).png
download (26).png
download (27).png
download (28).png

TIPOGRAFIA + PALETA DE CORES

O estilo tipográfico original da Cashforce foi mantido, pois faz parte do design system da identidade visual da empresa.

A paleta de cores foi selecionada a partir das cores originais do design system da Cashforce.

download (29).png

PROTÓTIPO DE ALTA FIDELIDADE

Com o wireframe de média fidelidade pronto, comecei a desenvolver o protótipo de alta fidelidade. Um dos meus principais objetivos foi deixar a interface limpa, intuitiva e agradável visualmente, para que o usuário possa utilizá-la confortavelmente. Posicionei dois botões para a realização da captura de leads. Um destes botões fica localizado antes da dobra (para que os usuários mais apressados possam preencher o formulário e receber o e-book rapidamente sem precisar ler a página completa). E o outro botão fica no final (para facilitar o acesso de quem leu tudo e está no final da página). Também foi adicionado um temporizador na parte superior e inferior da página para causar a sensação de escassez, fazendo com que o usuário tenha mais um incentivo para preencher o formulário e adquirir o ebook.

DESKTOP:

MOBILE:

Desktop.png
Mobile.png
Formulário Desktop.png
Formulário Mobile.png
Página de Obrigado Desktop.png
Página de Obrigado Mobile.png

ANIMAÇÕES:

CLIQUE ABAIXO PARA TER ACESSO
AO PROTÓTIPO INTERATIVO

botão para whatsapp
bottom of page