Electronic Materials Office
Un jar aprins într-o galerie decorată cu cărbune
Biroul de Materiale Electronice este un atelier nocturn: o pânză neagră mată, o singură tăciune portocalie strălucitoare și un font care șoptește în loc să declare. Interfața tratează fiecare ecran ca un studio întunecat - fotografiile tastaturii sunt singura sursă reală de lumină, iar interfața cu utilizatorul o respectă. Titlurile, realizate cu hârtie GT-Flexa de grosime 200, plutesc într-un spațiu negativ vast; corpul textului este intenționat mic și umanist (Times). Culoarea este măsurată: alb pur pentru text, violet estompat (#9e9eff) pentru linkuri și un singur îndemn la acțiune portocaliu (#f45500) pe pagina care strălucește cu propria sa strălucire de 30px. Componentele se potrivesc perfect într-o rază de 20px, marginile sunt abia vizibile la #9d9d9d, iar singurele umbre din sistem sunt două halouri colorate în jurul acțiunii principale.
O pânză de culoare cărbune, cu lățime completă, cu conținut centrat, de lățime maximă (~1200px). Ecranul principal începe cu un card media cu o rază de 20px, care conține un videoclip despre produs, ocupând aproximativ 80% din lățimea viewport-ului, urmat imediat de un titlu GT-Flexa 200 pe mai multe linii, care se încadrează aproape pe întreaga lățime a conținutului. Ritmul secțiunii: o singură secțiune de descriere a produsului, scrisă cu majuscule în stil Tobias, urmată de o grilă 2x2 (pe desktop) de carduri de descriere a produsului. Cardurile folosesc chenare #9d9d9d de 1px și jgheaburi de 24px între ele. Respirație verticală generoasă - secțiunile sunt separate de 48–128px de spațiu negativ de culoare cărbune, în loc de separatoare. Navigarea este un singur panou transparent, ancorat în partea de sus, cu un grup de link-uri ascunse și un singur îndemn la acțiune Ember. Fără bară laterală, fără mega-meniu, fără navigare secundară.
Imaginile sunt doar pentru demonstrații de produs - o fotografie macro de aproape a tastaturii Altar I pe un fundal complet negru, cu iluminare din spate de sus, care face ca carcasa să strălucească și capacele tastelor să reflecte lumina în jurul marginilor. Fără stil de viață, fără mâini umane, fără context ambiental. Imaginile au un contrast puternic și sunt întunecate; singura culoare din afara paletei monocrome este comutatorul de alimentare portocaliu de pe tastatură, care amintește de îndemnul la acțiune Ember Orange. Imaginile sunt pătrate sau 16:9, întotdeauna plasate în cartonașe cu o rază de 20px și care se extind dincolo de marginile cartonașului (nu există umplere în jurul fotografiei, iar textul este sub margine). Stilul pictogramei: singura iconografie este un cerc mic umplut (●) înaintea logo-ului - un singur punct portocaliu, cu o grosime de ~6px.
Paletă
Marca
- Ember Orange
#f45500— Butonul principal de acțiune cu umplere este singura suprafață cromatică din interfața cu utilizatorul, întotdeauna însoțit de un halou portocaliu de 30px, făcându-l să strălucească ca un filament; strălucirea exterioară de 30px a butonului principal de apel duplică simbolul hexagonal Ember Orange, dar există ca o umbră mai degrabă decât ca o umplere, făcând ca butonul să pară iluminat din interior.
Neutru
- Studio Charcoal
#202020— Suprafețele de pânză și carton sunt ca podeaua unei galerii întunecate, niciodată complet neagră, astfel încât ochiul se poate odihni pe marginile moi. - Bone White
#ffffff— Text principal, chenar subțire pe imagini și o suprafață inversată rară. Întreaga ierarhie a fonturilor este menținută independent. - Ash Gray
#9d9d9d— Textul discret, marginile subtile ale cardurilor și legendele inactive sunt singurele nuanțe de gri mediu din schema de culori, folosite atunci când albul este prea puternic. - Mid Felt
#eaeaea— O spălare ușoară a suprafeței pentru panouri inversate sau grile modale - o nuanță de alb care se situează între bej și pânză închisă la culoare. - Carbon
#000000— Cel mai izbitor accent este pentru liniile de icoane și ramele contrastante, unde pânza cărbune este prea deschisă la culoare pentru a-și menține bine forma. - Lavender Link
#9e9eff— Culoarea linkului încorporat și conturul cadrului de acțiune suplimentară contrastează estompat și rece cu portocaliul cald, asigurând lizibilitatea acțiunilor pe fundalul cărbune.
Tipografie
de la 16 la 86px · 8 pași
- GT-Flexa — înlocuire: Inter (200/400) or Manrope (200/400) · contururi 200, 400 · Fontul principal pentru titluri și elemente decorative. Grosimea de 200 permite fiecare titlu peste 24px - acesta este un stil caracteristic: la 68px și 86px, literele par să se dizolve în atmosferă, mai degrabă decât să strige. Grosimea de 400 este potrivită pentru subtitluri și legende de cărți de vizită, unde sunt abia auzite. Spațierea dintre rânduri este redusă la 1.0 la cele mai mari dimensiuni, astfel încât fontul decorativ se suprapune unul peste altul ca o coloană de aer.
- Tobias-light — înlocuire: Söhne Buch or Inter Tight · contururi 400 · Un stil tipografic secundar pentru titlurile secțiunilor și sigla din subsol. Este folosit cu o treaptă sub GT-Flexa 200 pentru a crea un contrast tonal - Tobias are o senzație mai arhitecturală și expresivă, în timp ce GT-Flexa este mai atmosferic. Spațierea negativă a literelor îngustează proporțiile largi ale Tobias Light.
- Times — înlocuire: Source Serif 4 or PT Serif · contururi 400 · Textul corpului și paragrafele de titlu sunt un contrapunct deliberat la fonturile geometrice, decorative, care utilizează serifuri. Serifurile adaugă căldură și autoritate editorială descrierilor produselor fără a depăși dimensiunea textului corpului.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | dens |
| Pasul de bază | 4-8px |
| Raza butonului | 20px |
| Raza cardului | 20px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 48-128px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Electronic Materials Office și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- OFFFICE : — o galerie noir învăluită în fonturi monolitice
- Bibliothèque — O galerie neagră în formă de cub sub un reflector – o placă solitară iluminată într-un hol vast și întunecat
- 21 TSI — Un gol purpuriu, o singură siluetă – un editorial de modă de înaltă clasă în care interfața utilizator se dizolvă în atmosferă
- Structured — Galerie renascentistă pe hârtie asemănătoare plastilinei
- CHAIBOY — Un perete negru de galerie cu o singură fotografie iluminată din spate
- Holiday 100 — O galerie de cadouri la miezul nopții — un titlu cu serifii servește drept reflector, o pânză întunecată drept perete de catifea, iar fiecare imagine de produs atârnă ca o ramă atent selectată.
- Apple (España) — Galeria muzeului, în lumina blândă a zilei, este un spațiu alb, unic, captivant, fără greutate, fiecare exponat fiind iluminat de un reflector pe un perete ușor nuanțat.
- Analogue — Vitrină neagră pentru galerie – mărfurile plutesc în gol
- Apple (España) — Vitrina Galeriei Obsidian este o sală de expoziție întunecată, unde un singur obiect din titan strălucește pe un fundal negru ca smoala.
- Studio Oker — O galerie întunecată cu accente stacojii — o cameră cu portofolii căptușită cu pereți negri, unde literele albe par să plutească și o singură șoaptă roșie străbate tăcerea.
- 099 SUPPLY — Un perete de galerie plin de obiecte alb-negru
- Retool — Un atelier cald de obsidian - o suprafață pentru unelte de precizie, luminată de jar mocnit, unde totul este creat