Dub
Линкова контролна табла од мат пиринчаног папира
Дубов визуелни систем има уздржану, готово уредничку SaaS естетику: скоро бело платно које држе заједно танке ивице, а не истурени елементи, са густом монохроматском типографијом која пружа структурну подршку и једном јарко плавом бојом (#2563eb) која оставља утисак. Површине на први поглед остају равне и без оквира, али сваки контејнер има маргину од 1px #e5e5e5, евоцирајући осећај штампаног документа. Личност се постиже малим скупом обојених „пилула“ акцената (наранџаста, зелена, љубичаста) који лебде изнад неутралне палете и заглављима која делују самоуверено и модерно, а да притом нису блистава. Компоненте су компактне и густе: олуци од 8px, радијус картице од 12px, етикете у облику пилуле на 9999px и невидљиве контроле уместо тешких, испуњених дугмади.
Страница је изграђена на центрираном распореду са максималном ширином од приближно 1200 пиксела. Главни елемент је центрирани текстуални блок са три плутајућа елемента (Партнерски програми, Аналитика конверзије, Кратки линкови) постављена хоризонтално изнад великог распореда производа. Одељци су распоређени вертикално са конзистентним оквирима од 64 пиксела, наизменично између белог платна и папирне измаглице #f5f5f5 за тонално раздвајање. Доњи одељак користи распоред у облику слова Z: уреднички текст је центриран у средњој трећини, а плутајуће картице корисничког интерфејса су усидрене на левој и десној маргини, стварајући асиметрични ритам, сличан часопису. Облак логотипа је једноставна мрежа 5x2, центрирана на страници. Навигација је минималистичка горња трака - лого са леве стране, навигација у центру, група од два дугмета (дугме „Пријава“ + попуњено дугме „Регистрација“) са десне стране - без фиксног или мега-менија. Распоред контролне табле главног прозора приказује класичан распоред апликације са две колоне: фиксна бочна трака (слична 240px) + област садржаја која дефинише густину информација о производу за посетиоце пре него што почну да скролују.
Визуелни елементи су фокусирани на производ, а не на начин живота. Главни екран је центриран на великом снимку екрана контролне табле, који представља макет производа из стварног света са бочном траком за навигацију, табелом података и плутајућим елементима корисничког интерфејса, постављеним као равна плоча на белом платну. Логотипи клијената су приказани у мрежи са незасићеним сивим тоновима (кошница, суперсила, Chatbase, итд.) како би се признао њихов учинак на друштвеним мрежама, без боје како би се омогућило да једини плави акценат странице остане доминантан. Плутајуће картице партнера (мали профили и плочице са подацима о приходима/плаћањима) крећу се око блокова уредничког текста на дну, стварајући осећај дубине без употребе сенки на самом тексту. Узорак тачкасте мреже у позадини је карактеристична карактеристика: танак ред малих тачака са веома ниском непрозирношћу ствара текстуру и осећај дизајнерског система/површине за цртање, наглашавајући позиционирање сајта као „модерне платформе за атрибуцију линкова“. Иконографија је минимална, са обрисима и испунама, и користи палету акцента (наранџаста, љубичаста лаванда, зелена нана) за ознаке функција. Не користе се фотографије, илустрације или 3Д модели — сам кориснички интерфејс производа је визуелни језик.
Палета
Brend
- 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 (native) · обриси 400, 500, 600 · Текст садржаја, ознаке корисничког интерфејса, навигација, поднаслови и споредни наслови. Inter је главни радни коњ, који обрађује све, од микро-ознака од 11px до секундарних наслова од 30px. Тежина од 400 је подразумевана вредност за текст садржаја, 500 за истакнуте елементе и ознаке дугмади, а 600 је резервисано за важне ознаке корисничког интерфејса. 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 — Еплова бела презентација садржи клиничку, бестежинску, електрично плаву боју као једини акценат у монохроматском простору.
- Antimetal — Уредничка хроника на кремастом папиру – тихо јутро у научном часопису, где уздржаност преноси самопоуздање, а серифи обављају тешки посао
- Perk — Електрични лимет на топлом пергамент папиру
- Ditto — Сунцем обасјана радионица у којој се стварају узорци дивљег цвећа. Топле кремасте површине, јарко жута основна боја, дубоко тамноплаве боје, органски облици боја који цветају иза дела.
- Officevibe — Уреднички часопис на топлом кремастом папиру. Замислите промишљен есеј о управљању људским ресурсима, представљен као производ - курзивни серифни фонт који шапуће кроз модерни плави интерфејс.