

PROJETO
OverwatchInfo é um site informacional sobre o jogo Overwatch. Todo o conteúdo exposto foi escolhido, feito e gravado/fotografado por mim. O objetivo do site é informar sobre a plataforma online para todos os que gostam de videogame e Overwatch. Para isso, filtrei e hierarquizei informações e organizei de maneira didática no intuito de facilitar o entendimento. Além disso, o design faz referência ao do jogo como uma estratégia de estabelecer relação.
Cores
As cores do site se baseiam em: roxo, branco, laranja e cinza. O branco e o laranja fazem referência às cores da logo da associação Overwatch. O roxo foi escolhido para fazer um contraste com o laranja, além de dar um ar de entretenimento. O cinza, para substituir o preto e dar uma maior leveza ao design.
Logo
O nome "OverwatchInfo" significa "informações sobre a Overwatch". A logo possuí uma lanterna no lugar do I, pois representa o que o site busca oferecer - iluminar as informações para facilitar o entendimento do jogo. O símbolo é um spray da personagem Sombra (cada personagem tem uma galeria de sprays que podem ser selecionados conforme o jogador ganha). A escolha do mesmo foi calculado, pois a personagem é uma hacker e entende muito sobre computadores. Como isso é um site, resolvi colocar a ideia em prática. Além disso, o spray é uma mão esquerda, o que parece a posição da dos jogadores ao jogar no PC (dedos posicionados nas teclas W, A, S e D). As cores da logo são referência as do jogo (dito anteriormente). Atrás, um fundo de GIF roxo na intenção de mostrar tecnologia.
Fonte
A fonte escolhida para a logo, título da página, título nas páginas, subtítulo e nome do botão é a Big Noodle Titling. Essa fonte é parecida com a utilizada no jogo, tanto em seu menu quanto nas informações básicas. Na logo e no subtítulo, ela foi usada no formato normal para dar maior clareza. No restante, em itálico para fazer referência direta ao jogo, já que a usam em itálico. Na logo o tamanho é 110. No título da página e título na página, 68. No subtítulo, 31. De restante, a fonte utilizada foi Times New Roman, tamanho 17 e espaçamento 2.
Páginas
As páginas foram organizadas hierarquicamente: Capa, História do jogo, Sobre o jogo (divido em heróis, mapas e modos de jogo), Competitivo, POTG e Dicas (o POTG veio antes de Dicas para explicar o conceito de jogada da partida antes de dar dicas para fazê-las).
Background
A imagem escolhida para o background de todas as páginas faz referência ao plano de fundo básico do jogo. Na foto abaixo, poderá ver meu perfil de carreira; no fundo, a semelhança do design:

Além disso, selecionei faixas com imagens que fazem alguma referência ao conteúdo da página.
Capa
A capa é a parte introdutória do site. Com isso, coloquei título que desejasse boas-vindas e um subtítulo que desse uma leve explicação sobre o conteúdo geral. O texto explica um pouco das páginas para guiar o leitor a achar o que lhe interessa. A imagem da faixa é o background do menu do jogo em seu evento de aniversário de 1 ano. Nela está presente todos os heróis disponíveis na época, dando um ar de boas-vindas ao universo Overwatch. Embaixo, está a imagem da personagem Widowmaker, minha preferida. A intenção foi mostrar que, além da informação, o site conta com características pessoais.
Imagens
Todas as imagens possuem um design com parafusos. A intenção foi atribuir um ar de mecânica futurística, já que o jogo é passado no futuro e conta com a presença de robôs.
História
É nessa página que conto a história por trás do jogo. Por que o jogo acontece? Onde? Quando? A imagem da faixa é uma montagem de cenas dos quadrinhos e foi escolhida para mostrar que a história é contata por diferentes plataformas. Ao descer, a primeira imagem que aparece é a pichação em King's Row da frase "Omnics have no rights", do português "Ômnicos não tem direitos". A intenção foi ilustrar a última frase: "Muitos não aceitavam a presença dos Ômnicos na sociedade, gerando um certo conflito". Em seguida, aparecem duas imagens montadas por mim que representam a guerra entre Ômnicos e humanos. Nestas, aparecem a personagem Orisa na skin Setor Nulo, skin que faz referência ao grupo extremista de ômnicos, e o personagem Soldado:76 na skin Comandante de ataque Morrison, que representa a sua forma antes do incidente. Depois, usei a imagem do evento de 1 ano da Overwatch, "printada" na época, para mostrar o crescimento da associação. Ao longo do texto, explico um pouco das imagens expostas. Fiz um jogo de versus antes e depois dos personagens citados com suas skins. No meio delas, aparece o personagem McCree na skin Blackwatch para ilustrar o que foi dito. Por último, recriei a cena de Winston no Observatório Gibraltar, narrada em um dos curtas.
O jogo - Heróis
Para essa parte, optei por fazer um menu parecido com a geleria de heróis do jogo:

