Една червена линия: как проектирах сайт за финансов анализатор

01

Уморената визия на финансите

Познавате тази визия още преди страницата да се е заредила. Тъмносиньо и злато. Силуетът на град по здрач. Две ръце, които се стискат над бюро. Лента с котировки, която тече в зелено и червено по горния ръб, и лаптоп с графика, която никой не гледа.

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

Климент Робев не продава продукт. Неговата работа е мисленето. Пише анализи за Forbes България, обяснява пазарите в Bloomberg TV Bulgaria, говори за инвестиции в подкаст, изнася лекции и уебинари и пише докторска дисертация за това дали по-добрите инвестиционни резултати могат да се превърнат в по-адекватни пенсии. Собственото му представяне в едно изречение, на първия екран на сайта, го казва простичко: работи в инвестициите, анализира финансовите пазари, споделя знания и се занимава с научни изследвания.

Затова заданието не беше „направи финансов сайт“. Беше: направи сайт, който се усеща като четене на неговите анализи. Във финансите истинският лукс е спокойствието. Всеки може да крещи за доходност. Човекът, на когото поверявате парите си, е онзи, който не бърза.

02

Доклад, не брошура

Идеята, която определи всичко, беше проста: да проектирам сайта като добре направен аналитичен доклад — от онези документи, под които един анализатор с гордост слага името си. Хартия, мастило, номерирани глави, надписи под фигурите и резюме най-отгоре.

Погледнете ли го така, детайлите идват сами. Всеки раздел има номер, от 00 до 06, като главите на доклад. Над заглавията стоят малки надписи с моноширинен шрифт: „Финанси · Инвестиции · Изследвания“. Портретът на първия екран има надпис, като илюстрация в книга: „Климент Робев, София, 2025“. Брояч в ъгъла показва къде се намирате: „Начало 00 / 02“. Картите с темите са номерирани от T.01 до T.09. Графиката в раздела с изследванията е обозначена като „Фиг. 2“.

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

03

Шрифт, който говори български

Заглавията са набрани със Sofia Sans Condensed. Шрифтът е висок и тесен, уверен, без да крещи, и побира дълга дума като „Изследвания“ в голям размер, без да чупи реда. Текстът за четене е в Sofia Sans, от същото семейство. Надписите, датите, числата и показанията са в IBM Plex Mono, който дава на данните собствен глас — гласа на терминал или на бележка под линия.

Тук има един детайл, който повечето посетители никога няма да назоват, но всеки български читател ще усети. Българската кирилица има свои собствени форми на буквите. В българското ръкописно писмо и в съвременната българска типография „л“ прилича по-скоро на гръцка ламбда, „т“ — на латинско „m“, а „в“ има по-кръгла и по-отворена форма. Руските форми, които повечето шрифтове показват по подразбиране, са по-изправени и по-ъгловати.

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

На klimentrobev.com страницата заявява, че е на български, и шрифтът отговаря. Заглавията изглеждат така, както пише българската ръка.

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

04

Една червена линия

Ако сайтът има подпис, това е една-единствена червена линия.

Тя се спуска по левия край на всяка страница. Когато скролирате до нов раздел, линията завива, рамкира го и продължава надолу — като линията на графика, която търси следващата си точка. По нея се плъзга малък червен ромб, а до него стои показание: разделът, в който сте, и каква част от страницата сте прочели, например 02.1 · 12%. Най-долу тънка лента се запълва, докато четете.

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

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

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

05

Часовници, гравюра и пазари

В хедъра върви часовник на живо: София, до секундата. Менюто се отваря като „Индекс“ върху графитен панел, с колони „№ / Раздел / Дълбочина“ — като съдържанието на доклад. По-надолу стои ред със заглавие „Пазари · местно време“ и часовници за София, Франкфурт, Лондон, Ню Йорк и Токио. Същите пет часовника затварят всяка страница във футъра.

Който следи пазарите, живее в няколко часови зони едновременно. Часовниците го казват без нито дума текст.

Зад първия екран има розетка от фини линии — гилош, изрисуван със сиви тънки линии, като гравюрите по банкнотите и акционерните сертификати. Стои там почти като воден знак. Страницата „За мен“ разказва, че кариерата му е започнала с търговия с ценни книжа, и гравюрата е тих поклон към онзи свят.

А после идва пазарният списък — любимият ми детайл в сайта. От време на време по една от линиите на мрежата изплува кратък списък за наблюдение, спуска се малко надолу и се разтваря. Първо клас активи в червено, после инструментите от него, които следи един отдел за частни клиенти. Акции: S&P 500, DAX, FTSE 100, SOFIX. Облигации: 10-годишните американски, германските и британските. Суровини: злато, сребро, Brent.

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

06

Много материал, подреден

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

Сайтът има пет стаи:

