RU EN

О сайте · Принципы · Решения

Этот сайт — тоже продукт

На его примере можно оценить как я подхожу к работе


01


02

Ключевой референс

Ключевой референс — Дитер Рамс, главный дизайнер Braun в 1955–1995 годах. К концу карьеры он сформулировал десять принципов хорошего дизайна. Они написаны для индустриальных продуктов, но переводятся на цифровую среду почти без потерь.

  • Innovative. Использовать новые технологические возможности — но в служении функции, не ради новизны.
  • Useful. Дизайн должен подчёркивать пользу и убирать всё, что её ослабляет.
  • Aesthetic. Красота как следствие правильной структуры, а не нанесённое поверх украшение.
  • Understandable. Продукт должен сам объяснять, как им пользоваться. В лучшем случае — самоочевиден.
  • Unobtrusive. Продукты — это инструменты, не художественные объекты. Они не «кричат».
  • Honest. Не делать продукт инновационнее, мощнее или ценнее, чем он есть.
  • Long-lasting. Не привязываться к моде. Не выглядеть «современно сегодня».
  • Thorough down to the last detail. Ничто не должно быть случайным. Уважение к пользователю проявляется в тщательности.
  • Environmentally friendly. Минимизировать ресурсы, минимизировать визуальный шум.
  • As little design as possible. Weniger, aber besser — меньше, но лучше. Не путать с минимализмом как стилем.
03

Использованные решения

Технологии. Сайт собран с использованием Claude, Claude Code и Claude Design. Хостится на Cloudlfare Pages.

Визуальный язык. Бежевая бумажная подложка, чёрные заголовки, моноширинные caps-метки, никакой декорации. Один акцентный цвет, ясная сетка, иерархия через размер и вес.

Типографика. Шрифт IBM Plex — open source, выпущен IBM Design в 2017 году. Здесь сходятся три вещи: наследие IBM как одной из главных школ корпоративного модернизма XX века, открытость лицензии (можно использовать свободно) и одна из лучших в open-source кириллица. Сайт умышленно придерживается терминальной эститики git log, благодаря чему пользователь сразу считывает аналогию с технической документацией. 

Цвет. Оранжевый акцент как индикатор состояния. Та же семантика, что у переключателя mute на iPhone, у #FF6600 Hacker News, у оранжевой кнопки питания на калькуляторе Braun ET33. Линия родословной: индустриальный safety-orange → Braun → tech-стартапы → этот сайт. Оранжевый = attention, utility, state — не «фирменный цвет». Он используется ровно в четырёх местах: главный CTA («Написать в Telegram»), активный язык в переключателе («RU» подчёркнут), индикатор текущего места работы (точка рядом с «Yandex Uzbekistan»), активная тема в дропдауне. Везде — одна семантика: «вот это сейчас активно».

Иерархия CTA. Две кнопки рядом — «Написать в Telegram» и «Чем могу помочь» . Размер одинаковый, цвет разный, иерархия через насыщенность. Если у пользователя одна минута — он жмёт оранжевую. Если десять — белую.

Цифры вместо прилагательных и разбивка цифр. Каждая цифра разворачивается во вторую строку с контекстом. 

Тот же подход в карьере. Не «масштабировал e-grocery», а Заказы: 400 → 10 000 в день за 3 года, Выручка: ×2 год к году при положительной EBITDA, CSAT: 4.2 → 4.5. Не «работал в EdTech», а Активировал 7M+ пользователей. Где нет цифр — там просто По контракту (Apple Russia, 2018–2019). Контрактная работа не имеет 7-летних KPI; натягивать их под формат — нечестно.

В разделе «Своё дело» — статусы без переупаковки: Запустили → не нашли PMF → на паузе, Запустили → стабилизировали → продали сотрудникам, Запустили → выросли до 3-х точек → закрыли. Четыре своих проекта, один продан, остальные — закрылись или на паузе. Это и есть статистика стартапов; имитировать что-то другое — обман читателя.

Двуязычность. RU и EN — две версии, а не перевод. Пример: разделители тысяч учитывают локаль 5 8315,831, 1 1391,139. 82 600 просмотров82,600 views.

Доступность. Сайт снабжён автоматическим переключателем тем, который подстраивается под интерфейс устройства. На выбор представлены три темы: светлая, тёмная и высококонтрастная — для людей со слабым зрением, дислексией, светочувствительностью, а также для чтения на улице под ярким солнцем. Дропдаун с темами открывается одним кликом, а иконка переключения тем меняется в зависимости от состояния — солнце или луна; активная тема подсвечена оранжевой обводкой.

Навигация. При скролле, справа проявляется столбик с номерами разделов: активный выделен, остальные приглушены. Из навигации умышленно убраны подписи и иконки. Стрелка живёт в правом нижнем углу, появляется когда нужно, скроллит без задержки и долгих анимаций.

  • Transparency. Репозиторий открыт, build hash в футере кликабельный на коммит в GitHub. Каждый может увидеть, что и когда менялось. Аффилиатные ссылки на /uses помечены и раскрыты.
  • Humility. Ссылка «Нашли опечатку?» в футере — приглашение к коррекции.
  • Honesty. Статусы «Закрыл / Продал / На паузе» показывают реальный контекст без переупаковки. Цифры подписчиков разложены по платформам, а не свалены в одну. Срок ответа — не «отвечу скоро», а обычно отвечаю в течение 10 рабочих дней.

Процесс работы над этим сайтом идёт по продуктовому циклу.

Судите сами:
- У сайта есть билд (BUILD 3cd8687 в футере кликабельный GitHub)
- Есть бэклог
- Есть релизы
- Есть пользователь
- Есть метрика успеха.

04

05

От чего умышленно отказался

  • Аналитика, cookies, трекеры. Максимальное уважание к приватности и безопасности пользователя. Проверяется через DevTools → Network.
  • Popup-окна, exit-intent, чатботы. Сайт умышленно не кричит, не использует тёмных паттернов и не пытается спровоцировать на действие.
  • "Отзывы клиентов", лого в разделе "с нами работают" и прочие social proof.
  • Видео, анимации, перегруженная графика, эмодзи. Позволяет сэкономить батарею и внимание читателя.
  • Кластер соцсетей. Вы всегда можете поделиться ссылкой, если у вас будет такое желание.
  • Не собираю данные и не навязываю неуправляемую коммуникацию: никаких просьб оставить почту/телефон для рассылок.
  • Рекламных баннеров и прочего маркетингового шума.

Всё это — осознанные решения, чтобы не отвлекать пользователя от контента.

06


07

08

Это живой документ

Сайт обновляется не часто, но регулярно. Если что-то выглядит сломанным, читается странно или просто кажется неточным, пожалуйста, воспользуйтесь кнопкой «Нашли опечатку?» . Репозиторий открыт; если хотите завести issue или PR — добро пожаловать.

s.morgunov.tech