No menu, selecionei a cor que resume cada personagem. Implantei botões com âncoras para facilitar a busca por informação. As fotos escolhidas foram prints tirados de apresentações de destaque no menu de seleção do herói.
O jogo - Mapa
O design preza a simplicidade na forma de informação esteira. As fotos dessa página foram prints tirados no loading para entrar no mapa.
O jogo - Modos de jogo
Estratégia de esteira simples, as imagens são didáticas para o que está sendo dito. Nelas, observa-se o que é uma carga e um ponto.
OBS: As páginas relacionadas ao jogo não possuem faixa, pois a ideia é torná-las sub-páginas.
Competitivo
Nesta parte, explico como funciona as classificações do jogo competitivo. A faixa escolhida é o planeta terra, que aparece no mapa Colônia Lunar Horizon, no intuito de mostrar a conexão dos países através dos servidores. A primeira imagem da página é a legenda das divisões de rank presente na parte do competitivo do jogo. Em seguida, aparece o TOP500 da season 6 no momento em que a foto foi tirada. Depois, o ícone do modo competitivo aparece. É nele que se clica para inciar uma partida competitiva. E, por último, a arma dorada da personagem Ana, exposta em seu menu. Todas as imagens são para ilustrar o que está sendo dito até então.
POTG
Ali explico o que é POTG. A faixa escolhida foi uma animação de destaque da personagem Pharah, uma das preferidas da comunidade para fazer jogadas da partida. Sua habilidade suprema é capaz de matar muitos de forma rápida. Ao descer, aparece o primeiro vídeo do site. Seu design possui sombra de forma a encaixar ele na tela do computador. O vídeo contém várias POTG's feitas por mim, sempre buscando um ar cômico na edição.
Dicas
Em dicas há dois vídeos: Dicas rápidas Lúcio e Dicas Rápida Symmetra. Ambos buscando explorar as habilidades de forma simples, engraçada e eficaz. A faixa escolhida para a página é uma apresentação de destaque do personagem Lúcio, presente em um dos vídeos.
quem sou eu?
Nessa página, tentei deixar o ar mais pessoal; afinal, ela fala sobre mim. Na faixa, coloquei a imagem artística de outro videogame que eu jogo, League of Legends. Como no texto eu falo sobre minha paixão por jogos, decidi colocar uma imagem com gráficos que representam videogame. Embaixo, minha foto com uma breve descrição a meu respeito. O design escolhido para cercar a mensagem foi pensado no intuito de deixar como um "aviso" fixado.
Fale comigo
Em fale comigo, há um campo a ser preenchido por alguém que quiser falar comigo. O design dele imita o restante do site. Com uma caixinha de diálogo, um recado para avisar que responderei a mensagem dentro de algumas horas. Imagens da personagem D.va aparecem ao lado, já que a personagem é retratada como uma adolescente ligada às redes sociais.
Pesquisa
O projeto é a explicação da arquitetura do site. Portanto, na imagem da faixa, coloquei o mapa Oásis. Este, por sua vez, é reconhecido por sua arquitetura futurística e bem projetada.
Projeto
Para a pesquisa, escolhi uma faixa que mostrasse o personagem Winston, responsável pelas pesquisas da Overwatch. O subtítulo consta com um tamanho maior (34) para que se encaixasse melhor na página.
Para celular
O site foi otimizado para a versão celular. Algumas alterações foram feitas para se enquadrar melhor na tela do smartphone. No entanto, não houveram mudanças drásticas; apenas nas quantidades de itens horizontais. As fontes básicas continuaram 17 e a logo aumentou para 126. O botão das redes sociais foi retirado, pois ocupava muito espaço. Esse último não se fez necessário, uma vez que é possível acessar o canal do YouTube pelo vídeo e me contatar pelo "fale comigo". O menu se transformou em um botão no canto direito superior da tela. Ao clicar, todas as páginas aparecem para serem visitadas facilmente. Também, ao descer a página, aparece um botão para voltar ao topo no intuito de facilitar o acesso.