UI/UX!

Interfaces para dispositivos móveis (Realidade Aumentada, jogos e aplicativos) e PC (Realidade virtual, jogos e aplicativos), desenvolvidos para parceiros comerciais, no intervalo de 2016 e 2020.

DNA Usiminas

No início da minha carreira de ilustrador eu fui estagiário em ilustração, trabalhando lado a lado com um designer de interface, cujo trabalho tive que incorporar quando a empresa o dispensou. Passaram se alguns anos e fui incorporando outras funções na empresa. No momento em que fechamos esse projeto, eu já supria as funções de Lead Artist, tendo trabalhado sozinho lidando com toda demanda 2D da empresa por 5 anos, além de UI/UX Designer, tarefa que demandou estudo e aproveitou-se da experiência dos projetos, somando também uma gerência de arte e projetos não perseguida, mas incidentalmente atribuída a mim.
Esse projeto foi o primeiro projeto que administrei como, oficialmente dessa vez, Gerente de Projetos.

O aplicativo consiste em recolher registros dos funcionários das várias ramificações da Usiminas, empresa de usinagem residente em Minas Gerais, e os proporcionar um conjunto de minigames e objetivos intraempresariais, como metas de integração de setores. O aplicativo contém 4 minigames variados, além de 2 medalhas extras para número de downloads e entrada de palavras chave, todos os projeto - incluindo os jogos - intrinsecamente relacionados aos conhecimentos e costumes dos funcionários.
Note a proporção da tela: essa interface, como muitas outras nessa coleção, foi desenvolvida para ser responsiva de telas 3:4 a telas 9:9, abrangendo a grande maioria e algumas minorias do mercado de dispositivos móveis.

CLIQUE EM CADA IMAGEM PARA SABER MAIS.
Logo após o carregamento, o jogador deve preencher o registro.
Logo após o carregamento, o jogador deve preencher o registro.
Um aviso do uso do aplicativo.
Um aviso do uso do aplicativo.
Essa é a tela principal. É o lobby de todos os acessos do jogo. Os ícones representam medalhas que são adquiridas ao jogar os minigames ou cumprir as metas.
Essa é a tela principal. É o lobby de todos os acessos do jogo. Os ícones representam medalhas que são adquiridas ao jogar os minigames ou cumprir as metas.
Esse é o menu lateral, acessado pelo botão no canto esquerdo superior. Nele o jogador pode navegar entre outras telas, como as medalhas e ranking, assim como as configurações do dispositivo e registro.
Esse é o menu lateral, acessado pelo botão no canto esquerdo superior. Nele o jogador pode navegar entre outras telas, como as medalhas e ranking, assim como as configurações do dispositivo e registro.
Tela popup display das medalhas adquiridas.
Tela popup display das medalhas adquiridas.
Tela de ranking.
Tela de ranking.
Este é um exemplo de uso de um botão de jogo.
Este é um exemplo de uso de um botão de jogo.
Este é o formato de contabilidade do número de downloads.
Este é o formato de contabilidade do número de downloads.
E essa é a imagem de saida, fornecida pelo plugin, direto para a rede social de escolha.
E essa é a imagem de saida, fornecida pelo plugin, direto para a rede social de escolha.
Esta é apenas um exemplo de versões anteriores da interface, para escolha do cliente.
Esta é apenas um exemplo de versões anteriores da interface, para escolha do cliente.
DNA Usiminas - Minigame: Jogo de Montagem
Seguindo o padrão dos minigames, mais uma mecânica de fácil aprendizado é vestir um personagem. Nesse caso, semelhante à um jogo da memória padrão, os jogadores devem memorizar qual é a função relacionada ao conjunto de EPI's visualizado, e remontá-lo​​​​​​​.

