Estilo Apple
Inspirado na AppleA galeria branca: o produto no centro, a tipografia preta e compacta, e um azul só para os links e os botões.
A Apple trata a página como uma galeria: a foto enorme do produto ocupa o centro, e a tipografia preta e compacta dá a cada frase um peso quase editorial. As seções alternam o branco e um cinza muito claro, sem sombra nem gradiente; os cantos arredondados nas fotos suavizam o desenho sem virar um painel de cartões. Um único azul saturado aparece só nos links e nos botões de compra.
A ProfitizeBuild não tem relação com as marcas citadas. Os nomes e os logos só identificam a inspiração.
Fundos
Cada seção do site num destes, com o texto e o acento que vão sobre ele.
Acentos e detalhes
- Azul dos links
#0066ccOs links no meio do texto - Azul de compra
#0071e3Os botões cheios: Comprar, Saiba mais - Fio
#d2d2d7As divisórias de 1 px e os contornos
Tipografia
A Apple usa a SF Pro, que é dela e não pode ser distribuída. Aqui e no arquivo vai a Inter, a gratuita mais parecida.
- Título do produtoInter · 600Titânio. Leve. Pro.
- Título de seçãoInter · 600A câmera mais nítida até hoje.
- SubtítuloInter · 500Fotos de noite, sem tripé.
- CorpoInter · 400A partir de R$ 7.999 ou em 12 vezes sem juros.
- LegendaInter · 400Disponível a partir de 14 de novembro.
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- O produto no centro, em foto grande, com bastante branco em volta.
- Títulos curtos em preto, com as letras um pouco mais juntas.
- Um azul só, para os links e os botões; o resto em preto e cinza.
- Seções brancas e cinza-claro alternadas para separar os assuntos.
- Cantos arredondados nas fotos e nos cartões, sem contorno.
- Evite
- Nada de sombra, gradiente ou borda grossa nos cartões.
- Nenhuma segunda cor de destaque.
- Nada de blocos longos de texto: uma frase por ideia.
- Nada de ícones decorativos em volta do produto.
Movimento
- O produto entra devagar com a rolagem, sem pular.
- Os textos aparecem num fade curto, de baixo para cima.