Apple (España)
Une cathédrale d'espace blanc où les titres des journaux sont à peine audibles. Un vaste hall lumineux où d'énormes polices de caractères de densité 700 sont suspendues dans les airs, maintenues ensemble uniquement par des couleurs pastel et un simple fil bleu.
Le langage utilisé par Apple sur ses pages produits est un modèle de générosité typographique: les titres « SF Pro Display», imposants, se détachent sur un fond blanc cassé, entourés d’un vaste espace blanc qui confère à chaque mot une importance particulière. La palette est quasi monochrome – texte en #1d1d1f, couleur de fond alternant entre #ffffff et #f5f5f7 – avec une unique touche de bleu (#0071e3) réservée exclusivement aux éléments interactifs. La couleur est présente dans les images des produits (tons pastel), jamais comme élément décoratif de l’interface. Les composants sont sans cadre: des cartes arrondies de 28 px de rayon, des boutons en forme de pilule presque au bord de la page, sans conteneur ni ombre portée visibles. Le rythme est créé par l’alternance de rayures blanches et grises, et non par des séparateurs ou des bordures.
Les sections occupent toute la largeur de la page, s'étendant d'un bord à l'autre avec un espacement généreux (environ 40 à 100 côtés). La largeur maximale du contenu est centrée dans chaque bande. L'élément principal est une pile centrée: une étiquette en forme de sourcil, un titre agrandi, un bouton d'appel à l'action, une ligne de prix, puis une image du produit occupant le bas de la fenêtre. Les sections suivent un motif répétitif: un titre aligné à gauche dans la bande, suivi soit d'une mise en page à deux colonnes avec des descriptions de produits (texte à gauche/image à droite ou en alternance), soit d'une grille à trois colonnes de fiches, soit d'une présentation visuelle centrée. Le rythme du contenu est entièrement contrôlé par l'alternance de fonds blancs et tricolores avec des espaces verticaux de 100 cm – sans séparateurs ni fiches contenant des éléments. La navigation globale est une barre fixe unique. Les sections de spécifications produit utilisent des bandes pleine largeur avec un espacement généreux, où le texte est centré dans des colonnes étroites (environ 560 px) sur un fond plus large.
Le langage visuel d'Apple repose essentiellement sur la photographie de produits: des gros plans du matériel sur un fond blanc ou coloré, sans contexte ni mise en scène. L'image principale montre des mains tenant un MacBook Neo vert pastel; l'élément humain est secondaire, illustrant l'échelle et la texture plutôt que l'émotion. Dans les sections consacrées aux variantes de produits, deux appareils sont présentés côte à côte sur un fond aux couleurs assorties (rose, vert, argent, bleu ciel), chaque fiche étant un aplat de couleur avec le produit au centre. Les gros plans (la charnière de l'ordinateur portable, le module caméra) sont réalisés en très gros plan sur un fond neutre. Pas d'illustrations, pas de graphismes abstraits, pas d'images décoratives: le produit lui-même est l'élément visuel principal. L'iconographie est omniprésente: des icônes monochromes de style SF Symbols, d'une épaisseur de 1,5 à 2 pixels, issues du jeu d'icônes système d'Apple. Les photographies sont toujours prises en high-key: un éclairage uniforme et sans ombres qui réduit le produit à une forme graphique plutôt qu'à un objet tridimensionnel.
Palette
Marque
- Electric Blue
#0071e3— Les boutons d'action colorés sont les seuls éléments de couleur de l'interface utilisateur, utilisés avec parcimonie pour les appels à l'action. - Link Blue
#0066cc— Liens textuels intégrés, liens avec flèches et chevrons. - Citrus Gradient
#3b3b23— Une finition alternative, devenue la signature du produit, consiste en une base foncée qui se fond dans des reflets jaune-vert.
Neutre
- Primary Ink
#1d1d1f— Les titres, le texte principal et les étiquettes des boutons constituent la couleur dominante au premier plan sur toutes les surfaces; l'arrière-plan de l'image principale du produit passe en douceur d'un #1d1d1f uni en haut à un bleu chromatique. - Mid Gray
#707070— Texte secondaire, état de navigation inactif, étiquettes d'interface utilisateur muettes - Deep Gray
#474747— Les textes de navigation et les icônes sont mis en évidence par une police de taille moyenne. - Hairline
#d6d6d6— Des frontières fines séparent les sections et les éléments d'interface utilisateur. - Canvas
#f5f5f7— Arrière-plans de sections alternés: une bande grise sépare les zones blanches. - Paper
#ffffff— Surface de la carte, fond de la page principale, texte du bouton sur fond sombre.
Typographie
de 12 à 96 px · 10 étapes
- SF Pro Display — remplacement: Inter · grandes lignes 600, 700 · Titres et sous-titres principaux à afficher: une police de 700 g/m² avec une largeur de 80 à 96 px et un espacement négatif de -1,44 px crée le fameux « titre massif flottant en blanc» d’Apple. Alternatives: Inter, system-ui
- SF Pro Display — remplacement: Inter · grandes lignes 600 · Titres de section, titres de fiches, sous-titres: une police de 600 avec un espacement des lettres légèrement positif donne un aspect chaleureux et convivial aux tailles moyennes, contrairement aux titres courts ci-dessus.
- SF Pro Text — remplacement: Inter · grandes lignes 400, 500, 600 · Pour le corps du texte, la navigation, les paragraphes d'accompagnement et les légendes, la police principale est une police d'index 400 à 17 px. Un espacement négatif entre les lettres permet une meilleure concision du texte principal sur les pages riches en informations.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8-10px |
| Rayon du bouton | 980px |
| Rayon de la carte | 28px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 100-120px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Apple (España) et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Airbnb — Un mur de galerie blanc et paisible avec un seul marque-page rouge corail
- Peak Design — Mur de la galerie, partiellement éclairé
- Ramp — Le service financier de la rédaction, des pages en noir et blanc rehaussées d'un unique trait de feutre fluo. La surface quasi monochrome de la publication, où un simple trait vert citron vif transforme chaque interaction en signal monétaire.
- 099 SUPPLY — Un mur de galerie rempli d'objets en noir et blanc
- Orderful — Tableau de contrôle de la logistique industrielle - Une liste de contrôle imprimée pour les répartiteurs logistiques, réalisée à l'encre noire et en rouge chirurgical, chaque page étant suffisamment discrète pour permettre à un opérateur de signaler un élément important.
- Apple (España) — Vitrine blanche pour galerie
- teenage engineering — Catalogue industriel d'éclairage de studio: le produit est le seul élément important de la page, et tout le reste est abordé autour de lui.
- Apple (España) — Une fenêtre de galerie dans le brouillard matinal
- Lightship — Un diorama cinématographique de la route. Des murs de galerie couleur crème chaude, ornés de grandes photographies de paysages montées à intervalles rapprochés, de fines lettres noires à peine visibles sur les cadres, et une unique touche d'orange vif qui rompt le monochrome comme un feu de joie dans une prairie.
- Custo — Une galerie couleur canon de fusil avec une police de caractères monolithique. Un showroom aux tons gris-vert feutrés, où un unique objet sombre et une police de 57 px se suffisent à eux-mêmes.
- Silencio — Une pièce blanche où flottent des objets. Une installation de galerie en papier aux tons chauds, où chaque élément se détache sur un fond en creux, et le silence qui y règne est un choix stylistique délibéré.
- ORYZO AI — Un reportage photo sur une chambre noire. Un objet solitaire flotte dans la pénombre chaude, une police crème pour seul décor.