Apple
Një dhomë e bardhë me një çelës të vetëm blu
Dizajni i Apple është një model përmbajtjeje: një kanavacë pothuajse e bardhë, hapësirë e bollshme e bardhë dhe një theks i vetëm blu i gjallë që e bën çdo veprim të duket i qëllimshëm. Fokusi kryesor është tipografia - SF Pro, me hapësirë negative shkronjash që zvogëlohet me rritjen e madhësisë, duke u dhënë titujve një qartësi arkitekturore pa qenë tepër e rëndë. Produkti ËSHTË dizajni: fotot e mëdha të produkteve dhe imazhet e stilit të jetesës dominojnë, ndërsa elementët e kromit tërhiqen në korniza të holla, navigim të tejdukshëm dhe vija delikate. Seksionet alternojnë në një sfond gri të çelët me blloqe me ngjyra të plota për materiale promovuese, duke krijuar ritëm përmes ndryshimeve në shkallë në vend të elementëve dekorativë.
Paraqitja e faqes është një faqe me gjerësi të plotë pa një gjerësi maksimale të caktuar të kontejnerit - seksionet shtrihen nga njëra anë në tjetrën, me blloqe teksti të përqendruara brenda në afërsisht 980px. Navigimi është një shirit i vetëm global i fiksuar me një nën-dosje shtesë për secilin produkt që shfaqet gjatë rrotullimit. Paraqitja kryesore është gjithmonë e përqendruar: një emër i madh produkti, një slogan me një rresht të vetëm, dy butona tabletash, pastaj një imazh produkti që mbush dritaren e mbetur të pamjes. Seksionet janë të grumbulluara vertikalisht me një ritëm vertikal bujar (64px+ midis seksioneve), duke alternuar #f5f5f7 dhe sfonde me ngjyra. Faqja e poshtme është një rresht i vetëm horizontal me karta shërbimesh me gjerësi të plotë (Apple TV+, Fitness+, Music, Arcade), secila një bllok fotosh me tekst mbivendosës dhe një buton tabletash. Pa shirita anësorë, pa paraqitje përmbajtjeje me shumë kolona, pa kompozime asimetrike - gjithçka është e përqendruar, e grumbulluar dhe simetrike.
Fotografia është gjuha vizuale mbizotëruese. Fotot e produkteve bëhen në një sfond të bardhë të pastër ose gri të butë, pa asnjë kontekst - pajisja ËSHTË ylli, e izoluar dhe e ndriçuar. Fotot e stilit të jetesës shfaqen në banderola me gjerësi të plotë, shpesh me objekte të prera fort. Gradientët e ngjyrave (blu pastel, rozë, jeshile) shërbejnë si sfond për seksionet e produkteve, jo si dekorim. Ikonografia është minimaliste dhe e bazuar në vija, 1-2px e trashë, në të njëjtën shkallë gri si teksti. Pa ilustrime, pa grafikë abstrakte, pa paraqitje 3D, përveç vetë fotove të produkteve.
Paletë
Markë
- Apple Blue
#0071e3— Butona veprimi të mbushur, gjendje të zgjedhura - e vetmja ngjyrë kromatike interaktive e përdorur me kursim për t'i dhënë kuptim çdo pamjeje. - Link Blue
#0066cc— Kufijtë e theksuar të veprimit, lidhjet e integruara - një ngjyrë më e ngopur se Apple Blue përdoret aty ku një tabletë e mbushur do të ishte shumë e ndezur. - Signal Blue
#2997ff— Korniza dekorative, skica imazhesh, kufij ikonash - ngjyra blu më e çelët në sistem, e përdorur për atmosferën dhe jo për ndërveprimin e përdoruesit.
Neutral
- Carbon
#1d1d1f— Teksti kryesor, kufijtë e titujve, vijat e navigimit, kufijtë e kartave - ngjyra mbizotëruese e bojës është pothuajse e zezë me një nuancë të lehtë ngrohtësie. - Frost
#f5f5f7— Kanavaca e faqes, sfondi i tekstit kryesor dhe sipërfaqja e fundit të faqes janë në ngjyrën gri të çelët, karakteristike e Apple, pak më të ftohtë se e bardha e pastër. - Ice
#f4f8fb— Mbushje ekspresive të sipërfaqes, nuanca delikate, tekst butoni në një sfond të errët - një nuancë delikate blu që e gjallëron seksionin pa e bërë atë të dallohet. - Smoke
#333333— Tekst dytësor, mbushje navigimi, kufij butonash - Një ngjyrë neutrale e gjithanshme për kufijtë dhe ikonat që kanë nevojë për më shumë shkëlqim sesa një gri e mesme. - Graphite
#474747— Teksti i navigimit, kufijtë e navigimit, kufijtë e lidhjeve - zë një pozicion të ndërmjetëm midis Karbonit dhe Tymit në hierarkinë e elementeve. - Ash
#707070— Teksti i fundit të faqes, kufijtë e listës, kufijtë e navigimit, teksti i trupit i heshtur - Një gri mesatare për përmbajtjen që duhet të jetë e pranishme, por jo e spikatur.
Tipografi
nga 12 në 56px · 8 hapa
- SF Pro Display — zëvendësim: Inter · skica 400, 600, 700 · Titujt dhe teksti i madh—madhësitë mbi 40px përdorin një format shfaqjeje për një aperturë më të ngushtë dhe gjurmim më të fortë negativ; 700 është i rezervuar për paraqitjet e reklamave dhe 400 është për emrat e produkteve në përmbajtjen editoriale.
- SF Pro Text — zëvendësim: Inter · skica 300, 400, 600 · Teksti i trupit, navigimi, butonat, nëntitujt — font funksional; 400 për tekstin e trupit, 300 për nëntitujt dhe etiketat e kualifikuara, 600 për elementët e navigimit dhe tekstin e butonave; hapësira midis shkronjave negative zvogëlohet në mënyrë proporcionale me madhësinë (nga -0.022em në 12px në -0.01em në 44px).
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | mesatare |
| Hapi bazë | 12px |
| Rrezja e butonit | 980px |
| Rrezja e kartës | 8px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 64px |
| Gjerësia e faqes | 1440px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Apple dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- Studio — Një mur galerie në lëvizje. Çdo ekran përfaqëson një sipërfaqe ekspozite të qetë, gri, ku materialet tipografike dhe veprat krijuese që mbivendosen konkurrojnë për vëmendje.
- Mollie — Një banak kashmiri, një libër llogarie i errët. Lini hapësirë të bollshme të bardhë për dizajn editorial rreth tekstit të zi, pastaj përforconi pikat që lidhen me produktin me krem të ngrohtë, kafe kafe ekspres dhe foto prekëse të metodave aktuale të pagesës.
- Basis Theory — Terminalet e pagesave në studion e dizajnit. Letra teknike e bardhë, shtresat e tejdukshme të transaksioneve që mbivendosen dhe një element i vetëm kontrolli ngjyrë bruz përcaktojnë drejtimin vizual.
- CleanShot X — Një studio me një desktop të ndriçuar me blu. Krijoni një hapësirë të bardhë të qetë rreth tekstit të zi kompakt, pastaj lejoni që kontrollet e pasura me blu dhe imazhet e shtresuara të produkteve Mac të jenë në qendër të vëmendjes.
- Modern Treasury — Një regjistër thesari në letër milimetrike. Krijoni faqe që i ngjajnë një flete operative të qetë e të bardhë, ku flukset e parave shfaqen me vija të holla, nyje të etiketuara dhe kontrolle të sakta e të fshehura.
- Basha-Franklin — Një rrjetë galerie poshtë një arkitrau të bardhë. Përdorni një nuancë të ngrohtë #f4ede6, një strukturë delikate të zezë dhe kolona asimetrike bazuar në fotografi që duken si një portofol arkitekturor i printuar.
- Bajgart Office — Muri i galerisë editoriale. Përdorni një hapësirë të madhe të bardhë ku fontet delikate serif dhe fragmentet e portofolit mbajnë më shumë peshë vizuale sesa elementët e ndërfaqes të kromuar.
- Heptabase — Një tavolinë e ndriçuar nga dielli. Sipërfaqet e ngrohta, si letër, kontrollet me ngjyrë qymyri dhe dritaret lundruese për kërkime krijojnë ndjesinë e një hapësire pune të organizuar në vend të një paneli kontrolli softuerësh.
- Bejamas — Pizhama—ngjyrë gëlqereje acidike përmes xhamit të zi. Krijoni faqe editoriale të qeta, gri të çelëta, të ndërprera nga panele të zeza magjepsëse, ku vija të gjelbra të turbullta drite kryqëzohen në sipërfaqe.
- Baba — Shënime kujdesi në dritën e kuqe të diellit. Krijoni vija të gjera narrative të kuqe rreth sipërfaqeve intime të informacionit të bardhë, rozë dhe krem, duke përdorur fotografitë e njerëzve si qendër emocionale.
- Grafana Labs — Dhoma e kontrollit të Stacionit të Sinjaleve Sunrise. Një hapësirë pune e qetë gri dhe e bardhë kombinohet me një gradient të gjerë horizonti me katër ngjyra dhe sinjale të sakta blu të ndërfaqes.
- Kagi — Një dhomë leximi e veçantë. Krijoni një hapësirë të bardhë të hapur rreth tekstit të theksuar me grafit, duke përdorur thekse delikate vjollce dhe sipërfaqe të ngrohta pastel për të thyer qetësinë.