• Анализи. Статиите му, всяка със собствена страница. Тя показва датата, изданието, формата и темите, после „Накратко“ — кратко обобщение на статията, „Основни акценти“ в номериран списък и бутон „Прочетете оригинала във Forbes България“.
• Медии. Четири чекмеджета: „Статии“, „Телевизия“, „Подкасти“ и „Лекции и събития“. Интервюта в Bloomberg TV Bulgaria, подкастът на ELANA Trading „Пари и посоки“, уебинари, лятно училище по инвестиции и панел на конференция, който той модерира.
• Изследвания. Докторската му работа върху пенсионната система на България, научните му публикации и графиката, към която ще се върна след малко.
• Теми. Девет теми — от „САЩ, Тръмп и пазарите“ до „Пенсии и лични финанси“. Всяка карта показва времева линия от 2024 до 2026 г. с точка за всяка публикация, последните заглавия и броя на материалите в нея. Картите стоят в редица, която се превърта настрани.
• Подход. Как работи с частни клиенти — в пет стъпки.

Две решения тук са по-важни, отколкото изглеждат.

Първото са обобщенията. Сайтът не копира ничия статия. Обобщава я в няколко реда, изброява основните акценти и изпраща читателя към оригинала. Това е честно към издателя, полезно за читателя и дава на всяка статия истинска собствена страница, която търсачките разбират.

Второто е, че един материал може да живее в повече от една тема. Статията му „Президентската волатилност на Доналд Тръмп“ принадлежи и към „САЩ, Тръмп и пазарите“, и към „Пазари, лихви и оценки“, затова се появява и в двете. Читател, който идва с интерес към AI, може да проследи мисълта му за AI от материал на материал, без да е нужно да знае къде се е появил всеки от тях за първи път.

07

Графика, която казва истината

В раздела „Изследвания“ има само една графика — и тя е най-честната, която познавам.

Това е ветрилообразна графика на сценарии за дългосрочно спестяване в рамките на 40 години. Една линия показва медианата. Около нея по-тъмна лента очертава средния диапазон, в който попадат половината резултати, а по-светла — широкия диапазон, който обхваща 80 процента от тях. Колкото по-далеч в бъдещето гледате, толкова по-широко се разтваря ветрилото.

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

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

Страницата „Подход“ следва същия дух. Пет стъпки — от първия разговор до редовния преглед: „Разговор“, „Профил и анализ“, „Стратегия“, „Изпълнение“, „Преглед“. Без обещания за доходност, без таймери с обратно броене, без „запишете безплатна консултация сега“. Само как се върши работата.

08

Два езика, един глас

Сайтът е на български и английски, с превключвател в хедъра, а всяка страница съществува и на двата езика.

Интересното е в заглавията. Статиите и епизодите му са публикувани на български, затова английската версия запазва оригиналното българско заглавие и добавя под него ред на английски. Читателят вижда „Президентската волатилност на Доналд Тръмп“, а отдолу — „Donald Trump's presidential volatility“. Така англоезичният читател знае точно за какво е материалът, а сайтът не се преструва, че Forbes България го е публикувал на английски.

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

09

Бисквитки на борсата

Всеки сайт трябва да попита за бисквитките, а почти никой не чете въпроса. В повечето сайтове това е най-досадният момент от посещението.

Тук банерът е пазарна поръчка. Панелът е озаглавен „Пазарна поръчка · Бисквитки“ и носи номер „№ 001“. Под заглавието, като редовете на бланка за поръчка: „Инструмент: Бисквитки“, „Статистика: По избор“, „Видеа от YouTube: По избор“, „Реклама: Няма“. После два бутона: „Купи — Приемам всички“ и „Продай — Само необходимите“.

Шегата работи, защото не крие нищо. Едно ясно изречение обяснява точно какво прави всеки избор: „Купи“ разрешава статистика на посещенията чрез Google Analytics и вградени видеа от YouTube, а „Продай“ запазва само необходимите, така че статистика няма, а видеата се отварят направо в YouTube. И двата избора са с един клик. Остроумието е в рамката, никога в дребния шрифт.

Това е границата, която се опитвам да пазя във всеки сайт с чувство за хумор. Играйте си с формата колкото искате. С фактите — никога.

10

Тихото е по-трудно

Ако сте чели статиите за Cyberpunk режима или за SiteFX, знаете, че обичам шумната страна на уеба. Този проект е обратното, а тихото е по-трудно.

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

Сайтът е кодиран с AI, с човешко докосване и човешки дизайн, като всичко, което правя днес. AI написа кода: плавния скрол с Lenis, сцените при скролиране с GSAP и ScrollTrigger, заглавията, разделени на редове, показанието, което знае в кой раздел сте и докъде сте прочели, петте часовника, които държат пет пазара в собственото им време, пазарния списък и редиците с теми, които се превъртат настрани. В работата с AI всичко това се превръща в разговор: аз описвам, той изгражда, тестваме заедно, аз шлифовам.

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

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

11

Какво научих

Няколко урока, които ще запомня:

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

12

Прочетете доклада

Сайтът вече е онлайн на klimentrobev.com, на български и на английски. Скролирайте бавно и следете линията. Пълната видео обиколка можете да видите и в казуса за Климент Робев.

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