Electronic Materials Office
Көмүр менен кооздолгон галереядагы жаркыраган чок
Электрондук материалдар кеңсеси – бул түнкү семинар: күңгүрт кара полотно, бир гана жаркыраган кызгылт сары чок жана жарыялоонун ордуна шыбыраган шрифт. Интерфейс ар бир экранды караңгы студиядай карайт — клавиатуранын сүрөттөрү жалгыз чыныгы жарык булагы болуп саналат жана UI ага баш ийет. 200 салмактагы GT-Flexa'да жайгаштырылган аталыштар чоң терс мейкиндикте калкып жүрөт; негизги текст атайылап кичинекей жана гумандуу (Times). Түсү өлчөнөт: шрифт үчүн таза ак, шилтемелер үчүн үнсүз кызгылт көк (#9e9eff) жана өзүнүн 30px жаркыроосу менен жаркыраган баракчадагы бир гана кызгылт сары (#f45500) чакырык. Компоненттер 20px радиуста тыгыз жайгашкан, #9d9d9d'де чек аралар дээрлик байкалбайт жана системадагы жалгыз көлөкө – бул негизги аракеттин айланасындагы эки түстүү гало.
Толук туурасы, көмүр түстүү полотно, борборлоштурулган, максималдуу туурасы бар мазмуну (~1200px). Негизги экран 20px радиусу бар медиа карта менен башталат, анда продукттун видеосу камтылган, ал көрүү терезесинин туурасынын болжол менен 80% ээлейт, андан кийин дээрлик толук мазмун туурасына чейин созулган көп саптуу GT-Flexa 200 аталышы келет. Бөлүм ритми: Tobias стилиндеги баш тамгалар менен жазылган бир продукттун сүрөттөмө бөлүгү, андан кийин 2x2 торчо (жумушчу столдо) продукттун сүрөттөмө карталары. Карталарда 1px #9d9d9d чек аралары жана алардын ортосунда 24px науалары колдонулат. Берешен вертикалдык дем алуу — бөлүмдөр бөлгүчтөрдүн ордуна 48–128px көмүр терс мейкиндиги менен бөлүнгөн. Навигация - бул жогору жагында бекитилген бирдиктүү, тунук панель, анда жашыруун шилтемелердин кластери жана бир гана Ember аракетке чакыруу бар. Каптал тилкеси жок, мега-меню жок, кошумча навигация жок.
Сүрөттөр продуктуну көрсөтүү максатында гана берилген — Altar I клавиатурасынын толугу менен кара фондо жакын макро сүрөтү, үстүнөн жарык чачырап, корпустун жаркырашына жана баскычтоптун капкактарынын четтериндеги жарыкты чагылдырышына алып келет. Жашоо образы жок, адамдын колдору жок, айлана-чөйрөнүн контексти жок. Сүрөттөр жогорку контрасттуу жана караңгы; монохромдук палитрадан тышкары жалгыз түс — клавиатуранын өзүндөгү кызгылт сары күйгүзгүч, ал Ember Orange чакырыгын чагылдырат. Сүрөттөр төрт бурчтуу же 16:9, ар дайым 20 пикселдик радиусу бар жана картанын четтеринен тышкары созулган карталарга жайгаштырылат (сүрөттүн айланасында эч кандай толтургуч жок жана текст четтин астында). Сүрөтчөнүн стили: логотиптин алдындагы жалгыз иконография — бир кызгылт сары чекит, ~6 пиксель калыңдыкта.
Түстөр палитрасы
Бренд
- Ember Orange
#f45500— Толтурулган негизги аракет баскычы - бул UIдеги жалгыз хроматикалык бет, ал ар дайым 30px кызгылт сары гало менен коштолот, бул аны жипче сыяктуу жаркыратат; негизги чакыруу баскычындагы 30px тышкы жаркыроо Ember Orange алты бурчтуу символун кайталайт, бирок толтуруу эмес, көлөкө катары бар, бул баскычтын ичинен жарык көрүнгөнүн шарттайт.
Нейтралдуу
- Studio Charcoal
#202020— Кенеп жана картон беттери караңгы галереянын полу сыяктуу, эч качан толугу менен кара болбойт, ошондуктан көз жумшак четтерине токтойт. - Bone White
#ffffff— Негизги текст, сүрөттөрдөгү ичке чек аралар жана сейрек кездешүүчү тескери бет. Шрифт иерархиясы толугу менен өз алдынча сакталат. - Ash Gray
#9d9d9d— Үнсүз текст, байкалбаган карталардын жээкчелери жана активдүү эмес коштомо жазуулар түс схемасындагы жалгыз ортоңку боз түс болуп саналат, алар ак түс өтө катуу болгондо колдонулат. - Mid Felt
#eaeaea— Тескери панелдер же модалдык торчолор үчүн жеңил беттик жуугуч - беж менен кара полотнонун ортосунда жайгашкан ак түс. - Carbon
#000000— Эң таң калыштуу басым сүрөтчөлөрдүн сызыктары жана контрасттуу алкактар үчүн жасалган, анткени көмүр түстүү полотно формасын жакшы кармай албай тургандай жеңил. - Lavender Link
#9e9eff— Кыналган шилтеменин түсү жана кошумча аракет алкагынын контуру жылуу кызгылт сары түскө салыштырмалуу жумшак, муздак контраст болуп, аракеттердин көмүр фонунда окулушун камсыздайт.
Типография
16дан 86 пикселге чейин · 8 кадам
- GT-Flexa — алмаштыруу: Inter (200/400) or Manrope (200/400) · контурлар 200, 400 · Аталыштар жана декоративдик элементтер үчүн негизги шрифт. 200 калыңдыгы 24 пикселден жогору ар бир аталышка мүмкүндүк берет — бул өзгөчө стил: 68 пиксел жана 86 пикселде тамгалар кыйкырып жибербестен, атмосферага сиңип кеткендей сезилет. 400 калыңдыгы субтитрлер жана открыткалардын коштомо жазуулары үчүн ылайыктуу, анткени алар дээрлик угулбайт. Эң чоң өлчөмдөрдө саптардын аралыгы 1,0гө чейин азайтылган, ошондуктан декоративдик шрифт аба мамычасы сыяктуу бири-биринин үстүнө тизилип турат.
- Tobias-light — алмаштыруу: Söhne Buch or Inter Tight · контурлар 400 · Бөлүмдөрдүн аталыштары жана төмөнкү колонтитул логотиби үчүн кошумча типографиялык стиль. Ал тоналдык контрастты түзүү үчүн GT-Flexa 200дөн бир тепкич төмөн колдонулат — Tobias архитектуралык жактан экспрессивдүү сезимге ээ, ал эми GT-Flexa атмосфералуураак. Терс тамгалардын аралыгы Tobias Lightтын кеңири пропорцияларын тарытат.
- Times — алмаштыруу: Source Serif 4 or PT Serif · контурлар 400 · Негизги текст жана аталыш абзацтары серифтерди колдонуу менен геометриялык, декоративдик шрифттерге атайылап каршы келет. Серифтер негизги тексттин көлөмүнөн ашпастан, продукттун сүрөттөмөлөрүнө жылуулук жана редакциялык таасир кошот.
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | тыгыз |
| Негизги кадам | 4-8px |
| Баскычтын радиусу | 20px |
| Картанын радиусу | 20px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 48-128px |
| Барактын туурасы | 1200px |
Жасалма интеллект сиздин веб-сайтыңызды Electronic Materials Office стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- OFFFICE : — монолиттик шрифтке чөмүлгөн нуар галереясы
- Bibliothèque — Прожектордун астындагы кара куб формасындагы галерея – кең, караңгы залдагы жалгыз жарыктандырылган тарелка
- 21 TSI — Кыпкызыл боштук, бир силуэт – колдонуучу интерфейси атмосферага сиңип кеткен жогорку модалуу редакциялык макала
- Structured — Пластилин сымал кагаздагы Ренессанс галереясы
- CHAIBOY — Арткы жарыктандырылган бир сүрөтү бар кара галерея дубалы
- Holiday 100 — Түн ортосунда белектер галереясы — сериф шрифти менен жазылган аталыш прожектор, кара полотно баркыт дубал катары кызмат кылат жана ар бир буюмдун сүрөтү кылдаттык менен тандалган алкак сыяктуу илинип турат.
- Apple (España) — Музей галереясы жумшак күндүзгү жарыкта бирдиктүү, өзүнө тартып турган, салмаксыз ак мейкиндик болуп саналат, ар бир экспонат ачык түстөгү дубалга прожектор менен жарыктандырылган.
- Analogue — Кара галереянын витрина кутусу – товарлар боштукта калкып жүрөт
- Apple (España) — Обсидиан галереясынын көргөзмөсү – караңгы көргөзмө залы, анда бир гана титан буюму караңгы фондо жаркырап турат.
- Studio Oker — Кызыл түстөгү акценттери бар караңгы галерея — ак тамгалар калкып жүргөндөй сезилген жана жымжырттыкты бир гана кызыл шыбыр бөлүп турган кара дубалдар менен капталган портфолио бөлмөсү.
- 099 SUPPLY — Ак-кара буюмдарга толгон галереянын дубалы
- Retool — Жылуу обсидиан устаканасы - баары жаралган, күйүп жаткан чок менен жарыктандырылган, так шаймандар үчүн бет