ThoughtLab
Абсідыянавы манумент з барвовым сігналам. Палатно з чорнага пустэчы, дзе адзіны насычаны чырвоны аб'ект у саборы, надрукаваным буйнымі белымі літарамі, - гэта адзіная храматычная фігура.
ThoughtLab працуе як мова дызайну чорнага сабора: чыстае чорнае палатно, адно чырвонае імпульс і настолькі буйная друкарня, што яна выконвае функцыю архітэктуры. Сістэма амаль цалкам ахраматычна — #cccccc адказвае за асноўную частку, #ffffff — за адлюстраванне, пры гэтым #fc1c46 з'яўляецца толькі пры адзіным асноўным дзеянні ў выглядзе кантраляванага скоку напругі на фоне пустэчы. Іерархія будуецца за кошт рэзкіх скокаў маштабу (198px → 14px), а не за кошт колеру, ценяў ці залівак. Кампаненты бязважкія: празрыстыя карткі, кнопкі-таблеткі, тонкія палі ўводу, адсутнасць стэка узвышэнняў - старонка дыхае за кошт негатыўнай прасторы і шчыльна размешчанага верхняга рэгістра, а не за кошт кантэйнераў.
Цёмнае палатно, якое займае ўсю шырыню старонкі, з шырокімі гарызантальнымі палямі (126px з кожнага боку, што ссоўвае калонку з кантэнтам прыкладна да 1400px). Загаловак уяўляе сабой адзін радок 72px: лагатып злева, слоган па цэнтры, кнопка закліку да дзеяння ў выглядзе таблеткі і гамбургер справа. Герой уяўляе сабой падзеленую кампазіцыю - павялічаны загаловак 198px загалоўнымі літарамі злева з падтрымным асноўным тэкстам 18px ніжэй, а 3D-сфера перакрывае тэкст справа ад цэнтра, часткова «з'ядаючы» яго. Пад героем раздзелы размешчаны ў прасторным вертыкальным рытме з прамежкамі 86-108px паміж імі. Элементы працы адлюстроўваюцца ў выглядзе спісу, які займае амаль усю шырыню старонкі, а не ў выглядзе сеткі картак. Няма бакавой панэлі, няма мега-меню, няма ніжняга калантытула з сеткай з калонак - ніжні калантытул ўяўляе сабой адзін ціхі радок з інфармацыяй аб аўтарскіх правах і кантактнымі дадзенымі #4c4c4c. Навігацыя за межы загалоўка запускаецца гамбургерам у поўнаэкраннае накладанне.
Выявы нешматлікія і наўмысна падабраны. Дамінантным візуальным элементам з'яўляецца вялікая сфера з абсідыянавай вадкасці, створаная з дапамогай WebGL - цёмная, амаль чорная трохмерная форма з ледзь прыкметнымі сінімі і бурштынавымі адлюстраваннямі па краі, якая парыць на чорным фоне і часткова перакрывае загаловак. Яна функцыянуе хутчэй як іканаграфія брэнда, чым як ілюстрацыя. Мініяцюры праектаў адлюстроўваюцца ў выглядзе фатаграфій ці відэаролікаў у вертыкальным спісе, прадстаўленым ад краю да краю без рамкі. Ніякіх фатаграфій у стылі лайфстайл, ніякіх сцёкавых малюнкаў, ніякіх дэкаратыўных градыентаў. Сфера і шрыфт - адзіныя візуальныя элементы на старонцы.
Палітра
Брэнд
- Crimson Signal
#fc1c46— Асноўны акцэнт - адзіны чырвоны элемент; ён прысутнічае на ўкладцы "Кантакты", у лагатыпе брэнда і больш нідзе. Яго рэдкасць абумоўлена асаблівасцямі дызайну.
Нейтральныя
- Void
#000000— Фон старонкі, палатно - абсалютная аснова, на якой параць усе астатнія элементы. - Ash
#cccccc— Асноўны тэкст і тэкст спасылак, тон тэксту па змаўчанні на чорным палатне - абраны замест чыста белага, каб змякчыць аптычныя блікі. - Frost
#ffffff— Адлюстраванне загалоўкаў, тэксту кнопак, тэксту палёў уводу і разметкі - самы яркі ўзровень, прызначаны для кантэнту, які павінен быць лінейным. - Graphite
#4c4c4c— Аўтарскія правы, метатэгі, дапаможны тэкст - наўмысна прыглушаны, каб не канкураваць з асноўным тэкстам.
Друкарня
ад 10 да 198px · 7 прыступак
- sui — замена: Space Grotesk (closest free geometric match) or Inter for a more neutral alternative. Neue Haas Grotesk Display if licensed. · напісання 300, 400, 500, 700 · Адзіны шрыфт. Sui - гэта спецыяльна распрацаваны геаметрычны шрыфт без засечак, які выкарыстоўваецца для ўсяго, ад 198px для загалоўкаў да 10px для подпісаў. Таўшчыня 700 зарэзерваваная для манументальных загалоўкаў і буйных назваў; таўшчыня 400 выкарыстоўваецца для астатняй часткі сістэмы. Кантраст паміж тоўстым і звычайным шрыфтам - гэта асноўная сістэма шрыфтоў, другое сямейства не патрабуецца.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 9px |
| Радыус кнопак | 9999px |
| Радыус картак | 0px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 86-108px |
| Шырыня старонкі | 1400px |
ІІ збярэ ваш сайт у стылі ThoughtLab і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Vivid+Co — прызматычнае святло скрозь абсідыян
- Sequel — Прыватны паказ пасля наступлення цемры - адзіная цёплая лямпа ў астатнім неасветленым кінатэатры.
- Dovetail — Схема чарцяжа пад чорным месяцам - ледзь прыкметныя лініі графіка, белы шрыфт, адна фіялетавая іскра
- MekaVerse — Манахромная галерэя лічбавых артэфактаў — суцэльная чорная пустата, дзе адмаляваны свет вісіць, нібы музейны экспанат, а ўвесь карыстацкі інтэрфейс — гэта белыя чарнілы на матавым чорным шкле.
- Krea — галерэя нуар апоўначы
- Factory — Тэрмінал «ваенны пакой» апоўначы. «Завод» - гэта строгая чорная панэль кіравання, дзе адзіная белая карта прызямляецца, нібы асветлены ліхтарыкам данясенне - адзіны аб'ект у пакоі - гэта сама праца
- basement — Пустая друкарня ў 3 гадзіны ночы - велізарныя, сціснутыя шрыфты, якія расцякаюцца па апраметнай цемры, адзін пробліск аранжавага святла на навігацыйнай панэлі, усё астатняе белае або прывідна-шэрае
- Stink Studios — Кінастудыя апоўначы - праектар гудзе, у пакоі цёмна, свеціцца толькі кінастужка
- Apple (España) — чорны тэатр са святлівай фурнітурай
- Charlie — Друкарня, высечаная з манастырскага каменя на абсідыяне. Партфоліё, у якім адна чырвоная сцяна стварае аглушальную цішыню
- Rive — Высокадакладнае начное бачанне. Інтэрфейс уяўляе сабою адмысловую лінзу, якая прабіваецца скрозь цемру, каб з абсалютнай выразнасцю сфакусавацца на тэхнічных дэталях
- Datalands — Чорны сабор з адзіным неонавым пульсам. Лагатып запаўняе нава; усё астатняе - гэта ледзь чутны тэкст пад ім