Artini



O cliente
A Artini se apresenta como uma alfaiataria dedicada apenas ao sob medida, com ateliê e fábrica própria em Adamantina (SP). A Artini faz ternos, camisas, calças, paletós, smokings e sobretudos e atende 15 cidades em SP, PR e MS. Segundo o site da Artini, a marca é recente e se apoia em 70 anos de know-how familiar em confecção.
O desafio
O ponto de partida do site da Artini foi o material da marca: os logotipos e o deck de apresentação, de onde saíram os primeiros textos e fotos, e depois a apresentação institucional.
O briefing do site da Artini previa seis páginas: Home, História, Sob medida, Noivos, Perguntas frequentes e Contato com agendamento. O tom do site segue a voz da Artini: precisa, discreta e atual, em frases curtas e sem superlativo. A Artini pediu também um mapa das cidades atendidas, para mostrar onde a marca está no Brasil.



O que fizemos
Seis páginas, menu de sete itens
O site da Artini tem seis páginas: Home, História, Sob medida, Noivos, Perguntas frequentes e Contato e agendamento. No menu, o item Tecidos leva à seção de tecidos da Home.
Mapa das cidades atendidas
Na página Sob medida da Artini, um mapa em relevo de SP, PR e MS, com contornos do IBGE, marca as 15 cidades atendidas com alfinetes de alfaiate; cada cidade abre um cartão no clique.
Processo em cinco etapas
As cinco etapas do sob medida da Artini, da conversa e medidas à entrega, aparecem na Home como uma linha de giz que avança com a rolagem e, no Sob medida, como ficha.
Peças e tecelagens na Home
Na Home do site da Artini, a foto das seis peças troca conforme a rolagem, e um seletor apresenta as seis tecelagens com que a Artini trabalha, de Loro Piana a Reda.
História em capítulos
A página História conta a origem da Artini em seis marcos, com um índice lateral e fotos que trocam de lado a cada capítulo.
Perguntas frequentes por assunto
A página de Perguntas frequentes da Artini reúne 14 respostas em cinco assuntos, com índice por abas no computador, sanfona no celular, perguntas relacionadas e link direto para cada pergunta.
Agendamento pelo WhatsApp
O botão Agendar do site da Artini oferece dois caminhos: montar a mensagem num formulário, com orientação junto do campo, ou conversar direto no WhatsApp. Nada fica guardado no site.
Abertura, galeria e troca de página
O site da Artini abre com uma animação do logotipo, tem galerias de fotos que se ampliam e troca de página sem tela vazia, numa fusão onde o navegador permite.



Como foi feito
O site da Artini é feito em código, com Vite, React, TypeScript e Tailwind CSS, e hospedado na Vercel. O roteamento entre as páginas é próprio, sem biblioteca de rotas, e as animações usam o Framer Motion no modo que carrega só o pacote de animação usado.
As fotos oficiais da Artini saem do original em WebP, só reduzidas, sem nitidez artificial. O logotipo é desenhado em SVG a partir dos arquivos da marca, as fontes Playfair Display e DM Sans ficam no próprio site, e testes automatizados conferem as rotas, a mensagem do WhatsApp e os fatos do site.
Acessibilidade e desempenho
O site da Artini respeita o pedido de menos movimento do sistema: a abertura não roda e as animações vão direto ao estado final. Menu, galeria, painel Agendar, mapa e perguntas funcionam pelo teclado, com anel de foco em duas cores para as faixas claras e escuras. O contraste do texto do site da Artini foi medido pela WCAG 2.1, e cada página pré-carrega a foto da capa.
Estrutura para a busca
Cada página do site da Artini sai do build como um HTML próprio, com título, descrição, prévia de compartilhamento e todo o texto, para buscadores que não rodam JavaScript. Os dados estruturados descrevem a Artini como ClothingStore, com as 15 cidades atendidas, e a página de perguntas leva o FAQPage com as 14 respostas. O sitemap e o endereço canônico já estão prontos para quando a Artini tiver domínio próprio.
Processo
O site da Artini andou em rodadas de ajuste, cada uma registrada num documento de decisões que chega à 27ª volta. A Artini revisou o site em vídeos gravados sobre as páginas publicadas, num PDF de ajustes e nos próprios textos. Os blocos que andam com a rolagem ganharam três desenhos: linha do tempo na Home, ficha no Sob medida e capítulos na História.



Ficha
- Cliente
- Artini
- Feito por
- InCraft
- Segmento
- Alfaiataria sob medida
- Ano
- 2026 – até hoje
- Serviços
- Website, UX/UI Design, Dev, Suporte / acompanhamento
- Tecnologia
- Vite, React, TypeScript, Tailwind CSS, Framer Motion, Vercel