Lunar Launcher
Projeto de redesign de interface para o programa CCCaster
Introdução
CCCaster é um programa criado por "MadScientist" e usado como multiplayer online para o jogo de luta Melty Blood Actress Again Current Code, conectando dois jogadores via P2P (peer-to-peer).
Nele também é possível assistir a uma partida em andamento, configurar os controles do jogo, apelido e outras opções. Porém, como observado abaixo, não possui um visual atrativo e a navegação pode afugentar jogadores não acostumados.
CCCaster é um programa criado por "MadScientist" e usado como multiplayer online para o jogo de luta Melty Blood Actress Again Current Code, conectando dois jogadores via P2P (peer-to-peer).
Nele também é possível assistir a uma partida em andamento, configurar os controles do jogo, apelido e outras opções. Porém, como observado abaixo, não possui um visual atrativo e a navegação pode afugentar jogadores não acostumados.
Para este projeto foi usada por referência a versão Statistics do programa, criada por Sandro "Arkhar" Vieira, a qual adiciona o envio de resultados para um site não oficial do jogo. O Lunar Launcher, portanto, teve como objetivo a criação de uma interface melhor trabalhada e amigável principalmente para jogadores iniciantes.
Desenvolvimento
O primeiro passo foi pensar na tela inicial da aplicação, a qual é a base para as demais telas. Comecei criando uma opção de layout mais semelhante ao usado no jogo, com as opções seguintes fugindo um pouco desse conceito, mas ainda mantendo a temática usando-se silhuetas dos personagens.
Após ler as opiniões e sugestões de outros membros da comunidade, foi escolhida o layout de grid (em duas colunas). Parcialmente remetendo ao design flat, ela possui navegação intuitiva, programável para uso tanto com teclado quanto com mouse, e possibilita maior maleabilidade para a diagramação da tela.
As tipografias utilizadas foram a Roboto (regular, medium e medium italic) e Noto Serif (para a sessão "Information"), por serem semelhantes às do material original e possuírem legibilidade satisfatória. Quantos as cores, foram utilizadas tonalidades de lilás, amarelo e vermelho, próximas às presentes na imagem de fundo.
Finalização
O protótipo, produzido no Figma, está disponível abaixo. No momento, algumas telas ainda não foram modeladas, porque não estavam previstas no lançamento. Por isso algumas opções estão "desativadas" (em cor cinza).
O protótipo, produzido no Figma, está disponível abaixo. No momento, algumas telas ainda não foram modeladas, porque não estavam previstas no lançamento. Por isso algumas opções estão "desativadas" (em cor cinza).