Abaixo das telas do jogo, note as várias combinações de EPI's possíveis.
Esta é a tela inicial, semelhante às anteriores.
Esta é a tela inicial, semelhante às anteriores.
Transição para desenvolvimento.
Transição para desenvolvimento.
Exemplo de EPI.
Exemplo de EPI.
Espera de carregamento de animações.
Espera de carregamento de animações.
Modo padrão do jogo: o jogador deve utilizar repetidamente os botões para trocar as peças do carrossel e encaixar as roupas em cada local. Cada EPI conta com 5 categorias: proteção para a cabeça, torso, mãos, pernas e pés.
Modo padrão do jogo: o jogador deve utilizar repetidamente os botões para trocar as peças do carrossel e encaixar as roupas em cada local. Cada EPI conta com 5 categorias: proteção para a cabeça, torso, mãos, pernas e pés.
Ao terminar de fazer sua seleção o jogador confirma sua ação no botão central, e é avaliado pela programação. Caso tenha conseguido acertar todas as peças, ele avança; caso contrário, perde o jogo.
Ao terminar de fazer sua seleção o jogador confirma sua ação no botão central, e é avaliado pela programação. Caso tenha conseguido acertar todas as peças, ele avança; caso contrário, perde o jogo.
Trilha PUC Minas

Esse foi um projeto desenvolvido na Gaz Games para a Pontifícia Universidade Católica de Minas Gerais para a feira de carreiras que eles fazem semestralmente que chama PUC Aberta. No jogo, o jogador explora vários tabuleiros com um avatar, escolhido no começo do jogo, descobrindo um pouco sobre cada unidade da PUC assim como cada profissão e curso disponíveis na Universidade.
Esse jogo foi desenvolvido para web, devendo funcionar no PC e em dispositivos móveis, então desenvolvi a interface para abranger qualquer dispositivo no alcance entre 9:21 e 16:9.

CLIQUE EM CADA IMAGEM PARA SABER MAIS.
O jogo começa com uma tela de cadastro simples
O jogo começa com uma tela de cadastro simples
Depois o jogador escolhia seu avatar (ver seção Direção de Arte e Parcerias para ver o trabalho em Character Design feito nessa parte)
Depois o jogador escolhia seu avatar (ver seção Direção de Arte e Parcerias para ver o trabalho em Character Design feito nessa parte)
O jogo contava com a função de compartilhamento
O jogo contava com a função de compartilhamento
Utilizamos uma API do Facebook para compartilhar em pontos selecionados
Utilizamos uma API do Facebook para compartilhar em pontos selecionados
A primeira fase. Note a posição dos botões, que se moviam para adaptar-se ao tamanho da tela.
A primeira fase. Note a posição dos botões, que se moviam para adaptar-se ao tamanho da tela.
Cada casa tinha uma pílula de conhecimento sobre a PUC e as carreiras.
Cada casa tinha uma pílula de conhecimento sobre a PUC e as carreiras.
Ao concluir a primeira fase o jogador recebia habilitação para escolher [...]
Ao concluir a primeira fase o jogador recebia habilitação para escolher [...]
[...] sua área do conhecimento e [...]
[...] sua área do conhecimento e [...]
[...] seu curso.
[...] seu curso.
Cada unidade disponibilizava em uma lista os cursos lecionados.
Cada unidade disponibilizava em uma lista os cursos lecionados.
Um breve resumo do curso era oferecido antes do aluno ingressar na fase.
Um breve resumo do curso era oferecido antes do aluno ingressar na fase.
Cada escolha levava para um campus da PUC.
Cada escolha levava para um campus da PUC.
Ao concluir essa fase o aluno estava liberado para rodar o jogo mais quantas vezes quisesse e conferir outras carreiras.
Ao concluir essa fase o aluno estava liberado para rodar o jogo mais quantas vezes quisesse e conferir outras carreiras.
Menu de opções.
Menu de opções.
Opções de música e efeitos.
Opções de música e efeitos.
Ranking dos jogadores nos minigames espalhados pelos mapas.
Ranking dos jogadores nos minigames espalhados pelos mapas.
Tela de encerramento para sair da sessão.
Tela de encerramento para sair da sessão.
Brasif Máquinas - e Memória

