Dub
Linkтин матовый күрүч кагазынан жасалган башкаруу панели
Dub'дун визуалдык системасы токтоо, дээрлик редакциялык SaaS эстетикасына ээ: чыгып турган элементтердин ордуна ичке чек аралар менен бириктирилген дээрлик ак түстөгү полотно, тыгыз монохром типографиясы структуралык колдоону камсыз кылат жана бир гана ачык көк түс (#2563eb) өзгөчөлүк берет. Беттер бир караганда жалпак жана алкаксыз бойдон калат, бирок ар бир контейнерде басылган документтин сезимин ойготкон 1px #e5e5e5 чети бар. Инсандык нейтралдуу палитранын үстүндө калкып жүргөн кичинекей түстүү "таблетка" акценттери (кызгылт сары, жашыл, кызгылт көк) жана жаркыраган эмес, ишенимдүү жана заманбап сезилген колонкалар аркылуу жетишилет. Компоненттер компакттуу жана тыгыз: 8px науалары, 12px карта радиусу, 9999px өлчөмүндөгү таблетка формасындагы этикеткалар жана оор, толтурулган баскычтардын ордуна көрүнбөгөн башкаруу элементтери.
Барак болжол менен 1200 пиксель максималдуу туурасы менен борборлоштурулган макетке негизделген. Негизги элемент - бул чоң продукт макетинин үстүндө горизонталдуу жайгашкан үч калкып жүрүүчү элементи (Өнөктөштүк программалары, Конверсия аналитикасы, Кыска шилтемелер) бар борборлоштурулган текст блогу. Бөлүмдөр ак холст менен #f5f5f5 кагаз туманынын ортосунда кезектешип, ырааттуу 64 пикселдик науачалар менен тигинен жайгаштырылган. Төмөнкү бөлүктө 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 · Негизги текст, UI энбелгилери, навигация, кошумча аталыштар жана кошумча аталыштар. Inter - бул негизги жумушчу ат, ал 11 пикселдик микро энбелгилерден 30 пикселдик кошумча аталыштарга чейин баарын иштетет. Негизги текст үчүн 400 салмак демейки мааниге ээ, белгиленген элементтер жана баскыч энбелгилери үчүн 500 салмакка ээ жана маанилүү UI энбелгилери үчүн 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 башкаруу боюнча ойлуу эссени элестетиңиз.