Electronic Materials Office
Txingar distiratsu bat ikatzez apaindutako galeria batean
Material Elektronikoen Bulegoa gaueko tailer bat da: mihise beltz mate bat, laranja koloreko txingar distiratsu bakarra eta aldarrikatu beharrean xuxurlatu egiten duen letra-tipo bat. Interfazeak pantaila bakoitza estudio ilun bat bezala tratatzen du: teklatuaren argazkiak dira argi-iturri bakarra, eta erabiltzaile-interfazeak obeditzen dio. 200 pisuko GT-Flexan ezarritako izenburuak espazio negatibo zabalean flotatzen dute; gorputzaren testua nahita txikia eta humanista da (Times). Kolorea neurtzen da: zuri hutsa letra-tiporako, more isila (#9e9eff) esteketarako, eta ekintzarako dei laranja koloreko bakarra (#f45500) bere 30px-ko distira propioarekin distiratzen duen orrialdean. Osagaiak ondo egokitzen dira 20px-ko erradioan, ertzak ia ez dira nabaritzen #9d9d9d-n, eta sisteman dauden itzal bakarrak ekintza nagusiaren inguruko bi halo koloretsu dira.
Zabalera osoko mihise ikatz-kolorekoa, erdian zabalera maximoko edukiarekin (~1200px). Pantaila nagusia 20px-ko erradioko multimedia-txartel batekin hasten da, produktuaren bideo bat duena, ikuspegi-leihoaren zabaleraren % 80 inguru hartzen duena, eta berehala, edukiaren zabalera ia osoa hartzen duen GT-Flexa 200 goiburu anitzeko lerro bat dator. Atalen erritmoa: produktuaren deskribapen-atal bakarra Tobias estiloko maiuskulaz idatzita, eta ondoren produktuaren deskribapen-txartelen 2x2 sareta bat (mahaigainekoan). Txartelek 1px-ko #9d9d9d ertzak eta 24px-ko tarteak erabiltzen dituzte bien artean. Arnasketa bertikal zabala: atalak 48-128px-ko ikatz-koloreko espazio negatiboz bereizten dira, banatzaileen ordez. Nabigazioa goialdean ainguratutako panel garden bakarra da, esteka ezkutuen multzo batekin eta Ember ekintzarako dei bakarrarekin. Ez alboko barrarik, ez mega-menurik, ez bigarren mailako nabigaziorik.
Irudiak produktuaren erakustaldietarako soilik dira: Altar I teklatuaren makro-argazki hurbil bat atzealde guztiz beltz baten aurrean, goitik atzeko argiarekin, kaxa distiratsu agertzea eta teklatu-tapoiek ertzetan argia islatzea eraginez. Ez bizimodurik, ez giza eskurik, ez ingurumen-testuingururik. Irudiak kontraste handikoak eta ilunak dira; paleta monokromotik kanpo dagoen kolore bakarra teklatuko laranja koloreko etengailua da, Ember Orange ekintzarako deia gogorarazten duena. Irudiak karratuak edo 16:9 formatukoak dira, beti 20px-ko erradioko txarteletan jarrita eta txartelaren ertzetatik haratago hedatzen direnak (ez dago betegarririk argazkiaren inguruan, eta testua ertzaren azpian dago). Ikonoaren estiloa: ikonografia bakarra logotipoaren aurreko zirkulu txiki bete bat (●) da: puntu laranja bakarra, ~6px-ko lodiera duena.
Paleta
Marka
- Ember Orange
#f45500— Betegarridun ekintza-botoi nagusia UI-ko gainazal kromatiko bakarra da, beti 30px-ko laranja koloreko halo batekin batera, harizpi baten antzera distiratzen duena; dei-botoi nagusiaren 30px-ko kanpoko distirak Ember Orange hexagonoaren ikurra bikoizten du, baina betegarri baten ordez itzal gisa existitzen da, botoia barrutik argiztatuta agerraraziz.
Neutroa
- Studio Charcoal
#202020— Mihise eta kartoi gainazalak galeria ilun baten zorua bezalakoak dira, inoiz ez dira guztiz beltzak, begia ertz leunetan pausatu ahal izateko. - Bone White
#ffffff— Testu nagusia, irudien ertz meheak eta alderantzizko gainazal arraroa. Letra-tipoen hierarkia osoa modu independentean mantentzen da. - Ash Gray
#9d9d9d— Testu isila, txartelen ertz sotilak eta azpititulu inaktiboak dira kolore-eskemako gris ertain bakarrak, zuria ozenegia denean erabiltzen direnak. - Mid Felt
#eaeaea— Panel alderantzikatuetarako edo modal-sareetarako gainazal-garbiketa argia - beixaren eta mihise ilunaren artean kokatzen den zuri-tonu bat. - Carbon
#000000— Deigarriena ikono-trazuetarako eta marko kontrastatuetarako da, non ikatz-koloreko mihisea arinegia den bere forma ondo mantentzeko. - Lavender Link
#9e9eff— Txertatutako estekaren kolorea eta ekintza-marko gehigarriaren eskema laranja beroarekiko kontraste hotz eta apal bat dira, ekintzak ikatz-hondoaren gainean irakurgarriak direla ziurtatuz.
Tipografia
16tik 86px-ra · 8 urrats
- GT-Flexa — ordezkapena: Inter (200/400) or Manrope (200/400) · eskemak 200, 400 · Izenburu eta elementu apaingarrietarako letra-tipo nagusia. 200 pisuak 24px-tik gorako izenburu guztiak onartzen ditu; estilo bereizgarria da hau: 68px eta 86px-tan, letrak atmosferan desegiten direla dirudi, oihu egin beharrean. 400 pisua azpitituluetarako eta txartel-oharretarako egokia da, non ia ez diren entzuten. Lerroen arteko tartea 1.0ra murrizten da tamaina handienetan, beraz, letra-tipo apaingarriak bata bestearen gainean pilatzen dira aire-zutabe bat bezala.
- Tobias-light — ordezkapena: Söhne Buch or Inter Tight · eskemak 400 · Atalen izenburuetarako eta oin-orriko logotiporako bigarren mailako tipografia estiloa. GT-Flexa 200 baino maila bat beherago erabiltzen da tonu-kontraste bat sortzeko: Tobiasek kutsu arkitektonikoagoa eta adierazkorragoa du, eta GT-Flexa, berriz, atmosferikoagoa. Letra-tarte negatiboak Tobias Light-en proportzio zabalak murrizten ditu.
- Times — ordezkapena: Source Serif 4 or PT Serif · eskemak 400 · Gorputz-testua eta goiburu-paragrafoak serifak erabiltzen dituzten letra-tipo geometriko eta apaingarrien kontrapuntu nahita bat dira. Serifek berotasuna eta autoritate editoriala gehitzen dizkiete produktuen deskribapenei, gorputz-testuaren tamaina gainditu gabe.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 4-8px |
| Botoiaren erradioa | 20px |
| Txartelaren erradioa | 20px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 48-128px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Electronic Materials Office estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- OFFFICE : — letra-tipo monolitikoz inguratutako galeria noir bat
- Bibliothèque — Kubo beltz itxurako galeria foku baten azpian – areto ilun eta zabal bateko plaka argiztatu bakarti bat
- 21 TSI — Hutsune gorri bat, silueta bakarra – goi mailako modako editorial bat, non erabiltzaile-interfazea atmosferan desegiten den.
- Structured — Plastilina itxurako paperean egindako errenazimentuko galeria
- CHAIBOY — Atzetik argiztatutako argazki bakarra duen galeria-horma beltza
- Holiday 100 — Opari galeria bat gauerdian —serif izenburu batek foku gisa balio du, mihise ilun batek belusezko horma gisa, eta produktu bakoitzaren irudia arretaz hautatutako marko bat bezala zintzilik dago.
- Apple (España) — Museoaren galeria, egunez argi leunean, espazio zuri bakarra, liluragarria eta pisurik gabekoa da, erakusketa bakoitza horma arin tindatu baten kontrako foku batek argiztatuta duela.
- Analogue — Galeria beltzaren erakusleihoa – ondasunak hutsunean flotatzen
- Apple (España) — Obsidian Galeriaren erakusleihoa erakusketa-areto ilun bat da, non titaniozko objektu bakar bat distira egiten duen atzealde beltz baten gainean.
- Studio Oker — Galeria ilun bat, azentu eskarlataduna —horma beltzez estalitako portfolio gela bat, non letra zuriak flotatzen ari direla dirudien eta xuxurla gorri bakar batek isiltasuna ebakitzen duen.
- 099 SUPPLY — Galeria-horma bat objektu zuri-beltzez beteta
- Retool — Obsidiana tailer bero bat - doitasun-tresnentzako gainazal bat, txingar ketsuek argiztatua, non dena sortzen den