Exercício 2-Praticando Design-UI de interface Aplicativo Mercado Livre
Esta postagem trata-se de mais um exercício solicitado pela IronHack na construção do trabalho de pré-work, na semana 0 do bootcamp de UX and UI Design.
Nesta proposta a solicitação era para escolher algum aplicativo na appstore que mais gostasse para reproduzir o mesmo em alguma ferramenta de desenho de telas como Sketch (para apple) ou Figma (para windows).
Como sou usuário de Windows PC, optei pelo uso da plataforma do Figma que é excelente por sinal, achei extremamente intuitiva com uma interface muito amigável de trabalhar, no qual se pode aprender facilmente diversos comandos e usabilidades, possibilitando entregar um trabalho muito bonito visualmente com poucos clicks.
Tentei seguir uma linha de raciocínio na execução da tarefa utilizando as principais ferramentas solicitadas na teoria, como figuras simples, círculos, quadrados, linhas, setas e etc.
Além disso utilizei o método de cópia de fontes para tentar me aproximar ao máximo da tela original do produto, utilizei o site do Adobe fontes que é excelente para pesquisas pois contém uma função muito interessante na pesquisa por imagem no qual podemos recortar um pedaço do produto e fazer uma pesquisa rápido por fontes mais parecidas, segue link:
Utilizei também na execução comandos como sombra e desfoque, além de utilizar muito a ferramente de pique conta gotas de cores para copiar as cores exatas do original.
Escolhi o aplicativo do Mercado Livre para executar a cópia pois utilizo muito esta plataforma para pesquisar produtos que desejo comprar, ver opiniões de outros usuários, analisar preços de mercado, vender meus produtos usados e etc. Acho um aplicativo excelente e um ótimo facilitador no meu dia dia.
Fiz uma sequência de cinco telas simulando o processo de compra de um produto pelo usuário sem finalizar.
Levei em consideração um usuário já cadastrado e logado com endereços de envio já configurados.
Logo abaixo inicio a sequencia de telas que fiz sempre com a imagem original do lado direito e a desenhada do lado esquerdo.
Tela 1: apresentação e escolha do produto.
Tela 2: ao tocar no botão comprar.
Tela 3: definição de tipo de endereço
Tela 4: escolha do método de pagamento do produto.
Última tela: usuário deve inserir dados de um cartão de crédito não cadastrado no sistema:
Com esta sequência o usuário finalizaria o processo de compra do produto.
Achei muito legal desenhar estas telas e me familiarizar muito mais com o figma, além disso gostei bastante do resultado final, levei cerca de 04 horas executando a tarefa.
