Тъмно стъкло и тих лукс

01

Обликът, който вероятно виждате

Ако четете това в основния облик на сайта, гледате тъмно стъкло. Всеки панел е лист матово стъкло, който плува над видео в движение. Фонът е дълбоко тъмносин, почти черен. Заглавията са с Montserrat в най-плътното му начертание, изписани с главни букви; текстът, който четете сега, е от същия шрифт, но в най-лекото. Цветът идва от кадрите зад стъклото, а не от интерфейса.

Правилото, по което работя, е просто: аскетично в покой, щедро в движение. Статичният дизайн се задоволява с почти нищо: бяло, тъмен фон и един акцент. Бюджетът отива в движението: кадрите, преходите, начина, по който един панел се появява, и начина, по който си тръгва.

02

Защо стъкло

Стъклото решава истински проблем. Видео фоновете са красиви — и ужасни за четене. Обичайното решение е тъмна пелена върху цялото видео, за да остане текстът четлив. Работи — и убива видеото.

Матовото стъкло прави обратното. Кадърът остава с пълна сила навсякъде, освен точно зад думите, където се размива в мъгла от собствените си цветове. Панелът сам носи четливостта си, затова сцената никога не трябва да се затъмнява заради него. Пак виждате как облаците се движат, как светлината се променя, как фигурата върви към отворената врата. Само не и зад изречението, което четете.

Освен това стъклото изглежда осезаемо. Добрият стъклен панел има тънък светъл ръб отгоре, като светлина, уловена от фасета, мека сянка отдолу и леко повишена наситеност, така че цветовете зад него да греят, вместо да посивеят. Сбъркате ли едно от трите, стъклото заприличва на сива кутия. Уцелите ли и трите, хората искат да го докоснат.

Тонирането е регулатор, а не фиксирана стойност. Кратките надписи спокойно стоят върху почти прозрачно стъкло. Дългото четене иска повече контраст, затова в този блог стъклото е с нюанс по-тъмно, отколкото на началната страница — колкото да задържи абзаца стабилен над ярко небе, без да скрива видеото. Видеото продължава да се движи зад всяка дума; просто очите ви вече не трябва да се напрягат заради него. Елегантност, която трудно се чете, не е елегантност.

03

Видеото зад стъклото

Стъклото е толкова добро, колкото е онова зад него, затова кадрите се избират толкова внимателно, колкото и шрифтът.

Доброто фоново видео за такъв сайт се движи бавно. Камерата плавно се носи, вместо да реже, така че окото може да си почива върху него. В кадъра има спокойни зони — небе, стена, сенчеста площ, — където стъклените панели могат да стоят, без да се борят с натоварен детайл. Има един доминиращ цвят, който става цвят на целия екран, щом стъклото го поеме. И се върти в цикъл без видим скок, защото видео, което засича на всеки десет секунди, разваля магията по-бързо от който и да е лош шрифт.

Всеки клип има и отделен кадраж за телефони. Вертикално държаният телефон показва само тясна ивица от широкия кадър, затова вместо да изпраща целия кадър и да изхвърля по-голямата част от него, сайтът изпраща само тази ивица, със същата острота. Телефоните изтеглят около наполовина по-малко, а там, където е важно, ивицата може ръчно да се измести от центъра, така че лицето или фигурата да останат в кадър.

Клиповете се сменят заедно със съдържанието. Началната страница минава през тринайсет сцени, всяка със свое видео: лице, разцъфващо в цветя, за началото; врата от светлина за раздела за започването от чист лист; жена, която гледа над облаците към изгряваща планета, за проектите. Този блог се отваря точно с последната. Стори ми се правилно за страница, наречена Какво предстои.

04

Плавността е усещане, не функция

Посетителите рядко казват „кривите на анимацията са прекрасни“. Казват, че сайтът изглежда скъпо. Това усещане се гради от сто малки решения:

