Superlist
Начны працоўны куток з каралавымі вугольчыкамі - ціхая баклажанавая паверхня прыкладання, дзе адна цёплая аранжавая іскра сігналізуе аб кожным дзеянні
Superlist выкарыстоўвае мову прадуктыўнасці ў паўночна-фіялетавых танах: глыбокі баклажанавы колер, цёплы каралавы ў якасці адзінага асноўнага колеру і буйныя загалоўкі без засечак, якія перадаюць усю атмасферу. Інтэрфейс стварае адчуванне засяроджанай працы познім увечар - ціхі, шматслаёвы і ўпэўнены, дзе колер выкарыстоўваецца толькі ў якасці функцыянальных знакаў прыпынку на закліках да дзеяння, актыўных станах і ключавых момантах. Паверхні накладваюцца сябар на сябра ў ледзь прыкметных цёмных танах з фіялетавым адценнем (#181824 → #26253b), пазбягаючы чыста чорнага колеру, каб глыбіня адчувалася цёплай, а не стэрыльнай. Кампаненты маюць шчодрыя закругленыя формы (20px карткі, кнопкі-таблеткі), мяккія цені і "дыхаюць" праз зручныя прамежкі 10-16px, а не праз шчыльныя сеткі. Голас загалоўка - гэта ўсё: таўшчыня 600 пры 70-88px з шчыльнай міжлітарнай адлегласцю -0.02em разглядае тэкст як друкарскі, а не інтэрфейсны - ён бліжэй да рэдакцыйнага тэксту, чым да SaaS.
Цёмныя часткі, якія займаюць усю шырыню старонкі, з цэнтраванымі кантэйнерамі кантэнту максімальнай шырыні. Галоўная частка размешчаны вертыкальна па цэнтры і ўтрымоўвае загаловак, падтэкст і заклік да дзеяння (CTA), за якім варта вялікі скрыншот прадукта, які перакрывае наступную частку. Наступныя раздзелы чаргуюцца паміж цэнтраванымі тэкставымі блокамі і сеткамі з картак. У раздзеле водгукаў выкарыстоўваецца сетка з 3 калонак з карткамі водгукаў і 16 прамежкамі. Навігацыя ўяўляе сабой адзіную верхнюю панэль з лагатыпам злева, спасылкамі па цэнтры і дзеяннямі аўтарызацыі справа без фіксаванай бакавой панэлі і мега-меню. Прамежкі паміж раздзеламі дастаткова вялікія (16), ствараючы прасторны, рэдакцыйны рытм, а не шчыльную сетку прадуктаў.
Візуальная прастора займаюць скрыншоты прадукта - вялікая рамка з закругленымі кутамі, якая дэманструе рэальны інтэрфейс прыкладання, запаўняе галоўны і другарадны часткі. Фатаграфіі мінімальныя і выкарыстоўваюцца толькі ў якасці аватараў карыстальнікаў або папярэдніх праглядаў медыяфайлаў у дадатку (напрыклад, выява канцэрта на правай панэлі макета прадукта). Лагатыпы на паласе даверу ўяўляюць сабой плоскія тэкставыя знакі прыглушанага белага колеру. Ніякіх дэкаратыўных ілюстрацый, ніякай абстрактнай графікі, ніякіх 3D-рэндэраў. Візуальная стратэгія такая: паказаць прадукт у вялікім маштабе, дазволіць друкарцы выконваць эмацыйную працу, выкарыстоўваць каралавы колер у якасці адзінага каляровага акцэнту.
Палітра
Брэнд
- Coral Ember
#ff4a36— Аранжавы колер выкарыстоўваецца ў якасці дапаможнага акцэнту для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых сігналах. Не варта вылучаць яго як асноўны колер закліку да дзеяння.
Нейтральныя
- Aubergine Canvas
#181824— Фон старонкі, асноўнае палатно — цёплае цёмнае адценне замяняе чыстае чорнае, дзякуючы чаму карыстацкі інтэрфейс выглядае шматслаёвым, а не плоскім. - Elevated Plum
#26253b— Паверхні картак, палі ўводу, навігацыйныя кантэйнеры - на адзін крок лягчэй, чым палатно, для стварэння глыбіні без бачнай мяжы. - Pure White
#ffffff— Асноўныя загалоўкі, тэкст кнопак, абводка абразкоў - максімальны кантраст на цёмным палатне. - Fog Text
#696f81— Асноўны тэкст, другарадныя загалоўкі, прыглушаныя рамкі - кантраснасць 7:1 для камфортнага чытання на фоне баклажанавага колеру. - Ash Text
#8e8da0— Падтрымліваецца нейтральны колер для другарадных элементаў карыстацкага інтэрфейсу, падзельнікаў і прыглушаных подпісаў. Не варта прызначаць яго асноўным колерам для заклікаў да дзеяння. - Mist Highlight
#a3a3a7— Ледзь прыкметныя межы, падзельнікі, неактыўныя элементы навігацыі - ледзь улоўнае нейтральнае адценне, які ўсё яшчэ добра чытаецца на фоне палатна.
Друкарня
ад 12 да 88px · 9 прыступак
- sans-serif — замена: Inter · напісання 400 · sans-serif - выяўлены ў вынятых дадзеных, але не апісаны ІІ.
- Haffer XH SemiBold — замена: Inter Tight · напісання 400, 600 · Асноўны шрыфт для адлюстравання і загалоўкаў. Выкарыстоўваецца ў памеры 70-88px для загалоўкаў-«герояў» з міжлітарнай адлегласцю -0.02em і таўшчынёй 600. Вузкая міжлітарная адлегласць і вялікая вышыня маленькіх літар надаюць загалоўкам рэдакцыйная вага, дзякуючы чаму цёмны інтэрфейс больш нагадвае вокладку часопіса, чым панэль. Заменіце на Inter Tight або General Sans з паўтлустым напісаннем.
- Jersey 10 — замена: Anybody · напісання 400 · Буйны дэкаратыўны шрыфт для акцэнтных лічбаў і вылучэнняў. Выкарыстоўваецца эканомна пры вельмі вялікіх памерах для стварэння друкарскіх акцэнтаў. Можна замяніць шрыфтам Anybody ці Cabinet Grotesk.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 10-16px |
| Радыус кнопак | 100px |
| Радыус картак | 20px |
| Цені | мяккія цені |
| Паміж секцыямі | 80px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Superlist і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- DNA — Паўночная абсерваторыя, выгляд праз лінзу часціц
- Abetterlou — Іскры на сядзельнай скуры - цёплы крэмавы шрыфт, ззяючы на фоне глыбокага кавава-чорнага колеру, з бурштынава-залатымі гузікамі, якія адчуваюцца як распаленыя металічныя дэталі, уціснуты ў старонку
- Galileo-ft — Камандная палуба ў далёкім космасе з сігналамі электрычнага сіняга колеру
- Decide AI — Абсерваторыя апоўначы - сігнал манетнага двара
- Redis Agency — Рэдакцыйная майстэрня, якая працуе ў непрацоўны час, - гэта апраметная цемра, дзе ўсю працу над брэндам выконваюць шрыфты з засечкамі і адна-адзіная чырвоная радыска
- Spellbook — Паўночная зала суда, асветленая каралавымі чарніламі - цёмная рэдакцыйная паверхня, дзе адзіным гукам з'яўляецца цёплы аранжавы почырк пяра
- Linear — інструмент паўночнай дакладнасці
- Origin Financial — Паўночная галерэя ціхага багацця. Ціхі, амаль цёмны пакой, дзе буйныя шрыфты з засечкамі і некалькі святлівых каляровых панэляў ствараюць адчуванне, што фінансавая сфера - гэта старанна адабраны твор мастацтва
- Hyperstudio — Чарцёж выдрапаны на абсідыяне. Тэкст і тонкія лініі апраўляюць белую прастору з чыста чорнага, зрэдку сустракаюцца залатыя пазнакі компаса, якія паказваюць шлях
- Air — скульптура «Паўночнае неба скрозь шкло»
- Raycast — Паўночны камандны цэнтр, каралавы неон
- dope.security — Паўночны тэрмінал з фіялетавымі маякамі