Почему это вообще было сделано
Старый «Бестселлер» жил с нами много лет и честно работал, но накопил всё то, что обычно накапливают долгоживущие сайты: десяток шрифтов, по две-три версии одних и тех же карточек на разных страницах, шапку, которая в личном кабинете выглядела иначе, чем в каталоге, мобильную вёрстку, дописанную сверху, и тёмную тему, которая, скажем мягко, существовала.
Главная проблема была даже не в эстетике. Сайт перестал быть узнаваемым — переходя со страницы автора на страницу книги, а оттуда на статью, вы попадали в три немного разных интерфейса. Это утомляет глаз и мешает читать, а у нас всё-таки сайт про чтение.
Поэтому было приято решение не «подкрашивать», а сделать честный редизайн: пересобрать дизайн-систему с нуля, привести все разделы к одному визуальному языку, наконец-то нормально сделать тёмную тему и заодно убрать накопившийся технический мусор, чтобы дальше развивать сайт было проще.
Что поменялось
Единый язык для всего сайта
Теперь и личный кабинет, и страница книги, и подборка цитат собраны из одних и тех же «кубиков»: одинаковые карточки, одинаковые кнопки, одинаковые отступы, одинаковая типографика. Внешне это менее заметно, чем смена цвета, но именно от этого сайт ощущается «своим».
В качестве акцентного цвета мы ушли от помидорно-кораллового к более тёплому, «медному» оттенку — он спокойнее, лучше читается на длинных текстах и не путается с фирменным цветом одного крупного книжного магазина (вы знаете какого).
Тёмная тема, которая действительно работает
Старая «тёмная тема» была наполовину закрашенной — где-то светлый блок проступал, где-то ссылка становилась нечитаемой. Сейчас вся палитра построена на токенах: каждый цвет (фон, текст, акцент, граница, состояние «опасно») имеет светлую и тёмную пару, и они переключаются вместе. Переключатель темы лежит в шапке, рядом с меню профиля; выбор запоминается и не «моргает» при перезагрузке страницы.
Шрифты — свои, быстрые, читаемые
Раньше браузер тянул шрифты с гугловских серверов — это и приватность сомнительная, и лишняя секунда на загрузку. Теперь Newsreader (для заголовков и длинных текстов) и Manrope (для интерфейса) лежат у нас на сервере, грузятся заранее и не «прыгают» при появлении.
Newsreader — это книжная антиква, специально нарисованная для экрана: с ней статьи и цитаты читаются спокойнее, чем привычным Arial-ом.
Полноценный личный кабинет
Самое крупное изменение, которое многие, кажется, ещё не до конца обнаружили — мы пересобрали личный кабинет.
- Полки: «читаю», «прочитано», «хочу прочитать» — с переключением grid/список, фильтрами, статус-плашками. Видно как свои, так и чужие полки (если человек их не закрыл).
- Сообщения: вместо старой почтовой логики — список контактов с превью последнего сообщения и непрочитанными бейджами, а внутри — нормальная переписка с «пузырями» и автопрокруткой. Можно полностью отключить входящие, если не хочется.
- Активность: лента ваших действий — рецензии, комментарии, цитаты, добавления на полки. Удобно вспомнить, что делал на прошлой неделе.
- Избранное и Творчество (статьи и рассказы) — в единой обвязке, без перепадов оформления.
- Настройки: разнесены по понятным секциям — Профиль / Безопасность / Внешний вид / Чтение / Уведомления / Приватность — а не свалены в одну простыню.
Шапка сайта теперь одинаковая везде: на анонимной странице книги и в вашем личном кабинете нет визуального шва.
Публичные страницы
Перерисованы все:
- Сериалы, книги, авторы, статьи, цитаты — все главные «одиночные» страницы под новый дизайн.
- Каталог авторов, подборки книг, стена цитат, списки рассказов, новости и видео — в едином стиле.
- Топы — витрина рейтингов (NYT, Эксмо и редакционные) и сам чарт с навигацией по выпускам.
- Поиск, FAQ, обратная связь, страницы 404/500 — тоже причёсаны, чтобы из них не выпадать в «другой сайт».
- Комментарии — новые карточки с вложенностью до четырёх уровней, аккуратной «рельсой» ответов и встроенной формой.
- Модалки авторизации, регистрации и сброса пароля — отдельный визуальный язык, на мобиле всплывают «снизу», как нативный bottom-sheet.
Мелочи, которые ощущаются
- Хлебные крошки и «спидбар» теперь часть общей системы, а не отдельный кусок старой вёрстки.
- Картинки авторов и обложки кадрируются корректно — портрет 3:4 не вытягивается и не обрезает голову.
- Партнёрские рекомендации и блок похожих материалов выглядят как часть страницы, а не как баннер.
- Сообщения пишутся быстрее: композер в самой переписке, без переходов на отдельную страницу.
Что не сделали (честно)
Несколько вещей осознано отложены, чтобы не растягивать выкатку:
- Раздел жанров как отдельный хаб — он спроектирован, но ещё не собран; жанры пока живут как теги и в карточках книг.
- Уведомления в шапке — иконку колокольчика временно убрали: пока нет нормального бэка для событий, имитировать его не хочется.
- AMP-версии для некоторых второстепенных страниц подтягиваем в фоне — основные уже синхронизированы.
Куда движемся дальше
Несколько направлений, над которыми работаем прямо сейчас или начнём в ближайшие недели:
- События и уведомления. Главное недостающее звено. Когда автор, на которого вы подписаны, получает новую книгу или статью, когда вам отвечают на комментарий, когда друг добавляет книгу на полку — всё это должно собираться в одну ленту и опционально приходить на почту/в Telegram. Архитектуру под это уже спроектировали.
- Онбординг. Новый пользователь сейчас попадает на чистую главную и сам ищет, с чего начать. Хотим сделать короткий «первый день»: пара вопросов про любимые жанры, подсказка про полки, первая подборка под ваши вкусы.
- Подборки «похожих книг» на странице книги — и ручные редакционные, и собранные через семантический поиск, и пользовательские.
- Раздел литературных премий — отдельный угол сайта с историей премий, лонг-листами, лауреатами и привязкой к страницам книг и авторов.
- Раздел новинок — книги, которые ещё не вышли, с возможностью подписаться на анонс.
- Конкурсы рецензий — формат для тех, кто пишет про книги: тема, голосование, победители.
Это не обещание сделать всё к понедельнику — это карта на ближайшие месяцы. Что-то выйдет раньше, что-то позже; по каждому большому пункту напишу отдельно, когда будет готово.
Спасибо и просьба
Если что-то в новом интерфейсе кажется странным, неудобным или просто сломанным — пожалуйста, напишите через «Обратную связь» или прямо мне в личные сообщения. Особенно полезны замечания про мобильную версию, тёмную тему и читаемость на длинных текстах: я смотрю сайт в основном с десктопа и неизбежно что-то упускаю.
Спасибо, что остаётесь с нами. Дальше — интереснее.
Хотите присоединиться к обсуждению?
Комментировать могут только зарегистрированные пользователи.