Le Puzz
Sunny Sunday circular – жовтий таблоїд, повний загадок
Le Puzz - це максималістська система електронної комерції для бутікових магазинів, побудована на двоколірній основі: насичений жовтий колір, що нагадує бджолині стільники, у поєднанні з чистим чорним, на холодному перлово-сірому фоні. Її стиль - це поєднання вінтажної газети і головоломки: основний текст - шрифт Times з засічками, а заголовки - шрифт користувача Times Now, що навмисно порушує традиційні правила електронної комерції, що використовують шрифти без засічок. Сам інтерфейс залишається спокійним і ґрунтується на сітці, щоб візуальну складову могли передати фотографії упаковки товарів (щільні, ілюстровані композиції, наповнені іграшками). Елементи управління інтерфейсу досить масивні: кнопки з чорною рамкою на жовтій заливці, значки у формі таблеток, картки з радіусом 12px і великий міжлітерний інтервал для малих великих літер, який надає навіть кнопці «ШВИДКИЙ ДОДАВ» редакційний шик.
Класична сітка для електронної комерції з виразним редакційним оформленням. Заголовок являє собою смугу жовтого кольору «стільника» з чорною рамкою шириною 1, в якій розташований центрований логотип та додатковий ряд навігаційних кнопок. Нижче над триколонковою сіткою товарів на сірому фоні розташований центрований вітальний заголовок шрифтом Times Now. Головний елемент — центрований фотоблок із округленими кутами (40), з боків якого розташовані дві картки товарів. Ритм розділів витримано: великий вертикальний простір (30), чергування жовтих і сірих поверхонь та максимальна ширина близько 4,5 см, центрована на сторінці. Картки товарів мають однаковий розмір і розташовані в акуратній триколонковій сітці з проміжками 5 см. Макет симетричний і прив'язаний до сітки - ніяких асиметричних композицій, ніяких елементів, що перекриваються.
Візуальним елементом є предметна фотографія. Коробки-пазли сфотографовані анфас на білому/нейтральному тлі, а потім розміщені на синьому або натуральному студійному тлі. На головному зображенні - людина, що тримає кілька коробок-пазлів - предмет, що відображає стиль життя, знятий з невимушеною енергією. Сама упаковка насичена, ілюстративна та максималістична: безліч іграшок, продуктів харчування та персонажів яскравих основних кольорів із товстими чорними контурами, створені так, щоб виглядати як ілюстрація з дитячої книги, розкидана по пазлу з 500 деталей. Жодної абстрактної графіки, жодних 3D-рендерів, жодної іконографії, крім єдиного збільшувального скла — самі пазли є візуальною мовою.
Палітра
Бренд
- Honeycomb Yellow
#ffd931— Основний фірмовий колір, смуга заголовка, основні кнопки дій, активний стан навігації, колір підкреслення посилань, акцентна заливка - єдина нота кольору, навколо якої обертається все інше.
Нейтральні
- Carbon Black
#000000— Основний текст, товсті рамки, контури кнопок, обведення значків, текст навігації – структурна основа системи. - Ink Black
#231f20— Другий текст, основний текст, межі кнопок, межі полів введення — трохи тепліший, майже чорний колір для м'якшого сприйняття. - Pearl Gray
#c8cbcd— Полотно сторінки, фони для карток товарів, ефектна сцена, на якій виступають жовті та чорні кольори. - Fog Gray
#a6a8aa— Приглушені поверхні бейджів, другорядне тло чіпів, ненав'язлива заливка інтерфейсу користувача. - Smoke Line
#d6d6d6— Тонкі роздільники, непомітні роздільники для столів/карток.
Друкарня
від 11 до 47px · 6 ступенів
- Times Now — заміна: Playfair Display · зображення 100, 400 · Шрифт із засічками для заголовків та підзаголовків — використовується для основних заголовків, назв продуктів та заголовків розділів. Надлегкий шрифт 100 розміру з кроком 47px створює відчуття високого, майже стисненого редакційного стилю; стислі форми літер (висота рядка 0,87-0,90) дозволяють великим заголовкам розташовуватися близько до супровідного тексту, імітуючи друкований плакат.
- Times — заміна: Times New Roman · зображення 400 · Основний текст із засічками - несподіваний вибір для інтернет-магазину, який надає всьому сайту літературний, каталожний стиль. Невелика міжрядкова інтервальна ширина (1,15) робить абзаци компактними та читабельними.
- Helvetica Neue — заміна: Helvetica · зображення 100, 400 · Невеликі написи в інтерфейсі користувача, текст на кнопках, мікротекст - набрані шрифтом 11px з великим міжлітерним інтервалом (0.0730em), що створює відчуття написання великими літерами навіть при комфортній температурі тіла.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 15px |
| Радіус кнопок | 12px |
| Радіус карток | 12px |
| Тіні | ні — межі замість тіней |
| Між секціями | 30-40px |
| Ширина сторінки | 1200px |
ІІ збере ваш сайт у стилі Le Puzz і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Agence Foudre — Головна сторінка журналу, виконана в ніжно-рожевому кольорі, що нагадує колір губної помади
- INVERSA — Топографічний польовий термінал опівночі. Темна командна панель, де масивний редакційний шрифт і єдиний шар неоново-салатових маркерів накладено на супутникові знімки Землі, кожен напис монохромний, начебто читаються координати місії.
- Acne Studios — Мінімалістичний галерейний простір, заповнений яскравими фотографіями - модний журнал, розкладений на мармурі
- GTE — Торговий термінал за освітленням галереї
- Diabla — Середземноморський дворик опівдні — рожеві стіни, що вицвіли від сонця, один яскравий червоний брезентовий навіс і редакційні заголовки із засічками, що розтягнулися по всьому небу.
- Subset — Редакційний бутік на основі необробленого льону
- Cursor — Затишна майстерня з пергаменту, освітлена тліючим вугіллям
- MindMarket — Затишна книжка-казка на кремовому папері — доброзичливе редакційне полотно, де великі заголовки Inter та вирізані з паперу персонажі сусідять на залитій сонцем, м'якій, як наклейки, поверхні
- Lamborghini — Чорний колір кузова у виставковому залі, під світлом прожекторів – один жовтий автомобіль
- Amplemarket — Залите сонцем робоче місце, посипане конфетті
- Getharvest — Робочий стіл у «золоту годину» — полотно теплого кремового кольору, білі листівки, розвішані на полотні, та одне яскраве помаранчеве полум'я
- Drive Capital — Ретро-постер для подорожі на теплому папері