Tinker

Tinker é um portátil que eu inventei para quem tem os jogos favoritos feitos por estúdios pequenos. A página precisava fazer um produto que ninguém pode tocar parecer real, sem nenhuma foto: todo o visual é feito em código com three.js, canvas e SVG.

Planejamento de UX
3D · three.js
Motion
Game design
Front-end

Página ao vivo

Resumo

Página de lançamento de um portátil para jogos indie: sua estante do itch.io, uma desmontagem em 3D e um jogo para jogar antes de reservar.

0fotos, todo o visual é código

10jogos numa estante com filtros

1jogo para jogar na página

Meu papel: Tudo: conceito, roadmap de UX e mapa do produto, wireframes no Figma, protótipo low-fi, texto, design visual e de movimento, e o front-end.
O problema: Um portátil para jogos pequenos só faz sentido se os seus jogos já estiverem nele, e uma ficha técnica não mostra isso. A biblioteca indie fica espalhada entre bundles, jogos de game jam e downloads, então a página precisava mostrar a estante primeiro e deixar a pessoa jogar antes de pedir um depósito.
O que fiz: A página segue as perguntas de quem pensa em reservar, na ordem: o que é, o que tem dentro, os números, a estante, um jogo para testar, os acabamentos e a ficha técnica. A biblioteca é uma estante com filtros sincronizada com o itch.io, no lugar de uma lista de recursos, e o Wickfire Dash, um arcade curto, roda na própria página.
Uma decisão que defendo: Uma desmontagem fixa no scroll em que cada camada sai reto antes de ir para o lado, para nenhuma peça cruzar outra e o olho acompanhar cada uma. O movimento usa só transform e opacity, e existe uma versão completa com movimento reduzido e navegação por teclado.
Resultado: Uma página conceito no ar, num único arquivo HTML e sem fotos: portátil em 3D, desmontagem ligada ao scroll, biblioteca com filtros, um minijogo jogável, seletor de acabamento e formulário de reserva. O próximo teste seria ver se colocar a biblioteca antes da desmontagem aumenta os cliques em reservar.

Como trabalhei

Do roadmap à página no ar, na ordem em que trabalhei.

Roadmap de UX e mapa do produtoQuem compra um portátil para jogos indie, o que pergunta antes de reservar e qual seção responde cada pergunta.
Wireframes no FigmaHierarquia de desktop e mobile antes do 3D: onde fica o aparelho, onde fica o texto, onde o botão de reserva se repete.
Protótipo low-fiUma versão clicável para validar a ordem das seções e os filtros da estante.
Assets em códigoO aparelho, as capas dos jogos e as camadas da desmontagem feitos com three.js, canvas e SVG.
Build e acabamentoDesmontagem ligada ao scroll, o minijogo, versão com movimento reduzido e suporte a teclado, testado em celulares.