Framer
неонова галерия в празнотата
Framer функционира като почти пълен мрак – черно платно, където съдържанието се носи като неонова табела на откриване на галерия. Заглавията, зададени в GT Walsheim Medium с тесно разстояние между редовете от 0.8–1.1 и агресивно отрицателно разстояние между буквите (-0.04em при 54px), създават кондензиран, декоративен шрифт, който се измества напред, вместо да стои спретнато на страницата. Един електриково син цвят (#0099ff) осигурява всички функционални акценти – рамки, сияние, икони, активни състояния – докато останалата част от интерфейса остава ахроматична, разчитайки на фини сиви преходи (#111, #171717, #242424), за да създаде дълбочина от чисто черно. Компонентите изглеждат по-скоро обмислени, отколкото декоративни: заоблени радиуси от 8–25px, тънки рамки от 1px, минимални падащи сенки и полупрозрачни повърхности, които позволяват на празнотата да прозира.
Секциите с пълна ширина се простират отвъд черното платно, като съдържанието е ограничено до максимална ширина от ~1200px и е центрирано вътре. Основната секция разполага с подравнен вляво заглавен файл и един бутон за призив към действие (CTA), като дясната страна е умишлено оставена празна - асиметрично, не е центрирана. Секциите се редуват между оформление само с текст (голям заглавен файл + подтекст) и екранни снимки на продукти. Секцията „Comes with Framer“ използва стена с лого в мрежа с 4 колони. В секцията за общността екранна снимка на продукт е поставена в центриран контейнер с пълна ширина и заоблени ъгли. Навигацията е минимална - тънка горна лента с логото отляво и връзките, подравнени вдясно, без видими контроли. Ритъмът на секциите: значителни вертикални празнини от 80px между секциите, създаващи отчетливи острови от съдържание, плаващи в празнотата.
Доминират екранните снимки на потребителския интерфейс на продукта – оградени от хромиран прозорец с точки на светофар, вградените екранни снимки на приложението се превръщат в основно изображение. Логотата, служещи като доказателство за качество, са представени с бели букви на черен фон с големи интервали. Не се използват снимки, илюстрации или абстрактни графики – визуалният език е самият продукт, показан като жив интерфейс. Стил на иконите: минималистичен, контуриран, монохромен и бял с малки размери. Плътност на текста: предимно текст, с от време на време големи фрагменти под формата на екранни снимки на продукти. Визуалният баланс на пространството очевидно благоприятства типографията пред изображенията.
Палитра
Марка
- Vivid Violet
#0066ff— Основният бутон за действие е единственото място в интерфейса, където се показва плътен цветен фон на бутона.
Неутрален
- Bone
#ffffff— Основни заглавия, основен текст на тъмен фон, фонът на бутоните е единственият източник на светлина. - Void
#000000— Платното на страницата, фонът на навигацията, повърхностите на картите, запълването на иконите – всичко това е в безкраен черен цвят, който поглъща цялото несъществено съдържание. - Graphite
#111111— Повдигнатите повърхности на картите са стъпка над празнотата – големи, функционални карти и модални контейнери. - Obsidian
#171717— Междинна повърхност за бутони, допълнителни карти, запълвания на потребителския интерфейс - отделя интерактивните елементи от платното. - Slate
#242424— При задържане на курсора, полетата за въвеждане и панелите с отстъп са в най-яркия неутрален нюанс, преди да се премине към текстов формат. - Ash
#333333— Дълбоко запълване за неактивни фонови изображения и структурни елементи.
Типография
от 12 до 68px · 8 стъпки
- sans-serif — замяна: Inter · очертания 400 · sans-serif - намерен в извлечените данни, но не е описан от изкуствения интелект.
- GT Walsheim — замяна: Inter Tight · очертания 500 · Шрифтът за заглавия и надписи е фирменият шрифт. Той е агресивно кондензиран, с разстояние между редовете 0.8–1.1 и разстояние между буквите от -0.04em до -0.05em в диапазона 44–68px. Това не е декоративен елемент; геометричната топлина на GT Walsheim, съчетана със строги метрики, създава гласа на системата – уверен, компактен и леко футуристичен. За подобен геометричен израз, помислете за Inter Tight или Space Grotesk Bold.
- Inter Variable — замяна: Inter · очертания 400 · Основният текст, навигацията и вторичните заглавия са работната сила. Оста Inter Variable позволява плавна интерполация на теглата. Проследяването се стеснява с увеличаване на размера: от -0.001em до 18px и до -0.027em до 22px. Версията с променливи позволява плавни микроанимации на сайта. Заместител: Inter ( Google) – почти идентичен резервен вариант.
Интервали и форма
| Цел | Стойност |
|---|---|
| Плътност | средно |
| Основна стъпка | 10px |
| Радиус на бутона | 9999px |
| Радиус на картата | 20px |
| Сенки | не - рамки вместо сенки |
| Между секциите | 80px |
| Ширина на страницата | 1200px |
Изкуственият интелект ще изгради вашия уебсайт в стил Framer и ще го запълни
- Попълнете с продукти и публикации чрез линка - Instagram, TikTok, Facebook.
- Прехвърлете съдържание от стария си сайт – просто посочете адреса.
- Модерен дизайн на най-добрия енджин: React ( Next.js) със сървърно рендериране и SEO оптимизация веднага щом е готов.
- Напълно автоматизирана SEO оптимизация за резултати от търсенето и препоръки от невронни мрежи.
Подобни стилове
- Graphite — Светеща крайна решетка. Създайте тъмни, оградени повърхности на продукта около прецизни бели типографски маркировки и случайни проблясъци на спектрална светлина.
- Linearity — Светеща студийна конзола. Създайте екрани с минималистични черни работни пространства, включващи свеж бял интерфейс, хромирани акценти и от време на време отблясъци на разтопено оранжево.
- Featurebase — Конзола с лилаво осветление. Представете си всяка страница като тъмна, тиха сцена, със светещо работно пространство за продукта, излизащо от долния край.
- Nuxt — Терминално сияние в дълбокия космос. Създайте тъмни, затворени интерфейсни равнини, където зеленото се появява като захранван сигнал на фона на синьо-черни повърхности.
- Auros — Абисален терминал с биолуминесцентни топки с данни
- Origin Financial — Среднощна галерия на тих разкош. Тиха, почти тъмна стая, където големи серифни шрифтове и няколко осветени цветни панела създават усещането, че финансите са внимателно подбрано произведение на изкуството.
- Raycast — Полунощен команден център, Корал Неон
- Dimension — работно място, осветено при здрач, с матирано стъкло
- Reflect Notes — Звездно-виолетовото пространство е тъмна обсерватория, където ноти се носят като съзвездия на фона на почти черна индигова празнота.
- Ameba — Контролната зала в полунощ – електрическо синьо пулсиране вътре в матирано стъкло
- Branding — Черна стена на галерията, кървавочервени акценти - Големи бели шрифтове се носят върху тъмно платно, което наподобява празнота, прекъснато от един-единствен яркочервен акцент и поразителни декоративни елементи, които приличат повече на табели на галерията, отколкото на уеб интерфейс.
- Harness — Контрол на мисията в полунощ с фосфоресциращи зелени акценти