Electronic Materials Office
Hehkuva hiili galleriassa, joka on koristeltu hiilellä
Elektronisten materiaalien toimisto on myöhäisillan työpaja: mattapintainen pikimusta kangas, yksi hehkuva oranssi hiili ja kirjasintyyppi, joka kuiskaa pikemminkin kuin julistaa. Käyttöliittymä käsittelee jokaista näyttöä kuin pimennettyä studiota – näppäimistön valokuvat ovat ainoa todellinen valonlähde, ja käyttöliittymä tottelee sitä. 200-painoiseen GT-Flexaan asetetut otsikot kelluvat valtavassa negatiivisessa tilassa; leipäteksti on tarkoituksella pienikokoinen ja inhimillinen (Times). Väri mitataan: puhtaan valkoinen kirjasimille, hillitty violetti (#9e9eff) linkeille ja yksi oranssi (#f45500) toimintakehotus sivulla, joka hehkuu omalla 30 pikselin hehkullaan. Komponentit sopivat tiiviisti 20 pikselin säteeseen, reunat ovat tuskin havaittavissa kohdassa #9d9d9d, ja järjestelmän ainoat varjot ovat kaksi värillistä haloa päätoiminnon ympärillä.
Täysleveä, hiilenharmaa kangas, jossa on keskitetty, maksimileveysinen sisältö (~1200 pikseliä). Päänäyttö alkaa 20 pikselin säteellä olevalla mediakortilla, joka sisältää tuotevideon ja vie noin 80 % näyttöalueen leveydestä. Välittömästi sen jälkeen tulee monirivinen GT-Flexa 200 -otsikko, joka ulottuu lähes koko sisällön leveyteen. Osioiden rytmi: yksi Tobiasin tyyliin kirjoitettu tuotekuvausosio, jota seuraa 2x2-ruudukko (työpöydällä) tuotekuvauskorteista. Korteissa käytetään 1 pikselin #9d9d9d reunuksia ja 24 pikselin sisävälejä niiden välillä. Runsas pystysuora hengitys – osiot on erotettu toisistaan 48–128 pikselin hiilenharmaalla negatiivisella tilalla eikä jakajilla. Navigointi on yksi, läpinäkyvä paneeli, joka on ankkuroitu yläreunaan, ja jossa on piilotettujen linkkien rykelmä ja yksi Ember-toimintakehotus. Ei sivupalkkia, ei megavalikkoa, ei toissijaista navigointia.
Kuvat ovat vain tuote-esittelytarkoituksiin – lähikuva Altar I -näppäimistöstä täysin mustaa taustaa vasten, ylhäältä tuleva taustavalo saa kotelon hehkumaan ja näppäinhatut heijastamaan valoa reunojen ympäriltä. Ei elämäntyyliä, ei ihmiskäsiä, ei ympäristökontekstia. Kuvat ovat kontrastiltaan suuria ja tummia; ainoa väri yksivärisen paletin ulkopuolella on näppäimistön oranssi virtakytkin, joka heijastelee Ember Orangen toimintakehotusta. Kuvat ovat neliönmuotoisia eli 16:9-kuvasuhteessa, ja ne sijoitetaan aina 20 pikselin säteellä oleviin kortteihin, jotka ulottuvat kortin reunojen ulkopuolelle (kuvan ympärillä ei ole täytettä, ja teksti on reunan alapuolella). Kuvaketyyli: ainoa ikonografia on pieni täytetty ympyrä (●) ennen logoa – yksi oranssi piste, noin 6 pikseliä paksu.
Paletti
Merkki
- Ember Orange
#f45500— Täytetty ensisijainen toimintopainike on käyttöliittymän ainoa kromaattinen pinta, jota ympäröi aina 30 pikselin oranssi halo, joka saa sen hehkumaan kuin hehkulanka. Ensisijaisen kutsupainikkeen 30 pikselin ulompi hehku kopioi Ember Orangen kuusikulmiosymbolin, mutta on täyttönsä sijaan varjo, minkä ansiosta painike näyttää valaistulta sisältäpäin.
Neutraali
- Studio Charcoal
#202020— Kangas- ja pahvipinnat ovat kuin pimeän gallerian lattia, eivät koskaan täysin mustia, jotta katse voi levätä pehmeillä reunoilla. - Bone White
#ffffff— Pääteksti, ohuet reunukset kuvissa ja harvinainen käänteinen pinta. Koko fonttihierarkiaa ylläpidetään itsenäisesti. - Ash Gray
#9d9d9d— Vaimennettu teksti, hienovaraiset korttien reunat ja passiiviset kuvatekstit ovat värimaailman ainoat keskiharmaat sävyt, joita käytetään, kun valkoinen on liian räikeä. - Mid Felt
#eaeaea— Vaalea pintakäsittely käänteisille paneeleille tai modaaliruudukoille – valkoinen sävy, joka sijoittuu beigen ja tumman kankaan väliin. - Carbon
#000000— Silmiinpistävin korostus on ikonien vedoissa ja kontrastivärisissä kehyksissä, joissa hiilikuvioinen kangas on liian kevyt pitääkseen muotonsa hyvin. - Lavender Link
#9e9eff— Upotetun linkin väri ja lisätoimintokehyksen ääriviivat ovat hillitty, viileä kontrasti lämpimän oranssin värille, mikä varmistaa, että toiminnot ovat luettavissa hiilenharmaataustaa vasten.
Typografia
16:sta 86 pikseliin · 8 askelta
- GT-Flexa — korvaava: Inter (200/400) or Manrope (200/400) · ääriviivat 200, 400 · Otsikoiden ja koriste-elementtien ensisijainen fontti. 200-painoinen fontti sallii kaikki yli 24 pikselin otsikot – tämä on tunnusomainen tyyli: 68 ja 86 pikselin koolla kirjaimet näyttävät sulautuvan ilmakehään sen sijaan, että ne huutaisivat. 400-painoinen fontti sopii alaotsikoihin ja korttikuvateksteihin, joissa ne ovat tuskin kuultavissa. Riviväli on pienennetty 1,0:aan suurimmissa kokoluokissa, joten koristeellinen fontti pinoutuu päällekkäin kuin ilmapatsas.
- Tobias-light — korvaava: Söhne Buch or Inter Tight · ääriviivat 400 · Toissijainen typografiatyyli osioiden otsikoille ja alatunnisteen logolle. Sitä käytetään yhden askeleen GT-Flexa 200:n alapuolella luomaan sävykontrasti – Tobias antaa arkkitehtonisemman ja ilmeikkäämmän vaikutelman, kun taas GT-Flexa on tunnelmallisempi. Negatiivinen kirjainväli kaventaa Tobias Lightin leveitä mittasuhteita.
- Times — korvaava: Source Serif 4 or PT Serif · ääriviivat 400 · Leipäteksti ja otsikkokappaleet ovat tarkoituksella geometristen, koristeellisten fonttien vastakohta, jossa käytetään päätteitä. Päätteet lisäävät tuotekuvauksiin lämpöä ja toimituksellista arvovaltaa ylittämättä leipätekstin kokoa.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 4-8px |
| Painikkeen säde | 20px |
| Kortin säde | 20px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 48-128px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Electronic Materials Office -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- OFFFICE : — monoliittiseen fonttiin upotettu noir-galleria
- Bibliothèque — Musta kuutionmuotoinen galleria kohdevalon alla – yksinäinen valaistu lautanen valtavassa, pimeässä salissa
- 21 TSI — Karmiininpunainen tyhjyys, yksi siluetti – huippumuodin editoriaali, jossa käyttöliittymä sulautuu tunnelmaan
- Structured — Renessanssigalleria muovailuvahamaiselle paperille
- CHAIBOY — Musta gallerian seinä, jossa on yksi taustavalaistu valokuva
- Holiday 100 — Lahjagalleria keskiyöllä – serif-otsikko toimii valokeilanaan, tumma kangas samettiseinänä ja jokainen tuotekuva roikkuu kuin huolella valittu kehys.
- Apple (España) — Museon galleria on pehmeässä päivänvalossa yksittäinen, lumoava, painoton valkoinen tila, jossa jokainen näyttelyesine valaistuu kohdevalolla kevyesti sävytettyä seinää vasten.
- Analogue — Musta galleriavitriini – tavarat leijuvat tyhjyydessä
- Apple (España) — Obsidian Galleryn vitriini on pimeä näyttelyhalli, jossa yksi titaani-esine hohtaa pikimustaa taustaa vasten.
- Studio Oker — Pimennetty galleria, jossa on helakanpunaisia yksityiskohtia – mustilla seinillä reunustettu salkkuhuone, jossa valkoiset kirjaimet tuntuvat leijuvan ja yksi punainen kuiskaus leikkaa hiljaisuuden.
- 099 SUPPLY — Mustavalkoisilla esineillä täytetty gallerian seinä
- Retool — Lämmin obsidiaanista tehty työpaja - tarkkuustyökalujen pinta, kytevien hiilien valaisemana, jossa kaikki luodaan