Caso de Estudo: Marvel's Spider-man
Contexto e Objetivo do Projeto
Como um exercício de aprimoramento técnico e estudo de design, realizei a reconstrução completa da tela de “Habilidades” (Skills) do jogo Marvel’s Spider-Man, desenvolvido pela Insomniac Games. O objetivo principal não era apenas replicar visualmente a interface, mas sim realizar uma engenharia reversa do design para compreender profundamente as decisões por trás de uma UI de um título AAA.
Este estudo buscou analisar a arquitetura da informação, a hierarquia visual, a composição e a consistência temática que tornam a experiência do jogador tão fluida e imersiva.
ACESSE O FIGMA AQUI
O Desafio
Recriar uma interface de um jogo dessa magnitude apresenta desafios significativos que vão além da simples reprodução de formas e cores:
Fidelidade Visual: Manter a precisão absoluta em relação à paleta de cores, tipografia, espaçamentos e proporções originais.
Deconstrução de Componentes: Entender como elementos complexos, como as árvores de habilidades e os cards de descrição, são estruturados e se relacionam.
Recriação de Assets: Produzir do zero ícones, texturas e outros elementos gráficos customizados que são proprietários do jogo, exigindo habilidade em design gráfico.
Análise da Composição: Compreender o grid e as regras de layout que guiam o posicionamento de cada elemento para criar uma interface equilibrada e funcional.
Processo de Reconstrução
O projeto foi dividido em quatro etapas metodológicas:
Coleta de Referências: A primeira fase consistiu em capturar screenshots de alta resolução diretamente do jogo. Foram coletadas imagens da tela em diversos estados: com habilidades bloqueadas, desbloqueadas e com o foco do cursor em diferentes componentes para entender os efeitos de hover e seleção.
Análise Estrutural: Com as referências em mãos, a interface foi “desmontada” digitalmente. Utilizando o Figma, foram traçados guias para identificar o sistema de grid, as margens e os espaçamentos. A paleta de cores foi extraída e a tipografia foi identificada e catalogada.
Criação de Assets: Todos os ícones das habilidades, fundos texturizados e elementos gráficos customizados foram recriados do zero, utilizando o Adobe Illustrator para os vetores e o Photoshop para as texturas e efeitos.
Montagem e Composição: A fase final foi a reconstrução da tela no Figma, montando todos os componentes e assets criados. Foi dada atenção meticulosa ao empilhamento de camadas, aos efeitos de transparência e à aplicação dos estilos para garantir que o resultado final fosse uma réplica fiel e pixel-perfect.
Wireframes de Baixa Fidelidade
Componetização e Criação do Design System
Design Completo das Telas em Alta Fidelidade
Principais Aprendizados
Este estudo prático proporcionou insights valiosos sobre o design de interfaces para jogos de grande escala:
Hierarquia da Informação: A forma como a UI guia o olhar do jogador, usando tamanho, cor e brilho para destacar as informações mais importantes, como o custo de uma habilidade ou seu status.
Consistência Temática: A percepção clara de como cada elemento da interface, desde a fonte até o menor ícone, reforça a identidade visual “high-tech” do Homem-Aranha daquele universo.
Economia de Espaço: A eficiência com que uma grande quantidade de informações e interações é organizada em uma única tela sem parecer sobrecarregada.
Técnicas de UI: Um entendimento prático sobre o uso de camadas, opacidade e efeitos para criar profundidade e dinamismo na interface.
Resultado Final
O resultado é uma reconstrução de alta fidelidade da tela de Habilidades de Marvel’s Spider-Man. Mais do que uma cópia, este projeto serve como uma biblioteca de aprendizados e uma demonstração da capacidade técnica de analisar, deconstruir e recriar interfaces complexas, compreendendo os princípios de design que as tornam eficazes.