20 de jul. de 2022
Project Overview
Construção de uma landing page de e-commerce para uma loja de café.
Fiz esse projeto para aplicação pra uma vaga de freelancer, então a página não é de um cliente real, apenas uma das etapas do processo seletivo.
Mas, achei interessante colocar no meu portfólio, pois gostei bastante do resultado :)
My Role
Atuei na construção do projeto inteiro.
Design Process
Nesse projeto eu utilizei o meu processo básico de design para landing pages. As etapas desse processo são:
Sketch
Wireframes
Prototype
Design Toolkit
Construí o projeto todo utilizando o Figma.
Sketch
Nessa primeira etapa, eu sempre gosto de desenhar no papel as páginas e fazer anotações sobre os elementos que eu pretendo colocar. Muitas vezes esses sketchs acabam ficando bem abstratos, mas eu gosto de fazer mesmo assim pra esboçar todas as minhas ideias no papel.
Então, seguindo o briefing que me foi passado pela recrutadora, comecei a fazer meus sketchs.
Wireframes
Agora que ja coloquei minhas ideias no papel, eu parto para os wireframes, eles me ajudam a ter uma visualização melhor da página, pois neles eu ja coloco textos do Lorem Ipsum de placeholder.
Quando começo a fazer os wireframes, pode ser que eu n siga fielmente o que desenhei no sketch, pois muitas vezes tenho ideias melhores, já que no wireframe eu consigo ter uma visualização da página mais concreta.
Prototype
Nessa etapa, depois de já ter finalizado o wireframe completo, eu começo a fazer o protótipo de alta fidelidade da página.
Nessa etapa, é muito difícil eu mudar algo do que eu fiz no wireframe, pois as ideias já estão muito mais consolidadas, então eu costumo seguir fielmente o wireframe da página.
E este foi o resultado final:
Você pode ver o protótipo clicando aqui!
Conclusão
Bom, trabalhar nessa página foi uma experiência muito positiva pra mim, pois consegui praticar ainda mais minhas habilidades de design de interface e foi muito legal, já que nunca tinha trabalhado em uma página de e-commerce antes.
Muito obrigado por ter lido até aqui 😊