Recebi o desafio na empresa onde trabalho, Guarani Sistemas, de criar algumas telas de uma Pokédex para o processo seletivo de uma vaga de Desenvolvedor Flutter Pleno.
As telas precisavam corresponder exatamente aos dados contidos na API, caso contrário não seria possível apresentá-los na UI.

Este projeto foi realizado em conjunto com um dos desenvolvedores front-end da empresa, Gustavo Murdiga, que desenvolveu brilhantemente uma versão em NEXT.JS, que vocês podem conferir nesse link Pokédex.

Nesse processo, os esboços esquemáticos ganham interatividade, permitindo simular a experiência do usuário. Os protótipos são versões simplificadas e navegáveis da interface, oferecendo uma visão tangível de como os elementos funcionarão. Isso possibilita testar fluxos de navegação, interações e validações antes de investir tempo em design visual detalhado, ajudando a refinar a usabilidade e identificar ajustes necessários.
Nesta etapa, selecionei cores, tipografia e elementos visuais alinhados à identidade da marca. A paleta de cores e a tipografia foram escolhidas de acordo com a marca Pokémon para criar consistência. Além disso, elementos visuais como ícones e ilustrações foram escolhidos para reforçar a estética da interface, estabelecendo uma conexão entre a marca e o usuário.
E então transformei a visão conceitual em realidade. Criei mockups detalhados que capturam a aparência final da interface. Cada elemento visual, ícone, botão e espaço de conteúdo é cuidadosamente projetado para oferecer uma representação precisa da experiência do usuário. Isso permite que as partes interessadas visualizem o produto final, enquanto guia os desenvolvedores na implementação precisa do design.
A última fase foi a de transformar os mockups em telas de alta fidelidade e garantir a consistência visual e a adaptação às diferentes resoluções de dispositivos, que podem ser visualizadas nos protótipos
Obrigada pelo seu tempo!
Você pode entrar em contato comigo no meu Linkedin
UI Design Pokédex
Published:

Owner

UI Design Pokédex

Published:

Tools

Creative Fields