Electronic Materials Office
In gloeiende koal yn in galery fersierd mei houtskoal
It Electronic Materials Office is in lette-nacht workshop: in mat gitswart doek, in inkele gloeiende oranje koal, en in lettertype dat flústeret ynstee fan ferklearret. De ynterface behannelet elk skerm as in tsjustere studio - foto's fan it toetseboerd binne de ienige echte ljochtboarne, en de brûkersynterface folget dy. Koppen, ynsteld yn 200-gewicht GT-Flexa, sweve yn grutte negative romte; lichemtekst is mei opsetsin lyts en humanistysk (Times). Kleur wurdt metten: suver wyt foar lettertype, gedempt pears (#9e9eff) foar keppelings, en in inkele oranje (#f45500) oprop ta aksje op 'e pagina dy't gloeit mei syn eigen 30px gloed. Komponinten passe strak binnen in straal fan 20px, rânen binne amper merkber by #9d9d9d, en de ienige skaden yn it systeem binne twa kleurige halo's om 'e primêre aksje.
In folsleine breedte, houtskoalkleurich kanvas mei sintrale ynhâld mei maksimale breedte (~1200px). It haadskerm begjint mei in mediakaart mei in radius fan 20px mei in produktfideo, dy't sawat 80% fan 'e viewportbreedte ynnimt, direkt folge troch in GT-Flexa 200-koptekst mei meardere rigels dy't hast de folsleine ynhâldsbreedte berikt. Seksjeritme: in inkele produktbeskriuwingsseksje yn Tobias-styl mei haadletters, folge troch in 2x2-raster (op buroblêd) fan produktbeskriuwingskaarten. Kaarten brûke rânen fan 1px #9d9d9d en 24px-goaten dertusken. Romme fertikale sykheljen - seksjes wurde skieden troch 48–128px negative romte yn houtskoalkleur ynstee fan skiedingsplaten. Navigaasje is in inkele, transparante paniel dy't oan 'e boppekant ferankere is, mei in kluster fan ferburgen keppelings en in inkele Ember-oprop ta aksje. Gjin sydbalke, gjin megamenu, gjin sekundêre navigaasje.
De ôfbyldings binne allinich foar produktdemonstraasjedoelen - in close-up makro-opname fan it Altar I-toetseboerd tsjin in folslein swarte eftergrûn, mei in efterljochting fan boppen, wêrtroch't de kast gloeit en de toetseboerden ljocht om 'e rânen reflektearje. Gjin libbensstyl, gjin minskehannen, gjin miljeukontekst. De ôfbyldings hawwe in heech kontrast en binne tsjuster; de ienige kleur bûten it monochrome palet is de oranje oan/út-skeakel op it toetseboerd sels, dy't de Ember Orange oprop ta aksje werjout. Ofbyldings binne fjouwerkant of 16:9, altyd pleatst yn kaarten mei in straal fan 20px en útstekke bûten de rânen fan 'e kaart (d'r is gjin padding om 'e foto hinne, en de tekst is ûnder de râne). Ikoanstyl: de ienige ikonografy is in lytse folle sirkel (●) foar it logo - in inkele oranje stip, ~6px dik.
Palet
Merk
- Ember Orange
#f45500— De primêre aksjeknop mei in opfolling is it ienige chromatyske oerflak yn 'e brûkersynterface, altyd begelaat troch in 30px oranje halo, wêrtroch't it gloeit as in filament; de 30px bûtenste gloed op 'e primêre opropknop duplisearret it Ember Orange hexagon-symboal, mar bestiet as in skaad ynstee fan in opfolling, wêrtroch't de knop fan binnenút ferljochte liket.
Neutraal
- Studio Charcoal
#202020— De oerflakken fan doek en karton binne as de flier fan in tsjustere galery, nea hielendal swart, sadat it each op 'e sêfte rânen rêste kin. - Bone White
#ffffff— Haadtekst, tinne rânen op ôfbyldings, en in seldsum omkeard oerflak. De hiele lettertypehiërargy wurdt ûnôfhinklik ûnderhâlden. - Ash Gray
#9d9d9d— Gedempte tekst, subtile kaartrânen en ynaktive ûnderskriften binne it ienige middengriis yn it kleurskema, brûkt as wyt te lûd is. - Mid Felt
#eaeaea— In ljochte oerflakwask foar omkearde panielen of modale rasters - in skaad fan wyt dy't tusken beige en donker doek yn sit. - Carbon
#000000— It opfallendste aksint is foar ikoanstreken en kontrastearjende frames wêr't it houtskoaldoek te ljocht is om syn foarm goed fêst te hâlden. - Lavender Link
#9e9eff— De kleur fan 'e ynbêde keppeling en de omtrek fan it ekstra aksjeframe binne in gedempt, koel kontrast mei it waarme oranje, wêrtroch't de aksjes lêsber binne tsjin 'e houtskoalachtergrûn.
Typografy
fan 16 oant 86px · 8 stappen
- GT-Flexa — ferfanging: Inter (200/400) or Manrope (200/400) · sketsen 200, 400 · It primêre lettertype foar kopteksten en dekorative eleminten. It gewicht fan 200 makket elke koptekst boppe 24px mooglik - dit is in hantekeningsstyl: by 68px en 86px lykje de letters op te lossen yn 'e sfear ynstee fan te roppen. It gewicht fan 400 is geskikt foar subkopteksten en kaartbyskriften, dêr't se amper te hearren binne. De rigelôfstân is fermindere nei 1.0 by de grutste maten, sadat it dekorative lettertype boppe-op elkoar stapelt wurdt as in kolom loft.
- Tobias-light — ferfanging: Söhne Buch or Inter Tight · sketsen 400 · In sekundêre typografystyl foar seksjekoppen en it fuottekstlogo. It wurdt ien stap ûnder GT-Flexa 200 brûkt om in toankontrast te meitsjen - Tobias hat in mear arsjitektoanysk, ekspressyf gefoel, wylst GT-Flexa mear sfearfol is. De negative letterôfstân fernauwt de brede proporsjes fan Tobias Light.
- Times — ferfanging: Source Serif 4 or PT Serif · sketsen 400 · De haadtekst en koptekstparagrafen binne in bewust tsjinoerstelde kanttekening foar de geometryske, dekorative lettertypen, mei gebrûk fan serifs. De serifs foegje waarmte en redaksjonele autoriteit ta oan 'e produktbeskriuwingen sûnder de grutte fan 'e haadtekst te oerskriden.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | ticht |
| Basisstap | 4-8px |
| Knopradius | 20px |
| Kaartradius | 20px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 48-128px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Electronic Materials Office -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- OFFFICE : — in noir-galery omhuld troch in monolitysk lettertype
- Bibliothèque — In swarte kubusfoarmige galery ûnder in spotlight - in iensume ferljochte plaat yn in grutte, tsjustere hal
- 21 TSI — In karmozijnrode leechte, in inkele silhouet - in high fashion-redaksje wêr't de brûkersynterface oplost yn 'e sfear
- Structured — Renêssânsegalery op plastisine-eftich papier
- CHAIBOY — In swarte galerymuorre mei in inkele efterljochte foto
- Holiday 100 — In galery fan kado's om middernacht - in serif-koptekst tsjinnet as in spotlight, in tsjuster doek as in fluwelen muorre, en elke produktôfbylding hinget as in soarchfâldich selektearre frame.
- Apple (España) — De museumgalery, by sêft deiljocht, is ien, boeiende, gewichtleaze wite romte, mei elke tentoanstelling ferljochte troch in spotlight tsjin in licht getinte muorre.
- Analogue — Swarte galeryvitrine - guod sweve yn 'e leechte
- Apple (España) — De vitrine fan 'e Obsidian Gallery is in tsjustere tentoanstellingshal dêr't in inkel titaniumobjekt gloeit tsjin in pikswarte eftergrûn.
- Studio Oker — In tsjustere galery mei skarlaken aksinten - in portefúljekeamer beklaaid mei swarte muorren, dêr't wite letters lykje te sweevjen en in inkele reade fluistering troch de stilte snijt.
- 099 SUPPLY — In galerymuorre fol mei swarte en wite objekten
- Retool — In waarme obsidiaanwurkpleats - in oerflak foar presyzje-ark, ferljochte troch smeulende koalen, dêr't alles makke wurdt