• Скролът е изгладен, така че страницата се плъзга, вместо да подскача на стъпки.
• Всяко движение следва една и съща крива: бърз старт и дълго, меко приземяване. Когато всичко забавя по един и същи начин, сайтът се усеща като едно цяло, а не като сбор от ефекти.
• Бутоните се изпълват отляво, когато застанете над тях с мишката — като разливащо се мастило, вместо просто да сменят цвета си.
• Курсорът е малка леща. Над всичко, което може да се кликне, той набъбва и се избистря, а след себе си оставя едва доловими вълнички, като пръст, прокаран по вода.
• Дори логото плува. Полюшва се леко, като нещо на повърхността на езеро, и застива, щом задържите мишката над него.

Нито едно от тези неща не е забележително само по себе си. Заедно създават усещането, че някой се е погрижил за всяка милисекунда — а точно това е посланието, което един премиум бранд иска да изпрати.

05

Шрифт, който шепне, и шрифт, който крещи

Типографията върши много тиха работа. Заглавията са с главни букви, в най-плътното начертание на шрифта и със сбита разредка, така че кратката фраза да прозвучи като заявление. Основният текст е от същия шрифт в най-лекото му начертание, с щедро междуредие, така че дългото четене да е леко, а не тежко.

Между двете стои трети глас: малките надписи. Номерата на разделите, надзаглавията, текстовете под снимките. Те са миниатюрни, с главни букви и много широка разредка, почти като гравюра върху циферблат. Поемат навигацията, без изобщо да искат внимание. „01 — Заданието“ ви казва къде сте; заглавието под него ви казва какво е важно.

Благодарение на тази система от три гласа страницата никога не се нуждае от рамки, иконки или цвят, за да обясни структурата си. Размерът, плътността и разстоянията вършат всичко — и това е голяма част от причината дизайнът да изглежда спокоен.

06

Детайлите, които никой не поръчва

Някои от нещата, които хората запомнят от този сайт, не фигурират в нито едно задание.

В ъгъла има малко радио. Мълчи, докато не го пуснете, а после предава лаундж станция с три настроения по избор: Smooth, Fresh и Deep. Никога не тръгва само, защото звук, който никой не е поискал, е най-бързият начин да изгубиш посетител. Но за човек, който разглежда проектите в някоя тиха вечер, то превръща сайта в място, където да остане няколко минути.

Има бутон за WhatsApp, който отваря малък стъклен панел с вече започнато съобщение: „Здравейте, харесва ми стилът ви, искам да попитам за…“. Първият ред е най-трудната част, когато пишете на някого, затова сайтът го пише вместо вас.

Има бутон за цял екран, защото сайт, изграден около видео, заслужава да бъде гледан без браузъра около него. А на по-дългите страници лентата за превъртане на браузъра е заменена с тънка стъклена капсула, в тон с всичко останало.

Нито едно от тези неща не продава сайт пряко. Всички казват едно и също: някой е мислил как се усеща всичко това в употреба, чак до ъгълчетата. За един премиум бранд именно това е посланието.

07

Показвам, не изброявам

Акцентните проекти на началната страница са в карусел, изграден като пръстен, който се върти около хоризонтална ос. Проектите изплуват отдолу, изправят се, когато застанат срещу вас, и се накланят назад, за да изчезнат отгоре. Всеки пуска кратък клип от истинския сайт, така че виждате работата в движение, а не статична миниатюра.

Тук се крие един чудесен технически детайл. Матовото стъкло размива всичко зад себе си, но в браузъра, в мига, в който даден контейнер се завърти в 3D, стъклото в него може да размива само онова, което е вътре в контейнера. Така картите в карусела размиваха празна кутия и изглеждаха мъртви. Решението: всяка карта стои в клетка, която носи собствено копие на сцената зад нея — точно колкото картата и със същите заоблени ъгли. Никога не го забелязвате. Просто виждате стъкло, което се държи като стъкло.

Ето това имам предвид под човешко докосване. AI написа този код за минути. Да забележиш, че стъклото изглежда мъртво, и да решиш, че това има значение — това е работа на дизайнера.

08

Тих лукс и извън този сайт