Como já argumentado, empresas costumam encomendar jogos com mecânicas fáceis, principalmente para o intuito desse caso, que é uma feira. Em feiras normalmente as pessoas passam pouquíssimo tempo focadas, não contanto é claro os funcionários e entusiastas, nos produtos que as empresas querem divulgar. Um ótimo jeito de fazê-lo, no entanto, é com jogos e brindes. 
Tendo isso em mente, esse jogo da memória é bem simples: apenas gerência de tempo foi adicionada à mecânica normal, para incrementar a competitividade, e 8 fases de pares de cartas para serem conquistados, cada qual com um segmento coberto pela empresa contratante.
Esse jogo foi desenvolvido para dispositivos móveis, com pré instalação sem publicação, no entanto, como experiência, desenvolvi a interface para abranger qualquer dispositivo no alcance entre 4:3 e 21:9.

CLIQUE EM CADA IMAGEM PARA SABER MAIS.
Museu de Artes e Ofícios - Aplicativos e jogos

Em Belo Horizonte/MG existe um museu chamado Museu de Artes e Ofícios que, como o nome diz, guarda algumas dezenas (em exposição) de peças que representam a evolução das artes e habilidades ao longo dos anos, em correlação com a Estrada Real também. Em 2020, um edital foi aberto e a empresa para qual desenvolvi as interfaces a seguir foi agraciada com o direito de fazer os 3 jogos que eram demandados.
Cada jogo aborda o tema de uma forma, seja como jogo ou como um aplicativo de realidade aumentada ou um simples quiz, mas todos falam do mesmo tema: eficiência energética. Os 3 jogos fariam parte de um projeto ainda maior, que ficará em exposição por alguns anos no museu, onde o SEBRAE e a CEMIG espalharão a mensagem da origem da energia e as várias formas de utilização e economia.

