Electronic Materials Office
Распалены вугалёк у галерэі, аформленай вуглём
Офіс электронных матэрыялаў — гэта начная майстэрня: матавае вугальна-чорнае палатно, адзінае распаленае аранжавы вугалёк і шрыфт, які хутчэй шэпча, чым заяўляе. Інтэрфейс ставіцца да кожнага экрана як да прыцемненай студыі – фатаграфіі клавіятуры з'яўляюцца адзінай сапраўднай крыніцай святла, і карыстацкі інтэрфейс падпарадкоўваецца яму. Загалоўкі, набраныя шрыфтам GT-Flexa таўшчынёй 200, параць у велізарнай негатыўнай прасторы; асноўны тэкст наўмысна дробны і гуманістычны (Times). Колеры дазаваныя: чысты белы для шрыфта, прыглушаны фіялетавы (#9e9eff) для спасылак і адзін аранжавы (#f45500) заклік да дзеяння на старонцы, які свеціцца сваім уласным 30px свячэннем. Кампаненты шчыльна прылягаюць да радыусу 20px, межы ледзь прыкметныя на #9d9d9d, а адзіныя цені ў сістэме - гэта два каляровых арэолу вакол асноўнага дзеяння.
Поўнаэкраннае палатно вугальнага колеру з цэнтраваным кантэнтам максімальнай шырыні (~1200px). Галоўны экран пачынаецца з медыякарты радыусам 20px, утрымоўвальнай відэаролік аб прадукце, якая займае прыкладна 80% шырыню вобласці прагляду, за якой адразу варта шматрадковы загаловак GT-Flexa 200, які пераносіцца амаль на ўсю шырыню кантэнту. Рытм частак: адна частка з апісаннем прадукта, напісаны загалоўнымі літарамі ў стылі Tobias, затым сетка з 2×2 (на настольных кампутарах) картак з апісаннем прадукта. Карткі выкарыстоўваюць межы 1px #9d9d9d і прамежкі 24px паміж імі. Шчодрае вертыкальнае «дыханне» - часткі падзеленыя 48-128px вугальнай негатыўным прасторай, а не падзельнікамі. Навігацыя ўяўляе сабой адзіную празрыстую панэль, замацаваную ўверсе, з кластарам утоеных спасылак і адным заклікам да дзеяння Ember. Няма бакавой панэлі, няма мега-меню, няма другаснай навігацыі.
Выявы прызначаны выключна для дэманстрацыі прадукта – макраздымка клавіятуры Altar I буйным планам на фоне абсалютна чорнага колеру, з падсветкай зверху, дзякуючы чаму корпус свеціцца, а надпісы на клавішах адлюстроўваюць святло па баках. Ніякай выявы жыцця, ніякіх чалавечых рук, ніякага кантэксту навакольнага асяроддзя. Апрацоўка малюнкаў выканана ў высокакантрасным і цёмным стылі; адзіны колер, які выходзіць за рамкі манахромнай палітры, - гэта аранжавы выключальнік харчавання на самай клавіятуры, які пераклікаецца з заклікам да дзеяння Ember Orange. Выявы квадратныя або 16:9, заўсёды змешчаныя ў карткі радыусам 20px і выходзяць за краі карткі (ўнутранага водступу вакол фатаграфіі няма, подпіс знаходзіцца ніжэй краю). Стыль абразкоў: адзіная іканаграфія - гэта маленькі зафарбаваны круг (●) перад лагатыпам - адна аранжавая кропка, таўшчыня ~6px.
Палітра
Брэнд
- Ember Orange
#f45500— Асноўная кнопка дзеяння з заліваннем - адзіная храматычная паверхня ў карыстацкім інтэрфейсе, заўсёды суправаджаная аранжавым арэолам 30px, дзякуючы чаму яна свеціцца, як нітка напальвання; вонкавае свячэнне 30px на асноўнай кнопцы выкліку – дублюе шасцікутны знак Ember Orange, але існуе ў выглядзе цені, а не залівання, таму кнопка здаецца падсветленай знутры.
Нейтральныя
- Studio Charcoal
#202020— Паверхні палатна і кардона - падлога цёмнай галерэі, ніколі не бывае зусім чорным, каб погляд мог спыніцца на мяккасці краёў. - Bone White
#ffffff— Асноўны тэкст, тонкія рамкі на выявах і рэдкая інвертаваная паверхню. Уся іерархія шрыфтоў захоўваецца самастойна. - Ash Gray
#9d9d9d— Прыглушаны тэкст, ледзь прыкметныя рамкі картак, неактыўныя подпісы - адзінае сярэдне-шэрае адценне ў каляровай гаме, які выкарыстоўваецца, калі белы занадта крычыць. - Mid Felt
#eaeaea— Лёгкая павярхоўная размыванне для інвертаваных панэляў або мадальных сетак - адценне белага, змешчаны паміж бэжавым і цёмным палатном. - Carbon
#000000— Найбольш выразны акцэнт для штрыхоў абразкоў і кантрасных рамак там, дзе вугальна-чорнае палатно занадта светлы, каб добра трымаць форму. - Lavender Link
#9e9eff— Колер убудаванай спасылкі і контур дадатковай рамкі дзеяння - прыглушаны халодны кантраст цёпламу аранжаваму колеру, які забяспечвае чытальнасць дзеянняў на фоне вугальнага колеру.
Друкарня
ад 16 да 86px · 8 прыступак
- GT-Flexa — замена: Inter (200/400) or Manrope (200/400) · напісання 200, 400 · Асноўны шрыфт для загалоўкаў і дэкаратыўных элементаў. Напісанне 200 дазваляе выкарыстоўваць кожны загаловак вышэй 24px - гэта фірмовы стыль: на 68px і 86px літары нібы раствараюцца ў атмасферы, а не крычаць. Напісанне 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.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- OFFFICE : — галерэя нуар, паглынутая маналітным шрыфтам
- Bibliothèque — Галерэя ў форме чорнага куба пад святлом пражэктара - адзінокая падсветленая пласціна ў вялізнай цёмнай зале
- 21 TSI — Барвовая пустата, адзіны сілуэт - рэдакцыйны артыкул у стылі высокай моды, дзе карыстацкі інтэрфейс раствараецца ў атмасферы
- Structured — Галерэя эпохі Адраджэння на паперы, якая нагадвае пластылін
- CHAIBOY — Чорная сцяна галерэі з адной падсветленай фатаграфіяй
- Holiday 100 — Галерэя падарункаў апоўначы - загаловак з засечкамі служыць пражэктарам, цёмнае палатно - аксамітнай сцяной, а кожны малюнак тавару вісіць, нібы старанна падабраная рамка
- Apple (España) — Музейная галерэя ў мяккім дзённым святле - гэта адзінае, захапляльнае, бязважкае белае памяшканне, дзе кожны экспанат падсветлены кропкавым промнем на фоне злёгку таніраванай сцяны.
- Analogue — Чорная галерэйная вітрына - тавары параць у пустаце
- Apple (España) — Вітрына абсідыянавай галерэі — цёмная выставачная зала, дзе адзіны тытанавы аб'ект свеціцца на фоне абсалютна чорнага колеру.
- Studio Oker — Зацемненая галерэя з пунсовымі акцэнтамі — пакой з партфоліё, аздоблены чорнымі сценамі, дзе белыя літары нібы параць, а адзін чырвоны шэпт праразае цішыню.
- 099 SUPPLY — Сцяна галерэі, запоўненая чорна-белымі аб'ектамі
- Retool — Цёплая абсідыянавая майстэрня - паверхня для прэцызійных прылад, асветленая тлеючымі вуглямі, дзе ствараецца ўсё