Apple
Een witte kamer met een enkele blauwe schakelaar.
Het ontwerp van Apple is een toonbeeld van ingetogenheid: een bijna wit canvas, veel witruimte en een enkel, levendig blauw accent dat elke actie weloverwogen laat aanvoelen. De primaire focus ligt op typografie – SF Pro, met negatieve letterafstand die afneemt naarmate de lettergrootte toeneemt, waardoor koppen een architectonische helderheid krijgen zonder te zwaar te zijn. Het product ÍS het ontwerp: grote productfoto's en lifestyle-afbeeldingen domineren, terwijl chromen elementen terugvallen in dunne kaders, doorschijnende navigatie en subtiele lijnen. Secties wisselen af tegen een lichtgrijze achtergrond met full-color blokken voor promotiemateriaal, waardoor ritme ontstaat door schaalveranderingen in plaats van decoratieve elementen.
De pagina-indeling is een pagina over de volledige breedte zonder vaste maximale containerbreedte – secties strekken zich uit van rand tot rand, met tekstblokken gecentreerd op ongeveer 980px. De navigatie bestaat uit een enkele, vaste globale balk met een extra submap voor elk product die verschijnt bij het scrollen. De hoofdlay-out is altijd gecentreerd: een grote productnaam, een korte slogan, twee knoppen en vervolgens een productafbeelding die de rest van het scherm vult. Secties zijn verticaal gestapeld met een ruim verticaal ritme (meer dan 64px tussen secties), afwisselend met de kleuren #f5f5f7 en gekleurde achtergronden. De onderste pagina bestaat uit een enkele horizontale rij met servicekaarten over de volledige breedte (Apple TV+, Fitness+, Muziek, Arcade), elk een fotoblok met overlappende tekst en een knop. Geen zijbalken, geen lay-outs met meerdere kolommen, geen asymmetrische composities – alles is gecentreerd, gestapeld en symmetrisch.
Fotografie is de dominante visuele taal. Productfoto's worden genomen tegen een puur witte of zachtgrijze achtergrond, zonder enige context – het apparaat IS de ster, geïsoleerd en belicht. Lifestylefoto's worden weergegeven in banners over de volledige breedte, vaak met strak uitgesneden objecten. Kleurgadiënten (pastelblauw, roze, groen) dienen als achtergrond voor de productsecties, niet als decoratie. De iconografie is minimalistisch en lijngebaseerd, 1-2 pixels dik, in dezelfde grijstinten als de tekst. Geen illustraties, geen abstracte afbeeldingen, geen 3D-renderings, behalve de productfoto's zelf.
Palet
Merk
- Apple Blue
#0071e3— Gevulde actieknoppen, geselecteerde statussen - de enige interactieve kleur wordt spaarzaam gebruikt om elke weergave betekenisvol te maken. - Link Blue
#0066cc— Actiekaders zijn gemarkeerd, ingebedde links - een meer verzadigde kleur dan Apple Blue wordt gebruikt waar een volledig gevuld kader te opvallend zou zijn. - Signal Blue
#2997ff— Decoratieve kaders, afbeeldingscontouren, pictogramranden - de lichtste blauwe kleur in het systeem, gebruikt voor sfeer in plaats van voor gebruikersinteractie.
Neutrale
- Carbon
#1d1d1f— De hoofdtekst, koptekstranden, navigatielijnen, kaartranden - de overheersende inktkleur is bijna zwart met een lichte warme tint. - Frost
#f5f5f7— Het pagina-oppervlak, de achtergrond van de hoofdtekst en het oppervlak van de voettekst zijn uitgevoerd in Apple's kenmerkende lichtgrijs, een tint die iets koeler is dan puur wit. - Ice
#f4f8fb— Expressieve oppervlaktevullingen, subtiele tinten, knoptekst op een donkere achtergrond – een subtiele blauwe tint die het gedeelte verlevendigt zonder het te laten opvallen. - Smoke
#333333— Secundaire tekst, navigatievulling, knopranden - Een veelzijdige neutrale kleur voor randen en pictogrammen die meer impact nodig hebben dan een middengrijs. - Graphite
#474747— Navigatietekst, navigatieranden, linkranden - neemt een tussenpositie in tussen Carbon en Smoke in de elementhiërarchie. - Ash
#707070— Voettekst, lijstranden, navigatieranden, ingetogen hoofdtekst - Een middengrijs voor inhoud die wel aanwezig moet zijn, maar niet opvalt.
Typografie
van 12 tot 56px · 8 stappen
- SF Pro Display — vervanging: Inter · overzichten 400, 600, 700 · Koppen en grote tekst—formaten van 40px en groter gebruiken een display-formaat voor een smallere opening en een sterkere negatieve spatiëring; 700 is gereserveerd voor advertentie-indelingen en 400 voor productnamen in redactionele content.
- SF Pro Text — vervanging: Inter · overzichten 300, 400, 600 · Tekst, navigatie, knoppen, subkoppen — werklettertype; 400 voor de hoofdtekst, 300 voor subkoppen en gekwalificeerde labels, 600 voor navigatie-elementen en knoptekst; negatieve letterafstand neemt evenredig af met de grootte (van -0,022em tot 12px tot -0,01em tot 44px).
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 12px |
| Knopradius | 980px |
| Kaartradius | 8px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64px |
| Paginabreedte | 1440px |
AI bouwt je website in de stijl Apple en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Studio — Een galeriewand in beweging. Elk scherm vertegenwoordigt een rustig, grijs tentoonstellingsoppervlak waar typografische materialen en overlappende creatieve werken om de aandacht strijden.
- Mollie — Een kasjmier toonbank, een donker grootboek. Laat voldoende witruimte over voor de vormgeving rond de zwarte tekst en benadruk productgerelateerde punten met warme crèmekleuren, espressobruine tinten en tastbare foto's van daadwerkelijke betaalmethoden.
- Basis Theory — Betaalterminals in de ontwerpstudio. Wit technisch papier, overlappende doorschijnende transactielagen en een enkel turquoise bedieningselement bepalen de visuele richting.
- CleanShot X — Een studio met een blauw verlicht bureau. Creëer een rustige witte ruimte rondom compacte zwarte tekst en laat vervolgens de rijkblauwe bedieningselementen en gelaagde Mac-productafbeeldingen de hoofdrol spelen.
- Modern Treasury — Een kasboek op grafiekpapier. Maak pagina's die lijken op een rustig, wit operatieformulier, waarop kasstromen worden weergegeven met fijne lijnen, gelabelde knooppunten en precieze, verborgen controlepunten.
- Basha-Franklin — Een raster van galerijen onder een witte latei. Gebruik een warme #f4ede6-tint, een subtiele zwarte structuur en asymmetrische kolommen gebaseerd op foto's die eruitzien als een gedrukt architectuurportfolio.
- Bajgart Office — Redactionele galerijwand. Gebruik een grote witte ruimte waar subtiele schreeflettertypen en portfoliofragmenten meer visuele impact hebben dan verchroomde interface-elementen.
- Heptabase — Een bureau in de zon. Warme, papierachtige oppervlakken, antracietkleurige bedieningsknoppen en zwevende vensters voor onderzoek creëren het gevoel van een georganiseerde werkplek in plaats van een softwarebedieningspaneel.
- Bejamas — Pyjama's – zuur limoengroen door zwart glas. Creëer rustige, lichtgrijze redactionele pagina's, onderbroken door boeiende zwarte panelen waar wazige groene lichtstrepen het oppervlak doorsnijden.
- Baba — Zorgvuldige aantekeningen in rood zonlicht. Creëer brede rode verhalende strepen rond intieme witte, roze en crèmekleurige informatieoppervlakken, waarbij foto's van mensen het emotionele middelpunt vormen.
- Grafana Labs — De controlekamer van het Sunrise-signaalstation. Een rustige, grijs-witte werkruimte combineert met een breed, vierkleurig horizonverloop en precieze blauwe interfacesignalen.
- Kagi — Een aparte leesruimte. Creëer een open, witte ruimte rondom de opvallende grafietkleurige tekst, en gebruik subtiele paarse accenten en warme pastelkleuren om de rust te doorbreken.