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
- Ui — klínísk áætlun á mattpappír
- ElevenLabs — Ljósmyndaritgerð í hlýjum rjómalitum tónum með látlausum fyrirsögnum. Minnisbók í Bauhaus-stíl — eggjaskurnslitað pappír, svart blek og ein fjólublá og appelsínugult útlit til að sýna vörurnar.
- monopo saigon — Fljótandi, gljáandi ljómi á bak við þögn ritstjórnarinnar — einlita ritstjórnargallerí sem flýtur á bráðnu ljósi
- Awesomic — Ritstjórnarlegt sinknet með appelsínugulum greinarmerkjum sem minna á konfettí
- Monad — ritstjórnartæknilegt tímarit á hlýju pergamenti
- Dub — Stjórnborð Links fyrir matt hrísgrjónapappír
- Seline Analytics — Rólegt greiningarborð á hlýju pappír
- Ventriloc — Ritstjórnarathugunarstöð gagna á hlýjum pappír - ein appelsínugult glóð sem undirstrikar einlita nákvæmni
- Duolingo — Léttur bekkjarlukkudýr á hvítum pappír
- Stripe — Bókhaldsbók skrifuð með indigó-bleki á matt gler
- Notion — Hlý pappírsminnisbók í hádegissólinni
- Hyer Aviation — Rökkur í stjórnklefanum yfir pergamenti. Fölur dögunarhiminn mætir merkinu á stærð við skrokkinn með serif-merki og hlýr leiráhersla brýtur einlita takmörkunina.