Dezenas de jogadores,
uma voz de comando
No Realm of the Mad God, as descidas de endgame só dão certo com um shot caller guiando o grupo inteiro. A página que organizava essas descidas e reunia os guias das dungeons funcionava, mas era pobre visualmente. Refiz a marca e a interface, do desktop ao celular.
Uma interface que precisa funcionar no meio da adrenalina
Nessa dungeon, o grupo inteiro depende de quem está chamando as jogadas. A página é o ponto de encontro antes e durante a descida: mostra as raids abertas, quantas vagas restam, em que fase cada uma está, e faz as verificações que evitam que alguém entre despreparado e derrube o grupo.
- Duas funções no mesmo site — organizar as raids que estão acontecendo agora e guardar os guias de cada dungeon.
- Leitura em segundos — ninguém lê parágrafo com a raid começando.
- Estado que muda sozinho — esperando jogadores, em andamento, finalizando, encerrada.
- Identidade do jogo — a página vive dentro de uma comunidade que já tem estética própria.
- Entrada pelo Discord — é onde a comunidade já está; não faria sentido criar mais um cadastro.
Puxar a estética de dentro do jogo
O jogo tem uma linguagem visual muito marcada: pixel art, vermelho do logotipo, fundo quase preto. Em vez de aplicar um visual genérico de site por cima disso, construí a interface com esses elementos — os próprios sprites viram ícones das dungeons, e o verde-lima fica reservado para uma coisa só: ação.
- Sprite como ícone — cada dungeon é reconhecida pela arte que o jogador já viu mil vezes, não por um ícone novo.
- Verde só para ação — entrar, ver guia, logar com Discord. Nenhum elemento decorativo usa essa cor.
- Fundo texturizado — a textura escura segura a leitura em telas longas sem competir com a arte.
A coluna que aparece só quando você precisa
O painel de raids em andamento abre e fecha sobre a página. Fechado, o centro da tela fica livre para a verificação de runas — a etapa em que cada jogador declara o que tem para contribuir. Aberto, vira uma fila legível de ponta a ponta, com o estado de cada raid escrito e colorido.
O foco fica na ação que precisa acontecer agora.
A fila inteira, com estado e lotação de cada raid.
- Estado por cor e por frase — amarelo esperando jogadores, verde em andamento, vermelho finalizando; e o texto repete o que a cor diz.
- Raid encerrada perde saturação — o que já acabou some do primeiro plano sem sumir da lista.
- Lotação no mesmo bloco — o contador de jogadores fica colado ao botão de entrar, que é onde a decisão acontece.
- Cronômetro em quem está rodando — "9min 12sec" diz, sem cálculo mental, se ainda vale a pena entrar.
- Verificação de runas com contador — cada tipo tem seu ícone e seu número; clicar é declarar o que você leva.
- Login com Discord em verde — a única peça verde do cabeçalho é a porta de entrada.
Um manual que se lê com o jogo aberto
A outra metade do site são os guias. A página do Lost Halls precisa explicar uma dungeon inteira — layout, salas, chefes, ordem das coisas — para alguém que vai consultar no celular com uma mão enquanto joga com a outra. Resolvi isso com um mapa legendado no topo e o texto quebrado sala por sala, cada uma com seu título.
- Mapa com legenda ao lado — S, P, T, D, B; a legenda fica dentro do mesmo quadro do mapa, para não obrigar a rolar entre um e outro.
- Uma seção por sala — sala inicial, salas de poção, sala do tesouro, antessala do chefe. Dá para pular direto para a parte que interessa.
- Termos importantes em cor — nomes de itens e chefes ficam destacados no texto corrido, funcionando como um índice visual.
- Dificuldade logo abaixo do nome — antes de qualquer explicação, a pessoa sabe no que está se metendo.
Rebranding não é trocar a paleta
O jeito fácil de "melhorar" uma página de comunidade é aplicar um visual bonito por cima. O que mudou o resultado aqui foi outra coisa: entender o que o shot caller precisa ver em três segundos e reorganizar a tela em volta disso. A estética veio depois, e é o que faz a página parecer parte do jogo em vez de um formulário pendurado ao lado dele.