Course project

GameVerse

GameVerse

by Gabriel Canto @gabrieltcanto

Introdução

Este é o projeto do GameVerse, um aplicativo desenvolvido como parte de uma proposta acadêmica voltada para a catalogação e interação entre jogadores. A ideia surgiu da observação da ausência de plataformas sociais que reúnam críticas, listas e experiências sobre jogos digitais, semelhante ao que o Letterboxd faz no universo do cinema. Inspirado por referências como o próprio Letterboxd e o GG, o GameVerse foi criado com o objetivo de unir jogadores casuais e entusiastas em um ambiente onde possam compartilhar suas opiniões, criar listas e descobrir novos títulos. Toda a construção visual foi baseada em princípios de UX e UI, buscando uma experiência intuitiva, envolvente e centrada no usuário.

Suprimentos

Figma (software principal): Ferramenta central utilizada para criação de wireframes, protótipos interativos e desenvolvimento visual. Foi essencial para estruturar a navegação e aplicar os conceitos de UX e UI no design do aplicativo.

Google Fonts (Tipografias Exo e Montserrat): Fontes escolhidas estrategicamente para representar a identidade do GameVerse. A Exo transmite modernidade e conexão com o universo gamer, enquanto a Montserrat garante leitura fluida e acessível nos textos corridos.

Paleta de cores personalizada: Cores como o Verde Vibrante, Cinza Escuro, Preto Base e Branco Absoluto foram selecionadas para gerar contraste, destaque visual e reforçar a identidade da marca.

Ícones e elementos gráficos personalizados: Criados ou selecionados para reforçar a usabilidade e clareza nas ações do usuário, com foco em navegação intuitiva e estética limpa.

Wireframes e style guide: Desenvolvidos para garantir coesão visual e consistência na experiência do usuário, servindo como base para o design final das telas do aplicativo.

Começo

O planejamento e o esboço inicial do GameVerse começaram com a organização das informações obtidas durante a fase de descoberta da metodologia Double Diamond. Nesta etapa, foram estruturados os primeiros conceitos visuais e funcionais do aplicativo, utilizando fluxos de navegação, wireframes simples e rascunhos das telas principais.

O foco era mapear a jornada do usuário dentro do app, identificando onde e como seriam posicionadas as principais funcionalidades, como cadastro, avaliação de jogos, criação de listas e perfis. As decisões visuais iniciais foram guiadas por referências do benchmarking e pelas necessidades levantadas nas personas.

Essa fase também envolveu a separação de elementos por camadas (função, interação e estética), permitindo ajustes rápidos conforme o projeto evoluía. O esboço serviu como base para testes de hierarquia visual e fluxo de interação, garantindo que a experiência fosse clara e intuitiva desde o início.

Ideação

A ideia do design do GameVerse teve início com a aplicação prática do style guide, integrando as cores, tipografias e componentes definidos anteriormente. Nessa fase, foram inseridos os principais elementos gráficos da interface, como botões, ícones e áreas de navegação, respeitando o layout estabelecido nos wireframes.

Cada componente visual foi cuidadosamente posicionado para garantir clareza e harmonia visual, priorizando a usabilidade e a coerência estética. Foram utilizadas camadas organizadas para separar os elementos da interface (menus, cards de jogos, campos de busca), o que facilitou ajustes de alinhamento e adaptação para diferentes telas.

Durante essa etapa, também foram realizados testes de contraste e legibilidade para assegurar que os elementos gráficos não apenas fossem visualmente atraentes, mas funcionais. O objetivo foi manter a fidelidade ao esboço inicial, enriquecendo a experiência do usuário com um visual moderno e funcional.

Desenvolvimento

O desenvolvimento do GameVerse envolveu o refinamento visual das telas do protótipo, aplicando ajustes de cores, alinhamentos, espaçamentos e efeitos visuais para garantir coesão estética e clareza na navegação. Essa fase foi essencial para elevar a qualidade do design e proporcionar uma experiência mais polida e profissional.

Foram aplicados ajustes finos na tipografia, revisando pesos e tamanhos para reforçar a hierarquia da informação. Ícones e botões receberam aprimoramentos visuais com foco na harmonia e no contraste, assegurando acessibilidade e destaque das ações principais. Pequenos detalhes como sombras sutis, bordas arredondadas e microinterações foram incluídos para enriquecer a interface.

O objetivo desta etapa foi consolidar todo o trabalho das fases anteriores, garantindo que o GameVerse não apenas funcionasse bem, mas também entregasse uma experiência visualmente atraente e coerente com o universo dos games.