Florescer Espiritual é o primeiro evento da Riot ocorrendo em mais de um título, permitindo que os jogadores explorem o Florescer Espiritual no League of Legends e no Legends of Runeterra. Mas, antes de nos aprofundarmos em como isso aconteceu, vamos ver o que é o Florescer Espiritual.
Este é um evento dentro da história de Runeterra (ou seja, é canônico para o League of Legends) que sinaliza o florescer de uma verdadeira(-mente fictícia) flor espiritual em Ionia. Os ionianos usam as propriedades espirituais intrínsecas da flor para se comunicarem com entes queridos que já partiram, celebrando sua passagem pacífica ao pós-vida ou lamentando aqueles que não podem descansar.
Mas o LoL e o LoR são dois jogos muito diferentes: um é um MOBA e o outro é um jogo de cartas colecionáveis. Eles têm visuais e jogadores diferentes. Então, como podemos garantir que o público tenha uma experiência coesa entre os dois jogos?
Design Visual entra no rolê
O design visual na Riot é dividido entre duas áreas essenciais: designers que trabalham em produtos e criam elementos específicos como ícones, tabuleiros e a interface dos nossos jogos; e designers focados em marca e comunicação, garantindo que os jogadores entendam exatamente o que vão ver antes de entrarem no jogo.
Vamos ver como os profissionais de ambas as áreas trabalham juntos para garantir a consistência do design e do estilo em todos os jogos.
Partindo do princípio, vejamos como nasceu a marca visual do Florescer Espiritual.
Criando a identidade visual do Florescer Espiritual
Com Craig "Riot MrParkinson" Parkinson, designer visual de League of Legends
Comecei perguntando à equipe de desenvolvimento temático (artistas, escritores e produtores responsáveis pelo multiverso do LoL) o que exatamente era o Florescer Espiritual. Enquanto eles me contavam sobre os temas, algumas palavras-chave se repetiam: fantasioso, espiritual, elegante, pacífico, abstrato e cativante. Então eu juntei essas palavras em um documento e... comecei a partir daí.
O Florescer Espiritual gira em torno do pós-vida e dos espíritos que lá residem. No reino espiritual, eles estão completamente interligados e vivem em relativa paz. Usei isso como minha estrela-guia, por assim dizer, quando comecei a trabalhar para juntar referências visuais e criar painéis semânticos que evocassem esses sentimentos.
Então, dividi as referências nas áreas principais que precisavam ser exploradas e observei a linguagem das formas, cores e texturas. Isso me ajudou a decidir a direção para a marca do Florescer Espiritual, mas tive que me perguntar como juntaríamos todas essas peças de forma coesa, especialmente as inspirações principais de anime, mitologia do Leste Asiático e LoL.
A Linguagem das Formas
Quis capturar a elegância do evento com sua linguagem de formas única. Ela precisava ser abstrata e suave, ainda que parecesse nova e desconhecida. A partir daí, comecei a explorar os tipos de formas que queria.
A geometria chamou minha atenção quase instantaneamente. Eu podia usar formatos elegantes para criar um tipo de simbolismo que se relacionasse com diferentes aspectos do Festival do Florescer Espiritual. Isso se encaixou muito bem com a temática geral, pois a intenção da geometria depende do que o espectador vê nela. A figura pode representar várias coisas diferentes e, ao mesmo tempo, nada.
Minhas referências foram imagens de arte do Leste Asiático, como formas florais, espirais e nuvens. Mas, enquanto fazia iterações disso e pensava em como encaixar tudo na interface, sentia algo faltando: uma ligação mais profunda com o trabalho da equipe de desenvolvimento temático. E se eu usasse a arte conceitual das skins dentro do próprio design?
Eu queria manter tudo fundamentado naquilo que os jogadores podiam ver e com que podiam interagir dentro do jogo, então acrescentei os detalhes da arte como se fossem componentes estruturais. A geometria que eu procurava se transformou nos padrões folclóricos que vocês podem ver na camisa do Yasuo. Usando isso como base, pensei em como essas formas e padrões distintos poderiam reforçar os elementos da marca. E isso me levou à próxima parte: cores e texturas.
Cores e Texturas
A equipe de desenvolvimento temático criou uma linda paleta de cores para o evento, baseada principalmente em aquarela. O objetivo era que tudo parecesse mágico e onírico. Buscando referências em pinturas de aquarela, não pude deixar de notar como tinham texturas distintas, até na forma como a tinta pingava no papel.
Queria manter o design visual atrelado às skins para que tudo parecesse interligado, mas ainda precisava de algumas texturas diferenciadas para garantir que não parecesse uma cor só. Usei coisas como cascas de árvore, pinceladas e até as veias dentro de uma folha como inspiração e, a partir daí, veio a ideia geral do design visual do evento.
Depois de toda essa descoberta inicial, além de um enfático "sim" vindo da equipe, eu meio que entrei no "modo maluco". Devo ter criado uns 90 logotipos. Foi uma loucura. E, cada vez que eu mostrava algo e recebia mais feedback, refinava o trabalho mais e mais, até chegar ao que temos hoje.
Assim que tudo foi decidido e definido, criei um guia que foi distribuído às outras equipes trabalhando no evento. E foi isso que a equipe do Legends of Runeterra usou para começar.
Levando o Florescer ao LoR
Com Tom "Riot Tomukus" Sayer, designer visual sênior do Legends of Runeterra
Trabalhei no design e na implementação de recursos dentro do Legends of Runeterra. Portanto, eu trabalho com os designers de experiência de usuário, engenheiros, artistas conceituais, escritores, basicamente toda a equipe do LoR, para garantir que os jogadores tenham o que olhar e com que interagir no nosso jogo.
Meu trabalho começa de verdade quando recebemos um wireframe dos designers de UX. O wireframe é, basicamente, um conjunto de caixas cinzas, pretas e brancas que nos indica para onde vai cada peça que ainda precisamos criar. Então o meu trabalho é reorganizar essas coisas e decidir a hierarquia de cada elemento individual, o que fica no fundo e o que fica em primeiro plano. Isso é feito pensando em qual informação é mais importante para os jogadores.
Quando estávamos criando o espaço do cliente para o Florescer Espiritual, decidimos usar um rastreador para que os jogadores pudessem ver seu progresso enquanto ganhavam recompensas. Ele funciona de forma semelhante às Recompensas de Região, permitindo que os jogadores selecionem uma região e obtenham progresso nela. O design visual precisava juntar todas essas informações e garantir que o rastreador do Florescer Espiritual fosse visualmente coerente com o estilo do LoL e, ao mesmo tempo, diferente das Recompensas de Região.
Para isso, consultei os recursos e diretrizes de design visual que o Riot MrParkinson preparou para nós, traduzindo-os para um formato adequado ao LoR. Mesmo que o LoL e o LoR sejam parte da mesma propriedade intelectual (e da mesma empresa), eles têm estilos únicos de arte e design visual. O cliente do LoL tem uma interface moderna e planificada, com um pouco de dimensão e detalhes extras em certos pontos, mas é diferente do cliente de LoR, em que seguimos uma abordagem mais esqueumórfica.
O esqueumorfismo é feito para parecer realista. Se nos lembrarmos dos primeiros smartphones, o design dos aplicativos era muito realista; o bloco de notas tinha textura de papel e a fonte usada para digitar era semelhante ao estilo cursivo, escrito com papel e caneta. O motivo disso é que as pessoas não tinham muita familiaridade com a forma de fazer anotações em uma tela de toque. No LoR, escolhemos uma abordagem semelhante para imergir os jogadores no mundo de Runeterra. Tudo com que vocês interagem deve lembrar um objeto físico. Então, na hora de aplicar o design visual do Florescer Espiritual, foi preciso adaptá-lo um pouco para se encaixar no LoR. Vocês podem ver isso na interface toda, mas o exemplo mais simples é a nuvem.
Quando Riot MrParkinson forneceu as diretrizes visuais, notei que elas incluíam nuvens como um elemento de inspiração. O estilo delas lembrava o Leste Asiático, o que funciona bem com o LoR, pois os dois são bem estilizados, com várias espirais e aparência suave. Mas, para que isso funcionasse no nosso cliente, eu precisava acrescentar textura e deixar a nuvem mais metálica, pois esse é o estilo geral que usamos.
Quando comecei a trabalhar na nuvem, consultei minhas referências. Ou seja, abri o Adobe Illustrator, colei as referências visuais do Riot MrParkinson no artboard e aí comecei a desenhar. Sabia que ela devia ser metálica e mais grossa, então, precisava desenhar minha própria nuvem em vez de traçar a partir da imagem de referência.
Pessoalmente, começo desenhando no Illustrator por causa dos seus vetores limpos. Posso alterar as linhas para deixá-las mais grossas ou mais finas e, depois disso, importo o desenho para o Photoshop.
Assim que o vetor está no Photoshop, uso estilos de camadas (como bevel & emboss), adiciono sobreposições de gradiente e strokes, além de criar sombras internas e externas e brilhos. Assim que encontro exatamente o que quero, aplico esses estilos de camada ao vetor da nuvem.
Finalizei o estilo da camada acrescentando uma sombra projetada, pois eu queria que a nuvem ficasse em primeiro plano, para que ela parecesse estar flutuando acima do plano de fundo.
Aí, pintei.
Adicionei alguns toques de luz e algumas áreas de sombra. Depois, para garantir que não parecesse um pedaço liso de metal grudado em cima do cliente, acrescentei algumas linhas escuras para dar a impressão de que ele se curva na direção do jogador.
Quando fiquei satisfeito, compartilhei o logotipo com a equipe. Então, fiz tudo de novo em todos os materiais do evento, cerca de 40 ao todo. Era importante que cada imagem parecesse feita à mão, pois são mesmo!
Só espero que qualquer jogador que entre no LoL e depois no LoR (ou o contrário) veja o que criamos e reconheça tudo imediatamente como parte do mesmo evento. Isso significará que fizemos bem o nosso trabalho e oferecemos uma experiência positiva e coesa ao público dos dois jogos.