Тъмното стъкло е собственият глас на студиото ми. Но принципът зад него — сдържаност, пространство и бавност — минава през голяма част от работата ми за клиенти. Различни палитри, същата дисциплина.

Booking London е консиерж услуга за частни клиенти: събития само с покана, изискани ресторанти, шофьори. Заданието беше дискретност. Палитрата е Лондон нощем — почти черни фонове с един златен акцент и голям серифен шрифт за логото, а основният призив за действие е да поискате покана, а не да купите. Вижте проекта.

Sasiprapa е ексклузивно студио за тайландски масаж в София и сайтът му продава спокойствие. Кремави фонове, злато, курсив за големите послания и движение, което остава бавно и пестеливо. Онова, което сайтът пропуска, е толкова важно, колкото и онова, което показва. Вижте проекта.

The Pilates Club е премиум студио за пилатес на реформър в Бояна. Топли неутрални тонове, нежно пудрено розово и деликатен серифен шрифт, с много въздух около всичко — защото студио, което продава внимание, трябва и само да изглежда внимателно. Вижте проекта.

Radop Furniture продава италиански кухни и мебели по мярка. Дизайнът отстъпва място на фотографията: светли фонове, черно, топъл златист акцент и тънък шрифт с главни букви и широка разредка. Тихо, за да говорят кухните. Вижте проекта.

Solux Auto е премиум автосервиз: черно, бяло и едно сигнално червено, плътен шрифт и черно-бяла фотография. Прецизност, която се вижда. Вижте проекта.

Светло или тъмно, златно или червено — важат все същите няколко правила.

09

Правилата на елегантността

Ако трябваше да ги напиша на картичка и да я забодя над бюрото:

1. Един акцентен цвят. Два, ако се налага. Всичко останало е неутрално, а фотографията носи цвета.
2. Пространството е предимство. Празното място казва на посетителя, че нищо тук не се нуждае отчаяно от внимание.
3. Един шрифт, използван в крайностите си. Много плътен за заглавията, много лек за четене. Контрастът създава йерархия без украса.
4. Движението е бавно и последователно. Една и съща крива, малко по-дълга, отколкото изглежда нужно.
5. Казвайте по-малко. Краткият текст звучи уверено. Дългият списък с функции звучи притеснено.
6. Всеки ефект трябва да заслужи мястото си. Ако забавя страницата или отвлича от предложението, отпада.
7. Телефонът е на първо място — на практика. В този сайт всеки клип има собствен кадраж за телефон, точно ивицата, която вертикалният екран реално показва, така че телефоните изтеглят около наполовина по-малко и нищо важно не остава извън ръба.

10

Сдържаността не е лесна

Ето неудобната истина за минималистичния дизайн: той няма къде да се скрие. Претрупаната композиция може да погребе едно слабо решение под украса. В тихата всяко поле, всяка плътност и всяка дума са на показ.

Затова елегантните сайтове изискват толкова много малки корекции: малко повече въздух тук, по-бавно избледняване там, заглавие, съкратено от осем думи на четири. Работата с AI прави тези корекции бързи, а това значи, че мога да направя повече от тях — и повече корекции е точно това, от което тихият дизайн има нужда. Но преценката кога е готово си остава човешко решение. Обикновено е тогава, когато няма какво повече да се махне.

Минималистичният дизайн няма къде да се скрие. Всяко поле, всяка плътност и всяка дума са на показ.

11

А ето и другата страна

Сдържаността е едната половина от начина ми на работа. Другата нарочно нарушава всички тези правила. Натиснете Пробвай Cyberpunk режим в горната част на която и да е страница и същият този сайт се превръща в неонов HUD — с гличове, дъжд от код и собствен саундтрак. Същото оформление, съвсем различна душа.

И двете са аз. Повечето клиенти имат нужда от тихата страна. Шумната ме поддържа във форма. Писал съм за нея в Cyberpunk режим: анатомия на един творчески изблик.

Ако вашият бранд продава доверие, спокойствие или качество, вероятно ще започнем от тихата страна. Да поговорим.