Electronic Materials Office
Yon ti chabon klere nan yon galeri dekore ak chabon
Biwo Materyèl Elektwonik la se yon atelye ki fonksyone ta nan mitan lannwit: yon twal nwa mat, yon sèl ti flanm dife zoranj ki klere byen bèl, ak yon karaktè tipografik ki pale tou ba olye pou l di anyen. Entèfas la trete chak ekran tankou yon estidyo ki nan fènwa—foto klavye a se sèl sous limyè reyèl la, epi koòdone itilizatè a obeyi li. Tit yo, ki mete nan GT-Flexa 200-weight, flote nan yon gwo espas negatif; kò tèks la piti entansyonèlman epi li imen (Times). Koulè a mezire: blan pi pou karaktè, koulè mov pal (#9e9eff) pou lyen yo, ak yon sèl apèl a aksyon zoranj (#f45500) sou paj la ki klere ak pwòp ekla 30px li. Konpozan yo anfòm byen sere nan yon reyon 20px, fwontyè yo apèn aparan nan #9d9d9d, epi sèl lonbray ki nan sistèm nan se de halo koulè otou aksyon prensipal la.
Yon twal koulè chabon plen lajè ak kontni santre nan lajè maksimòm (~1200px). Ekran prensipal la kòmanse ak yon kat medya ki gen yon reyon 20px ki gen yon videyo pwodwi, ki okipe apeprè 80% nan lajè viewport la, imedyatman swiv pa yon tit GT-Flexa 200 plizyè liy ki vlope prèske tout lajè kontni an. Ritm seksyon an: yon sèl seksyon deskripsyon pwodwi an lèt majiskil style Tobias, ki te swiv pa yon griy 2x2 (sou òdinatè) ak kat deskripsyon pwodwi. Kat yo itilize fwontyè 1px #9d9d9d ak goutyè 24px ant yo. Respirasyon vètikal jenere—seksyon yo separe pa 48–128px espas negatif koulè chabon olye de divizyon. Navigasyon an se yon sèl panèl transparan ki anlè, ak yon gwoup lyen kache ak yon sèl apèl-a-aksyon Ember. Pa gen ba bò, pa gen mega-meni, pa gen navigasyon segondè.
Imaj yo se sèlman pou demonstrasyon pwodwi—yon foto makro pre klavye Altar I a sou yon background konplètman nwa, ak yon limyè dèyè ki soti anwo, sa ki fè bwat la klere epi bouchon kle yo reflete limyè sou kwen yo. Pa gen okenn fòm vi, pa gen men moun, pa gen okenn kontèks anviwònman. Imaj la gen anpil kontras epi li fè nwa; sèl koulè ki deyò palèt monokrom lan se bouton pouvwa zoranj ki sou klavye a li menm, ki fè eko apèl a aksyon Ember Orange la. Imaj yo kare oswa 16:9, toujou mete nan kat ki gen yon reyon 20px epi ki pwolonje pi lwen pase kwen kat la (pa gen okenn ranplen alantou foto a, epi tèks la anba kwen an). Stil ikòn: sèl ikonografi a se yon ti sèk ranpli (●) anvan logo la—yon sèl pwen zoranj, ~6px epesè.
Palèt
Mak
- Ember Orange
#f45500— Bouton aksyon prensipal la ki gen yon ranpli se sèl sifas kromatik nan koòdone itilizatè a, toujou akonpaye pa yon halo zoranj 30px, sa ki fè l klere tankou yon filaman; limyè ekstèn 30px sou bouton apèl prensipal la repwodui senbòl egzagòn Ember Orange la, men li egziste kòm yon lonbray olye de yon ranpli, sa ki fè bouton an parèt limen anndan.
Netral
- Studio Charcoal
#202020— Sifas twal ak katon yo tankou planche yon galeri fè nwa, pa janm konplètman nwa, pou je a ka repoze sou bor mou yo. - Bone White
#ffffff— Tèks prensipal, fwontyè mens sou imaj yo, ak yon sifas envèse ki ra. Tout yerachi font lan konsève poukont li. - Ash Gray
#9d9d9d— Tèks ki pa twò klere, fwontyè kat sibtil, ak tit inaktif se sèl gri mwayen ki nan konbinezon koulè a, yo itilize lè blan an twò fò. - Mid Felt
#eaeaea— Yon lave sifas lejè pou panno envèse oswa griy modal - yon lonbraj blan ki chita ant twal bèj ak twal fonse. - Carbon
#000000— Aksan ki pi frapan an se pou kou ikon ak ankadreman kontraste kote twal chabon an twò lejè pou l byen kenbe fòm li. - Lavender Link
#9e9eff— Koulè lyen entegre a ak kontou ankadreman aksyon adisyonèl la se yon kontras modere ak frèt ak zoranj cho a, sa ki asire aksyon yo lizib sou background chabon an.
Tipografi
soti nan 16 pou rive nan 86px · 8 etap
- GT-Flexa — ranplasman: Inter (200/400) or Manrope (200/400) · plan 200, 400 · Font prensipal pou tit ak eleman dekoratif yo. Pwa 200 la pèmèt chak tit ki pi wo pase 24px—sa a se yon stil siyati: nan 68px ak 86px, lèt yo sanble fonn nan atmosfè a olye pou yo rele byen fò. Pwa 400 la apwopriye pou soutit ak lejand kat, kote yo apèn tande. Espasman liy yo redwi a 1.0 nan pi gwo gwosè yo, kidonk font dekoratif yo anpile youn sou lòt tankou yon kolòn lè.
- Tobias-light — ranplasman: Söhne Buch or Inter Tight · plan 400 · Yon stil tipografi segondè pou tit seksyon yo ak logo pye paj la. Li itilize yon etap anba GT-Flexa 200 pou kreye yon kontras tonal—Tobias gen yon santiman plis achitektiral ak ekspresyon, alòske GT-Flexa gen plis atmosfè. Espasman lèt negatif la diminye pwopòsyon laj Tobias Light la.
- Times — ranplasman: Source Serif 4 or PT Serif · plan 400 · Kò tèks la ak paragraf tit yo se yon kontrepwen volontè ak polis jewometrik ak dekoratif yo, ki itilize serif. Serif yo ajoute chalè ak otorite editoryal nan deskripsyon pwodwi yo san yo pa depase gwosè kò tèks la.
Entèval ak fòm
| Objektif | Siyifikasyon |
|---|---|
| Dansite | dans |
| Etap debaz | 4-8px |
| Reyon bouton | 20px |
| Reyon kat | 20px |
| Lonbray | pa gen fwontyè olye de lonbraj |
| Ant seksyon yo | 48-128px |
| Lajè paj la | 1200px |
IA ap bati sit entènèt ou a nan style Electronic Materials Office epi ranpli li.
- Ranpli ak pwodwi ak piblikasyon atravè lyen an - Instagram, TikTok, Facebook.
- Transfere kontni ki soti nan ansyen sit ou a—jis presize adrès la.
- Design modèn sou pi bon motè a: React ( Next.js) ak rann sèvè ak optimize SEO pare pou itilize.
- Optimizasyon SEO konplètman otomatik pou rezilta rechèch ak rekòmandasyon rezo newòn.
Stil ki sanble
- OFFFICE : — yon galeri nwa ki anglouti nan yon polis monolitik
- Bibliothèque — Yon galeri nwa ki gen fòm kib anba yon pwojektè – yon plak limen poukont li nan yon gwo koulwa fènwa.
- 21 TSI — Yon vid wouj vif, yon sèl silwèt - yon editoryal gwo mòd kote koòdone itilizatè a fonn nan atmosfè a.
- Structured — Galri Renesans sou papye ki sanble ak plastilin
- CHAIBOY — Yon miray galeri nwa ak yon sèl foto ki gen limyè dèyè
- Holiday 100 — Yon galeri kado a minwi—yon tit serif sèvi kòm yon limyè, yon twal nwa sèvi kòm yon miray velours, epi chak imaj pwodwi pandye tankou yon ankadreman ki te chwazi ak anpil atansyon.
- Apple (España) — Galri mize a, nan yon limyè dous, se yon sèl espas blan, kaptivan, san pwa, ak chak ekspozisyon eklere pa yon pwojektè sou yon miray ki gen yon ti koulè.
- Analogue — Vitrin galri nwa - machandiz yo ap flote nan vid la
- Apple (España) — Vitrin Galri Obsidian an se yon sal ekspozisyon fènwa kote yon sèl objè titanyòm ap klere sou yon fon nwa anpil.
- Studio Oker — Yon galeri fè nwa ak aksan wouj vif—yon chanm pòtfolyo ak mi nwa, kote lèt blan yo sanble ap flote epi yon sèl chichotman wouj koupe silans la.
- 099 SUPPLY — Yon miray galeri plen ak objè nwa ak blan
- Retool — Yon atelye obsidyèn cho - yon sifas pou zouti presizyon, limen pa chabon dife k ap fimen, kote tout bagay kreye.