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ä
- Studio — Liikkuva galleriaseinä. Jokainen näyttö edustaa hiljaista, harmaata näyttelypintaa, jossa typografiset materiaalit ja päällekkäiset luovat teokset kilpailevat huomiosta.
- Mollie — Kashmir-tiski, tumma kirjanpito. Jätä mustan tekstin ympärille runsaasti tyhjää tilaa toimitukselliselle suunnittelulle ja vahvista sitten tuotteisiin liittyviä seikkoja lämpimillä kermavaahdoilla, espressonruskeilla sävyillä ja taktiilisilla kuvilla oikeista maksutavoista.
- Basis Theory — Maksupäätteet suunnittelustudiossa. Valkoinen tekninen paperi, päällekkäiset läpikuultavat tapahtumakerrokset ja yksi turkoosi ohjauselementti määrittelevät visuaalisen suunnan.
- CleanShot X — Studio, jossa on sinisellä valaistu työpöytä. Luo rauhallinen valkoinen tila tiiviin mustan tekstin ympärille ja anna sitten rikkaiden sinisten säätimien ja kerrostettujen Mac-tuotekuvien olla keskipisteenä.
- Modern Treasury — Rahastonhoitolaskelma ruutupaperille. Luo sivuja, jotka muistuttavat hiljaista, valkoista toimintataulukkoa, jossa kassavirrat näytetään ohuilla viivoilla, nimetyillä solmuilla ja tarkoilla, piilotetuilla ohjaimilla.
- Basha-Franklin — Galleriaruudukko valkoisen karmin alla. Käytä lämmintä #f4ede6 sävyä, hienovaraista mustaa rakennetta ja epäsymmetrisiä valokuviin perustuvia pylväitä, jotka näyttävät painetulta arkkitehtuuriportfoliolta.
- Bajgart Office — Toimituksellinen galleriaseinä. Käytä suurta tyhjää tilaa, jossa hienovaraiset serif-fontit ja portfolion osat kantavat enemmän visuaalista painoarvoa kuin kromatut käyttöliittymäelementit.
- Heptabase — Auringon valaisema työpöytä. Lämpimät, paperimaiset pinnat, hiilenväriset säätimet ja kelluvat tutkimusikkunat luovat vaikutelman järjestelmällisestä työtilasta pikemminkin kuin ohjelmistojen ohjauspaneelista.
- Bejamas — Pyjama – hapanta kalkkia mustan lasin läpi. Luo rauhallisia, vaaleanharmaita pääkirjoitussivuja, joita keskeyttävät kiehtovat mustat paneelit, joissa epäselvät vihreät valojuovat leikkaavat pintaa.
- Baba — Hoitoviestejä punaisessa auringonvalossa. Luo leveitä punaisia narratiivisia raitoja intiimien valkoisten, vaaleanpunaisten ja kermanväristen informaatiopintojen ympärille käyttäen ihmisten valokuvia emotionaalisena keskuksena.
- Grafana Labs — Auringonnousun signaaliaseman valvomohuone. Hiljainen harmaavalkoinen työtila yhdistyy laajaan, neliväriseen horisonttigradienttiin ja tarkkoihin sinisiin rajapintasignaaleihin.
- Kagi — Erillinen lukusali. Luo avoin valkoinen tila rohkean grafiittitekstin ympärille käyttämällä hienovaraisia violetteja aksentteja ja lämpimiä pastellivärisiä pintoja rikkomaan rauhaa.