Oficina de cerâmica Projeto de demonstração
Barro — oficina de cerâmica onde se escolhe o vidrado antes do workshop
Um site biscoito-e-cobalto para uma oficina nas Caldas da Rainha: um seletor de vidrado que pinta uma taça, prato ou caneca desenhados; um mês de workshops com lugares reais e uma folha de marcação que leva o vidrado escolhido; o processo de seis passos e três semanas; e uma pequena loja com cesto.
feitura.com/demo/barro — Ao vivo
Uma oficina de cerâmica vende uma experiência que as pessoas não conseguem imaginar: o que vou fazer, como vai ficar, porque demora três semanas? O site tem de responder com o próprio objeto — escolher forma e vidrado, vê-lo, marcar o lugar que o faz — e ser tão honesto sobre peças que partem no forno como sobre preços.
O que está lá dentro
- Seletor de vidrado: três formas desenhadas × cinco vidrados (cobalto, celadon, tenmoku, leite, sal) com gradientes, brilho e salpicos — sem fotografia
- Lista de workshops com filtro por tipo, datas, duração, preço por pessoa ou por par, lugares com estados de poucos e esgotado
- Folha de marcação que leva a forma e o vidrado escolhidos, seletor de pessoas limitado pelos lugares livres, nota de primeira vez, total em tempo real e lista de espera — só front-end
- Cronologia do processo em seis passos com temperaturas e dias reais, numa faixa carvão
- Loja de quatro peças com cesto, total corrente e checkout de demonstração claramente assinalado
- Display em serifa tipo Charter, mono para datas e preços, um único acento cobalto sobre fundo biscoito
- Bilingue PT/EN, diálogo fechável com Escape, gestão de foco, alvos de 44 px, movimento reduzido respeitado
Registo de construção
- Direção de arte — biscoito, carvão, cobalto das Caldas; serifa para display; estudos da paleta de vidrados
- Seletor de vidrado: três formas SVG, cinco vidrados com gradientes, brilho e salpicos
- Dados e lista de workshops, filtros, estados de lugares; folha de marcação com totais e lista de espera
- Cronologia do processo, loja com cesto, oficina e mapa
- FAQ, revisão do texto bilingue, verificações de teclado e a 375px
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript