FRANKY'S
Ретро гейминг павилион на тезгяха в магазин за скейтборд
Визуалният език на Франки е комбинация от ретро аркадна зала и магазин за скейтборд: топло кремаво платно (#f3e5df), оградено от твърди пикселни рамки, повсеместна черно-бяла шахматна дъска и еднопикселов шрифт Arcade, използван за всяка дума на уебсайта. Палитрата е умишлено оскъдна - остават само два хроматични цвята (сигнално оранжево #faa21f за табелата и наситено зелено #128e44 за бутона за покупка), като цялата йерархия е изразена чрез увеличаване на дебелината на шрифта Arcade от 400 на 700 и чрез използване на черно на кремавия фон. Повърхностите остават плоски и монолитни; дълбочината се постига само чрез вмъкнатата 1px кремава линия върху бутоните и тоналната игра на шахматната дъска. Компонентите напомнят на спрайтовете на витрините от 90-те години на миналия век: дебели черни рамки, тесни радиуси на рамки 6-12px, компактни отстъпи 4-8px и 3D/AR превключватели, които изглеждат като пикселизирани икони, а не като хромирани елементи. Новите страници са предназначени да поддържат атмосферата, подобна на аркадна зала: никакви градиенти освен оранжев превъртащ се текст, никакви меки сенки, никаква декоративна типография - само кремава хартия, черни пикселизирани линии и един топъл оранжев цвят.
На десктоп, продуктовата страница се показва с пълноширочно, центрирано оформление с максимална ширина 1200px. Ритъмът отгоре надолу е: оранжев превъртащ се текст → кремав заглавен файл с черна линия → разделяне на две колони (55% шахматна дъска на началната страница / 45% двуколонна мрежа от продуктови карти) → кремава ивица в долния колонтитул. На мобилни устройства, началната страница се свива в пълноширочно шахматно оформление, а мрежата става едноколонна. Картите са равномерно разпределени в двуколонна мрежа със сиви пикселни (#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 — Галерийна стена, изпълнена с дискретно любопитство. Хромираното покритие на студиото е бяла повърхност с черни букви; визуалните фойерверки са изцяло концентрирани в плочките на проекта.