30 de ago. de 2022
Project Overview
Criação de um aplicativo para compra e venda de NFT’s, feito durante um curso de Figma ministrado por Felipe Santana.
Nosso objetivo no curso era simples: aprender a utilizar a ferramenta FIGMA.
E como projeto do curso, tínhamos o desafio de criar um aplicativo para compra e venda de NFT’s.
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:
Ideate
Prototype
Design Toolkit
Usei exclusivamente o Figma para esse projeto.
Como comecei o projeto
Iniciei esse projeto buscando entender melhor sobre o tema, para isso fiz uma Desk Research e pesquisei mais a fundo referências, sites, artigos, vídeos e tudo que me fizesse emergir e entender sobre NFTs.
Foquei principalmente na UI nesse projeto, desenvolvendo algo mais conceitual e futurístico com foco em utilizar as habilidade e técnicas desenvolvidas.
Confira abaixo algumas informações do processo para criação do aplicativo.
Ao analisar um site referência nesse assunto, OpenSea. Identifiquei oportunidades de melhorias significativas na Hierarquia da Informação buscando uma melhor experiência do usuário.
Sketches
Sempre gosto de colocar minhas ideias iniciais no papel antes de qualquer coisa. Então fiz meus sketches de como eu imaginava o aplicativo. 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 no papel, 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 do aplicativo.
Esboço do fluxo
Style Guide
Antes de começar a desenvolver o protótipo, eu sempre costumo pensar no style guide do projeto. Então, sempre defino as cores, tipografia e tipografia primeiro.
Fluxo e prototipação eficaz
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.
Aqui abaixo já em alta fidelidade eu utilizei uma técnica de “Componentizar um Componente”, nesse caso fiz na Barra de Navegação, com o objetivo de diminuir as linhas e melhorar a visualização e organização do fluxo de prototipação, auxiliando em novos ajustes e mudanças de maneira mais rápida e fácil.
Protótipo de Alta Fidelidade
Abaixo você poderá navegar no protótipo desenvolvido, confira os detalhes no Figma e espero que goste!
Você pode ver o protótipo clicando aqui!
Navegue no protótipo e se divirta!
Conclusão
Trabalhar em cima desse projeto foi algo totalmente novo pra mim e algo muito legal. Confesso que foi desafiador, nunca tinha feito nada nesse estilo mais futurista, mas gostei muito do resultado final.
Foi um excelente modo de colocar em prática todo conteúdo aprendido durante o curso, que foi simplesmente perfeito.
Muito obrigado por ter lido até aqui! 🙂