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 — Тепла обсидіанова майстерня - поверхня для прецизійних інструментів, освітлена тліючим вугіллям, де створюється все