Dub
Панели идоракунии коғази биринҷи маттӣ дар Link
Системаи визуалии Dub дорои эстетикаи маҳдуд ва қариб таҳририи SaaS мебошад: як матои қариб сафед, ки бо канорҳои тунук ба ҷои унсурҳои барҷаста пайваст карда шудааст, бо типографияи зичи монохромӣ, ки дастгирии сохториро таъмин мекунад ва як ранги кабуди дурахшон (#2563eb) изҳорот медиҳад. Сатҳҳо дар назари аввал ҳамвор ва бечаҳорчӯба боқӣ мемонанд, аммо ҳар як контейнер ҳошияи 1px #e5e5e5 дорад, ки эҳсоси ҳуҷҷати чопшударо ба вуҷуд меорад. Шахсият тавассути маҷмӯи хурди аксентҳои рангаи "ҳаб" (норанҷӣ, сабз, арғувонӣ), ки дар болои палитраи бетараф шино мекунанд ва сарлавҳаҳое, ки эътимод ва муосирро бе дурахшон ҳис мекунанд, ба даст оварда мешавад. Ҷузъҳо фишурда ва зич мебошанд: новаҳои 8px, радиуси корти 12px, тамғакоғазҳои шакли ҳаб дар 9999px ва идоракунии ноаён ба ҷои тугмаҳои вазнин ва пуршуда.
Саҳифа бар асоси тарҳбандии марказӣ бо паҳнои ҳадди аксар тақрибан 1200 пиксел сохта шудааст. Унсури асосӣ блоки матнии марказӣ бо се унсури шинокунанда (Барномаҳои шарикӣ, Таҳлили табдилдиҳӣ, Пайвандҳои кӯтоҳ) мебошад, ки ба таври уфуқӣ дар болои тарҳбандии калони маҳсулот ҷойгир шудаанд. Қисмҳо бо ҷӯйборҳои мувофиқи 64 пикселӣ амудӣ ҷойгир карда шудаанд, ки байни матои сафед ва тумани коғазии #f5f5f5 барои ҷудокунии тоналӣ иваз карда мешаванд. Қисмати поёнӣ тарҳбандии шакли Z-ро истифода мебарад: матни таҳрирӣ дар сеяки миёна ҷойгир карда шудааст ва кортҳои UI-и шинокунанда ба ҳошияҳои чап ва рост часпонида шудаанд, ки ритми асимметрӣ ва маҷалламонандро эҷод мекунанд. Абри логотип як шабакаи оддии 5x2 аст, ки дар марказаш дар саҳифа ҷойгир аст. Навигатсия як сатри болоии минималистӣ аст - логотип дар тарафи чап, навигатсия дар марказ, як гурӯҳи ду тугма (тугмаи арвоҳии "Вуруд" + тугмаи пуркардашудаи "Бақайдгирӣ") дар тарафи рост - бе менюи собит ё мега-меню. Тарҳбандии панели идоракунии равзанаи асосӣ тарҳбандии классикии дусутуни барномаро нишон медиҳад: панели паҳлӯии собит (монанд ба 240 пиксел) + майдони мундариҷа, ки зичии маълумоти маҳсулотро барои меҳмонон пеш аз оғози ҳаракат муайян мекунад.
Тасвирҳо ба маҳсулот нигаронида шудаанд, на ба тарзи зиндагӣ. Экрани асосӣ дар маркази скриншоти калони панели идоракунӣ ҷойгир аст, ки макети маҳсулоти воқеиро бо навигатсия дар панели паҳлӯӣ, ҷадвали додаҳо ва унсурҳои шинокунандаи UI, ки ҳамчун панели ҳамвор дар болои рони сафед ҷойгир шудаанд, нишон медиҳад. Логотипҳои муштариён дар шабакаи хокистарранги носершуда (beehiv, superpower, Chatbase ва ғайра) барои эътироф кардани самаранокии онҳо дар шабакаҳои иҷтимоӣ нишон дода мешаванд, ки рангашонро тоза мекунанд, то ки лаҳҷаи ягонаи кабуди саҳифа бартарӣ дошта бошад. Кортҳои шарики шинокунанда (профилҳои хурд ва сафолҳо бо маълумоти даромад/пардохт) дар атрофи блокҳои матни таҳрирӣ дар поён ҳаракат мекунанд ва эҳсоси амиқиро бидуни истифодаи сояҳо дар худи матн эҷод мекунанд. Нақши заминаи шабакаи нуқтадор як хусусияти имзоӣ аст: як қатори тунуки нуқтаҳои хурд бо шаффофияти хеле паст матн ва эҳсоси системаи тарроҳӣ/сатҳи расмкаширо эҷод мекунад ва мавқеи сайтро ҳамчун "платформаи муосири истиноди пайванд" таъкид мекунад. Иконография минималистӣ буда, контурҳо ва пуркуниҳо дорад ва барои барчаспҳои хусусиятҳо аз палитраи лаҳҷа (норанҷи мандарин, арғувони лаванда, сабзи наъно) истифода мебарад. Ҳеҷ гуна аксҳо, тасвирҳо ё моделҳои сеченака истифода намешаванд - худи интерфейси корбарии маҳсулот забони визуалӣ аст.
Палитра
Бренд
- Electric Blue
#2563eb— Ранги асосии бренд — логотип, истинодҳо, нишондиҳандаҳои асосии фаъолият, ҳолатҳои фаъол ва таъкидҳои нишонаҳо — истифода мешавад. Кабуди бой дар заминаи сафед ягона ҷозибаи визуалии системаро эҷод мекунад. - Deep Sapphire
#1e40af— Заминаи асосии тугмаи амал, пуркунии ғафси даъват ба амал — ягона ранге, ки амалро ифода мекунад — барои ҷалби таваҷҷӯҳ кам истифода мешавад.
Бетараф
- Canvas White
#ffffff— Заминаи саҳифа, сатҳи корт, панелҳои поп-ап асоси мутлақи ҳар як экран мебошанд. - Paper Mist
#f5f5f5— Тағйироти ночизи ранги hover барои кортҳои дохилӣ, панелҳои иловагӣ ва пуркунӣ. - Ash
#e5e5e5— Канорҳои тунуки кортҳо, пайвасткунакҳои вурудӣ ва тақсимкунандагон хатти сохторӣ мебошанд, ки системаро якҷоя нигоҳ медорад. - Smoke
#d4d4d4— Сарҳадҳои тезтар барои контейнерҳои интихобшуда ва контурҳои иловагии тугмаҳо. - Pebble
#c8c8c8— Марзҳо, контурҳои идоракунӣ ва тақсимкунандагони сохторӣ бо контрасти миёна. Ин ранг набояд ҳамчун ранги асосӣ барои даъватҳо ба амал истифода шавад. - Midnight Ink
#0a0a0a— Матни асосии тугмаҳо, тугмаҳои равшаншуда ва матни навигатсия барои контрасти ҳадди аксар қариб сиёҳ мебошанд.
Типография
аз 11 то 48 пиксел · 9 қадам
- Satoshi — ивазкунӣ: Inter (weight 500 · контурҳо 500 · Сарлавҳаҳои намоишӣ – танҳо дар сатрҳои 36–48 пиксел барои сарлавҳаҳо ва унвонҳои бахшҳо истифода мешаванд. Вазни шрифт – 500 (миёна, на ғафс): Сарлавҳаҳо боэътимод ва муосир ба назар мерасанд, аммо ҳеҷ гоҳ аз ҳад зиёд қавӣ нестанд. Таносубҳои геометрии Сатоши ба шрифт эҳсоси каме таҳрирӣ ва муосир медиҳанд, ки матни асосии Интер онро такрор карда наметавонад.
- Inter — ивазкунӣ: Inter (native) · контурҳо 400, 500, 600 · Нусхаи матн, тамғаҳои UI, навигатсия, зерсарлавҳаҳо ва сарлавҳаҳои дуюмдараҷа. Inter асбоби асосии корӣ буда, ҳама чизро аз микро-тамғаҳои 11px то сарлавҳаҳои дуюмдараҷаи 30px коркард мекунад. Вазни 400 барои нусхаи матн пешфарз аст, 500 барои унсурҳои равшаншуда ва тамғаҳои тугмаҳо ва 600 барои тамғаҳои муҳими UI нигоҳ дошта мешавад. 16px бо баландии сатри 1.5 андозаи якқадамтарин аст (1220 такрор), ки тасдиқ мекунад, ки 16px андозаи нусхаи матни канонӣ аст.
- Geist Mono — ивазкунӣ: JetBrains Mono or IBM Plex Mono · контурҳо 400, 500 · Порчаҳои код, метамаълумоти техникӣ ва токенҳои якфосилавии дарунсохт дар блокҳои код бо андозаи 12-14 пиксел ва дар унсурҳои калони намоиши код бо андозаи 24 пиксел истифода мешаванд. Ин эътимоднокии абзори таҳиягарро, ки бо мавқеи маҳсулоти Dub мувофиқ аст, таъмин мекунад.
Фосилаҳо ва шакл
| Мақсад | Маънӣ |
|---|---|
| Зичӣ | миёна |
| Қадами асосӣ | 8px |
| Радиуси тугма | 8px |
| Радиуси корт | 12px |
| Сояҳо | бе марзҳо ба ҷои сояҳо |
| Байни бахшҳо | 64px |
| Паҳнои саҳифа | 1200px |
Соҳиби зеҳни сунъӣ вебсайти шуморо бо услуби Dub месозад ва онро пур мекунад
- Тавассути истинод - Instagram, TikTok, Facebook, маҳсулот ва паёмҳоро пур кунед.
- Мундариҷаро аз сомонаи кӯҳнаи худ интиқол диҳед — танҳо суроғаро муайян кунед.
- Тарроҳии муосир дар беҳтарин муҳаррик: React ( Next.js) бо рендеринги сервер ва беҳсозии SEO аз қуттӣ.
- Беҳсозии пурра автоматии SEO барои натиҷаҳои ҷустуҷӯ ва тавсияҳои шабакаи асаб.
Услубҳои монанд
- ElevenLabs — Эссеи аксӣ бо рангҳои гарми қаймоқӣ бо сарлавҳаҳои нозук. Дафтарчаи услуби Баухаус — коғази ранги пӯсти тухм, ранги сиёҳ ва як лаки арғувонӣ ва норанҷӣ барои намоиши маҳсулот.
- Awesomic — Тӯри руҳии таҳрирӣ бо аломатҳои пунктуатсионӣ, ки конфеттиро ба хотир меорад
- Monad — маҷаллаи таҳририяи техникӣ дар бораи пергаменти гарм
- Seline Analytics — Мизи таҳлилии ором дар рӯи коғази гарм
- Notion — Дафтари коғазии гарм дар офтоби нисфирӯзӣ
- Anthropic — Маҷаллаи илмӣ-саҳроӣ дар бораи пергаменти гарм — сатҳҳои ороми устухонӣ, сарлавҳаҳои таҳририи серифӣ ва лакнети ягонаи гилӣ, ки танҳо вақте пайдо мешавад, ки амал лозим бошад.
- Calendly — Сиёҳи кабуди тира дар мармари хунук
- Augen Pro — Ранги сафеди Apple дорои ранги кабуди барқии клиникӣ, бевазн ва ягона лаҳҷа дар фазои монохром мебошад.
- Antimetal — Як солномаи таҳририя бо коғази қаймоқӣ - як субҳи ором дар маҷаллаи илмӣ, ки дар он худдорӣ эътимодро ифода мекунад ва ҳарфҳои серифӣ кори вазнинро анҷом медиҳанд.
- Perk — Лаймҳои барқӣ дар коғази гарми пергаментӣ
- Ditto — Коргоҳи офтобӣ барои сохтани намунаҳои гулҳои ваҳшӣ. Сатҳҳои гарми қаймоқӣ, ранги асосии зардранги дурахшон, рангҳои кабуди тираи баҳрӣ, шаклҳои ранги органикӣ, ки дар паси асар шукуфтаанд.
- Officevibe — Маҷаллаи таҳририя дар коғази гарми қаймоқранг. Тасаввур кунед, ки як эссеи пурмазмун дар бораи идоракунии захираҳои инсонӣ, ки ҳамчун маҳсулот пешниҳод шудааст - шрифти серифи курсив, ки тавассути интерфейси муосири кабуди осмонӣ пичиррос мезанад.