UI Design & Customização de Interface

Site institucional desenvolvido a partir de um template proprietário, com personalização de componentes e uma identidade visual alinhada ao posicionamento da marca.

Cliente

b8one

Segmento

Móveis e decoração

MEU PAPEL

UI Designer

SOLUÇÃO

Customização de template

ANO

2026

O projeto

Template de e-commerce e produto da empresa. Este projeto é uma versão customizada para uma loja de móveis: a estrutura base do template se mantém, e a identidade, a Home e os componentes ganham uma leitura própria.

Público e tom

Uma loja para a classe média alta, que compra móveis como quem escolhe um ambiente. O tom pedia sofisticação e elegância. Mais imagem, menos informação por dobra, e tempo para o olhar descansar entre uma seção e outra.

Minha atuação

Customização inteira da home, escolhendo cores, tipografia, espaçamento, disposição das informações, e quais componentes fariam sentido para esse e-commerce.

Home

A home foi personalizada para traduzir uma percepção mais sofisticada e editorial.
Ajustei hierarquia, espaçamentos, proporção dos elementos, banners e apresentação das categorias, buscando equilibrar impacto visual e funcionalidade.

Design System

Customização do Design System existente, ajustando tipografia, cores, variáveis e microcomponentes para traduzir a identidade do cliente de forma consistente na interface.

77

cores primitivas

60

tokens de cor

42

estilos de texto

82

componentes

458

variantes

Tipografia

Playfair Display para o tom editorial nos títulos de banner, Manrope organiza a interface e
os preços.

Títulos

PLAYFAIR DISPLAY

INTERFACE

MANROPE

VARIAÇÕES

REGULAR, MEDIUM E SEMIBOLD

Títulos editoriais

Playfair Display Regular, nos banners de dobra inteira e no manifesto da marca.

Conforto que inspira

Sofisticação que se sente

Interface

Manrope Regular, Medium e SemiBold, em 14 tamanhos, do 11 ao 128 px.

3XL 48 px

Poltrona Aurora

2XL 32 px

Poltrona Aurora

XL 24 px

Poltrona Aurora

LG 18 px

Poltrona Aurora

SM 14 px

Poltrona Aurora

XS 12 px

Poltrona Aurora

Paleta de cores

Terracota como cor principal, puxada do couro e da madeira das peças, e um azul petróleo profundo como contraponto frio. Os neutros ficam para a interface, para que a cor apareça nas imagens e nos pontos de ação.

Secundária

HEX #062D3E

Token

Fill/Brand/Secondary/Medium

Neutros

HEX #F5F5F5

Token

Layer/Floor/1

Card de produto

Card com estados e variações para desktop e mobile. Variações de cores, nome, valor, e interação estado hover para visibilidade do CTA e mudança da imagem do produto.

Componentes criados
para a loja

Banners animados para categorias, experiências da marca e galeria de fotos dos ambientes. Os dois primeiros reagem ao hover para convidar à exploração sem precisar de mais texto e a imagem da galeria expande por clique.

CATEGORIAS

Uma categoria grande e duas menores formam o mosaico: cada peça é um ambiente, não uma lista de produtos. No hover, a faixa terracota sobe e cobre a foto.

categoria Cozinha, Padrão

Padrão

categoria Cozinha, Hover

Hover

Banner animado

Cinco experiências da marca em cards verticais. No hover, a foto aproxima cerca
de 5%, um movimento discreto que combina com o tom da loja.

banner de experiência, Padrão

Padrão

banner de experiência, Hover

Hover

GALERIA

Imagem selecionada por clique expande e as demais diminuem automaticamente.

Padrão

Por clique

Página de produto

A área de compra segue o template: galeria, acabamento, preço, parcelamento e frete. Abaixo dela, a página vira editorial, com fotos de ambiente e textos sobre material e conforto antes da ficha técnica.

Departamento e categoria

As listagens abrem com um banner de ambiente e categorias em foto, não em texto. O filtro traz medidas (altura, largura e profundidade), o dado que mais pesa na compra de um móvel.

Sobre a marca

A página institucional usa a mesma linguagem dos banners: imagens grandes de ambiente, títulos em Playfair Display e texto curto.

Versão em mobile

No mobile, os banners mantêm a foto como protagonista e o respiro entre as seções continua. São 45 telas, da Home ao checkout.

Um template com cara de loja própria

O projeto mostra até onde o template pode ser personalizado sem mexer na base: a mesma arquitetura de componentes da Lattafa, com outra marca, outro ritmo de Home e componentes novos onde o segmento pedia.

Base

Template proprietário

Customização

Paleta, tipografia, Home e componentes

Componentes novos

Mosaico de ambientes e banner animado

Telas

56 desktop e 45 mobile, contando estados

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Balaroti

Transformar a página de produto em uma experiência completa de montagem de kit, sem interromper a jornada de compra.

UX/UI Design

E-commerce

Página de produto

Conversão

→

White Martins, capa do projeto

UI Design & Customização de Interface

Site institucional desenvolvido a partir de um template proprietário, com personalização de componentes e uma identidade visual alinhada ao posicionamento da marca.

Cliente

b8one

Segmento

Móveis e decoração

MEU PAPEL

UI Designer

SOLUÇÃO

