Apple
Una stanza bianca con un unico interruttore blu
Il design di Apple è un modello di sobrietà: una tela quasi bianca, ampi spazi bianchi e un unico, vibrante accento blu che conferisce a ogni gesto un senso di intenzionalità. L'attenzione principale è rivolta alla tipografia: SF Pro, con spaziatura negativa tra le lettere che diminuisce all'aumentare delle dimensioni, donando ai titoli una chiarezza architettonica senza risultare eccessivamente pesante. Il prodotto È il design: grandi foto del prodotto e immagini di lifestyle dominano, mentre gli elementi cromati si ritirano in cornici sottili, navigazione traslucida e linee delicate. Le sezioni si alternano su uno sfondo grigio chiaro con blocchi a colori pieni per i materiali promozionali, creando ritmo attraverso variazioni di scala piuttosto che con elementi decorativi.
Il layout della pagina è a larghezza intera, senza una larghezza massima fissa per il contenitore: le sezioni si estendono da bordo a bordo, con blocchi di testo centrati a circa 980px. La navigazione è costituita da una singola barra globale fissa con una sottocartella aggiuntiva per ogni prodotto che appare scorrendo la pagina. Il layout principale è sempre centrato: un nome del prodotto di grandi dimensioni, uno slogan su una sola riga, due pulsanti a forma di pillola e infine un'immagine del prodotto che riempie la restante area visibile. Le sezioni sono impilate verticalmente con un ampio spazio verticale (oltre 64px tra le sezioni), alternando sfondi #f5f5f7 e colorati. La parte inferiore della pagina è costituita da una singola riga orizzontale di schede di servizio a larghezza intera (Apple TV+, Fitness+, Musica, Arcade), ciascuna composta da un blocco immagine con testo sovrapposto e un pulsante a forma di pillola. Nessuna barra laterale, nessun layout di contenuto a più colonne, nessuna composizione asimmetrica: tutto è centrato, impilato e simmetrico.
La fotografia è il linguaggio visivo dominante. Le foto dei prodotti sono scattate su uno sfondo bianco puro o grigio tenue, senza alcun contesto: il dispositivo È il protagonista, isolato e illuminato. Le foto di lifestyle sono visualizzate in banner a tutta larghezza, spesso con oggetti ritagliati in modo stretto. Le sfumature di colore (blu pastello, rosa, verde) fungono da sfondo per le sezioni dei prodotti, non da decorazione. L'iconografia è minimalista e basata su linee, spesse 1-2 pixel, nella stessa scala di grigi del testo. Nessuna illustrazione, nessuna grafica astratta, nessun rendering 3D, ad eccezione delle foto dei prodotti stessi.
Tavolozza
Marca
- Apple Blue
#0071e3— Pulsanti di azione riempiti, stati selezionati: l'unico colore cromatico interattivo utilizzato con parsimonia per rendere significativo ogni aspetto. - Link Blue
#0066cc— Bordi delle azioni evidenziati, link incorporati: viene utilizzato un colore più saturo del blu Apple laddove una tavoletta piena risulterebbe troppo appariscente. - Signal Blue
#2997ff— Cornici decorative, contorni delle immagini, bordi delle icone: il colore blu più chiaro del sistema, utilizzato per creare atmosfera piuttosto che per l'interazione con l'utente.
Neutro
- Carbon
#1d1d1f— Il testo principale, i bordi dei titoli, le linee di navigazione, i bordi delle schede: il colore dell'inchiostro predominante è quasi nero con una leggera sfumatura calda. - Frost
#f5f5f7— Lo sfondo della pagina, il testo principale e il piè di pagina sono del caratteristico grigio chiaro di Apple, una tonalità leggermente più fredda del bianco puro. - Ice
#f4f8fb— Riempimenti di superficie espressivi, tonalità delicate, testo dei pulsanti su sfondo scuro: una tenue sfumatura di blu che ravviva la sezione senza renderla troppo appariscente. - Smoke
#333333— Testo secondario, riempimento della navigazione, bordi dei pulsanti: un colore neutro e versatile per bordi e icone che necessitano di un tocco più deciso rispetto a un grigio medio. - Graphite
#474747— Testo di navigazione, bordi di navigazione, bordi dei link: occupa una posizione intermedia tra Carbonio e Fumo nella gerarchia degli elementi. - Ash
#707070— Testo a piè di pagina, bordi degli elenchi, bordi della navigazione, testo del corpo attenuato: un grigio medio per i contenuti che devono essere presenti ma non in primo piano.
Tipografia
da 12 a 56 pixel · 8 passaggi
- SF Pro Display — sostituzione: Inter · contorni 400, 600, 700 · Titoli e testi di grandi dimensioni (40px e oltre) utilizzano un formato di visualizzazione con un'apertura più stretta e un tracciamento negativo più forte; 700 è riservato ai layout pubblicitari e 400 è per i nomi dei prodotti nei contenuti editoriali.
- SF Pro Text — sostituzione: Inter · contorni 300, 400, 600 · Testo del corpo, navigazione, pulsanti, sottotitoli: carattere di lavoro; 400 per il testo del corpo, 300 per sottotitoli ed etichette qualificate, 600 per elementi di navigazione e testo dei pulsanti; la spaziatura negativa tra le lettere diminuisce proporzionalmente alla dimensione (da -0,022em a 12px a -0,01em a 44px).
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 12px |
| Raggio del pulsante | 980px |
| Raggio della carta | 8px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 64px |
| Larghezza del pannello | 1440px |
L'IA creerà il tuo sito web nello stile Apple e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Ui — piano clinico su carta opaca
- ElevenLabs — Un reportage fotografico dai toni caldi color crema con titoli delicati. Un taccuino in stile Bauhaus: carta color guscio d'uovo, inchiostro nero e un unico accento viola e arancione per la presentazione del prodotto.
- monopo saigon — Un bagliore liquido e iridescente dietro il silenzio editoriale: una galleria editoriale monocromatica che fluttua su una luce fusa.
- Awesomic — Rete metallica in zinco per uso editoriale con segni di punteggiatura arancioni che ricordano i coriandoli.
- Monad — Rivista tecnica editoriale sulla pergamena calda
- Dub — Pannello di controllo in carta di riso opaca di Link
- Seline Analytics — Un tranquillo tavolo analitico su carta calda
- Ventriloc — Un osservatorio editoriale di dati su carta calda: una singola brace arancione che evidenzia la precisione monocromatica
- Duolingo — Mascotte di classe giocosa su carta bianca
- Stripe — Un libro contabile scritto con inchiostro indaco su vetro smerigliato.
- Notion — Un quaderno di carta calda sotto il sole di mezzogiorno
- Hyer Aviation — Il crepuscolo nella cabina di pilotaggio su pergamena. Il pallido cielo dell'alba incontra il logo serif grande quanto la fusoliera, e un singolo accento color argilla calda rompe la sobrietà monocromatica.