ABRAEL

2023 – até hoje

A ABRAEL reúne marcas e empresas de luxo para unir, desenvolver e representar o setor no Brasil e na América Latina. O site apresenta a associação, suas associadas e seus conteúdos, com vídeo das marcas e os logos das associadas por setor.

Site sob medida

Mercado de luxo

Ver Projeto

Abertura do site da ABRAEL no computador: o nome da Associação das Marcas e Empresas de Luxo sobre fundo escuro, com o menu e os idiomas

Mulher em silhueta, de costas e de perfil, com vários fios de pérolas caindo pelas costas, sobre fundo pêssego

Abertura do site da ABRAEL no celular, com o nome da associação e o texto de apresentação

O cliente

A ABRAEL é a associação das marcas e empresas de luxo: uma entidade sem fins lucrativos, fundada em 2008, que se apresenta com a missão de unir, desenvolver e representar as marcas de luxo no Brasil e na América Latina. Segundo o site da ABRAEL, a associação reúne mais de 70 marcas e organiza eventos, workshops, conferências e treinamentos.

O desafio

O ponto de partida do trabalho foi o site institucional da ABRAEL em WordPress com Elementor, que continua no ar em abrael.org.br. A InCraft refez o site da ABRAEL em código, a partir dos mesmos textos, imagens, vídeos, links e endereços das páginas.

Numa etapa seguinte, a tarefa registrada foi levar as páginas Sobre e Associadas ao padrão de design e de animação da Home do novo site da ABRAEL.

Seção Treinamentos, eventos e meetings do site da ABRAEL no computador, com a foto de um auditório

Título Treinamentos, eventos e meetings e a lista Eventos, Workshops, Conferências e Treinamentos, no site da ABRAEL

Seção Marcas Associadas do site da ABRAEL no celular, com a foto do mostrador de um relógio

O que fizemos

Site institucional refeito em código

A InCraft refez em código o site institucional da ABRAEL: Home, Sobre e Associadas, nos mesmos endereços do site em WordPress, com textos, imagens, vídeos e links conferidos item a item.
Abertura com os nomes das associadas

A Home da ABRAEL abre com uma parede com os nomes das associadas, que acendem um a um; depois, o logo da ABRAEL se abre no centro. Um toque ou uma tecla pula a abertura.
Vídeo que cresce com a rolagem

Na Home da ABRAEL, o vídeo da seção Marcas Associadas começa um pouco menor que a tela e cresce com a rolagem até ocupá-la inteira.
Associadas por setor na Home

A Home da ABRAEL mostra os logos das associadas em oito setores, de Moda e Acessórios a Serviços, com índice lateral. Ao passar o cursor ou tocar, o logo se destaca e o nome aparece.
Parede de logos no Sobre

Na página Sobre da ABRAEL, os 70 logos das associadas, em vetor, formam uma parede que acende logo a logo enquanto a rolagem desce e apaga quando ela sobe.
Sobre em seis capítulos

A página Sobre da ABRAEL se divide em seis capítulos numerados, de Quem nós somos a Contato, com índice preso à lateral, fundo que alterna entre azul e preto e mapa interativo no Contato.
Diretório de A a Z

A página Associadas lista as marcas da ABRAEL de A a Z, só pelos nomes, com um índice de letras preso à lateral que leva direto a cada letra.
Busca dentro do próprio site

A busca do site da ABRAEL procura no texto da Home, do Sobre e das Associadas, agrupa os resultados por página e leva ao trecho escolhido, com a palavra realçada.

Busca do site da ABRAEL no celular: resultados para “eventos” agrupados por página, com a palavra realçada

Parede de logos das associadas na página Sobre do site da ABRAEL, com parte dos logos acesos pela rolagem

Como foi feito

O site da ABRAEL é feito em Next.js 16, React 19 e TypeScript. Cada página sai pronta em HTML estático, e o JavaScript fica só nas partes que interagem, como a busca e os efeitos de rolagem. Os estilos do site da ABRAEL usam CSS Modules e variáveis de cor e medida.

As animações do site da ABRAEL usam CSS e recursos do próprio navegador, como Web Animations API e IntersectionObserver. O seletor de idiomas, com português, inglês, francês e italiano, mantém o widget de tradução do site em WordPress. O site da ABRAEL está hospedado na Vercel.

Acessibilidade e desempenho

No site da ABRAEL, quem pede menos movimento não vê a abertura da Home, e as seções aparecem prontas, sem efeitos de rolagem; o mesmo vale sem JavaScript. A busca do site da ABRAEL funciona pelo teclado e devolve o foco à lupa ao fechar. As fontes tipográficas vêm do próprio site, as imagens saem em WebP, em vários tamanhos, e os vídeos ficam em cache por um ano.

Estrutura para a busca

Cada página pública do site da ABRAEL sai em HTML estático, com os mesmos títulos do site em WordPress, descrição própria e imagem de compartilhamento para Open Graph e Twitter. O sitemap do site da ABRAEL lista a Home, o Sobre e as Associadas, e o endereço do sitemap antigo do WordPress, o cadastrado no Search Console, redireciona para o novo com 301.

Processo

O site da ABRAEL passou por rodadas registradas. Depois de um primeiro redesenho da Home, do Sobre e das Associadas, as três páginas voltaram à estrutura do WordPress, com 17 ajustes de acabamento. Em seguida, o Sobre e as Associadas ganharam três direções de design, fiel, editorial e imersiva, e a editorial foi a escolhida. Os nomes de duas marcas foram acertados a pedido da ABRAEL.