Electronic Materials Office
Një prush i ndezur në një galeri të zbukuruar me qymyr druri
Zyra e Materialeve Elektronike është një seminar nate vonë: një kanavacë e zezë mat, një ngjyrë e vetme portokalli që shkëlqen dhe një font që pëshpërit në vend që të deklarojë. Ndërfaqja e trajton çdo ekran si një studio të errët - fotografitë e tastierës janë burimi i vetëm i vërtetë i dritës dhe ndërfaqja e përdoruesit i bindet asaj. Titujt, të vendosur në GT-Flexa me peshë 200, notojnë në një hapësirë të gjerë negative; teksti i trupit është qëllimisht i vogël dhe humanist (Times). Ngjyra matet: e bardhë e pastër për fontin, vjollcë e zbehtë (#9e9eff) për lidhjet dhe një thirrje e vetme portokalli (#f45500) për veprim në faqe që shkëlqen me shkëlqimin e vet prej 30 px. Komponentët përshtaten fort brenda një rrezeje prej 20 px, kufijtë mezi vihen re në #9d9d9d dhe të vetmet hije në sistem janë dy aureola me ngjyra rreth veprimit kryesor.
Një kanavacë me ngjyrë qymyri me gjerësi të plotë, me përmbajtje të përqendruar dhe me gjerësi maksimale (~1200px). Ekrani kryesor fillon me një kartë mediatike me rreze 20px që përmban një video produkti, duke zënë afërsisht 80% të gjerësisë së dritares së shikimit, e ndjekur menjëherë nga një titull shumërreshtash GT-Flexa 200 që mbështillet pothuajse në gjerësinë e plotë të përmbajtjes. Ritmi i seksionit: një seksion i vetëm përshkrimi produkti me shkronja të mëdha në stilin Tobias, i ndjekur nga një rrjetë 2x2 (në desktop) me karta përshkrimi produkti. Kartat përdorin kufij 1px #9d9d9d dhe kanale 24px midis tyre. Frymëmarrje vertikale bujare - seksionet ndahen nga 48–128px hapësirë negative me ngjyrë qymyri në vend të ndarësve. Navigimi është një panel i vetëm, transparent i ankoruar në krye, me një grumbull lidhjesh të fshehura dhe një thirrje të vetme për veprim Ember. Pa shirit anësor, pa mega-menu, pa navigim dytësor.
Imazhet janë vetëm për qëllime demonstrimi të produktit - një pamje makro nga afër e tastierës Altar I në një sfond plotësisht të zi, me një ndriçim prapa nga lart, duke bërë që mbulesa të shkëlqejë dhe tastet të reflektojnë dritën rreth skajeve. Asnjë stil jetese, asnjë duar njerëzore, asnjë kontekst mjedisor. Imazhet janë me kontrast të lartë dhe të errëta; e vetmja ngjyrë jashtë paletës monokrome është çelësi portokalli i energjisë në vetë tastierën, i cili i bën jehonë thirrjes për veprim të Ember Orange. Imazhet janë katrore ose 16:9, gjithmonë të vendosura në karta me një rreze prej 20px dhe që shtrihen përtej skajeve të kartës (nuk ka mbushje rreth fotos, dhe teksti është poshtë skajit). Stili i ikonës: ikonografia e vetme është një rreth i vogël i mbushur (●) para logos - një pikë e vetme portokalli, ~6px e trashë.
Paletë
Markë
- Ember Orange
#f45500— Butoni kryesor i veprimit me një mbushje është e vetmja sipërfaqe kromatike në ndërfaqen e përdoruesit, e shoqëruar gjithmonë nga një aureolë portokalli 30px, duke e bërë atë të shkëlqejë si një filament; shkëlqimi i jashtëm 30px në butonin kryesor të thirrjes dublikon simbolin e gjashtëkëndëshit Ember Orange, por ekziston si hije në vend të mbushjes, duke e bërë butonin të duket i ndriçuar nga brenda.
Neutral
- Studio Charcoal
#202020— Sipërfaqet e kanavacës dhe kartonit janë si dyshemeja e një galerie të errët, kurrë plotësisht e zezë, në mënyrë që syri të mund të pushojë në skajet e buta. - Bone White
#ffffff— Teksti kryesor, kufij të hollë në imazhe dhe një sipërfaqe e rrallë e përmbysur. E gjithë hierarkia e shkronjave mirëmbahet në mënyrë të pavarur. - Ash Gray
#9d9d9d— Teksti i heshtur, kufijtë delikate të kartave dhe mbishkrimet joaktive janë të vetmet ngjyra gri të mesme në skemën e ngjyrave, të cilat përdoren kur e bardha është shumë e dendur. - Mid Felt
#eaeaea— Një larje sipërfaqësore e lehtë për panelet e përmbysura ose rrjetat modale - një nuancë e bardhë që vendoset midis ngjyrës bezhë dhe kanavacës së errët. - Carbon
#000000— Theksi më i habitshëm është për goditjet e ikonave dhe kornizat me kontrast, ku kanavaca me qymyr është shumë e lehtë për ta mbajtur mirë formën e saj. - Lavender Link
#9e9eff— Ngjyra e lidhjes së ngulitur dhe kontura e kornizës shtesë të veprimit janë një kontrast i zbehtë dhe i ftohtë me portokallinë e ngrohtë, duke siguruar që veprimet të jenë të lexueshme në sfondin me ngjyrë qymyri.
Tipografi
nga 16 në 86px · 8 hapa
- GT-Flexa — zëvendësim: Inter (200/400) or Manrope (200/400) · skica 200, 400 · Fonti kryesor për titujt dhe elementët dekorativë. Pesha 200 lejon çdo titull mbi 24px - ky është një stil dallues: me 68px dhe 86px, shkronjat duket se treten në atmosferë në vend që të bërtasin. Pesha 400 është e përshtatshme për nëntitujt dhe mbishkrimet e kartave, ku ato mezi dëgjohen. Hapësira midis rreshtave zvogëlohet në 1.0 në madhësitë më të mëdha, kështu që fonti dekorativ grumbullohet mbi njëra-tjetrën si një kolonë ajri.
- Tobias-light — zëvendësim: Söhne Buch or Inter Tight · skica 400 · Një stil tipografik dytësor për titujt e seksioneve dhe logon e fundit të faqes. Përdoret një hap poshtë GT-Flexa 200 për të krijuar një kontrast tonal—Tobias ka një ndjesi më arkitekturore dhe ekspresive, ndërsa GT-Flexa është më atmosferik. Hapësira negative midis shkronjave ngushton përmasat e gjera të Tobias Light.
- Times — zëvendësim: Source Serif 4 or PT Serif · skica 400 · Teksti kryesor dhe paragrafët e titullit janë një kundërpërgjigje e qëllimshme ndaj shkronjave gjeometrike dhe dekorative, që përdorin shkronja serif. Shkronjat serif i shtojnë ngrohtësi dhe autoritet editorial përshkrimeve të produkteve pa tejkaluar madhësinë e tekstit kryesor.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | i dendur |
| Hapi bazë | 4-8px |
| Rrezja e butonit | 20px |
| Rrezja e kartës | 20px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 48-128px |
| Gjerësia e faqes | 1200px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Electronic Materials Office 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
- OFFFICE : — një galeri noir e mbuluar nga fonti monolitik
- Bibliothèque — Një galeri e zezë në formë kubi nën një dritë prozhektorësh – një pjatë e vetme e ndriçuar në një sallë të gjerë e të errët
- 21 TSI — Një boshllëk i kuq, një siluetë e vetme – një editorial i modës së lartë ku ndërfaqja e përdoruesit shkrihet në atmosferë.
- Structured — Galeria e Rilindjes në letër të ngjashme me plastelinën
- CHAIBOY — Një mur galerie i zi me një fotografi të vetme me ndriçim nga prapa
- Holiday 100 — Një galeri dhuratash në mesnatë - një titull serif shërben si një dritë reflektori, një kanavacë e errët si një mur prej kadifeje dhe çdo imazh produkti varet si një kornizë e zgjedhur me kujdes.
- Apple (España) — Galeria e muzeut, në dritën e butë të ditës, është një hapësirë e vetme e bardhë, magjepsëse dhe pa peshë, me çdo ekspozitë të ndriçuar nga një reflektor kundër një muri të errët lehtë.
- Analogue — Vitrina e zezë e galerisë - mallrat qëndrojnë pezull në boshllëk
- Apple (España) — Vitrina e Galerisë Obsidian është një sallë ekspozite e errët ku një objekt i vetëm titaniumi shkëlqen në një sfond të zi si sterrë.
- Studio Oker — Një galeri e errët me thekse të kuqe të ndezura—një dhomë portofoli e veshur me mure të zeza, ku shkronjat e bardha duket se notojnë dhe një pëshpëritje e vetme e kuqe ndërpret heshtjen.
- 099 SUPPLY — Një mur galerie i mbushur me objekte bardh e zi
- Retool — Një punishte e ngrohtë prej obsidiani - një sipërfaqe për vegla precize, e ndriçuar nga prush që digjen, ku krijohet gjithçka