Автор телеграм-канала «Чужими руками» на 12.3к подписчиков захотела выпустить сборник избранных публикаций с комментариями читателей в виде бесплатной электронной книги с иллюстрациями.

Клиентка пришла с конкретным запросом — pdf-книга. Я предложил сделать сайт, чтобы не ограничиваться статичностью документа, и иметь возможность реализовать интерактивный функционал. Например, тесты и тренажёры по теме управления.

Опросил потенциальных пользователей и узнал о запросе читать контент офлайн, например, в дороге. Ещё раз подумали с автором, какой хотим результат, и решили сделать и сайт, и pdf-версию.

Второй запрос клиентки — проиллюстрировать будущую книгу. А иллюстрации использовать ещё и в оформлении постов на канале.

Иллюстрации. Попробовал разные стили: и растр, и вектор. Каждый вариант обсуждали с клиентом и совместно проводили опросы на фокус-группах. Через шесть итераций получили вот такой стиль. Клиентка уже на этом этапе была в восторге.

Я подготовил серию карточек, чтобы сразу протестировать визуальный стиль на широкую аудиторию и органичность в контексте канала.

Подписчикам, клиентке и даже мне всё понравилось. Дальше занялся оптимизацией создания таких картинок, так как каждую рисовать вручную слишком времязатратно, а значит дорого.

Я разработал конструктор иллюстраций, в который нарисовал первый набор элементов для генерации персонажей.

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

Сначала уходило много времени на рисование новых элементов, в то же время чем больше их рисовал, тем проще, быстрее и дешевле становилось создание иллюстраций. Вот некоторые из них.

Первая проблема, которую предстояло решить — перенос контента между страницами, когда приходится разрывать текст и текст или текст и иллюстрацию, связанные смыслом. Как минимизировать пробелы внутри смысловой единицы.

Как и с картинками, экспериментировал с форматами, пропорциями, количеством колонок и опрашивал фокус-группы. На четвёртую итерацию решил, что незачем имитировать страницы. Незачем разрывать контент, если его можно не разрывать.

В финальном варианте высота страницы определяется объемом контента. Одна публикация в канале равняется одной странице в книге.

Второй проблемой стала адаптивность документа. Если верстать для десктопа, то на мобильных всё слишком мелко. А если в первую очередь оптимизировать размеры для мобильных, то на широких экранах слишком крупно.

На мгновение я подумал сделать отдельные версии для скачивания. А в итоге решил отказаться от десктопа. Провёл опросы — 92% респондентов читают электронные книги преимущественно на мобильных или читалках. А ещё подогонять масштаб на десктопе намного проще, чем на мобильном. Например, вот так:

Исходные тексты были написаны грамотно и интересно, поэтому редактура здесь оформительская, а не содержательная. Кратко расскажу, что сделал:

Интерактивностью я называю гиперссылки, которые работают внутри документа. Благодаря им я реализовал:

Скачайте и посмотрите полную версию книги, она бесплатна. А тут я покажу картинки.

Для сайта были три разных концепции, выбрали минимализм и лаконичность.

На момент запуска сайт дублирует контент из книги, но с одной классной фичей — псевдообъёмными иллюстрациями с параллаксом.

Когда сайт станет самостоятельным продуктом со своими фичами — напишу о нём отдельный кейс.

Путь к финальному результату и промежуточные варианты можно посмотреть в архиве [в разработке, обещаю опубликовать в начале 2023 года]