Эл. книга «Управление и лидерство»
Автор телеграм-канала «Чужими руками» на 12.3к подписчиков захотела выпустить сборник избранных публикаций с комментариями читателей в виде бесплатной электронной книги с иллюстрациями.
Что сделал
Запустил сайт. Открыть
Сверстал книгу с иллюстрациями. Читать
Оформил 11 постов в Телеграм. Смотреть пример
Сделал стикерпак, но ещё не загрузил все стикеры. Установить
Запрос и решение
Клиентка пришла с конкретным запросом — pdf-книга. Я предложил сделать сайт, чтобы не ограничиваться статичностью документа, и иметь возможность реализовать интерактивный функционал. Например, тесты и тренажёры по теме управления.
Опросил потенциальных пользователей и узнал о запросе читать контент офлайн, например, в дороге. Ещё раз подумали с автором, какой хотим результат, и решили сделать и сайт, и pdf-версию.
Второй запрос клиентки — проиллюстрировать будущую книгу. А иллюстрации использовать ещё и в оформлении постов на канале.
Результат
Иллюстрации. Попробовал разные стили: и растр, и вектор. Каждый вариант обсуждали с клиентом и совместно проводили опросы на фокус-группах. Через шесть итераций получили вот такой стиль. Клиентка уже на этом этапе была в восторге.
Я подготовил серию карточек, чтобы сразу протестировать визуальный стиль на широкую аудиторию и органичность в контексте канала.
Подписчикам, клиентке и даже мне всё понравилось. Дальше занялся оптимизацией создания таких картинок, так как каждую рисовать вручную слишком времязатратно, а значит дорого.
Я разработал конструктор иллюстраций, в который нарисовал первый набор элементов для генерации персонажей.
100+
уникальных
элементов
6 млн.
возможных
комбинаций
72
иллюстрации
для книги
Когда для иллюстрации нужен был новый элемент, сначала я рисовал и добавлял его в конструктор, а потом в новую иллюстрацию.
Сначала уходило много времени на рисование новых элементов, в то же время чем больше их рисовал, тем проще, быстрее и дешевле становилось создание иллюстраций. Вот некоторые из них.
Проблемы вёрстки
Первая проблема, которую предстояло решить — перенос контента между страницами, когда приходится разрывать текст и текст или текст и иллюстрацию, связанные смыслом. Как минимизировать пробелы внутри смысловой единицы.
Как и с картинками, экспериментировал с форматами, пропорциями, количеством колонок и опрашивал фокус-группы. На четвёртую итерацию решил, что незачем имитировать страницы. Незачем разрывать контент, если его можно не разрывать.
В финальном варианте высота страницы определяется объемом контента. Одна публикация в канале равняется одной странице в книге.
Думал сверстать всё вообще одним полотном, но тогда мы лишаемся внутренней навигации в pdf по страницам.
Второй проблемой стала адаптивность документа. Если верстать для десктопа, то на мобильных всё слишком мелко. А если в первую очередь оптимизировать размеры для мобильных, то на широких экранах слишком крупно.
На мгновение я подумал сделать отдельные версии для скачивания. А в итоге решил отказаться от десктопа. Провёл опросы — 92% респондентов читают электронные книги преимущественно на мобильных или читалках. А ещё подогонять масштаб на десктопе намного проще, чем на мобильном. Например, вот так:
Форматирование
Исходные тексты были написаны грамотно и интересно, поэтому редактура здесь оформительская, а не содержательная. Кратко расскажу, что сделал:
1. Убрал заголовки третьего уровня, совместив их с текстом. Они сильно растягивали длину страницы и рябили в глазах.
2. Убрал скобки, сделав текст светло-серым.
3. Кавычки заменил на курсив.
Интерактивность в PDF
Интерактивностью я называю гиперссылки, которые работают внутри документа. Благодаря им я реализовал:
1. Сноски — порядковый номер публикации в телеграм-канале. В сноске название, ссылка на пост в телеграме и номер страницы, если пост тоже попал в этот сборник.
2. Кнопки на комментарии к публикации в телеграме.
3. Полезные ссылки в заключении книги.
Можно было и в pdf-формате оставить гиперссылки сразу в тексте, но тогда пользователь не понимал бы заранее, куда он переходит, терял место и контекст, где был до перехода, а ещё ссылки среди текста неудобно искать.
Финальный результат
Скачайте и посмотрите полную версию книги, она бесплатна. А тут я покажу картинки.
Сайт
Для сайта были три разных концепции, выбрали минимализм и лаконичность.
На момент запуска сайт дублирует контент из книги, но с одной классной фичей — псевдообъёмными иллюстрациями с параллаксом.
Когда сайт станет самостоятельным продуктом со своими фичами — напишу о нём отдельный кейс.
Это всё, спасибо, что прочитали
Путь к финальному результату и промежуточные варианты можно посмотреть в архиве [в разработке, обещаю опубликовать в начале 2023 года]