Customização de template

ANO

2026

O projeto

Template de e-commerce e produto da empresa. Este projeto é uma versão customizada para uma loja de móveis: a estrutura base do template se mantém, e a identidade, a Home e os componentes ganham uma leitura própria.

Público e tom

Uma loja para a classe média alta, que compra móveis como quem escolhe um ambiente. O tom pedia sofisticação e elegância. Mais imagem, menos informação por dobra, e tempo para o olhar descansar entre uma seção e outra.

Minha atuação

Customização inteira da home, escolhendo cores, tipografia, espaçamento, disposição das informações, e quais componentes fariam sentido para esse e-commerce.

Home

A home foi personalizada para traduzir uma percepção mais sofisticada e editorial.
Ajustei hierarquia, espaçamentos, proporção dos elementos, banners e apresentação das categorias, buscando equilibrar impacto visual e funcionalidade.

Design System

Customização do Design System existente, ajustando tipografia, cores, variáveis e microcomponentes para traduzir a identidade do cliente de forma consistente na interface.

77

cores primitivas

60

tokens de cor

42

estilos de texto

82

componentes

458

variantes

Tipografia

Playfair Display para o tom editorial nos títulos de banner, Manrope organiza a interface e os preços.

Títulos

PLAYFAIR DISPLAY

INTERFACE

MANROPE

VARIAÇÕES

REGULAR, MEDIUM E SEMIBOLD

Títulos editoriais

Playfair Display Regular, nos banners de dobra inteira e no manifesto da marca.

Conforto que inspira

Sofisticação que se sente

Interface

Manrope Regular, Medium e SemiBold, em 14 tamanhos, do 11 ao 128 px.

3XL 48 px

Poltrona Aurora

2XL 32 px

Poltrona Aurora

XL 24 px

Poltrona Aurora

LG 18 px

Poltrona Aurora

SM 14 px

Poltrona Aurora

XS 12 px

Poltrona Aurora

Paleta de cores

Terracota como cor principal, puxada do couro e da madeira das peças, e um azul petróleo profundo como contraponto frio. Os neutros ficam para a interface, para que a cor apareça nas imagens e nos pontos de ação.

Secundária

HEX #062D3E

Token

Fill/Brand/Secondary/Medium

Neutros

HEX #F5F5F5

Token

Layer/Floor/1

Primitiva → token → onde aparece

Primary/700

#7E3B22

↓

Fill/Brand/Primary/Medium

↓

Contador do carrinho e paginação

Contador do carrinho e paginação

Primary/900

#4A2314

↓

Fill/Brand/Primary/Bold

↓

Botões e rótulos das categorias

Botões e rótulos das categorias

Secondary/500

#062D3E

↓

Fill/Brand/Secondary/Medium

↓

Selos dos cards de produto

Selos dos cards de produto

Card de produto

Card com estados e variações para desktop e mobile. Variações de cores, nome, valor, e interação estado hover para visibilidade do CTA e mudança da imagem do produto.

card de produto, TurboStore Móveis

Padrão

card de produto, TurboStore Móveis

Hover

Componentes criados para a loja

Banners animados para categorias, experiências da marca e galeria de fotos dos ambientes. Os dois primeiros reagem ao hover para convidar à exploração sem precisar de mais texto e a imagem da galeria expande por clique.

CATEGORIAS

Uma categoria grande e duas menores formam o mosaico: cada peça é um ambiente, não uma lista de produtos. No hover, a faixa terracota sobe e cobre a foto.

categoria Cozinha, Padrão

Padrão

categoria Cozinha, Hover

Hover

Banner animado

Cinco experiências da marca em cards verticais. No hover, a foto aproxima cerca de 5%, um movimento discreto que combina com o tom da loja.

banner de experiência, Padrão

Padrão

banner de experiência, Hover

Hover

GALERIA

Imagem selecionada por clique expande e as demais diminuem automaticamente.

Padrão

Por clique

Página de produto

A área de compra segue o template: galeria, acabamento, preço, parcelamento e frete. Abaixo dela, a página vira editorial, com fotos de ambiente e textos sobre material e conforto antes da ficha técnica.

Departamento e categoria

As listagens abrem com um banner de ambiente e categorias em foto, não em texto. O filtro traz medidas (altura, largura e profundidade), o dado que mais pesa na compra de um móvel.

Sobre a marca

A página institucional usa a mesma linguagem dos banners: imagens grandes de ambiente, títulos em Playfair Display e texto curto.

Versão em mobile

No mobile, os banners mantêm a foto como protagonista e o respiro entre as seções continua. São 45 telas, da Home ao checkout.

Um template com cara de loja própria

O projeto mostra até onde o template pode ser personalizado sem mexer na base: a mesma arquitetura de componentes da Lattafa, com outra marca, outro ritmo de Home e componentes novos onde o segmento pedia.

Base

Template proprietário

Customização

Paleta, tipografia, Home e componentes

Componentes novos

Mosaico de ambientes e banner animado

Telas

56 desktop e 45 mobile, contando estados

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Balaroti

Transformar a página de produto em uma experiência completa de montagem de kit, sem interromper a jornada de compra.

UX/UI Design

E-commerce

Página de produto

Conversão

→

White Martins, capa do projeto