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
- Studio — Unha parede de galería en movemento. Cada pantalla representa unha superficie de exposición tranquila e gris onde os materiais tipográficos e as obras creativas superpostas compiten pola atención.
- Mollie — Un mostrador de cachemira, un libro maior escuro. Deixa amplo espazo en branco para o deseño editorial arredor do texto negro e, a seguir, reforza os puntos relacionados co produto con cremas cálidas, cafés expreso e fotos táctiles de métodos de pago reais.
- Basis Theory — Terminais de pago no estudo de deseño. Papel técnico branco, capas de transaccións translúcidas superpostas e un único elemento de control turquesa definen a dirección visual.
- CleanShot X — Un estudo cun escritorio iluminado en azul. Crea un espazo branco e tranquilo arredor de texto negro compacto e, a seguir, deixa que os controis azuis intensos e as imaxes de produtos Mac en capas ocupen o centro de atención.
- Modern Treasury — Un libro maior de tesourería en papel milimetrado. Crea páxinas que se asemellan a unha folla operativa branca e silenciosa, onde os fluxos de caixa se mostran con liñas finas, nodos etiquetados e controis precisos e ocultos.
- Basha-Franklin — Unha cuadrícula de galería baixo un lintel branco. Usa un ton cálido #f4ede6, unha estrutura negra sutil e columnas asimétricas baseadas en fotografías que parecen un portafolio de arquitectura impreso.
- Bajgart Office — Muro da galería editorial. Usa un amplo espazo en branco onde as fontes serif sutís e os fragmentos de portfolio teñan máis peso visual que os elementos de interface cromados.
- Heptabase — Un escritorio iluminado polo sol. Superficies cálidas semellantes ao papel, controis cor carbón vexetal e fiestras flotantes para a investigación crean a sensación dun espazo de traballo organizado en lugar dun panel de control de software.
- Bejamas — Pixamas: lima ácida a través do vidro negro. Crea páxinas editoriais tranquilas e grises claras interrompidas por cativadores paneis negros onde raias de luz verdes borrosas cruzan a superficie.
- Baba — Notas de coidado baixo a luz vermella da luz solar. Crea amplas franxas narrativas vermellas arredor de superficies de información íntimas brancas, rosas e crema, usando fotografías de persoas como centro emocional.
- Grafana Labs — A sala de control da estación de sinalización do amencer. Un espazo de traballo tranquilo en gris e branco combínase cun amplo gradiente de horizonte de catro cores e sinais de interface azuis precisos.
- Kagi — Unha sala de lectura independente. Crea un espazo branco aberto arredor de texto en grafito con cores intensas, usando sutís detalles morados e superficies pastel cálidas para romper a tranquilidade.