Bpco
Друкарські маніфест з бетонної плити. Чорно-білий прес-кит, де збільшений шрифт Helvetica імітує фотографію, а єдина текстура — це один аркуш зім'ятого паперу під основним шрифтом
Bigpicture використовує монохромну систему редагування, яка розглядає веб-сторінку як друкований прес-кит, розкладений на необробленому папері. Інтерфейс повністю позбавлений хроматичних кольорів і покладається виключно на чорне чорнило, білий простір, тонкі лінії та єдину текстуру м'ятого паперу для створення атмосфери. Типографіка - це продукт: заголовки досягають 274px шрифту Helvetica Neue 700 з агресивною негативною міжлітерною відстанню, роблячи текст домінуючою візуальною масою на кожному екрані. Моноширинні підписи ([01-N ВСТУП], КРЕАТИВ/АГЕНТСТВО) виступають як підписи в друкованому стилі, а чотирикінцеві блискучі значки є єдиною окрасою між розділами. Макет щедрий і нагадує самвидав - 72px проміжки між розділами, 144-250px горизонтальні відступи та блоки зображень на всю ширину з 288px кутами дозволяють сторінці дихати, як стіні галереї, а не як програмному продукту.
Максимальна ширина ~1440px, центрована з горизонтальним відступом 40-144px залежно від густини розділів. Герой - це зображення на всю ширину сторінки з накладеним текстом. Під зображенням контент чергується між центрованими текстовими блоками та друкарським оформленням від краю до краю. Нижня частина 60% сторінки являє собою довгий маніфест, що прокручується, де великий шрифт заповнює всю ширину області перегляду рядково, розділений рядами блискучих роздільників. Навігація являє собою плаваючу панель, центровану у верхній частині області перегляду, а не панель на всю ширину. Нижній колонтитул це одна смуга з тонкою рамкою.
На головному екрані домінує фотографія - великі архітектурні та зовнішні рекламні знімки (білборди, облицювання будівель, розміщення реклами на рівні вулиць), представлені в повний розмір із закругленими кутами. Текстура м'ятого паперу накладається на нижні розділи сторінки, створюючи тактильне відчуття та надаючи інтерфейсу вигляду друкованого журналу. Невелика значок глобуса, намальована лініями, є єдиним ілюстративним елементом. Жодних 3D-ефектів, ніяких абстрактних градієнтів, ніяких макетів продукції - зображення носять документальний, індустріальний характер і засновані на портфоліо агентства в галузі зовнішньої реклами.
Палітра
Нейтральні
- Press Ink
#121212— Основний текст, тонкі лінії, межі розділів, обведення іконок, текст нижнього колонтитулу — єдиний темний тон, що містить у собі 95% всієї інформації переднього плану. - Paper White
#ffffff— Полотно сторінки, картонні поверхні, навігаційна панель фону, поверхні з кадру заголовка. - Newsprint
#f1f1f1— Ніжна заливка поверхні, м'які межі, тонкі роздільники, тон прихований за текстурою м'ятого паперу. - Foil Gray
#e1e1e1— Світлі рамки, акценти у вигляді обведення ікон, додаткові роздільники. - Mute Gray
#c5c5c5— Вторинний текст, стан інвалідності, низькоконтрастні поверхневі лінії
Друкарня
від 13 до 274px · 6 ступенів
- Helvetica Neue — заміна: Inter · зображення 400, 500, 700 · Універсальний інструмент - основний текст на рівні 17px/1.29, заголовки для відображення на екрані на рівні 75-274px з міжлітерною відстанню -0.04em на найбільших розмірах, мітки навігації на рівні 15px
- PPSupplyMono — заміна: JetBrains Mono · зображення 400 · Метатеги та підписи у дужках, такі як [01-N ВСТУП], а також теги розділів (РЕКЛАМА, КРЕАТИВ/АГЕНТСТВО, ОФЛАЙН-МАРКЕТИНГ) — це єдині друкарські акценти, які порушують монотонність шрифту Helvetica.
- PPSupplySans — заміна: Inter · зображення 400 · Друга навігація і мікротекст у нижньому колонтитулі, де потрібен інший шрифт без засічок.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 50px |
| Радіус кнопок | 8px |
| Радіус карток | 20px |
| Тіні | ні — межі замість тіней |
| Між секціями | 72px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Bpco і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Steep — Аналітика шрифтів із засічками на папері теплого відтінку
- Newformcap — Редакційна газета у гримерці
- Claude — Надрукований на теплому пергаменті артефакт — чорнило на кістяному папері, глина як єдине колірне дихання
- 11x– Digital workers — Кінематографічна редакційна пустеля – панорамні фотографії місцевості на тлі монументальних заголовків із засічками, де сторінка читається як розворот розкішного журналу
- Revolut — Монохромна редакційна робота, заснована на фотографії хмар — біле чорнило, гудзики-пігулки, одна синя смужка кольору у світі, в іншому виконаному в сірих тонах
- Scheduling — Редакційна фарба на кремовому папері
- Titan — архів у теплих тонах монохром
- Programa — Швейцарська дизайн-студія опівдні. Біла стіна галереї освітлена єдиною жовтою настільною лампою — все у відтінках сірого, поки якась кнопка, значок чи акцент не привернуть увагу, і тоді цей єдиний жовтий акцент визначає всю кімнату
- Sana Agents — Лаймова іскра на білому тлі в редакційній статті
- Visual — Теплий редакційний самвидав. Кремовий папір, плакати із засічками, монохромні нотатки на полях, один жовтий маркер
- Midday — Редакційна брошура на пергаменті — заголовок із засічками 72px на тлі теплого кам'яного фону, основний текст без засічок з інтервалом, елементи керування у формі таблеток, відсутність тіней
- Chat for impact — Клініка лісової зелені з кімнатами пастельних тонів