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 — Рэтра-постэр для аўтападарожжа на цёплай паперы