Electronic Materials Office
Kömürle dekore edilmiş bir galerideki kor halindeki bir köz.
Elektronik Malzeme Ofisi, gece geç saatlerdeki bir atölye gibidir: mat, simsiyah bir tuval, tek bir parlayan turuncu kor ve ilan etmekten ziyade fısıldayan bir yazı tipi. Arayüz, her ekranı karanlık bir stüdyo gibi ele alıyor; klavyenin fotoğrafları tek gerçek ışık kaynağı ve arayüz buna uyuyor. 200 punto GT-Flexa yazı tipinde yazılmış başlıklar, geniş negatif alanda yüzüyor; gövde metni kasıtlı olarak küçük ve insancıl (Times). Renk ölçülü: yazı için saf beyaz, bağlantılar için soluk mor (#9e9eff) ve sayfada kendi 30 piksel parıltısıyla ışıldayan tek bir turuncu (#f45500) eylem çağrısı. Bileşenler 20 piksel yarıçap içinde sıkıca yer alıyor, kenarlıklar #9d9d9d ile neredeyse fark edilmiyor ve sistemdeki tek gölgeler, ana eylemin etrafındaki iki renkli hale.
Tam genişlikte, kömür rengi bir tuval üzerine ortalanmış, maksimum genişlikte (~1200 piksel) içerik. Ana ekran, yaklaşık %80'lik bir alanı kaplayan ve ürün videosu içeren 20 piksel yarıçaplı bir medya kartıyla başlar; hemen ardından neredeyse tüm içerik genişliğine yayılan çok satırlı bir GT-Flexa 200 başlığı gelir. Bölüm ritmi: Tobias tarzı büyük harflerle yazılmış tek bir ürün açıklaması bölümü, ardından (masaüstünde) 2x2'lik bir ürün açıklaması kartı ızgarası gelir. Kartlar 1 piksel #9d9d9d kenarlıklar ve aralarında 24 piksel boşluk kullanır. Cömert dikey nefes alma – bölümler, ayırıcılar yerine 48-128 piksel kömür rengi negatif alanla ayrılmıştır. Navigasyon, üstte sabitlenmiş tek, şeffaf bir panelden oluşur ve gizli bağlantılar kümesi ve tek bir Ember harekete geçirici mesaj içerir. Yan çubuk yok, mega menü yok, ikincil navigasyon yok.
Görseller yalnızca ürün tanıtım amaçlıdır; tamamen siyah bir arka plana karşı Altar I klavyenin yakın çekim makro fotoğrafıdır, yukarıdan gelen bir arka ışık sayesinde kasa parlar ve tuş başlıkları kenarlarından ışığı yansıtır. Yaşam tarzı, insan eli veya çevresel bağlam yok. Görseller yüksek kontrastlı ve karanlıktır; tek renkli paletin dışındaki tek renk, klavyenin üzerindeki turuncu güç düğmesidir ve bu da Ember Orange'ın harekete geçirici mesajını yansıtır. Görseller kare veya 16:9 oranındadır, her zaman 20 piksel yarıçaplı kartlara yerleştirilir ve kartın kenarlarının ötesine uzanır (fotoğrafın etrafında dolgu yoktur ve metin kenarın altındadır). İkon stili: Tek ikonografi, logonun önünde küçük, dolu bir daire (●) - yaklaşık 6 piksel kalınlığında tek bir turuncu nokta -dır.
Palet
Marka
- Ember Orange
#f45500— Arayüzdeki tek renkli yüzey, dolgulu birincil işlem düğmesidir ve her zaman 30 piksellik turuncu bir hale ile çevrilidir, bu da düğmenin bir filament gibi parlamasını sağlar; birincil arama düğmesindeki 30 piksellik dış parlama, Ember Orange altıgen sembolünü kopyalar, ancak dolgu yerine gölge olarak bulunur, bu da düğmenin içeriden aydınlatılmış gibi görünmesini sağlar.
Doğal
- Studio Charcoal
#202020— Tuval ve karton yüzeyler, karanlık bir galerinin zemini gibidir; asla tamamen siyah değildir, böylece göz yumuşak kenarlarda dinlenebilir. - Bone White
#ffffff— Ana metin, resimlerde ince kenarlıklar ve nadir görülen ters çevrilmiş bir yüzey. Tüm yazı tipi hiyerarşisi bağımsız olarak korunmaktadır. - Ash Gray
#9d9d9d— Renk şemasındaki tek orta gri tonları; beyazın çok dikkat çekici olduğu durumlarda kullanılan, soluk metinler, ince kart kenarlıkları ve pasif alt yazılardır. - Mid Felt
#eaeaea— Ters çevrilmiş paneller veya modüler ızgaralar için hafif bir yüzey boyası; bej ve koyu kanvas arasında bir beyaz tonu. - Carbon
#000000— En dikkat çekici vurgu, koyu gri tuvalin şeklini iyi koruyamayacak kadar açık renkli olduğu yerlerde ikon çizgileri ve zıt çerçeveler için kullanılıyor. - Lavender Link
#9e9eff— Gömülü bağlantının rengi ve ek işlem çerçevesinin dış hatları, sıcak turuncuya kıyasla daha yumuşak ve soğuk bir kontrast oluşturarak, işlemlerin koyu gri arka plana karşı okunabilir olmasını sağlar.
Tipografi
16 ila 86 piksel arası · 8 adım
- GT-Flexa — yenisiyle değiştirme: Inter (200/400) or Manrope (200/400) · ana hatlar 200, 400 · Başlıklar ve dekoratif öğeler için kullanılan ana yazı tipi. 200 kalınlık, 24 pikselin üzerindeki tüm başlıklar için uygundur; bu, kendine özgü bir stildir: 68 piksel ve 86 pikselde harfler bağırmak yerine atmosfere karışıyormuş gibi görünür. 400 kalınlık, neredeyse duyulmayacak kadar küçük oldukları alt başlıklar ve kart alt yazıları için uygundur. En büyük boyutlarda satır aralığı 1,0'a düşürülmüştür, böylece dekoratif yazı tipi bir hava sütunu gibi üst üste yığılır.
- Tobias-light — yenisiyle değiştirme: Söhne Buch or Inter Tight · ana hatlar 400 · Bölüm başlıkları ve altbilgi logosu için ikincil bir tipografi stili. Tonlama açısından bir kontrast oluşturmak için GT-Flexa 200'ün bir adım altında kullanılır; Tobias daha mimari, ifadeci bir his verirken, GT-Flexa daha atmosferiktir. Negatif harf aralığı, Tobias Light'ın geniş oranlarını daraltır.
- Times — yenisiyle değiştirme: Source Serif 4 or PT Serif · ana hatlar 400 · Gövde metni ve başlık paragrafları, geometrik ve dekoratif yazı tiplerine bilinçli bir karşıtlık oluşturacak şekilde, tırnaklı harfler kullanılarak tasarlanmıştır. Tırnaklı harfler, gövde metninin boyutunu aşmadan ürün açıklamalarına sıcaklık ve editoryal otorite katmaktadır.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | yoğun |
| Temel adım | 4-8px |
| Düğme yarıçapı | 20px |
| Kart yarıçapı | 20px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 48-128px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Electronic Materials Office tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- OFFFICE : — Tek parça yazı tipiyle kaplanmış bir kara film galerisi
- Bibliothèque — Spot ışığı altında siyah küp şeklinde bir galeri – geniş, karanlık bir salonda tek başına aydınlatılmış bir tabak.
- 21 TSI — Kırmızı bir boşluk, tek bir silüet – kullanıcı arayüzünün atmosferle bütünleştiği yüksek moda bir çekim.
- Structured — Plastik hamur benzeri kağıt üzerine Rönesans galerisi
- CHAIBOY — Arkadan aydınlatılmış tek bir fotoğrafın sergilendiği siyah bir galeri duvarı.
- Holiday 100 — Gece yarısı bir hediye galerisi—tırtıklı bir başlık spot ışığı görevi görüyor, koyu renkli bir tuval kadife bir duvar gibi duruyor ve her ürün görseli özenle seçilmiş bir çerçeve gibi asılı duruyor.
- Apple (España) — Müze galerisi, yumuşak gün ışığında, her serginin hafifçe renklendirilmiş bir duvara karşı spot ışığıyla aydınlatıldığı, büyüleyici, ağırlıksız beyaz bir mekândır.
- Analogue — Siyah galeri vitrini – ürünler boşlukta asılı duruyor.
- Apple (España) — Obsidyen Galerisi, tek bir titanyum objenin simsiyah bir arka plana karşı parladığı karanlık bir sergi salonudur.
- Studio Oker — Kırmızı detaylarla bezenmiş, karartılmış bir galeri; siyah duvarlarla çevrili, beyaz harflerin havada süzülüyormuş gibi göründüğü ve tek bir kırmızı fısıltının sessizliği kestiği bir portföy odası.
- 099 SUPPLY — Siyah beyaz objelerle dolu bir galeri duvarı.
- Retool — Kor halindeki közlerle aydınlatılmış, hassas aletler için bir yüzey olan, her şeyin yaratıldığı sıcak bir obsidyen atölyesi.