SUTATO

A virada do projeto veio do feedback: manter os pontos fortes já conhecidos da descoberta por cards, criar uma hierarquia editorial mais clara e deixar a leitura seguir sem interrupções repetidas.

O briefing da revisão pedia uma sequência de descoberta mais clara: uma abertura forte, matérias recentes, conteúdo em alta e uma curadoria de leituras mais profundas. Também pedia que o próximo artigo começasse no mesmo fluxo de leitura.

Desenvolvi essas decisões primeiro em baixa fidelidade. Os wireframes se concentraram em hierarquia, navegação, famílias de cards reutilizáveis e adaptação para mobile. Como essa fase ficou só na estrutura, o feedback teve um lugar direto no trabalho: dava para ligar cada pedido a uma mudança na página ou no comportamento dela.

As publicações de referência tiveram funções diferentes. A GamingBible orientou a lógica de descoberta; a Game Informer, a importância editorial e o ritmo de revista. Depois, desenvolvi a expressão visual do SUTATO a partir do material de marca fornecido.

A direção visual, Signal Cut, tira sua geometria de cortes do ritmo do logotipo fornecido pelo SUTATO. O amarelo marca momentos escolhidos, enquanto a escala das imagens, os títulos condensados e a composição assimétrica definem o andamento da página.

Usei esse recurso em aberturas editoriais, mudanças de seção e limites de leitura. Limitar a repetição ajuda esses momentos a continuarem se destacando. A área de leitura é mais calma, com uma coluna de texto estável e espaço para trechos mais longos.

A tipografia também exigiu uma decisão prática de handoff. A família DDT fornecida não estava disponível no ambiente de edição do Figma, então os títulos editáveis usam Barlow Condensed e o texto de leitura usa Barlow. O logotipo fornecido continua intacto. Assim a tipografia segue editável e mantém o ritmo comprimido dos títulos da direção visual.

Uma publicação precisa de mais do que uma grade de cards repetida. A home final reúne vários formatos editoriais: uma faixa visual de Stories, um Brief compacto, um debate Two Sides, um Radar semanal e um Editor’s Cut guiado por imagens.

Cada formato muda a forma de encontrar uma matéria. Alguns servem para uma passada de olhos; outros convidam a uma pausa mais longa. A página de listagem leva essa hierarquia para a visão de categoria e combina conteúdo de destaque, análise e um feed cronológico.

No mobile, repensei a composição em torno de uma imagem dominante e de uma sequência curta que a acompanha. A escala das imagens e a hierarquia editorial se mantêm em todos os tamanhos de tela, sem que todo arranjo do desktop precise ser empilhado como está.

O design do artigo tira do corpo do texto as interrupções repetidas de matérias relacionadas. Quando um artigo termina, o próximo começa com seu próprio cabeçalho e sua própria imagem na mesma rolagem. A transição segue identificável, então a experiência contínua ainda tem limites editoriais.

No protótipo dá para examinar esse comportamento. Ele também traz filtros por categoria, navegação, visualizadores de stories e um carrossel no hero. A progressão automática é limitada: o hero avança uma vez e para; os controles manuais continuam disponíveis.

O artefato de revisão independente acrescenta um fluxo de leitura funcional e registra o tratamento de foco do teclado nos overlays e o suporte a movimento reduzido. Esses comportamentos deixam o design mais fácil de avaliar como experiência, inclusive a forma como alguém abre, fecha e volta de um elemento interativo.

O trabalho inclui protótipos no Figma para mobile e desktop, uma página separada com o racional do design e um artefato de revisão em HTML autocontido. Os documentos de entrega registram verificações visuais e de interação, com evidências em vários tamanhos de tela.

O projeto mostra como feedback, estrutura editorial, expressão de marca e comportamento podem continuar conectados ao longo de uma revisão de design. Os artigos e as imagens do protótipo são material de demonstração; a entrega é a própria experiência da publicação.