Apple
Una habitació blanca amb un únic interruptor blau
El disseny d'Apple és un model de moderació: un llenç gairebé blanc, un ampli espai blanc i un únic accent blau vibrant que fa que cada acció sembli deliberada. L'enfocament principal és la tipografia: SF Pro, amb un espaiat negatiu entre lletres que disminueix a mesura que augmenta la mida, donant als titulars una claredat arquitectònica sense ser massa pesats. El producte ÉS el disseny: dominen les fotos grans de productes i les imatges d'estil de vida, mentre que els elements cromats retrocedeixen en marcs prims, navegació translúcida i línies subtils. Les seccions alternen sobre un fons gris clar amb blocs a tot color per a materials promocionals, creant ritme a través de canvis d'escala en lloc d'elements decoratius.
El disseny de la pàgina és una pàgina d'amplada completa sense una amplada màxima fixa del contenidor: les seccions s'estenen de vora a vora, amb blocs de text centrats a aproximadament 980 px. La navegació és una única barra global fixa amb una subcarpeta addicional per a cada producte que apareix en desplaçar-se. El disseny principal sempre està centrat: un nom de producte gran, un eslògan d'una sola línia, dos botons de píndola i, a continuació, una imatge del producte que omple la finestra gràfica restant. Les seccions s'apilen verticalment amb un ritme vertical generós (més de 64 px entre seccions), alternant #f5f5f7 i fons de colors. La pàgina inferior és una única fila horitzontal de targetes de servei d'amplada completa (Apple TV+, Fitness+, Música, Arcade), cadascuna un bloc de fotos amb text superposat i un botó de píndola. No hi ha barres laterals, ni dissenys de contingut de diverses columnes, ni composicions asimètriques: tot està centrat, apilat i simètric.
La fotografia és el llenguatge visual dominant. Les fotos de productes es fan sobre un fons blanc pur o gris suau, sense cap context: el dispositiu ÉS l'estrella, aïllat i il·luminat. Les fotos d'estil de vida es mostren en bàners d'amplada completa, sovint amb objectes retallats. Els degradats de color (blau pastel, rosa, verd) serveixen de fons per a les seccions de productes, no com a decoració. La iconografia és minimalista i basada en línies, d'1-2 px de gruix, en la mateixa escala de grisos que el text. No hi ha il·lustracions, ni gràfics abstractes, ni representacions en 3D, excepte les fotos dels productes.
Paleta
Marca
- Apple Blue
#0071e3— Botons d'acció plens, estats seleccionats: l'únic color cromàtic interactiu utilitzat amb moderació per fer que cada aparença tingui sentit. - Link Blue
#0066cc— Vores d'acció ressaltades, enllaços incrustats: s'utilitza un color més saturat que el blau Apple on una tauleta plena seria massa cridanera. - Signal Blue
#2997ff— Marcs decoratius, contorns d'imatges, vores d'icones: el color blau més clar del sistema, utilitzat per a l'atmosfera en lloc de per a la interacció de l'usuari.
Neutral
- Carbon
#1d1d1f— El text principal, les vores dels encapçalaments, les línies de navegació, les vores de les targetes: el color de tinta predominant és gairebé negre amb un lleuger toc de calidesa. - Frost
#f5f5f7— El llenç de la pàgina, el fons del text principal i la superfície del peu de pàgina són del gris clar característic d'Apple, una mica més fred que el blanc pur. - Ice
#f4f8fb— Emplenaments superficials expressius, tons subtils, text de botons sobre un fons fosc: un to blau subtil que anima la secció sense fer-la destacar. - Smoke
#333333— Text secundari, farciment de navegació, vores de botons: un color neutre versàtil per a vores i icones que necessiten més impacte que un gris mitjà. - Graphite
#474747— Text de navegació, vores de navegació, vores d'enllaç: ocupa una posició intermèdia entre Carbon i Smoke en la jerarquia d'elements. - Ash
#707070— Text de peu de pàgina, vores de llista, vores de navegació, text del cos silenciat: un gris mitjà per al contingut que ha d'estar present però no destacat.
Tipografia
de 12 a 56 px · 8 passos
- SF Pro Display — reemplaçament: Inter · esquemes 400, 600, 700 · Titulars i text gran: les mides de més de 40 px utilitzen un format de visualització per a una obertura més estreta i un seguiment negatiu més fort; 700 es reserva per a dissenys publicitaris i 400 és per a noms de productes en contingut editorial.
- SF Pro Text — reemplaçament: Inter · esquemes 300, 400, 600 · Text del cos, navegació, botons, subtítols: font de treball; 400 per al text del cos, 300 per als subtítols i les etiquetes qualificades, 600 per als elements de navegació i el text dels botons; l'espaiat negatiu entre lletres disminueix proporcionalment a la mida (de -0,022em a 12px a -0,01em a 44px).
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 12px |
| Radi del botó | 980px |
| Radi de la targeta | 8px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 64px |
| Amplada de la pàgina | 1440px |
La IA crearà el vostre lloc web a l'estil Apple i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Studio — Una paret de galeria en moviment. Cada pantalla representa una superfície d'exposició tranquil·la i grisa on els materials tipogràfics i les obres creatives superposades competeixen per l'atenció.
- Mollie — Un taulell de caixmir, un llibre major fosc. Deixeu un ampli espai blanc per al disseny editorial al voltant del text negre i, a continuació, reforceu els punts relacionats amb el producte amb cremes càlides, cafès exprés i fotos tàctils de mètodes de pagament reals.
- Basis Theory — Terminals de pagament a l'estudi de disseny. Paper tècnic blanc, capes de transacció translúcides superposades i un únic element de control turquesa defineixen la direcció visual.
- CleanShot X — Un estudi amb un escriptori il·luminat en blau. Crea un espai blanc tranquil al voltant de text negre compacte i, a continuació, deixa que els controls blaus intensos i les imatges de productes Mac en capes ocupin el centre d'atenció.
- Modern Treasury — Un llibre de tresoreria en paper mil·limetrat. Crea pàgines que s'assemblin a un full operatiu blanc i silenciós, on els fluxos d'efectiu es mostren amb línies fines, nodes etiquetats i controls precisos i ocults.
- Basha-Franklin — Una quadrícula de galeria sota una llinda blanca. Utilitzeu un to càlid #f4ede6, una estructura negra subtil i columnes asimètriques basades en fotografies que semblen un portafoli d'arquitectura imprès.
- Bajgart Office — Mur de galeria editorial. Utilitzeu un gran espai blanc on les fonts serif subtils i els fragments de portafoli tinguin més pes visual que els elements d'interfície cromats.
- Heptabase — Un escriptori il·luminat pel sol. Superfícies càlides semblants al paper, controls de color carbó vegetal i finestres flotants per a la recerca creen la sensació d'un espai de treball organitzat en lloc d'un panell de control de programari.
- Bejamas — Pijames: llima àcida a través de vidre negre. Crea pàgines editorials tranquil·les i de color gris clar interrompudes per captivadors panells negres on ratlles verdes de llum borroses intersecten la superfície.
- Baba — Notes d'atenció sota la llum vermella del sol. Crea franges narratives vermelles amples al voltant de superfícies d'informació íntimes de color blanc, rosa i crema, utilitzant fotografies de persones com a centre emocional.
- Grafana Labs — La sala de control de l'estació de senyals Sunrise. Un espai de treball tranquil en gris i blanc es combina amb un ampli gradient d'horitzó de quatre colors i senyals d'interfície blaus precisos.
- Kagi — Una sala de lectura separada. Crea un espai blanc obert al voltant de text de grafit en negreta, utilitzant subtils detalls morats i superfícies pastel càlides per trencar la tranquil·litat.