Product designer

ThiagoGeorge

I design it.
Then I build it.Eu desenho.
E eu mesmo desenvolvo.

UX/UI and front-end for websites, online stores and real-time 3D experiences.UX/UI e front-end para sites, lojas online e experiências 3D em tempo real.

Open to roles in Portugal and Brazil, on-site or remoteAberto a vagas em Portugal e no Brasil, presencial ou remoto

Selected workProjetos selecionados

  1. 01INDUXENWebGL / Three.js / Company siteWebGL / Three.js / Site de empresaLive siteSite ao vivo
  2. 02The Air Draws ItWebGL / Shaders / GPU particlesWebGL / Shaders / Partículas na GPULive demoDemo ao vivo
  3. 03Anatomy of a StrideWebGL / Three.js / GLSL / Product pageWebGL / Three.js / GLSL / Página de produtoCase studyEstudo de caso

Case studies for INDUXEN and The Air Draws It are on the way. The live versions are open now.Os estudos de caso da INDUXEN e de The Air Draws It estão a caminho. As versões ao vivo já estão abertas.

AboutSobre

Designer by trade. Developer by origin.Designer de profissão. Desenvolvedor de origem.

I'm a product designer with 5+ years of experience and a developer by origin. I work on online stores, web platforms and full 3D experiences. I've led a design team, built a web platform from zero, used by customers and by internal consultants, and worked side by side with engineers.

I handle the full UX/UI: research, discovery, prototyping and testing. And instead of handing the design over to developers, I now build the site myself, in JavaScript and Three.js, with AI as my partner. What used to take a whole team, I deliver on my own.

Sou product designer com mais de 5 anos de experiência e desenvolvedor de origem. Trabalho com lojas online, plataformas web e experiências 3D completas. Já liderei uma equipe de design, construí uma plataforma web do zero, usada por clientes e por consultores internos, e trabalhei lado a lado com engenheiros.

Cuido de todo o UX/UI: pesquisa, discovery, prototipação e testes. E, em vez de passar o design para desenvolvedores, agora eu mesmo desenvolvo o site, em JavaScript e Three.js, com a IA como parceira. O que antes exigia uma equipe inteira, hoje entrego sozinho.

Design

  • UX/UI
  • ResearchPesquisa
  • Discovery
  • PrototypingPrototipação
  • TestingTestes
  • Team leadLiderança

BuildDesenvolvimento

  • JavaScript
  • Three.js
  • GLSL
  • HTML/CSS
  • C#

Education, courses and certificatesFormação, cursos e certificados

EducationFormação

  • IT TechnicianTécnico em Tecnologia da Informação2018–2020Universidade Adventista de São Paulo
  • English, intensive courseInglês, curso intensivo2024–now2024–atualEd School

LanguagesIdiomas

  • PortuguesePortuguêsNativeNativo
  • EnglishInglêsIntermediate, studyingIntermediário, cursando

CoursesCursos

  • Design SprintENAP
  • Design ThinkingENAP
  • UX DesignENAP
  • Product DesignerSaturn
  • FigmaCursae
  • Introduction to DesignIntrodução ao DesignAwari
ContactContato

Let's talk.Vamos conversar.

Based in Brazil. Open to roles in Portugal and Brazil, on-site or remote.No Brasil. Aberto a vagas em Portugal e no Brasil, presencial ou remoto.

All workTodos os projetos

03 · Case studyEstudo de caso

Anatomy of aStride

A product page for a running shoe where the 3D model is the store. You take the shoe apart, look at each material up close, then build your own.Uma página de produto de tênis de corrida em que o modelo 3D é a própria loja. Você desmonta o tênis, vê cada material de perto e depois monta o seu.

Open the live demoAbrir a demo ao vivo
RolePapel
Design and developmentDesign e desenvolvimento
YearAno
2026
TypeTipo
Concept, fictional brand MAROConceito, marca fictícia MARO
LanguagesIdiomas
English, PortugueseInglês, português
The opening frame: the word fills with warm light in about three seconds while a band of light crosses the shoe.A abertura: a palavra se preenche de luz quente em cerca de três segundos enquanto uma faixa de luz cruza o tênis.
The problemO problema

You can't touch a shoe online.Não dá para tocar um tênis pela tela.

On most stores, a running shoe is a row of photos. You can't feel the mesh, see the foam or understand what each layer does, so the price has nothing to stand on.Na maioria das lojas, um tênis de corrida é uma fileira de fotos. Não dá para sentir a malha, ver a espuma ou entender o que cada camada faz, e o preço fica sem argumento.

The brief I set: make the structure and the materials visible, and let the 3D lead straight into the purchase, on desktop and on the phone.O desafio que defini: mostrar a estrutura e os materiais e fazer o 3D levar direto à compra, no computador e no celular.

My roleMeu papel

From concept to code.Do conceito ao código.

I did the whole thing: concept, art direction, UX/UI, 3D integration and front-end development, then testing in two languages and five screen sizes. AI worked as my partner during the build.Fiz tudo: conceito, direção de arte, UX/UI, integração do 3D e desenvolvimento front-end, e depois os testes em dois idiomas e cinco tamanhos de tela. A IA foi minha parceira na construção.

  • ConceptConceito
  • Art directionDireção de arte
  • UX/UI
  • 3D integrationIntegração 3D
  • Front-end
  • TestingTestes
Key decisionsDecisões

