FRANKY'S
Рэтра-гульнявы кіёск на стойцы скейт-шопа
Візуальная мова Franky's — гэта спалучэнне рэтра-аркады і скейт-шопа: цёплае крэмавае палатно (#f3e5df), апраўленае жорсткімі піксельнымі рамкамі, усюдыісная чорна-белая шахматная дошка і адзіны піксельны шрыфт Arcade, які выкарыстоўваецца. Палітра наўмысна бедная - захаваліся толькі два храматычных колеру (сігнальна-аранжавы #faa21f для шыльды і насычаны зялёны #128e44 для кнопкі пакупкі), прычым уся іерархія выказана за кошт павелічэння таўшчыні шрыфта Arcade з 400 да 70. Паверхні застаюцца плоскімі і маналітнымі; глыбіня дасягаецца толькі за кошт устаўленай крэмавай лініі 1px на кнопках і танальнай гульні шахматнай дошкі. Кампаненты нагадваюць спрайты вітрын крам 1990-х: тоўстыя чорныя рамкі, шчыльныя радыусы 6–12px, кампактныя ўнутраныя водступы 4–8px і перамыкачы 3D/AR, якія выглядаюць як піксельныя значкі, а не як храмаваныя элементы. Новыя старонкі павінны захоўваць атмасферу аркаднага аўтамата: ніякіх градыентаў, акрамя аранжавага бягучага радка, ніякіх мяккіх ценяў, ніякай дэкаратыўнай друкаркі - толькі крэмавая папера, чорныя піксельныя лініі і адзін цёплы аранжавы колер.
На настольных кампутарах адлюстроўваецца поўнаэкранная старонка тавара, максімальная шырыня 1200px, цэнтраваная. Рытм зверху ўніз: аранжавы бягучы радок → крэмавы загаловак з чорнай лініяй → падзел на дзве калонкі (55% шахматная дошка на галоўнай старонцы / 45% сетка картак тавару ў дзве калонкі) → крэмавая паласа ў ніжнім калантытуле. На мабільных прыладах галоўная старонка згортваецца ў шахматную дошку ва ўсю шырыню, а сетка становіцца аднакалонкавай. Карткі раўнамерна размеркаваны ў двухкалонкавай сетцы з падзельнікамі шэрага колеру Pixel (#e5e7eb) паміж імі. Адлегласць паміж раздзеламі мінімальнае (43-61px), і інтэрфейс ніколі не выкарыстоўвае цёмныя палосы, якія займаюць усю шырыню старонкі - крэмавае палатно адлюстроўваецца без перапынкаў.
Фатаграфія кепак на чыстым крэмавым фоне, па цэнтры і з шчыльнай кадрыроўкай, з мяккім вугальна-чорным ценем знізу. Ніякай выявы жыцця, ніякіх мадэляў, ніякага кантэксту — кепка з'яўляецца галоўным элементам. Шахматная дошка ззаду галоўнага элемента служыць графічнай паверхняй. Ніякіх ілюстрацый, ніякіх 3D-рэндэраў, акрамя перамыкача дапоўненай рэальнасці, ніякіх дэкаратыўных значкоў, акрамя піксельнага крыжыка ў лагатыпе.
Палітра
Брэнд
- Marquee Orange
#faa21f— Панэль апавяшчэнняў у верхняй частцы экрана, акцэнтныя элементы, фірмовы стыль. - Buy Green
#128e44— Кнопка «ДАДАЦЬ У кошыку» запоўненая - адзінае дзеянне пакупкі, адзначанае зялёным колерам.
Нейтральныя
- Arcade Cream
#f3e5df— Фон старонкі, паверхні картак тавараў, устаўкі на кнопках. - Ink Black
#000000— Асноўны тэкст, шахматная разметка, усе межы карыстацкага інтэрфейсу, контуры картак, абводка абразкоў. - Pixel Gray
#e5e7eb— Тонкія межы, падзельнікі картак, структурныя правілы паміж ячэйкамі сеткі. - Charcoal
#333333— Другасны тон паверхні, шахматныя квадраты ценяў, колер ценяў - Carbon
#151515— Насычаныя нейтральныя тоны для залівання ілюстрацый і найболей шчыльных шахматных плітак. - Muted Gray
#737373— Адключаны/заглушаны тэкст на кнопках і ў асноўным тэксце
Друкарня
ад 10 да 18px · 4 прыступак
- Arcade — замена: VT323 · напісання 400, 700 · Адзіны шрыфт выкарыстоўваецца ва ўсім інтэрфейсе - усе загалоўкі, пазнакі, кошты, кнопкі, асноўны тэкст і значкі выкананы ў шрыфце Arcade. Пераход ад 400 да 700 - адзіны інструмент для стварэння іерархіі; выкарыстанне другога шрыфта разбурыла б ілюзію кіёска.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 4-8px |
| Радыус кнопак | 6px |
| Радыус картак | 12px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 43-61px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі FRANKY'S і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- 099 SUPPLY — Сцяна галерэі, запоўненая чорна-белымі аб'ектамі
- teenage engineering — Прамысловы каталог у студыйным асвятленні - прадукт з'яўляецца адзіным значным аб'ектам на старонцы, а ўсё астатняе абмяркоўваецца вакол
- Custo — Галерэя колеру зброевай сталі з маналітным шрыфтам. Выставачная зала ў прыглушаных шэра-зялёных танах, дзе адзіны цёмны аб'ект і шрыфт 57px гавораць самі за сябе
- Walden — Цішыня лясной подсцілу - кожны прадукт - гэта камень, кожны піксель - гэта мох і цішыня
- Fiverr — У цэнтры ўвагі лічбавага кірмаша - яркі зялёны пульс на цёмных тэатральных сцэнах. Адна неонава-зялёная кропка служыць якарам для лагатыпа; усё астатняе – манахромнае афармленне, закліканае падкрэсліць прывабнасць прапанаваных паслуг.
- Peloton — Чырвоны маяк на вугальна-чорнай узлётна-пасадачнай паласе. Фітнес-шоурум, дзе адзін ярка-чырвоны паказальнік CTA праразае велізарную цёмную выставачную прастору і вядзе ў чыстыя белыя залы з прадукцыяй
- HOUSEPLANT — кнігарня з арэхамі на льняной паперы
- Adam Lippes — Манахромная рэдакцыйная студыя на крэмавай паперы - разварот Vogue, дзе адзіным упрыгожваннем з'яўляецца сетка макета, а не каляровая палітра.
- Elektron — Панэль кіравання абсталяваннем апоўначы - амаль чорнае палатно, на якім фатаграфіі прадукта ззяюць, а інтэрфейс застаецца практычна нябачным
- Sigmaphoto — Манахромная галерэя прэцызійных прыбораў - ціхі белы пакой, дзе адзіны колер, які мае значэнне, - гэта той, які заклікае вас да дзеяння
- Channel Studio — Студыйная фоталабараторыя з адным каралавым плафонам
- Specht Studio — Галерэйная сцяна, напоўненая стрыманай цікаўнасцю. Уласнае храмаванае аздабленне студыі – гэта белая плоскасць і чорны шрыфт; візуальны феерверк цалкам засяроджаны ўнутры праектнай пліткі