Surftank —
uma interface jogável
Interface completa de um game: da criação de conta à praça, ao calabouço, à mochila e às missões. Mais do que telas bonitas, o desafio aqui foi manter dezenas de estados organizados o suficiente para o time de desenvolvimento pegar e construir.
Game tem mais estado do que qualquer app
Um produto digital comum tem telas. Um game tem telas que mudam conforme mundo, personagem, gênero escolhido, itens equipados e progresso de missão. Cada decisão de interface se multiplica — e é aí que o arquivo vira bagunça e o desenvolvimento trava.
- Variações de personagem — escolha de mundo e de personagem em versões masculina e feminina.
- Telas de sistema — login, criar conta, cadastro em etapas e confirmação.
- Ambientes — praça, calabouço e os painéis que vivem dentro deles.
- Painéis persistentes — mochila com abas de itens e equipamento, missões, correio, eventos, social e configurações.
Do login à primeira partida
O primeiro contato precisa ser curto o bastante para não perder o jogador e completo o bastante para configurar a partida. O fluxo foi quebrado em passos curtos: entrar ou criar conta, cadastro, confirmação, escolha de mundo e escolha de personagem — cada um com uma decisão só, cada um sobre o cenário do jogo.
- Painel flutuante, cenário vivo — o formulário não ocupa a tela inteira; a arte do jogo continua sendo o fundo.
- Um botão amarelo só — a ação principal é a única peça quente da tela, impossível de confundir.
- Voltar e fechar nas bordas — os controles de sistema ficam nos cantos do painel, fora do caminho da leitura.
- Ocupação em três linguagens — na escolha de mundo, a lotação aparece como barra, como porcentagem e como rótulo (disponível, cheio, indisponível). Quem lê rápido usa a cor; quem quer certeza lê o número.
- Mundo cheio continua clicável, indisponível não — a diferença entre "difícil" e "impossível" precisa ser visível antes do clique.
Informação densa numa tela larga e baixa
Fora da ação, o jogo vira uma sequência de painéis: escolher uma sala, abrir a mochila, conferir missões. Aqui a regra se inverte — a informação passa a ser o conteúdo, e ela precisa caber num formato largo e baixo sem virar parede de texto. A solução foi a mesma nas duas telas: estado do jogador sempre no topo, ações sempre no rodapé, e o miolo reservado ao que muda.
- Evento ocupa a largura toda — o boss mundial é o que tem hora marcada, então ganha o maior bloco e mostra vagas e janela de horário.
- Dificuldade por cor e por palavra — fácil, médio e difícil vêm com uma faixa lateral colorida e com o rótulo escrito; ninguém depende só da cor.
- Lotação antes de entrar — cada sala mostra 2/4, 1/4, 3/4, então dá para escolher onde ainda cabe gente sem abrir nada.
- Missões na coluna da direita — ficam à vista enquanto o jogador escolhe a sala, que é exatamente quando elas importam.
- Paginação e criar sala no rodapé — navegar e criar são ações de saída da tela, então vivem na borda inferior.
- O boneco no meio dos slots — os oito espaços de equipamento cercam o personagem, então vestir é uma relação espacial, não uma lista.
- Três abas, um painel — itens, equipamento e visual trocam o conteúdo da grade sem tirar o jogador da tela.
- Ocultar peças — chapéu, óculos, asas e fantasia podem sumir do avatar sem serem desequipados: aparência e atributo são coisas diferentes.
- Ações separadas por risco — dividir, vender e recomprar de um lado; usar, em amarelo, do outro. A ação destrutiva nunca fica colada na principal.
- Moedas sempre no topo — as três moedas ficam no mesmo canto em toda tela de sistema, então o saldo é uma constante.
O arquivo também é entregável
A parte do trabalho que ninguém vê no print: o Figma foi organizado por status de produção, não por ordem de criação. Cada tela vive dentro de uma seção que diz, sem perguntar para ninguém, o que já pode ser construído.
Parece detalhe de organização, mas é o que evita a pergunta mais cara de um projeto: “essa tela aqui é a versão final?”
Design system também vale para diversão
Foi tentador tratar cada tela de game como uma peça única de arte. O que fez o projeto andar foi o contrário: definir os componentes — botão, painel, chip de recurso, aba — e repeti-los com disciplina. A identidade veio da arte e do cenário; a consistência, do sistema.