Five choices that shaped it.Cinco escolhas que definiram o projeto.

  1. 1

    Two directions before any codeDuas direções antes de qualquer código

    I designed the opening in two directions, a dark studio and a light gallery, and chose one before building the rest. The dark studio won: warm key light, a cold rim light behind the shoe, and a heavy condensed word for the shoe to stand in front of.Desenhei a abertura em duas direções, um estúdio escuro e uma galeria clara, e escolhi uma antes de construir o resto. Ganhou o estúdio escuro: luz principal quente, luz de recorte fria atrás do tênis e uma palavra condensada e pesada para o tênis ficar na frente.

    A · Night labChosenEscolhida
    B · GalleryDroppedDescartada
  2. 2

    An exploded view that frames itselfUma vista explodida que se enquadra sozinha

    As you scroll, the shoe separates into six parts. The camera measures each part on screen and fits the whole stack between the header, the text and the index, so it holds up on a 360 px phone and on a wide desktop.Ao rolar, o tênis se separa em seis peças. A câmera mede cada peça na tela e encaixa a pilha inteira entre o cabeçalho, o texto e o índice, então funciona num celular de 360 px e num desktop largo.

  3. 3

    Focus with light, not transparencyFoco com luz, não com transparência

    Fading the other parts out looked like a rendering bug. Instead, the parts out of focus drop into a desaturated shadow, done in a shader, so the active part reads first and the shoe still feels solid.Deixar as outras peças transparentes parecia defeito de renderização. Em vez disso, as peças fora de foco caem numa sombra dessaturada, feita em shader, e a peça ativa aparece primeiro sem o tênis perder o volume.

  4. 4

    Each material gets its own lightCada material com a sua luz

    Three close-ups, each lit for what it needs to show: raking light on the mesh, top light on the laces, side light on the foam. On desktop the light follows the cursor, so you can look at the grain yourself.Três closes, cada um iluminado para o que precisa mostrar: luz rasante na malha, luz de cima nos cadarços, luz lateral na espuma. No desktop a luz segue o cursor, e você mesmo explora a textura.

  5. 5

    The configurator ends in the bagO configurador termina na sacola

    Ready-made colourways, colour per part, size and price in one column next to the shoe. Each colour change sends a sweep of light across the model, so the change is felt, not just seen. The bag is a keyboard-friendly dialog. It's a demo store: nothing is sold.Combinações prontas, cor por peça, tamanho e preço numa coluna ao lado do tênis. Cada troca de cor passa uma faixa de luz pelo modelo, para a mudança ser sentida e não só vista. A sacola é um diálogo que funciona pelo teclado. É uma loja de demonstração: nada é vendido.

On the phoneNo celular

The same story, one hand.A mesma história, com uma mão.

On the phone the layout is rebuilt rather than shrunk: part numbers become a row of buttons, the configurator puts sizes before the colour tabs, and you rotate the shoe by dragging.No celular o layout é refeito, não só reduzido: os números das peças viram uma fileira de botões, o configurador traz os tamanhos antes das abas de cor e o tênis gira com o dedo.

OpeningAbertura
Anatomy, part 3Anatomia, peça 3
ConfiguratorConfigurador
EngineeringEngenharia

Under the hood.Por dentro.

  • The modelO modeloAn open-licence shoe model, split into six named parts from its connected meshes so it could come apart. The original brand mark was removed from the texture.Um modelo de tênis de licença aberta, dividido em seis peças nomeadas a partir das malhas conectadas para poder ser desmontado. A marca original foi removida da textura.
  • File weightPeso do arquivoThe model went from 7.2 MB to 2.9 MB by removing unused data and converting the textures to WebP, with no visible change.O modelo caiu de 7,2 MB para 2,9 MB com a remoção de dados sem uso e a conversão das texturas para WebP, sem mudança visível.
  • ShadersRecolouring, the shadow focus and the light sweep are written in GLSL and injected into the standard Three.js material.A troca de cor, o foco por sombra e a faixa de luz são escritos em GLSL e injetados no material padrão do Three.js.
  • AccessibilityAcessibilidadeTabs with arrow keys, the 3D viewer exposed as a slider, a bag dialog that keeps focus inside, reduced-motion support and separate hints for touch and mouse.Abas com setas do teclado, o visualizador 3D exposto como controle deslizante, sacola em diálogo que mantém o foco, suporte a movimento reduzido e dicas diferentes para toque e mouse.

Built withFeito com

  • JavaScript
  • Three.js
  • GLSL
  • HTML/CSS
  • glTF
  • WebP
ResultResultado

One scene, from first look to bag.Uma cena, do primeiro olhar à sacola.

A working product page in English and Portuguese, tested at five screen sizes from 360 to 1440 px, with no console errors and no sideways scroll. The 3D does the selling: every section is the same shoe, seen for a different reason.Uma página de produto funcionando em inglês e português, testada em cinco tamanhos de tela de 360 a 1440 px, sem erros no console e sem rolagem lateral. O 3D faz a venda: cada seção é o mesmo tênis, visto por um motivo diferente.

Next step: serve the model as a compressed binary file and load it on demand, with an image in its place while it loads.Próximo passo: servir o modelo como arquivo binário comprimido e carregá-lo sob demanda, com uma imagem no lugar enquanto carrega.

3D model: Warrior running shoe by kunyong_Chen (Sketchfab), CC BY 4.0, modified. MARO is a fictional brand; price and specs are illustrative.Modelo 3D: Warrior running shoe, de kunyong_Chen (Sketchfab), CC BY 4.0, modificado. MARO é uma marca fictícia; preço e especificações são ilustrativos.