INO
Музейна вітрина в тиші — кожен експонат ширяє в білому просторі, наче єдиний об'єкт за склом, обрамлений майже чорним ледь чутним шрифтом.
INO функціонує як майже монохромна ювелірна галерея: біле полотно, одне тепле, майже чорний колір чорнила і практично повна відсутність колірних виразів. Візуальна система розглядає кожне кільце як музейний експонат — клінічні фотографії продукції, що ширяють у великому негативному просторі, з ієрархією, побудованою за рахунок положення, міжлітерної відстані та обсягу білого кольору, а не за рахунок масштабу шрифту чи кольору. Навігація розташована внизу сторінки у вигляді чотирьох точок із підписами (заповнених або порожніх), що є навмисним переворотом у порівнянні з традиційною верхньою панеллю в електронній комерції. Сам фірмовий знак є набором концентричних контурів кілець, що повторюють форму продукту і виступають як типографічна скульптура, а не логотип.
Повноекранне полотно без обмеження максимальної ширини контенту. Головний екран займає всю ширину сторінки, при цьому фотографія та графіка розділені порівну (50/50). Сітки товарів відображаються у вигляді триколонок рядків з великим горизонтальним відступом від краю області перегляду. Нижня навігація центрована та прикріплена до нижнього колонтитула сторінки, а не закріплена. Розриви розділів використовують або повноекранну редакційну фотографію, або чистий порожній простір - ніколи не кольорову смугу, лінію розділення або градієнт. Вертикальний ритм вільний: 80/1/1 між основними розділами, сторінка "дихає", а не "наповнюється" контентом. Немає бічної панелі, немає мега-меню, немає верхньої панелі заголовка – логотип «INO» розташований лише у верхньому лівому куті головного екрана.
Існують два різних режими відображення зображень: клінічна предметна фотографія на плоскому світло-сірому безшовному фоні (кожне кільце сфотографоване в центрі, без рук, без реквізиту для стилізації, без тіней на поверхні - об'єкт є головним героєм) і оповідальні редакційні зображення (кільце, лежачи ланцюжок), оброблені як знебарвлені, повноекранні редакційні фрагменти. Зображення продукту служать для карток товару; редакційні зображення передають настрій бренду Обидва варіанти монохромні або майже монохромні – трава на головному зображенні – єдине місце, де з'являється зелений колір, і навіть вона приглушена до лісового відтінку. Іконки в інтерфейсі не використовуються – концентричний кільцевий знак замінює всю іконографію.
Палітра
Нейтральні
- Obsidian Ink
#212123— Нейтральні стани форми, текст значка і стриманий зворотний зв'язок інтерфейсу користувача, де колірна гама повинна залишатися ненав'язливою. - Bone
#ffffff— Полотно сторінки, картонні поверхні, інвертований текст на темному тлі. Домінуюча поверхня; майже весь сайт тут. - Carbon
#000000— Заливка ікон, декоративні графічні обведення, заливка активного стану для індикатора навігаційної точки. Використовується економно для максимального тонального розмаїття з кольором кістяної кістки. - Ash
#999999— Кордони із середнім контрастом, контрольні контури та структурні роздільники. - Pebble
#a6a6a7— Приглушений допоміжний текст, тонкі роздільники основного тексту, вторинні метадані. Найсвітліший функціональний сірий колір – використовується для цінників та супровідного тексту, який має відступати на задній план.
Друкарня
від 11 до 18px · 4 ступенів
- Sequel100Wide — заміна: Jost (400 · зображення 400 · Єдиний фірмовий шрифт, який використовується лише в накресленні 400 у всіх контекстах, — навігація, основний текст, заголовки, заголовок, ціни, підписи. Широко розставлений геометричний символ із великою міжбуквенною відстанню відбиває весь фірмовий стиль. Відсутність жирного зображення - навмисне рішення: ієрархія досягається за рахунок регістру великих літер, міжлітерної відстані та положення, а не за рахунок зміни товщини шрифту.
- Arial — заміна: system-ui · зображення 400 · Системний резервний варіант для відтворення кнопок у застарілих контекстах. Не є частиною фірмового стилю – з'являється лише у випадку, якщо Sequel100Wide не завантажується.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 23px |
| Радіус кнопок | 50px |
| Радіус карток | 8px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80-120px |
ІІ збере ваш сайт у стилі INO і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Airbnb — Тиха біла стіна галереї з однією коралово-червоною закладкою
- Peak Design — Стіна галереї, частково освітлена
- 099 SUPPLY — Стіна галереї, заповнена чорно-білими об'єктами
- Apple (España) — біла вітрина галереї
- Apple (España) — Галерейна вітрина у ранковому тумані
- Custo — Галерея кольору збройової сталі із монолітним шрифтом. Виставковий зал у приглушених сіро-зелених тонах, де єдиний темний об'єкт та шрифт 57px говорять самі за себе
- Silencio — Біла кімната з артефактами. Галерейна вітрина з теплого паперу, де кожен елемент займає своє місце на тлі негативного об'єму, а тиша є навмисним дизайнерським рішенням
- Oakâme — Залита сонцем провансальська майстерня, висічена з теплого каменю
- Nike — Монохромна галерея спортивних досягнень — білі стіни, продукт як витвір мистецтва, хром, розчинений у фоні
- Sociotype — Типовий зразок музейного зразка на білому папері
- Arc — індустріальна біла галерея над опівнічною водою
- Rivian — Електричний моноліт на бетонну стіну галереї. Rivian представляє кожен автомобіль як скульптуру на тлі величезного білого простору, з типографікою настільки великою, що вона стає архітектурним елементом, і одним теплим жовтим кольором, який порушує монохромність, подібно до сонячного світла на матовій поверхні