Apple
Hvítt herbergi með einum bláum rofa
Hönnun Apple er fyrirmynd um hófsemi: næstum hvítur strigi, rúmgott hvítt rými og einn, skærblár hlekkur sem lætur hverja aðgerð virðast meðvituð. Aðaláherslan er á leturgerð - SF Pro, með neikvæðu bili á stafi sem minnkar með vaxandi stærð, sem gefur fyrirsögnum byggingarlistarlega skýrleika án þess að vera of þung. Varan ER hönnunin: stórar vörumyndir og lífsstílsmyndir eru ráðandi, á meðan krómþættir hverfa í þunna ramma, gegnsæja leiðsögn og fínlegar línur. Hlutar skiptast á við ljósgráan bakgrunn með litríkum blokkum fyrir kynningarefni, sem skapar takt með breytingum á stærð frekar en skreytingarþáttum.
Síðuuppsetningin er fullbreidd án fastrar hámarksbreiddar íláts — hlutar teygjast frá brún til brúnar, með textablokkum miðjuðum innan við um það bil 980px. Leiðsögnin er ein, föst alhliða súla með viðbótar undirmöppu fyrir hverja vöru sem birtist við skrun. Aðaluppsetningin er alltaf miðjuð: stórt vöruheiti, einnar línu slagorð, tveir pilluhnappar og síðan vörumynd sem fyllir út eftirstandandi glugga. Hlutarnir eru staflaðir lóðrétt með rausnarlegum lóðréttum takti (64px+ á milli hluta), til skiptis #f5f5f7 og lituðum bakgrunni. Neðri síðan er ein lárétt röð af þjónustukortum í fullri breidd (Apple TV+, Fitness+, Music, Arcade), hvert með myndablokk með yfirlagðan texta og pilluhnappi. Engar hliðarstika, engin margdálka efnisuppsetning, engin ósamhverf samsetning — allt er miðjuð, staflað og samhverft.
Ljósmyndun er ríkjandi sjónrænt tungumál. Vörumyndir eru teknar á hvítum eða mjúkgráum bakgrunni, án nokkurs samhengis – tækið ER stjarnan, einangrað og upplýst. Lífsstílsmyndir eru birtar í fullri breidd borða, oft með þéttskornum hlutum. Litabreytingar (pastelblár, bleikur, grænn) þjóna sem bakgrunnur fyrir vöruhlutana, ekki sem skraut. Táknmyndagerðin er lágmarks og línubundin, 1-2px þykk, í sama grátóna og textinn. Engar myndskreytingar, engin abstrakt grafík, engar þrívíddarmyndir, nema fyrir vörumyndirnar sjálfar.
Litatöflu
Vörumerki
- Apple Blue
#0071e3— Fylltir aðgerðahnappar, valdar stöður - eini gagnvirki litrómatíski liturinn sem notaður er sparlega til að gera hvert útlit þýðingarmikið. - Link Blue
#0066cc— Auðkenndir aðgerðarammar, innfelldir tenglar - mettuðri litur en Apple Blue er notaður þar sem fyllt spjaldtölva væri of áberandi. - Signal Blue
#2997ff— Skrautrammar, útlínur mynda, táknrammar - ljósasti blái liturinn í kerfinu, notaður fyrir andrúmsloft frekar en fyrir samskipti við notendur.
Hlutlaus
- Carbon
#1d1d1f— Aðaltexti, fyrirsagnarammar, leiðsögulínur, kortaammar - ríkjandi bleklitur er næstum svartur með örlitlum hlýjum blæ. - Frost
#f5f5f7— Síðustrigi, aðaltexti og síðufótur eru einkennandi fyrir Apple, aðeins kaldari en hreint hvítt. - Ice
#f4f8fb— Tjáningarfull yfirborðsfylling, fínlegir litir, hnappatexti á dökkum bakgrunni — fínlegur blár litur sem lífgar upp á hlutann án þess að láta hann skera sig úr. - Smoke
#333333— Aukatexti, fylling í flakk, hnapparammar - Fjölhæfur hlutlaus litur fyrir ramma og tákn sem þurfa meiri kraft en miðlungsgráan lit. - Graphite
#474747— Leiðsögutexti, leiðsögurammar, tenglarammar - er á millistigi á milli kolefnis og reyks í stigveldi þáttanna. - Ash
#707070— Fótur í síðufót, listarammar, leiðsögurammar, þöggaður megintexti - Miðlungsgrár litur fyrir efni sem þarf að vera til staðar en ekki áberandi.
Leturfræði
frá 12 til 56px · 8 skref
- SF Pro Display — skipti: Inter · útlínur 400, 600, 700 · Fyrirsagnir og stór texti — stærðir yfir 40px nota birtingarsnið fyrir þrengra ljósop og sterkari neikvæða rakningu; 700 er frátekið fyrir auglýsingaútlit og 400 er fyrir vöruheiti í ritstjórnarefni.
- SF Pro Text — skipti: Inter · útlínur 300, 400, 600 · Meginmálstexti, leiðsögn, hnappar, undirfyrirsagnir — virkt letur; 400 fyrir meginmálstexta, 300 fyrir undirfyrirsagnir og merkingar, 600 fyrir leiðsögnarþætti og hnappatexta; bil á milli stafa minnkar í hlutfalli við stærðina (úr -0,022em í 12px í -0,01em í 44px).
Millibil og form
| Tilgangur | Merking |
|---|---|
| Þéttleiki | meðaltal |
| Grunnskref | 12px |
| Hnapparadíus | 980px |
| Radíus korts | 8px |
| Skuggar | engin landamæri í stað skugga |
| Milli hluta | 64px |
| Síðubreidd | 1440px |
Gervigreind mun smíða vefsíðuna þína í stíl við Apple og fylla hana út
- Fyllið út vörur og færslur í gegnum tengilinn - Instagram, TikTok, Facebook.
- Flyttu efni af gömlu síðunni þinni — tilgreindu bara vefslóðina.
- Nútímaleg hönnun á bestu vélinni: React ( Next.js) með netþjónsútgáfu og SEO-bestun beint úr kassanum.
- Fullkomlega sjálfvirk SEO hagræðing fyrir leitarniðurstöður og tillögur að tauganetum.
Líkir stílar
- Studio — Myndasafnsveggur í hreyfingu. Hver skjár táknar kyrrlátt, grátt sýningarflöt þar sem leturfræðilegt efni og skarast skapandi verk keppast um athygli.
- Mollie — Kasmírborð, dökk bókhaldsbók. Skiljið eftir nægt hvítt rými fyrir ritstjórnarlega hönnun í kringum svarta textann og styrkið síðan vörutengd atriði með hlýjum kremum, espressó-brúnum og áþreifanlegum myndum af raunverulegum greiðslumáta.
- Basis Theory — Greiðslustöðvar í hönnunarstofunni. Hvítur tæknipappír, yfirlappandi gegnsæ færslulög og einn tyrkisblár stjórnunarþáttur skilgreina sjónræna stefnu.
- CleanShot X — Stúdíó með blálýstu skjáborði. Búðu til rólegt hvítt rými í kringum þéttan svartan texta og láttu síðan ríkulegu bláu stjórntækin og lagskiptar myndir af Mac-vörum vera í aðalhlutverki.
- Modern Treasury — Fjársjóðsbók á milliritapappír. Búið til síður sem líkjast hljóðlátu, hvítu rekstrarblaði þar sem sjóðstreymi er sýnt með fínum línum, merktum hnútum og nákvæmum, földum stýringum.
- Basha-Franklin — Myndasafnsgrind undir hvítum dyraþaki. Notið hlýjan #f4ede6 lit, fíngerða svarta uppbyggingu og ósamhverfa súlur byggðar á ljósmyndum sem líta út eins og prentað arkitektasafnið.
- Bajgart Office — Ritstjórnarveggur. Notið stórt hvítt rými þar sem fínlegir serif-leturgerðir og brot úr safni hafa meiri sjónræna þyngd en krómhúðaðir viðmótsþættir.
- Heptabase — Sólbjart skrifborð. Hlýir, pappírslíkir fletir, kolsvört stjórntæki og fljótandi gluggar fyrir rannsóknir skapa tilfinningu fyrir skipulagðu vinnusvæði frekar en hugbúnaðarstjórnborði.
- Bejamas — Náttföt - súrt kalk í gegnum svart gler. Búið til rólegar, ljósgráar ritstjórnarsíður rofnar af heillandi svörtum spjöldum þar sem óskýrar grænar ljósrendur skera yfirborðið.
- Baba — Umhirðubréf í rauðu sólarljósi. Búið til breiðar rauðar frásagnarrendur í kringum hvít, bleik og kremlituð upplýsingaflöt með ljósmyndum af fólki sem tilfinningamiðstöð.
- Grafana Labs — Stjórnstöðin í sólarupprásarmerkjastöðinni. Rólegt, grátt og hvítt vinnurými sameinast breiðu, fjórlita sjóndeildarhringslagi og nákvæmum bláum tengimerkjum.
- Kagi — Sér lestrarherbergi. Búið til opið hvítt rými í kringum feitletraðan grafíttexta með því að nota fínlegar fjólubláar áherslur og hlýjar pastellitir til að brjóta upp kyrrðina.