Electronic Materials Office
Ko'mir bilan bezatilgan galereyada yonib turgan cho'g'
Elektron materiallar idorasi - bu tungi seminar: mot qora kanvas, bitta porlab turgan to'q sariq rangli cho'g' va e'lon qilish o'rniga pichirlaydigan shrift. Interfeys har bir ekranni qorong'i studiya kabi ko'rib chiqadi - klaviatura fotosuratlari yagona haqiqiy yorug'lik manbai bo'lib, foydalanuvchi interfeysi unga bo'ysunadi. 200 og'irlikdagi GT-Flexa-da joylashgan sarlavhalar ulkan salbiy joyda suzib yuradi; asosiy matn ataylab kichik va gumanistik (Times). Rang o'lchanadi: shrift uchun sof oq, havolalar uchun xira binafsha (#9e9eff) va o'zining 30px yorug'ligi bilan porlaydigan sahifada bitta to'q sariq (#f45500) harakatga chaqiriq. Komponentlar 20px radiusda mahkam joylashgan, #9d9d9d da chegaralar deyarli sezilmaydi va tizimdagi yagona soyalar asosiy harakat atrofidagi ikkita rangli halo.
Markazlashtirilgan, maksimal kenglikdagi kontentga (~1200px) ega to'liq kenglikdagi, ko'mir rangli kanvas. Asosiy ekran 20px radiusli media karta bilan boshlanadi, unda mahsulot videosi ko'rish maydoni kengligining taxminan 80% ni egallaydi, undan so'ng deyarli to'liq kontent kengligiga o'ralgan ko'p qatorli GT-Flexa 200 sarlavhasi keladi. Bo'lim ritmi: Tobias uslubidagi katta harflar bilan yozilgan bitta mahsulot tavsifi bo'limi, undan keyin 2x2 katakcha (ish stolida) mahsulot tavsifi kartalari. Kartalarda 1px #9d9d9d chegaralari va ular orasida 24px oluklar ishlatiladi. Saxiy vertikal nafas olish - bo'limlar ajratuvchilar o'rniga 48–128px ko'mir salbiy bo'shlig'i bilan ajratilgan. Navigatsiya - bu yuqori qismida joylashgan bitta, shaffof panel bo'lib, yashirin havolalar klasteri va bitta Ember harakatga chaqiruvi mavjud. Yon panel yo'q, mega-menyu yo'q, ikkilamchi navigatsiya yo'q.
Tasvirlar faqat mahsulotni namoyish qilish uchun mo'ljallangan — Altar I klaviaturasining butunlay qora fonda yaqindan olingan makro surati, yuqoridan orqa yorug'lik bilan, korpusning porlashiga va tugmachalarning qopqoqlari chekkalarga yorug'likni aks ettirishiga olib keladi. Turmush tarzi yo'q, inson qo'llari yo'q, atrof-muhit konteksti yo'q. Tasvirlar yuqori kontrastli va to'q rangda; monoxrom palitradan tashqaridagi yagona rang klaviaturaning o'zida to'q sariq rangli quvvat tugmasi bo'lib, u Ember Orange harakatga chaqiruvini aks ettiradi. Tasvirlar kvadrat yoki 16:9 bo'lib, har doim 20 piksel radiusli va kartaning chekkalaridan tashqariga chiqadigan kartalarga joylashtiriladi (fotosurat atrofida hech qanday to'ldirish yo'q va matn chekkadan pastda). Belgi uslubi: yagona ikonografiya logotip oldidagi kichik to'ldirilgan doira (●) — qalinligi ~6 piksel bo'lgan bitta to'q sariq nuqta.
Palitra
Brend
- Ember Orange
#f45500— To'ldiruvchi asosiy harakat tugmasi foydalanuvchi interfeysidagi yagona xromatik sirt bo'lib, u har doim 30 pikselli to'q sariq halo bilan birga keladi, bu uni filament kabi porlaydi; asosiy chaqiruv tugmasidagi 30 pikselli tashqi yorug'lik Ember Orange olti burchakli belgisini takrorlaydi, lekin to'ldirish o'rniga soya sifatida mavjud bo'lib, tugmani ichkaridan yoritilgan ko'rinishga keltiradi.
Neytral
- Studio Charcoal
#202020— Tuval va karton yuzalar qorong'u galereyaning poliga o'xshaydi, hech qachon to'liq qora bo'lmaydi, shuning uchun ko'z yumshoq qirralarga tegishi mumkin. - Bone White
#ffffff— Asosiy matn, tasvirlardagi yupqa chegaralar va noyob teskari sirt. Butun shrift ierarxiyasi mustaqil ravishda saqlanadi. - Ash Gray
#9d9d9d— O'chirilgan matn, nozik kartochka chegaralari va nofaol sarlavhalar rang sxemasidagi yagona o'rta kulrang rang bo'lib, oq rang juda baland bo'lganda ishlatiladi. - Mid Felt
#eaeaea— Teskari panellar yoki modal panjaralar uchun yengil sirt yuvish vositasi - bej va to'q rangli tuval o'rtasida joylashgan oq rang soyasi. - Carbon
#000000— Eng ajoyib urg'u ikonka zarbalari va qarama-qarshi ramkalar uchundir, bu yerda ko'mir tuvali shaklini yaxshi ushlab turish uchun juda yengil. - Lavender Link
#9e9eff— O'rnatilgan havola rangi va qo'shimcha harakat ramkasining konturi iliq to'q sariq rangga nisbatan xira, sovuq kontrast bo'lib, harakatlarning ko'mir fonida o'qilishi mumkinligini ta'minlaydi.
Tipografiya
16 dan 86 pikselgacha · 8 qadam
- GT-Flexa — almashtirish: Inter (200/400) or Manrope (200/400) · konturlar 200, 400 · Sarlavhalar va dekorativ elementlar uchun asosiy shrift. 200 og'irligi 24 pikseldan yuqori har bir sarlavha uchun imkon beradi — bu o'ziga xos uslub: 68 piksel va 86 piksel o'lchamlarda harflar baqirish o'rniga atmosferaga singib ketadi. 400 og'irligi kichik sarlavhalar va kartochka yozuvlari uchun mos keladi, bu yerda ular deyarli eshitilmaydi. Eng katta o'lchamlarda qatorlar oralig'i 1.0 gacha qisqartiriladi, shuning uchun dekorativ shrift havo ustuni kabi bir-birining ustiga qo'yiladi.
- Tobias-light — almashtirish: Söhne Buch or Inter Tight · konturlar 400 · Bo'lim sarlavhalari va pastki logotip uchun ikkilamchi tipografiya uslubi. Tonal kontrast yaratish uchun GT-Flexa 200 dan bir qadam pastroqda ishlatiladi — Tobias ko'proq me'moriy va ifodali tuyg'uga ega, GT-Flexa esa ko'proq atmosferaga ega. Salbiy harflar oralig'i Tobias Light ning keng nisbatlarini toraytiradi.
- Times — almashtirish: Source Serif 4 or PT Serif · konturlar 400 · Asosiy matn va sarlavha paragraflari seriflardan foydalanadigan geometrik, dekorativ shriftlarga ataylab qarama-qarshi qo'yilgan. Seriflar asosiy matn hajmidan oshmasdan mahsulot tavsiflariga iliqlik va tahririyat kuchini qo'shadi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | zich |
| Asosiy qadam | 4-8px |
| Tugma radiusi | 20px |
| Karta radiusi | 20px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 48-128px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Electronic Materials Office uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- OFFFICE : — monolit shrift bilan o'ralgan noir galereyasi
- Bibliothèque — Projektor ostidagi qora kub shaklidagi galereya – ulkan, qorong'u zalda yolg'iz yoritilgan plastinka
- 21 TSI — Qip-qizil bo'shliq, bitta siluet – foydalanuvchi interfeysi atmosferaga singib ketgan yuqori moda tahririyati
- Structured — Plastilinga o'xshash qog'ozda Uyg'onish davri galereyasi
- CHAIBOY — Orqa yoritilgan bitta fotosuratli qora galereya devori
- Holiday 100 — Yarim tunda sovg'alar galereyasi — serif sarlavhasi yorug'lik chiroqi, to'q rangli tuval baxmal devor vazifasini bajaradi va har bir mahsulot tasviri puxta tanlangan ramka kabi osilgan.
- Apple (España) — Muzey galereyasi yumshoq kunduzgi yorug'likda yagona, maftunkor, vaznsiz oq makon bo'lib, har bir eksponat och rangli devorga qarshi projektor bilan yoritilgan.
- Analogue — Qora galereya vitrinasi – tovarlar bo'shliqda suzib yuradi
- Apple (España) — Obsidian galereyasidagi ko'rgazma qorong'u ko'rgazma zali bo'lib, unda bitta titan buyumi qora fonda porlab turadi.
- Studio Oker — Qizil rangli bezaklar bilan bezatilgan qorong'u galereya — qora devorlar bilan bezatilgan portfel xonasi, u yerda oq harflar suzib yurgandek tuyuladi va sukunatni bitta qizil pichirlash buzadi.
- 099 SUPPLY — Qora va oq buyumlar bilan to'ldirilgan galereya devori
- Retool — Issiq obsidian ustaxonasi - hamma narsa yaratilgan, yonayotgan cho'g'lar bilan yoritilgan aniq asboblar uchun sirt