Apple
Valkoinen huone, jossa on yksi sininen kytkin
Applen muotoilu on malliesimerkki hillitystä tyylistä: lähes valkoinen kangas, runsaasti tyhjää tilaa ja yksi eloisan sininen aksentti, joka saa jokaisen toiminnan tuntumaan harkitulta. Pääpaino on typografiassa – SF Pro, jossa negatiivinen kirjainväli pienenee koon kasvaessa, antaen otsikoille arkkitehtonisen selkeyden olematta kuitenkaan liian raskas. Tuote ON muotoilua: suuret tuotekuvat ja lifestyle-kuvat hallitsevat, kun taas kromielementit vetäytyvät ohuisiin kehyksiin, läpikuultaviin navigointielementteihin ja hienovaraisiin viivoihin. Osiot vuorottelevat vaaleanharmaalla taustalla ja mainosmateriaalien täysvärisillä lohkoilla, mikä luo rytmiä mittakaavan muutosten kautta koristeellisten elementtien sijaan.
Sivun asettelu on täysleveä sivu, jolla ei ole kiinteää enimmäissäilön leveyttä – osiot ulottuvat reunasta reunaan, ja tekstilohkot on keskitetty noin 980 pikselin välein. Navigointi koostuu yhdestä kiinteästä yleisestä palkista, jossa on lisäksi alikansio jokaiselle vierittäessä näkyvälle tuotteelle. Pääasettelu on aina keskitetty: suuri tuotteen nimi, yksirivinen iskulause, kaksi tablettipainiketta ja sitten tuotekuva, joka täyttää jäljellä olevan näyttöalueen. Osiot on pinottu pystysuunnassa reilulla pystyrytmillä (yli 64 pikseliä osioiden välillä), vuorotellen #f5f5f7-hakutekstillä ja värillisillä taustoilla. Alhaalla oleva sivu on yksi vaakasuora rivi täysleveitä palvelukortteja (Apple TV+, Fitness+, Musiikki, Pelihalli), joista jokainen on valokuvalohko, jossa on päällekkäin tekstiä ja tablettipainike. Ei sivupalkkeja, ei monisarakkeisia sisältöasetteluja, ei epäsymmetrisiä sommitelmia – kaikki on keskitetty, pinottu ja symmetrinen.
Valokuvaus on hallitseva visuaalinen kieli. Tuotekuvat otetaan puhtaan valkoista tai pehmeän harmaata taustaa vasten ilman kontekstia – laite ON tähti, eristettynä ja valaistuna. Lifestyle-kuvat näytetään täysleveissä bannereissa, usein tiiviisti rajattujen objektien kanssa. Värigradientit (pastellinsininen, pinkki, vihreä) toimivat tuoteosioiden taustana, eivät koristeena. Ikonografia on minimalistinen ja viivamainen, 1–2 pikselin paksuinen, samassa harmaasävyssä kuin teksti. Ei kuvituksia, ei abstraktia grafiikkaa, ei 3D-renderöintejä, lukuun ottamatta itse tuotekuvia.
Paletti
Merkki
- Apple Blue
#0071e3— Täytetyt toimintopainikkeet, valitut tilat – ainoa interaktiivinen kromaattinen väri, jota käytetään säästeliäästi jokaisen ulkoasun merkityksellistämiseksi. - Link Blue
#0066cc— Korostetut toimintojen reunat, upotetut linkit – omenan sinistä kylläisempää väriä käytetään paikoissa, joissa täytetty tabletti näyttäisi liian räikeältä. - Signal Blue
#2997ff— Koristeelliset kehykset, kuvien ääriviivat, kuvakkeiden reunat – järjestelmän vaalein sininen väri, jota käytetään tunnelman luomiseen eikä käyttäjän vuorovaikutukseen.
Neutraali
- Carbon
#1d1d1f— Pääteksti, otsikoiden reunat, navigointirivit, korttien reunat – vallitseva musteväri on lähes musta, jossa on hieman lämmintä vivahdetta. - Frost
#f5f5f7— Sivun pohja, päätekstin tausta ja alatunnisteen pinta ovat Applen tavaramerkiksi muodostunutta vaaleanharmaata, hieman viileämpää kuin puhtaanvalkoinen. - Ice
#f4f8fb— Ilmeikkaat pintatäytteet, hienovaraiset sävyt, painiketeksti tummalla taustalla – hienovarainen sininen sävy, joka elävöittää osiota erottumatta siitä. - Smoke
#333333— Toissijainen teksti, navigoinnin täyttö, painikkeiden reunat – Monipuolinen neutraali väri reunoille ja kuvakkeille, jotka tarvitsevat enemmän potkua kuin keskiharmaa. - Graphite
#474747— Navigointiteksti, navigointireunat, linkkien reunat – sijaitsevat elementtihierarkiassa hiilen ja savun välissä. - Ash
#707070— Alatunnisteen teksti, luetteloiden reunat, navigointien reunat, vaimennettu leipäteksti – Keskiharmaa sisällölle, jonka on oltava läsnä, mutta ei silmiinpistävä.
Typografia
12:sta 56 pikseliin · 8 askelta
- SF Pro Display — korvaava: Inter · ääriviivat 400, 600, 700 · Otsikot ja suurikokoinen teksti – yli 40 pikselin koot käyttävät näyttömuotoa kapeampaa aukkoa ja vahvempaa negatiivista seurantaa varten; 700 pikseliä on varattu mainosasetteluille ja 400 toimitukselliselle sisällölle.
- SF Pro Text — korvaava: Inter · ääriviivat 300, 400, 600 · Leipäteksti, navigointi, painikkeet, alaotsikot — toimiva fontti; 400 leipätekstille, 300 alaotsikoille ja päteville otsikoille, 600 navigointielementeille ja painiketekstille; negatiivinen kirjainväli pienenee suhteessa kokoon (-0,022em:stä 12 pikseliin ja -0,01em:stä 44 pikseliin).
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 12px |
| Painikkeen säde | 980px |
| Kortin säde | 8px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 64px |
| Sivun leveys | 1440px |
Tekoäly rakentaa verkkosivustosi Apple -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Ui — kliininen suunnitelma mattapaperilla
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- monopo saigon — Nestemäinen, hohtava hehku toimituksellisen hiljaisuuden takana – yksivärinen toimituksellinen galleria kelluu sulassa valossa
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Dub — Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
- Seline Analytics — Hiljainen analyyttinen pöytä lämpimällä paperilla
- Ventriloc — Lämpimällä paperilla olevaa dataa toimituksellisesti tarkasteleva observatorio – yksi oranssi hiili korostaa yksiväristä tarkkuutta
- Duolingo — Leikkisä luokan maskotti valkoisella paperilla
- Stripe — Indigomusteella himmeälle lasille kirjoitettu tilikirja
- Notion — Lämmin paperinen muistikirja keskipäivän auringossa
- Hyer Aviation — Hämärä ohjaamossa pergamentin yllä. Vaalea aamunkoitto kohtaa rungon kokoisen serif-logon, ja yksi lämmin savikoriste rikkoo yksivärisen hillityn muodon.