Electronic Materials Office
Żarzący się żar w galerii ozdobionej węglem drzewnym
Biuro Materiałów Elektronicznych to nocny warsztat: matowe, kruczoczarne płótno, pojedynczy, świecący, pomarańczowy żar i czcionka, która szepcze, a nie deklaruje. Interfejs traktuje każdy ekran jak zaciemnione studio – zdjęcia klawiatury są jedynym realnym źródłem światła, a interfejs użytkownika jest im posłuszny. Nagłówki, oprawione czcionką GT-Flexa o gramaturze 200, unoszą się w ogromnej, negatywnej przestrzeni; treść jest celowo mała i humanistyczna (Times). Kolor jest mierzony: czysta biel dla tekstu, stonowany fiolet (#9e9eff) dla linków i pojedyncze pomarańczowe (#f45500) wezwanie do działania na stronie, które świeci własnym blaskiem o szerokości 30 pikseli. Komponenty mieszczą się ściśle w promieniu 20 pikseli, obramowania są ledwo zauważalne przy #9d9d9d, a jedynymi cieniami w systemie są dwie kolorowe aureole wokół głównej akcji.
Pełnowymiarowe, grafitowe płótno z wyśrodkowaną zawartością o maksymalnej szerokości (~1200 px). Ekran główny rozpoczyna się od karty multimedialnej o promieniu 20 px, zawierającej film o produkcie, zajmującej około 80% szerokości pola widzenia, a zaraz za nią znajduje się wielowierszowy nagłówek GT-Flexa 200, który rozciąga się niemal na całą szerokość treści. Rytm sekcji: pojedyncza sekcja opisu produktu, pisana wielkimi literami w stylu Tobiasa, a następnie siatka 2x2 (na komputerze) kart opisu produktu. Karty mają obramowanie o szerokości 1 px #9d9d9d i odstępy 24 px między nimi. Obszerne pionowe rozmieszczenie – sekcje są oddzielone od siebie 48–128 px grafitową przestrzenią ujemną, a nie separatorami. Nawigacja to pojedynczy, przezroczysty panel zakotwiczony u góry, z grupą ukrytych linków i pojedynczym wezwaniem do działania Ember. Brak paska bocznego, menu głównego i nawigacji pomocniczej.
Zdjęcia służą wyłącznie celom demonstracyjnym produktu — makro ujęcie klawiatury Altar I na całkowicie czarnym tle, z podświetleniem z góry, powodującym świecenie obudowy i odbijanie światła przez klawisze wokół krawędzi. Żadnego stylu życia, żadnych ludzkich rąk, żadnego kontekstu środowiskowego. Grafika jest wysokokontrastowa i ciemna; jedynym kolorem poza monochromatyczną paletą jest pomarańczowy włącznik zasilania na samej klawiaturze, który nawiązuje do wezwania do działania Ember Orange. Obrazy są kwadratowe lub 16:9, zawsze umieszczane na kartach o promieniu 20 px i wystające poza krawędzie karty (nie ma wypełnienia wokół zdjęcia, a tekst znajduje się poniżej krawędzi). Styl ikony: jedyną ikonografią jest mały wypełniony okrąg (●) przed logo — pojedyncza pomarańczowa kropka o grubości ~6 px.
Paleta
Marka
- Ember Orange
#f45500— Główny przycisk akcji z wypełnieniem jest jedyną chromatyczną powierzchnią w interfejsie użytkownika, zawsze otoczoną 30-pikselową pomarańczową poświatą, dzięki której świeci jak żarnik; 30-pikselowa zewnętrzna poświata na głównym przycisku wywołania jest duplikatem sześciokątnego symbolu Ember Orange, ale pojawia się jako cień, a nie wypełnienie, przez co przycisk wydaje się być podświetlony od środka.
Neutralny
- Studio Charcoal
#202020— Płótna i tekturowe powierzchnie przypominają podłogę ciemnej galerii, nigdy nie są całkowicie czarne, dzięki czemu oko może zatrzymać się na miękkich krawędziach. - Bone White
#ffffff— Tekst główny, cienkie obramowania obrazów i rzadko spotykana odwrócona powierzchnia. Cała hierarchia czcionek jest utrzymywana niezależnie. - Ash Gray
#9d9d9d— Wyciszony tekst, subtelne obramowania kart i nieaktywne podpisy to jedyne odcienie szarości w tej gamie kolorów, stosowane w sytuacjach, gdy biel jest zbyt krzykliwa. - Mid Felt
#eaeaea— Jasne wykończenie powierzchni przeznaczone do paneli odwróconych lub siatek modalnych – odcień bieli mieszczący się pomiędzy beżem a ciemnym płótnem. - Carbon
#000000— Najbardziej rzucający się w oczy akcent stanowią pociągnięcia pędzla ikoną i kontrastujące ramy, na których płótno węglowe jest zbyt jasne, aby dobrze zachować kształt. - Lavender Link
#9e9eff— Kolor osadzonego łącza i obrys dodatkowej ramki akcji są stonowane i stanowią chłodny kontrast dla ciepłej pomarańczy, dzięki czemu akcje są czytelne na tle grafitowym.
Typografia
od 16 do 86px · 8 kroków
- GT-Flexa — wymiana: Inter (200/400) or Manrope (200/400) · wytyczne 200, 400 · Podstawowy krój czcionki do nagłówków i elementów dekoracyjnych. Grubość 200 pikseli pozwala na użycie każdego nagłówka powyżej 24 pikseli – to styl charakterystyczny: przy 68 i 86 pikselach litery zdają się rozpływać w powietrzu, a nie krzyczeć. Grubość 400 pikseli nadaje się do podtytułów i podpisów na kartach, gdzie są ledwo słyszalne. Odstęp między wierszami jest zmniejszony do 1,0 w największych rozmiarach, dzięki czemu czcionki dekoracyjne układają się jedna na drugiej niczym słup powietrza.
- Tobias-light — wymiana: Söhne Buch or Inter Tight · wytyczne 400 · Drugi styl typograficzny dla nagłówków sekcji i logo w stopce. Jest on o jeden stopień niższy od GT-Flexa 200, aby stworzyć kontrast tonalny – Tobias ma bardziej architektoniczny, ekspresyjny charakter, podczas gdy GT-Flexa jest bardziej nastrojowa. Ujemne odstępy między literami zawężają proporcje czcionki Tobias Light.
- Times — wymiana: Source Serif 4 or PT Serif · wytyczne 400 · Tekst główny i akapity nagłówków stanowią celowy kontrapunkt dla geometrycznych, dekoracyjnych czcionek, wykorzystując szeryfy. Szeryfy dodają opisom produktów ciepła i autorytetu redakcyjnego, nie przekraczając rozmiaru tekstu głównego.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 4-8px |
| Promień przycisku | 20px |
| Promień karty | 20px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 48-128px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Electronic Materials Office i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- OFFFICE : — galeria noir pochłonięta monolityczną czcionką
- Bibliothèque — Czarna, sześcienna galeria pod reflektorem – pojedyncza, oświetlona płyta w ogromnej, ciemnej sali
- 21 TSI — Karmazynowa pustka, pojedyncza sylwetka – modowy edytorial, w którym interfejs użytkownika rozpływa się w atmosferze
- Structured — Galeria renesansowa na papierze plastelinowym
- CHAIBOY — Czarna ściana galerii z pojedynczym podświetlonym zdjęciem
- Holiday 100 — Galeria prezentów o północy — nagłówek szeryfowy służy jako reflektor, ciemne płótno jako aksamitna ściana, a każde zdjęcie produktu wisi niczym starannie dobrana rama.
- Apple (España) — Galeria muzeum, w łagodnym świetle dziennym, stanowi pojedynczą, urzekającą, nieważką białą przestrzeń, w której każdy eksponat jest oświetlony reflektorem umieszczonym na lekko przyciemnionej ścianie.
- Analogue — Czarna gablota wystawowa – towary unoszą się w próżni
- Apple (España) — Wystawa w Galerii Obsidian mieści się w ciemnej sali wystawowej, w której pojedynczy obiekt wykonany z tytanu świeci na tle czarnej smoły.
- Studio Oker — Zaciemniona galeria ze szkarłatnymi akcentami — pomieszczenie z teczką, otoczone czarnymi ścianami, na których białe litery zdają się unosić, a pojedynczy czerwony szept przecina ciszę.
- 099 SUPPLY — Ściana galerii wypełniona czarno-białymi obiektami
- Retool — Ciepły warsztat obsydianowy – powierzchnia do precyzyjnych narzędzi, oświetlona tlącymi się węglami, gdzie wszystko powstaje