Dub
Link компаниясының күңгірт күріш қағазынан жасалған басқару панелі
Dub-тың визуалды жүйесінде шектеулі, редакциялық SaaS эстетикасы бар: шығыңқы элементтердің орнына жұқа жиектермен бекітілген ақ түсті кенеп, құрылымдық тірек беретін тығыз монохромды типография және бір ашық көк түс (#2563eb) ерекшелік береді. Беттер бір қарағанда тегіс және жақтаусыз болып қалады, бірақ әр контейнерде басылған құжаттың сезімін оятатын 1 пиксельдік #e5e5e5 жиегі бар. Жеке тұлға бейтарап палитраның үстінде қалқып жүретін түрлі-түсті «таблетка» екпіндерінің (қызғылт сары, жасыл, күлгін) шағын жиынтығы және көз тартарлық емес, сенімді және заманауи сезінетін тақырыптар арқылы қол жеткізіледі. Компоненттер ықшам және тығыз: 8 пиксельдік науалар, 12 пиксельдік карта радиусы, 9999 пиксельдік таблетка тәрізді жапсырмалар және ауыр, толтырылған түймелердің орнына көрінбейтін басқару элементтері.
Бет шамамен 1200 пиксель максималды ені бар орталықтандырылған орналасуға негізделген. Негізгі элемент - үлкен өнім орналасуының үстінде көлденең орналасқан үш қалқымалы элементі (серіктестік бағдарламалар, конверсия аналитикасы, қысқа сілтемелер) бар орталықтандырылған мәтін блогы. Бөлімдер тігінен 64 пиксельдік науалармен орналастырылған, олар ақ кенеп пен тонды бөлу үшін #f5f5f5 қағаз тұманымен кезектесіп орналасқан. Төменгі бөлімде Z-тәрізді орналасу қолданылады: редакциялық мәтін ортаңғы үштен бір бөлігінде орталықтандырылған, ал қалқымалы UI карталары сол және оң жақ жиектерге бекітілген, бұл асимметриялық, журнал тәрізді ырғақты жасайды. Логотип бұлты - беттің ортасында орналасқан қарапайым 5x2 тор. Навигация - минималистік жоғарғы жолақ - сол жақта логотип, ортасында навигация, оң жақта екі түймеден тұратын топ («Кіру» түймесі + толтырылған «Тіркелу» түймесі) - бекітілген немесе мега-мәзірсіз. Негізгі терезенің басқару тақтасының орналасуы классикалық екі бағаннан тұратын қолданба орналасуын көрсетеді: бекітілген бүйірлік тақта (240 пиксельге ұқсас) + келушілер айналдыруды бастамас бұрын өнім туралы ақпараттың тығыздығын анықтайтын мазмұн аймағы.
Көрнекіліктер өмір салтына емес, өнімге бағытталған. Негізгі экран үлкен басқару тақтасының скриншотында орналасқан, ол бүйірлік тақта навигациясы, деректер кестесі және қалқымалы интерфейс элементтері бар нақты әлемдегі өнім макетін білдіреді, ақ кенепте жалпақ панель ретінде орналастырылған. Клиент логотиптері әлеуметтік медиа өнімділігін мойындау үшін қанықпаған сұр түсті торда (beehiv, superpower, Chatbase және т.б.) көрсетіледі, беттің жалғыз көк екпіні басым болып қалуы үшін түсі алынып тасталады. Қалқымалы серіктес карталары (кіріс/төлем деректері бар шағын профильдер және плиткалар) төменгі жағындағы редакциялық мәтін блоктарының айналасында қозғалады, бұл мәтіннің өзінде көлеңкелерді пайдаланбай тереңдік сезімін тудырады. Нүктелі торлы фон үлгісі - бұл ерекшелік: өте төмен мөлдірлігі бар кішкентай нүктелердің жұқа қатары текстураны және дизайн жүйесінің/сызба бетінің сезімін жасайды, сайттың «заманауи сілтеме атрибуция платформасы» ретіндегі орнын баса көрсетеді. Иконография минималды, контурлары мен толтырғыштары бар және ерекшелік белгілері үшін екпін палитрасын (мандарин қызғылт сары, лаванда күлгін, жалбыз жасыл) пайдаланады. Фотосуреттер, иллюстрациялар немесе 3D модельдер пайдаланылмайды — өнімнің пайдаланушы интерфейсінің өзі визуалды тіл болып табылады.
Палитра
Бренд
- Electric Blue
#2563eb— Негізгі бренд түсі — логотип, сілтемелер, негізгі өнімділік көрсеткіштері, белсенді күйлер және белгіше екпіндері — пайдаланылады. Ақ фондағы қанық көк түс жүйенің жалғыз визуалды тартымдылығын жасайды. - Deep Sapphire
#1e40af— Әрекет түймесінің негізгі фоны, әрекетке шақырудың қалың түсі — әрекетті білдіретін жалғыз түс — назар аудару үшін сирек қолданылады.
Бейтарап
- Canvas White
#ffffff— Беттің фоны, карта беті, қалқымалы панельдер әрбір экранның негізгі бөлігі болып табылады. - Paper Mist
#f5f5f5— Кірістірілген карталар, қосымша панельдер және толтырулар үшін тінтуірді апару арқылы түстердің нәзік өзгерістері. - Ash
#e5e5e5— Карталардағы, кіріс қосқыштарындағы және бөлгіштеріндегі жұқа шекаралар жүйені бірге ұстап тұратын құрылымдық сызық болып табылады. - Smoke
#d4d4d4— Таңдалған контейнерлер мен қосымша түйме контурлары үшін айқынырақ шекаралар. - Pebble
#c8c8c8— Орташа контрасты бар шекаралар, басқару контурлары және құрылымдық бөлгіштер. Бұл түс әрекетке шақыру үшін негізгі түс ретінде пайдаланылмауы керек. - Midnight Ink
#0a0a0a— Түймелердің негізгі мәтіні, белгіленген түймелер және шарлау мәтіні максималды контраст үшін қара дерлік түсті.
Типография
11-ден 48 пиксельге дейін · 9 қадам
- Satoshi — ауыстыру: Inter (weight 500 · контурлар 500 · Тақырыптарды көрсету – тақырыптар мен бөлім тақырыптары үшін тек 36–48 пиксель жолдарда қолданылады. Қаріп қалыңдығы – 500 (орташа, қалың емес): Тақырыптар сенімді және заманауи көрінеді, бірақ ешқашан басымдыққа ие емес. Сатошидің геометриялық пропорциялары қаріпке Inter негізгі мәтіні қайталай алмайтын аздап редакциялық, заманауи сезім береді.
- Inter — ауыстыру: Inter (native) · контурлар 400, 500, 600 · Негізгі мәтін, пайдаланушы интерфейсінің белгілері, навигация, қосымша тақырыптар және қосымша тақырыптар. Inter - 11 пиксельдік микробелгілерден бастап 30 пиксельдік қосымша тақырыптарға дейінгі барлық нәрсені өңдейтін негізгі жұмыс құралы. Негізгі мәтін үшін әдепкі салмақ 400, белгіленген элементтер мен түйме белгілері үшін 500, ал маңызды пайдаланушы интерфейсінің белгілері үшін 600 сақталған. Жол биіктігі 1,5 болатын 16 пиксель - ең жиі кездесетін бір қадамды өлшем (1220 рет қайталану), бұл 16 пиксельдің канондық негізгі мәтін көшірмесінің өлшемі екенін растайды.
- Geist Mono — ауыстыру: JetBrains Mono or IBM Plex Mono · контурлар 400, 500 · Код үзінділері, техникалық метадеректер және ендірілген бір аралықтағы токендер 12-14 пиксельдік код блоктарында және 24 пиксельдік үлкен кодты көрсету элементтерінде қолданылады. Бұл Dub өнімінің позициясына сәйкес әзірлеуші құралының сенімділігін қамтамасыз етеді.
Аралықтары және формасы
| Мақсаты | Мағынасы |
|---|---|
| Тығыздық | орташа |
| Негізгі қадам | 8px |
| Түйме радиусы | 8px |
| Карта радиусы | 12px |
| Көлеңкелер | көлеңкелердің орнына шекаралар жоқ |
| Бөлімдер арасында | 64px |
| Беттің ені | 1200px |
Жасанды интеллект сіздің веб-сайтыңызды Dub стилінде жасайды және оны толтырады
- Instagram, TikTok, Facebook сілтемелері арқылы өнімдер мен жазбаларды толтырыңыз.
- Ескі сайтыңыздан мазмұнды тасымалдаңыз — тек мекенжайын көрсетіңіз.
- Ең үздік қозғалтқыштағы заманауи дизайн: серверді рендерингтеу және SEO оңтайландыру арқылы React ( Next.js).
- Іздеу нәтижелері мен нейрондық желі ұсыныстары үшін толық автоматтандырылған SEO оңтайландыруы.
Ұқсас стильдер
- ElevenLabs — Жылы крем түстес, нәзік тақырыптары бар фотоэссе. Баухаус стиліндегі дәптер — жұмыртқа қабығы түсті қағаз, қара сия және өнімді көрсетуге арналған бір күлгін және қызғылт сары түсті екпін.
- Awesomic — Конфеттиді еске түсіретін қызғылт сары тыныс белгілері бар редакциялық мырыш торы
- Monad — жылы пергаментке арналған редакциялық техникалық журнал
- Seline Analytics — Жылы қағаздағы тыныш аналитикалық үстел
- Notion — Түскі күн астында жылы қағаз дәптер
- Anthropic — Жылы пергамент туралы ғылыми салалық журнал — тыныш піл сүйегі беттері, серифті редакциялық тақырыптар және тек әрекет қажет болған кезде пайда болатын жалғыз саз балшық екпіні.
- Calendly — Суық мәрмәрге қою көк сиямен салынған
- Augen Pro — Apple компаниясының ақ түсті көрінісі монохромды кеңістіктегі жалғыз екпін ретінде клиникалық, жеңіл, электрлік көк түспен ерекшеленеді.
- Antimetal — Крем қағазға басылған редакциялық шежіре — ғылыми журналдағы тыныш таң, мұнда ұстамдылық сенімділік береді, ал серифтер ауыр жұмысты атқарады
- Perk — Жылы пергамент қағазындағы электрлік лайм
- Ditto — Күн сәулесі түсіп тұрған жабайы гүлдердің үлгілерін жасайтын шеберхана. Жылы крем түсті беттер, ашық сары негізгі түс, қою көкшіл сиялар, бұйымның артында гүлдеп тұрған органикалық түсті формалар.
- Officevibe — Жылы крем түсті қағазға басылған редакциялық журнал. Өнім ретінде ұсынылған HR басқару туралы ойлы эссені елестетіп көріңіз — заманауи көк интерфейс арқылы сыбырлап жазылған курсивті сериф қаріпі.