FRANKY'S
Ретро-ігровий кіоск на стійці скейт-шопу
Візуальна мова Franky's — це поєднання ретро-аркади та скейт-шопа: тепле кремове полотно (#f3e5df), обрамлене жорсткими піксельними рамками, всюдисуща чорно-біла шахівниця і єдиний піксельний шрифт Arcade, що використовується. Палітра навмисно мізерна - збереглися тільки два хроматичні кольори (сигнально-помаранчевий #faa21f для вивіски і насичений зелений #128e44 для кнопки покупки), причому вся ієрархія виражена за рахунок збільшення товщини шрифту Arcade з 400 до 700 до 70. Поверхні залишаються плоскими та монолітними; глибина досягається тільки за рахунок вставленої кремової лінії 1px на кнопках та тональної гри шахівниці. Компоненти нагадують спрайти вітрин магазинів 1990-х: товсті чорні рамки, щільні радіуси 6-12px, компактні внутрішні відступи 4-8px та перемикачі 3D/AR, які виглядають як піксельні значки, а не як хромовані елементи. Нові сторінки повинні зберігати атмосферу аркадного автомата: жодних градієнтів, окрім помаранчевого рядка, що біжить, ніяких м'яких тіней, ніякої декоративної типографіки — тільки кремовий папір, чорні піксельні лінії і один теплий помаранчевий колір.
На настільних комп'ютерах відображається повноекранна сторінка товару, максимальна ширина 1200px, центрована. Ритм зверху вниз: помаранчевий рядок, що біжить → кремовий заголовок з чорною лінією → поділ на дві колонки (55% шахова дошка на головній сторінці / 45% сітка карток товару в дві колонки) → кремова смуга в нижньому колонтитулі. На мобільних пристроях головна сторінка згортається в шахівницю на всю ширину, а сітка стає одноколонковою. Картки рівномірно розподілені у двоколонковій сітці з роздільниками сірого кольору Pixel (#e5e7eb) між ними. Відстань між розділами мінімальна (43-61px), і інтерфейс ніколи не використовує темні смуги, що займають всю ширину сторінки - кремове полотно відображається без перерв.
Фотографія кепок на чистому кремовому фоні, по центру та з щільним кадруванням, з м'якою вугільно-чорною тінню знизу. Жодного способу життя, жодних моделей, жодного контексту — кепка є головним елементом. Шахова дошка за головним елементом служить графічною поверхнею. Жодних ілюстрацій, жодних 3D-рендерів, крім перемикача доповненої реальності, жодних декоративних значків, крім піксельного хрестика в логотипі.
Палітра
Бренд
- Marquee Orange
#faa21f— Панель повідомлень у верхній частині екрану, акцентні елементи, фірмовий стиль. - Buy Green
#128e44— Кнопка «ДОДАТИ В КОШИК» заповнена — єдина дія покупки, позначена зеленим кольором.
Нейтральні
- Arcade Cream
#f3e5df— Фон сторінки, поверхні картки товарів, вставки на кнопки. - Ink Black
#000000— Основний текст, шахова розмітка, всі межі інтерфейсу користувача, контури карток, обведення іконок. - Pixel Gray
#e5e7eb— Тонкі межі, роздільники карток, структурні правила між сітки. - Charcoal
#333333— Вторинний тон поверхні, шахові квадрати тіней, колір тіней - Carbon
#151515— Насичені нейтральні тони для заливки ілюстрацій та найбільш щільних шахових плиток. - Muted Gray
#737373— Вимкнений/заглушений текст на кнопках та в основному тексті
Друкарня
від 10 до 18px · 4 ступенів
- Arcade — заміна: VT323 · зображення 400, 700 · Єдиний шрифт використовується у всьому інтерфейсі – всі заголовки, мітки, ціни, кнопки, основний текст та значки виконані у шрифті Arcade. Перехід від 400 до 700 – єдиний інструмент для створення ієрархії; Використання другого шрифту зруйнувало б ілюзію кіоску.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 4-8px |
| Радіус кнопок | 6px |
| Радіус карток | 12px |
| Тіні | ні — межі замість тіней |
| Між секціями | 43-61px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі FRANKY'S і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- 099 SUPPLY — Стіна галереї, заповнена чорно-білими об'єктами
- teenage engineering — Промисловий каталог у студійному освітленні - продукт є єдиним значущим об'єктом на сторінці, а все інше обговорюється навколо
- Custo — Галерея кольору збройової сталі із монолітним шрифтом. Виставковий зал у приглушених сіро-зелених тонах, де єдиний темний об'єкт та шрифт 57px говорять самі за себе
- Walden — Тиша лісової підстилки – кожен продукт – це камінь, кожен піксель – це мох та тиша.
- Fiverr — У центрі уваги цифрового базару яскравий зелений пульс на темних театральних сценах. Одна неоново-зелена точка служить якорем для логотипу; решта — монохромне оформлення, покликане підкреслити привабливість запропонованих послуг
- Peloton — Червоний маяк на вугільно-чорній злітно-посадковій смузі. Фітнес-шоурум, де один яскраво-червоний покажчик CTA прорізає величезний темний виставковий простір та веде до чистих білих залів з продукцією
- HOUSEPLANT — книгарня з горіхами на лляному папері
- Adam Lippes — Монохромна редакційна студія на кремовому папері – розворот Vogue, де єдиною прикрасою є сітка макета, а не палітра кольорів
- Elektron — Панель управління обладнанням опівночі — майже чорне полотно, на якому фотографії продукту сяють, а інтерфейс залишається практично невидимим.
- Sigmaphoto — Монохромна галерея прецизійних приладів – тиха біла кімната, де єдиний колір, що має значення, – це той, що закликає вас до дії
- Channel Studio — Студійна фотолабораторія з одним кораловим плафоном
- Specht Studio — Галерейна стіна, наповнена стриманою цікавістю. Власне хромоване оздоблення студії – це біла площина та чорний шрифт; візуальний феєрверк повністю зосереджений усередині проектної плитки