Apple
Unha habitación branca cun único interruptor azul
O deseño de Apple é un modelo de moderación: unha lona case branca, amplo espazo en branco e un único acento azul vibrante que fai que cada acción pareza deliberada. O foco principal é a tipografía: SF Pro, con espazado negativo entre letras que diminúe ao aumentar o tamaño, o que lle dá aos titulares unha claridade arquitectónica sen ser excesivamente pesados. O produto É o deseño: dominan as fotos grandes de produtos e as imaxes de estilo de vida, mentres que os elementos cromados retroceden en marcos finos, navegación translúcida e liñas sutís. As seccións alternan sobre un fondo gris claro con bloques a toda cor para materiais promocionais, creando ritmo a través de cambios de escala en lugar de elementos decorativos.
O deseño da páxina é unha páxina de ancho completo sen un ancho máximo de contedor fixo: as seccións esténdense de bordo a bordo, con bloques de texto centrados no seu interior a aproximadamente 980 px. A navegación é unha única barra global fixa cunha subcartafol adicional para cada produto que aparece ao desprazarse. O deseño principal sempre está centrado: un nome de produto grande, un lema dunha soa liña, dous botóns de pílula e, a continuación, unha imaxe do produto que enche a ventá gráfica restante. As seccións están apiladas verticalmente cun ritmo vertical xeneroso (máis de 64 px entre seccións), alternando #f5f5f7 e fondos de cores. A páxina inferior é unha única fila horizontal de tarxetas de servizo de ancho completo (Apple TV+, Fitness+, Música, Arcade), cada unha delas un bloque de fotos con texto superposto e un botón de pílula. Sen barras laterais, sen deseños de contido de varias columnas, sen composicións asimétricas: todo está centrado, apilado e simétrico.
A fotografía é a linguaxe visual dominante. As fotos de produtos tómanse sobre un fondo branco puro ou gris suave, sen ningún contexto: o dispositivo É a estrela, illado e iluminado. As fotos de estilo de vida móstranse en banners de ancho completo, a miúdo con obxectos recortados. Os degradados de cores (azul pastel, rosa, verde) serven como pano de fondo para as seccións de produtos, non como decoración. A iconografía é minimalista e baseada en liñas, de 1 a 2 px de grosor, na mesma escala de grises que o texto. Sen ilustracións, sen gráficos abstractos, sen representacións en 3D, agás as propias fotos dos produtos.
Paleta
Marca
- Apple Blue
#0071e3— Botóns de acción cheos, estados seleccionados: a única cor cromática interactiva usada con moderación para que cada aparencia teña sentido. - Link Blue
#0066cc— Bordes de acción destacados, ligazóns incrustadas: úsase unha cor máis saturada que o azul mazá onde unha tableta chea sería demasiado chamativa. - Signal Blue
#2997ff— Marcos decorativos, contornos de imaxes, bordos de iconas: a cor azul máis clara do sistema, usada para a atmosfera en lugar de para a interacción co usuario.
Neutro
- Carbon
#1d1d1f— O texto principal, os bordos dos títulos, as liñas de navegación, os bordos das tarxetas: a cor predominante da tinta é case negra cun lixeiro toque de calidez. - Frost
#f5f5f7— A pantalla da páxina, o fondo do texto principal e a superficie do pé de páxina son do gris claro característico de Apple, un pouco máis frío que o branco puro. - Ice
#f4f8fb— Recheos superficiais expresivos, tons sutís, texto de botóns sobre un fondo escuro: un ton azul sutil que anima a sección sen facela destacar. - Smoke
#333333— Texto secundario, recheo de navegación, bordos dos botóns: unha cor neutra versátil para bordos e iconas que precisan máis impacto que un gris medio. - Graphite
#474747— Texto de navegación, bordos de navegación, bordos de ligazóns: ocupa unha posición intermedia entre Carbon e Smoke na xerarquía de elementos. - Ash
#707070— Texto do pé de páxina, bordos da lista, bordos de navegación, texto do corpo silenciado: un gris medio para contido que debe estar presente pero non destacado.
Tipografía
de 12 a 56 px · 8 pasos
- SF Pro Display — substitución: Inter · contornos 400, 600, 700 · Titulares e texto grande: os tamaños de máis de 40 px usan un formato de visualización para unha apertura máis estreita e un seguimento negativo máis forte; 700 está reservado para deseños publicitarios e 400 para nomes de produtos en contido editorial.
- SF Pro Text — substitución: Inter · contornos 300, 400, 600 · Texto do corpo, navegación, botóns, subtítulos: tipo de letra de traballo; 400 para o texto do corpo, 300 para subtítulos e etiquetas cualificadas, 600 para elementos de navegación e texto de botóns; o espazado negativo entre letras diminúe proporcionalmente ao tamaño (de -0,022 em a 12 px a -0,01 em a 44 px).
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 12px |
| Radio do botón | 980px |
| Radio da tarxeta | 8px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 64px |
| Largura da páxina | 1440px |
A IA creará o teu sitio web ao estilo de Apple e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Ui — plan clínico en papel mate
- ElevenLabs — Un ensaio fotográfico en tons crema cálidos con titulares sutís. Un caderno de estilo Bauhaus: papel cor casca de ovo, tinta negra e un único detalle morado e laranxa para a exhibición do produto.
- monopo saigon — Un brillo líquido e iridiscente tras o silencio editorial: unha galería editorial monocromática flotando sobre luz fundida
- Awesomic — Malla editorial de zinc con signos de puntuación laranxas que lembran confeti
- Monad — revista técnica editorial en pergamiño quente
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Unha mesa analítica tranquila sobre papel quente
- Ventriloc — Un observatorio editorial de datos en papel quente: unha única brasa laranxa que destaca a precisión monocromática
- Duolingo — Mascota xoguetona da clase en papel branco
- Stripe — Un libro de contas escrito con tinta índigo sobre vidro esmerilado
- Notion — Un caderno de papel quente ao sol do mediodía
- Hyer Aviation — Anoitecer na cabina sobre pergamiño. O pálido ceo do amencer atópase co logotipo serif do tamaño da fuselaxe e un único detalle de arxila cálida rompe a moderación monocromática.