CLIQUE EM CADA IMAGEM PARA SABER MAIS.
MAO - Energia Dupla
Nesse primeiro projeto, o tema da eficiência energética é abordado como um Quiz, para ser jogado em duplas, em telas de toque, no local de exposição no museu. Todos os aplicativos desenvolvidos terão versão futura para dispositivos móveis, logo todas as interfaces também foram desenvolvidas pensando nisso.
Em adição ao quiz, há também uma personagem de professora que dá dicas de como utilizar o aplicativo e comemora ao fim, mas esse personagem não é de minha autoria, logo, será ocultado nas referências. A versão final do aplicativo também sofreu alterações que não estão nessas telas, mas essa alterações foram feitas diretas na versão de saída, não havendo referências do artista.
Esta tela fica aguardando o jogador se aproximar.
Esta tela fica aguardando o jogador se aproximar.
Para exibir essa tela, que dá o controle aos interessados de prosseguir com o jogo.
Para exibir essa tela, que dá o controle aos interessados de prosseguir com o jogo.
A tela de registro, posteriormente alterada para uma tela com seleção de times com nomes de duplas coerentes com o tema, como Resistência e Resistor.
A tela de registro, posteriormente alterada para uma tela com seleção de times com nomes de duplas coerentes com o tema, como Resistência e Resistor.
Após se registrar como time os jogadores aguardam alguns segundos.
Após se registrar como time os jogadores aguardam alguns segundos.
A professora os explica como jogar e ao que ficar atento, e o jogo começa.
A professora os explica como jogar e ao que ficar atento, e o jogo começa.
Cada pergunta tinha obrigatoriamente 4 respostas, apenas 1 correta.
Cada pergunta tinha obrigatoriamente 4 respostas, apenas 1 correta.
Ao clicar em uma resposta, o jogador tem a chance de confirmar a sua escolha.
Ao clicar em uma resposta, o jogador tem a chance de confirmar a sua escolha.
Ao confirmar ela se mostra correta ou...
Ao confirmar ela se mostra correta ou...
Falsa.
Falsa.
Ao terminar de responder 5 perguntas, a professora retorna para falar como enviar os resultados para o ranking.
Ao terminar de responder 5 perguntas, a professora retorna para falar como enviar os resultados para o ranking.
Essa animação é executada no momento do envio e...
Essa animação é executada no momento do envio e...
... o nome de cada equipe fica exibido no telão até que seja sobrescrito.
... o nome de cada equipe fica exibido no telão até que seja sobrescrito.
MAO - Ser-Eficiente
NProsseguindo com o projeto, outra abordagem do tema era um jogo no estilo The Sims, onde o jogador controla um personagem em um cenário com desafios e formas de controle que definirão o desfecho do jogo. Nessa narrativa em específico, o jogador controla Davi, que é um garoto em quem a responsabilidade de ser eficiente para com o consumo energético da casa foi deixada, enquanto seus pais estão fora pelo fim de semana.
Esse jogo foi feito para ser jogado em tela de toque, na orientação paisagem, logo os botões foram planejados para certo conforto em questão de espaço. No entanto, tendo em vista o lançamento para dispositivos móveis, tive a felicidade de notar que a interface funcionava quase perfeitamente, demandando pequenas mudanças no fluxo.
No lançamento para dispositivos móveis, é assim que o jogador escolhe em qual jogo entrará.
No lançamento para dispositivos móveis, é assim que o jogador escolhe em qual jogo entrará.
Essa é a tela inicial, aguardando um toque do jogador.
Essa é a tela inicial, aguardando um toque do jogador.
Aqui ele aprende um pouco sobre o conteúdo do jogo.
Aqui ele aprende um pouco sobre o conteúdo do jogo.
Mais uma parada pra um breve tutorial e história.
Mais uma parada pra um breve tutorial e história.
A missão apresentada, antes de mais nada.
A missão apresentada, antes de mais nada.
E a tela inicial do jogo, declarando qual é a tarefa a ser feita. Novas tarefas surgem a medida que o jogo avança.
E a tela inicial do jogo, declarando qual é a tarefa a ser feita. Novas tarefas surgem a medida que o jogo avança.
Assim é como a tela fica sem indicações, sua versão mais básica. No canto superior esquerdo, o botão para sair, no direito, a taxa de consumo da casa. Inferiores esquerdo, a miniatura do personagem, e seus humores e futuros botões de interface, direito há a lista de tarefas, reclusa até ser convocada novamente.
Assim é como a tela fica sem indicações, sua versão mais básica. No canto superior esquerdo, o botão para sair, no direito, a taxa de consumo da casa. Inferiores esquerdo, a miniatura do personagem, e seus humores e futuros botões de interface, direito há a lista de tarefas, reclusa até ser convocada novamente.
Quando o jogador interage com algum dos itens em silhueta azul, esse é o menu que aparece, mutável para cada objeto.
Quando o jogador interage com algum dos itens em silhueta azul, esse é o menu que aparece, mutável para cada objeto.
Quando o jogador conclui uma tarefa, ela é riscada da lista com uma animação, e outra aparece.
Quando o jogador conclui uma tarefa, ela é riscada da lista com uma animação, e outra aparece.
Quando o jogador tenta sair do jogo, há uma confirmação.
Quando o jogador tenta sair do jogo, há uma confirmação.
Outros objetos tem várias opções, criadas para confundir.
Outros objetos tem várias opções, criadas para confundir.
Esta é a versão do jogo durante o dia, no dia seguinte das tarefas.
Esta é a versão do jogo durante o dia, no dia seguinte das tarefas.
Quando o jogador irá aprender uma nova mecânica, sempre um popup explicativo.
Quando o jogador irá aprender uma nova mecânica, sempre um popup explicativo.
Esse é o minigame para escolher comida na geladeira. O jogador deve ser rápido, escolhendo 3 ícones...
Esse é o minigame para escolher comida na geladeira. O jogador deve ser rápido, escolhendo 3 ícones...
.. e confirmar antes que o tempo acabe, senão...
.. e confirmar antes que o tempo acabe, senão...
... o humor do personagem cai, indicando que ele demorou mais na geladeira, aumentando o consumo com a porta aberta, do que deveria.
... o humor do personagem cai, indicando que ele demorou mais na geladeira, aumentando o consumo com a porta aberta, do que deveria.
Quando quase todas as particulas dos objetos estão ativas e quando o jogador deixou algum eletrodoméstico ligado sem necessidade.
Quando quase todas as particulas dos objetos estão ativas e quando o jogador deixou algum eletrodoméstico ligado sem necessidade.
Essa é a tela final do jogo, com um recibo e um pequeno texto informativo sobre quanta energia economizou e o que poderia ser feito com aquela quantia.
Essa é a tela final do jogo, com um recibo e um pequeno texto informativo sobre quanta energia economizou e o que poderia ser feito com aquela quantia.
↑Back to Top