Flying Papers
Сповідь у суботньому ранковому мультфільмі
Flying Papers працює як суботній ранковий мультфільм, надрукований на щільному ризографічному папері: плоска сцена приглушено-фіолетового кольору, невелика кількість насичених кольорів, що нагадують конфетті, і настільки великий шрифт, що він з'їдає область перегляду. Фірмовий стиль гучний, зухвалий та безкомпромісний — він не потребує уваги, а привертає його. Кожен екран повинен сприйматися як сміливий постер: один домінуючий заголовок, одна ілюстрація персонажа, одна дія в тексті і досить вільного простору. Рамки виконують основну роботу замість тіней; колір використовується як фарба, а чи не як дані. Поверхні залишаються плоскими, краї залишаються чіткими на рівні 6px, і єдине м'яке в системі це 100px таблетка на кнопці виходу.
Повноекранні макети постерів без обмежень максимальної ширини. Кожен екран є єдиною композицією розміром з область перегляду: один масивний заголовок ObviouslyVariable, центрований або вирівняний по лівому краю, одна ілюстрація талісмана, що перекриває текст, і невелика вбудована дія нижче. Розділи не чергуються у світлому та темному кольорі – вся сторінка розташовується на полотні кольору «Сутінково-фіолетовий», а зверху розміщуються однотонні кольорові картки. Навігація є єдиним центрованим логотипом, без панелі меню. Картки розташовані у вільній 2–3-колонковій компонуванні з великими проміжками; розмір карток визначається змістом, а чи не є однаковим. Щільність екстремальна: одна ідея на екран, оточена фіолетовим простором для дихання.
Тільки ілюстрації – жодних фотографій, 3D-рендерів, абстрактних градієнтів. Візуальна мова — мальований мультяшний стиль з товстими чорними контурами (2–3px), плоскою заливкою з 2–3 кольорів і без затінення. Персонажі - талісмани, що взаємодіють зі шрифтом (виглядають, притуляються, стоять на літері). Іконки намальовані лініями чорним (Pure) або білим (Bone), товщина лінії 1,5–2px. Зображення насамперед створюють декоративну атмосферу, ніколи не пояснюють – шрифт передає повідомлення, персонаж передає настрій.
Палітра
Бренд
- Dusk Violet
#8584bd— Основне полотно і головне тло — сцена, на якій виступають всі інші кольори. - Hi-Vis Yellow
#f4ed36— Жовтий колір використовується для виділення контурів дій, підписів до посилань та інтерактивних елементів. Не слід використовувати його як основний колір для закликів до дії. - Buttery Yellow
#f9cc73— Додатковий текст на екрані та м'якіші рамки — більш стриманий варіант світловідбиваючого кольору для випадків, коли світловідбиваючий колір був би зайвим. - Lilac Shadow
#61609a— Фонові зображення карток і блоків — глибший фіолетовий колір для вкладених поверхонь на фіолетовій сцені.
Нейтральні
- Bubblegum Pink
#f8c1ba— Декоративні бордюри та акцент у вигляді конфетті – теплий рожевий колір, який використовується у помірних кількостях для створення яскравого акценту. - Matcha Cream
#b5c995— Декоративні рамки та акцент у вигляді конфетті – курно-зелений відтінок для другорядних персонажів листівок. - Magenta Punch
#ac4f98— Додаткова поверхня для акцентних карток призначена для ефектних блоків, які повинні звучати голосніше, ніж сцена. - Firecracker Red
#c94245— Червона заливка для виділення фону, декоративних смуг та м'якого акценту за контентом. - Bone White
#f9f5f2— Тонкі межі, роздільники, контури полів уведення та краю карток на світлих поверхнях. Не використовуйте цей колір як основний колір кнопки виклику. - Ink Black
#1a1a1a— Основний текст, основні межі та контури кнопок – майже чорний колір, який використовується для друкарської роботи на кремових поверхнях.
Друкарня
від 10 до 341px · 8 ступенів
- ObviouslyVariable — заміна: Founders Grotesk Condensed · зображення 800, 900 · Сімейство шрифтів для заголовків та великих шрифтів — єдиний шрифт, який досить гучний для цієї системи. Розміри варіюються від 18px для тексту до 341px для відображення на плакатах. Щільний міжрядковий інтервал 0,80-1,00 дозволяє багаторядковим заголовкам розташовуватися суцільними кольоровими блоками; функцію Calt відключено, тому широкі геометричні форми залишаються без прикрас. Альтернативні варіанти: Founders Grotesk Condensed, Knockout чи Druk Wide.
- DegularVariable — заміна: Inter · зображення 400 · Наддрібний текст інтерфейсу користувача - навігація, мікротекст в нижньому колонтитулі і вбудовані підписи в 10px. Нейтральний, універсальний шрифт, який непомітний поряд із основним текстом. Заміна: Inter, IBM Plex Sans.
- bergen_monoregular — заміна: JetBrains Mono · зображення 400, 600 · Моноширинний мікрошрифт для навігації, тегів і невеликих міток даних - створює ритм машинки, що пише на тлі закругленого екрану. Міжрядковий інтервал 0,80 у моноширинному шрифті - це фірмовий знак: щільно накладений моноширинний шрифт відчувається як чек. Альтернативні варіанти: JetBrains Mono, IBM Plex Mono.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 17px |
| Радіус кнопок | 100px |
| Радіус карток | 6px |
| Тіні | ні — межі замість тіней |
| Між секціями | 40px |
ІІ збере ваш сайт у стилі Flying Papers і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Navigate — Великий набір стікерів, прикріплений до дошки: великий шрифт гротескний, все у вигляді таблеток і п'ять різнокольорових іконок, що повторюються як логотип
- Hatch — Малюнок від руки в стилі самвидаву, змішаний з пастельними цукерницями. Полотно з кремового паперу, прикрашене м'ятними акцентами, точками-конфетті та закликами до дії у формі таблеток, де великий, сміливий шрифт із засічками натякає на веселощі, а синій талісман підморгує в кутку.
- Wonder — Неоново-фіолетовий командний центр - глибока сливова темрява, пронизана єдиним лазерно-фіолетовим джерелом світла
- Duolingo — Грайливий талісман класу на білому папері
- Family — Розворот із казки на кремовому пергаменті
- Visitors — білий інженерний креслення
- Say Briefly — Скетчбук креативного агентства на кремовому папері
- Superpower — Біолюмінесцентний центр управління охороною здоров'я
- Dopper — Залита сонцем кремова лагуна з яскравим синім плином. Тепла бежева гладь, де один яскраво-синій канал і кристально чисті, як цукерки, картки прорізають простір, немов сонячне світло на воді
- Dock — Залитий сонцем кремовий папір, кобальтовий імпульс
- Portrait — Стіна спогадів, відображених на полароїдних знімках, на кремовому папері. Яскравий, кремовий альбом для вирізок, де темно-синє чорнило є єдиним текстом, єдиними структурними лініями і єдиним кольором рамки — з єдиною намальованою від руки веселкою, яка з'являється один раз, на кнопці «Зареєструватися» і на виділеному курсивому слові «назавжди», і більше ніколи
- Quizlet — Класна кімната оформлена в різних тонах кольору на білому тлі — тихий письмовий стіл, за яким чотири пастельні картки є єдиним яскравим акцентом на тлі холодних сірих стін і єдиної позначки індіговим маркером.