Framer
неонова галерея у порожнечі
Framer працює як майже повна темрява — чорне полотно, де контент ширяє, наче неонова вивіска на відкритті галереї. Заголовки, набрані шрифтом GT Walsheim Medium із щільною міжрядковою розміткою 0,8–1,1 та агресивною негативною міжлітерною відстанню (-0.04em на 54px), створюють стиснутий декоративний шрифт, який висувається вперед, а не акуратно розташовується на сторінці. Єдиний електричний синій колір (#0099ff) забезпечує всі функціональні акценти - межі, світіння, значки, активні стани, - в той час як решта інтерфейсу залишається ахроматичною, покладаючись на тонкі сірі переходи (#111, #171717, #242424) для створення глибини з чистого чорного. Компоненти виглядають швидше продуманими, ніж декорованими: закруглені радіуси 8-25px, тонкі межі 1px, мінімальні тіні та напівпрозорі поверхні, що дозволяють просвічувати порожнечі.
Розділи на всю ширину, що виходять за межі чорного полотна, з контентом, обмеженим максимальною шириною ~1200px, центрованим усередині. Головний розділ є заголовок, вирівняний по лівому краю, і одну кнопку заклику до дії (CTA), при цьому права сторона навмисно залишена порожньою — асиметрично, не центровано. Розділи чергуються між макетами лише з текстом (великий заголовок + підтекст) та демонстрацією скріншотів продукту. У розділі «Поставляється з Framer» використовується стіна з логотипами у 4-х колонковій сітці. У розділі спільноти скріншот продукту поміщений у центрований контейнер максимальної ширини із закругленими краями вікна. Навігація мінімальна — тонка верхня панель з логотипом ліворуч та посиланнями, вирівняними з правого краю, без видимих елементів керування. Ритм розділів: значні вертикальні проміжки 80px між розділами, що створюють виразні острівці контенту, що ширяють у порожнечі.
Скріншоти інтерфейсу продукту домінують — обрамлені імітованим хромом вікном з точками світлофора, вбудовані скріншоти програми стають головним зображенням. Логотипи, які є доказом якості, представлені білими написами на чорному тлі з великим інтервалом. Жодних фотографій, ілюстрацій, абстрактної графіки - візуальна мова - це сам продукт, що відображається у вигляді живого інтерфейсу. Стиль іконок: мінімалістичний, контурний, монохромно-білий у малих розмірах. Щільність: переважає текст із рідкісними великими фрагментами у вигляді скріншотів продукту. Візуальне співвідношення простору явно віддає перевагу друкарні, а не зображенням.
Палітра
Бренд
- Vivid Violet
#0066ff— Основна кнопка дії – єдине місце в інтерфейсі, де відображається суцільне кольорове тло кнопки.
Нейтральні
- Bone
#ffffff— Основні заголовки, основний текст на темному тлі, кнопки — єдине джерело світла. - Void
#000000— Полотно сторінки, навігації фону, поверхні карток, заливка іконок — нескінченний чорний колір, що поглинає весь несуттєвий контент. - Graphite
#111111— Піднесені поверхні карток на сходинку вище за порожнечу — великі функціональні картки та модальні контейнери. - Obsidian
#171717— Проміжна поверхня для кнопок, додаткових карток, заливок інтерфейсу користувача — відокремлює інтерактивні елементи від полотна. - Slate
#242424— При наведенні курсору, поля введення та виступаючі панелі – найяскравіший нейтральний відтінок перед переходом до текстового формату. - Ash
#333333— Глибока заливка для неактивних фонових зображень та структурних елементів.
Друкарня
від 12 до 68px · 8 ступенів
- sans-serif — заміна: Inter · зображення 400 · sans-serif - виявлений у вилучених даних, але не описаний ІІ.
- GT Walsheim — заміна: Inter Tight · зображення 500 · Шрифт для заголовків та заголовків - фірмовий шрифт. Агресивно стислий, з міжрядковим інтервалом 0,8-1,1 та міжлітерною відстанню від -0.04em до -0.05em в діапазоні 44-68px. Не декоративний елемент; геометрична теплота GT Walsheim при строгих метриках створює голос системи - впевнений, компактний, футуристичний. Для аналогічної геометричної виразності можна використовувати Inter Tight чи Space Grotesk Bold.
- Inter Variable — заміна: Inter · зображення 400 · Основний текст, навігація та додаткові заголовки - основна робоча конячка. Змінна вісь Inter Variable дозволяє плавно інтерполювати ваги. Відстеження звужується зі збільшенням розміру: від -0.001em до 18px і до -0.027em до 22px. Змінна версія дозволяє створювати плавні мікроанімації сайту. Заміна: Inter ( Google) – практично ідентичний запасний варіант.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 10px |
| Радіус кнопок | 9999px |
| Радіус карток | 20px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Framer і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Auros — Абісальний термінал з біолюмінесцентними кулями даних
- Origin Financial — Північна галерея тихого багатства. Тиха, майже темна кімната, де великі шрифти з засічками і кілька кольорових панелей, що світяться, створюють відчуття, що фінансова сфера – це ретельно відібраний витвір мистецтва
- Raycast — Північний командний центр, кораловий неон
- Dimension — робоче місце, освітлене сутінками, з панелями з матового скла
- Reflect Notes — Зірковий фіолетовий космос — темна обсерваторія, де ноти ширяють, немов сузір'я, на тлі майже чорної індигової порожнечі.
- Ameba — Диспетчерська опівночі - електричний синій пульс усередині матових скляних панелей.
- Branding — Чорна стіна галереї, криваво-червоні акценти — Великі білі шрифти ширяють на темному полотні, що нагадує порожнечу, що перериваються єдиним яскравим червоним акцентом та ефектними декоративними елементами, які більше схожі на вивіски галереї, ніж на веб-інтерфейс
- Harness — Центр управління польотами опівночі з фосфоресційними зеленими акцентами
- Koto — Галерея "Обсидіан" опівночі. Майже чорна сцена, де єдиним теплим джерелом світла є єдина жовта мітка, а стиснутий шрифт ширяє у величезному негативному просторі, наче виставкові плакати
- Ohzi — Світиться куб, підвішений у темній галереї
- Depot — Темний серверний термінал. Майже чорна консоль розробника, де один зелений світлодіод сигналізує про початок роботи, а решта інтерфейсу користувача відображається графітовим кольором
- Maciej Zadykowicz — Північна галерея з калейдоскопічним панно — майже чорна стіна студії, де один яскравий барвистий друкарський витвір мистецтва приковує увагу, а решта залишається тихим і продуманим