
Framer
бос кеңістіктегі неон галереясы
Framer толық қараңғылық ретінде жұмыс істейді - галереяның ашылуында мазмұн неон белгісі сияқты қалықтап тұратын қара кенеп. GT Walsheim Medium форматында 0,8–1,1 жол аралығымен және агрессивті теріс әріп аралығымен (54 пиксельде -0,04em) орналастырылған тақырыптар бетте ұқыпты орналасудың орнына алға қарай итерілетін қысқартылған, сәндік қаріп жасайды. Бір электрлік көк (#0099ff) барлық функционалдық екпіндерді - жиектерді, жарқырауды, белгішелерді, белсенді күйлерді қамтамасыз етеді, ал интерфейстің қалған бөлігі ахроматикалық болып қалады, таза қара түстен тереңдік жасау үшін нәзік сұр ауысуларға (#111, #171717, #242424) сүйенеді. Компоненттер сәндік емес, қарастырылатын сияқты: 8–25 пиксель дөңгелектелген радиустар, жұқа 1 пиксель шекаралар, минималды көлеңкелер және бос орынның жарқырауына мүмкіндік беретін мөлдір беттер.
Толық енді бөлімдер қара кенептен тыс созылады, мазмұны ~1200 пиксель максималды енімен шектелген және ортасында орналасқан. Негізгі бөлімде солға тураланған тақырып және бір әрекетке шақыру (CTA) түймесі бар, оң жағы әдейі бос қалдырылған - асимметриялық түрде, ортасында емес. Бөлімдер тек мәтіндік орналасулар (үлкен тақырып + ішкі мәтін) мен өнім скриншоттары арасында кезектесіп орналасады. "Framer-мен бірге келеді" бөлімінде 4 бағандық тордағы логотип қабырғасы қолданылады. Қауымдастық бөлімінде өнім скриншоты орталықтандырылған, толық енді контейнердің ішінде дөңгелектелген бұрыштары бар орналастырылады. Навигация минималды - сол жақта логотипі және оң жақта тураланған сілтемелері бар жұқа жоғарғы жолақ, көрінетін басқару элементтері жоқ. Бөлім ырғағы: бөлімдер арасында 80 пиксельдік тік саңылаулар айтарлықтай, бос жерде қалқып жүретін мазмұнның айқын аралдарын жасайды.
Өнімнің пайдаланушы интерфейсінің скриншоттары басым — бағдаршам нүктелері бар хром тәрізді тереземен қоршалған, қолданбаның ендірілген скриншоттары негізгі кескінге айналады. Сапаның дәлелі ретінде қызмет ететін логотиптер қара фонда ақ әріптермен кең аралықпен ұсынылған. Фотосуреттер, иллюстрациялар немесе абстрактілі графика қолданылмайды — көрнекі тіл — өнімнің өзі, тірі интерфейс ретінде көрсетіледі. Белгіше стилі: минималистік, контурланған, монохромды және ақ түсті, кішкентай өлшемдерде. Мәтін тығыздығы: негізінен мәтін, кейде өнім скриншоттары түрінде үлкен фрагменттер бар. Кеңістіктің көрнекі тепе-теңдігі суреттерге қарағанда типографияны айқын артық көреді.
Палитра
Бренд
- Vivid Violet
#0066ff— Негізгі әрекет түймесі - интерфейстегі бір түсті түйме фоны көрсетілетін жалғыз орын.
Бейтарап
- Bone
#ffffff— Негізгі тақырыптар, қараңғы фондағы негізгі мәтін, түйме фоны - жарықтың жалғыз көзі. - Void
#000000— Бет кенебі, навигациялық фон, карта беттері, белгішелерді толтыру — мұның бәрі барлық маңызды емес мазмұнды сіңіретін шексіз қара түс. - Graphite
#111111— Көтерілген карта беттері бос кеңістіктен бір саты жоғары орналасқан — үлкен функционалды карталар және модальды контейнерлер. - Obsidian
#171717— Түймелерге, қосымша карталарға, пайдаланушы интерфейсіне арналған аралық бет - интерактивті элементтерді кенептен бөледі. - Slate
#242424— Мәтін пішіміне ауыспас бұрын, тышқанды апарған кезде, енгізу өрістері мен шегінген панельдер ең жарқын бейтарап реңк болып табылады. - Ash
#333333— Белсенді емес фондық суреттер мен құрылымдық элементтер үшін терең толтыру.
Типография
12-ден 68 пиксельге дейін · 8 қадам
- sans-serif — ауыстыру: Inter · контурлар 400 · sans-serif - алынған деректерде кездеседі, бірақ жасанды интеллектпен сипатталмаған.
- GT Walsheim — ауыстыру: Inter Tight · контурлар 500 · Тақырыптар мен тақырыптарға арналған қаріп - бренд қарпі. Ол агрессивті түрде қысқартылған, жол аралығы 0,8–1,1 және әріп аралығы 44–68 пиксель диапазонында -0,04em-ден -0,05em-ге дейін. Бұл сәндік элемент емес; 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 сілтемелері арқылы өнімдер мен жазбаларды толтырыңыз.
- Ескі сайтыңыздан мазмұнды тасымалдаңыз — тек мекенжайын көрсетіңіз.
- Ең үздік қозғалтқыштағы заманауи дизайн: серверді рендерингтеу және SEO оңтайландыру арқылы React ( Next.js).
- Іздеу нәтижелері мен нейрондық желі ұсыныстары үшін толық автоматтандырылған SEO оңтайландыруы.
Ұқсас стильдер
- Auros — Биолюминесцентті деректер шарлары бар тұңғиық терминал
- Origin Financial — Тыныш сән-салтанаттың түн ортасындағы галереясы. Үлкен сериф қаріптері мен бірнеше жарықтандырылған түрлі-түсті панельдер қаржыны мұқият таңдалған өнер туындысы сияқты сезім тудыратын тыныш, дерлік қараңғы бөлме.
- Raycast — Түн ортасындағы басқару орталығы, Корал Неон
- Dimension — Кремді шыны панельдері бар қараңғылықта жарықтандырылған жұмыс орны
- Reflect Notes — Жұлдызды күлгін кеңістік – қара дерлік индиго бостығының фонында ноталар шоқжұлдыздар сияқты қалқып жүретін қараңғы обсерватория.
- Ameba — Түн ортасындағы басқару бөлмесі – күңгірт шыны панельдердің ішіндегі электрлік көк импульс
- Branding — Қара галерея қабырғасы, қан қызыл түсті екпіндер - Үлкен ақ қаріптер бос орынға ұқсайтын қара кенепте қалқып жүреді, оны бір ғана ашық қызыл екпін және веб-интерфейстен гөрі галерея белгілеріне көбірек ұқсайтын таңғажайып сәндік элементтер бөліп тастайды.
- Harness — Фосфоресцентті жасыл екпінмен түн ортасындағы Миссияны басқару
- Koto — Түн ортасындағы Обсидиан галереясы. Қап-қара дерлік сахна, онда жалғыз жылы жарық көзі - жалғыз сары маркер, ал тығыздалған қаріп көрме плакаттары сияқты кең негативті кеңістікте қалқып жүр.
- Ohzi — Қараңғы галереяда жарқыраған текше ілулі тұр
- Depot — Қараңғы сервер терминалы. Жұмыстың басталуын білдіретін бір жасыл жарық диоды бар, ал пайдаланушы интерфейсінің қалған бөлігі графитпен көрсетілген қара дерлік әзірлеуші консолі.
- Maciej Zadykowicz — Түнгі галерейдің калейдоскопиялық қабырға суреті қара дерлік студия қабырғасы болып табылады, онда бір жарқын, түрлі-түсті типографиялық өнер туындысы назар аудартады, ал қалғанының бәрі тыныш және саналы түрде сақталады.