Как создать дизайн книги для мобильного устройства в 5 шагов

Итак, представим, что у вас уже есть идея книги и вы представляете себе, что будет внутри. Вы уже посмотрели примеры других мобильных изданий и потратили вечер на просмотр behance.net, bookcoverarchive.com, awwwards.com и других модных ресурсов. И вообще, вы уже знаете, что ваша книга, ну, скажем, «Тайм-менеджмент для чайников», будет стилизована под работы Энди Уорхолла.

(Кстати, если вы еще не сформировали концепцию вашего будущего издания, для вас будет полезна вот эта наша статья. )

Что же дальше?

Шаг 1. Определитесь, какие типы страниц будут в вашей книге.

Определенно, у вас будет обложка. Что еще?

Если ваша книга делится на главы, у каждой главы может быть обложка. Если на части ваших страниц расположены интерактивные элементы, будет разумно выделить такие типы страниц как «страница с интерактивным элементом», «страница с текстом», «страница с текстом и картинкой». Не забудьте включить в вашу книгу страницу с информацией о создателях книги и оглавление, если у вас предполагаются главы.

Например, в нашей книге "Чапаев и Пустота" были:

• Страница с текстом и картинкой.
• Страница с интерактивным элементом.
• Страница с фотографиями, которые лежат на странице.
• Обложка главы.
• Оглавление.
• Страница Авторы.

Остальные страницы книги можно увидеть здесь

Шаг 2. Создайте первый пробный макет

При работе над макетом нужно помнить о специфике отображения на мобильных устройствах.

Существует множество мобильных устройств с разными разрешениями и диагоналями экрана. При верстке проще всего ориентироваться на самое распространенное разрешение. Например, при создании книги для планшета разумнее всего ориентироваться на iPad с дисплеем ретина, т.е., размер страницы должен быть 1536х2048 px (для портретной ориентации), а разрешение макета — 72 px/inch.

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

Шаг 3. Подберите шрифт.

При подборе шрифта помните, что шрифт является интеллектуальной собственностью его создателя и охраняется авторским правом. Поэтому мы рекомендуем пользоваться «свободными шрифтами» — Google Fonts, имеющими раскладку Cyrillic Extended, или шрифтами с ресурса fontsquirrel.com.

Очень важно, чтобы шрифт хорошо читался на экране. Для этого лучше выбирать шрифты без засечек и использовать кегль не меньше 44px (для детских книг он должен быть больше!) и межстрочный интервал не менее 61,6.

Шаг 4. Создайте несколько вариантов оформления.

Всегда стоит оставлять себе пространство для маневра. Если вы не ограничены в выборе средств и методов, попробуйте создать 2-3 варианта одной и той же страницы, или всего сета страниц. Покажите их нескольким незаинтересованным людям. Отложите их ненадолго и вернитесь к ним через пару дней. Свежий взгляд может дать вам очень многое.

Наша команда создала несколько вариантов брендбуков при работе с Великим Гэтсби.

Так могла выглядеть наша книга. Этот вариант был отвергнут из-за слишком «детского» стиля иллюстрации.

Шаг 5. Протестируйте макет на мобильном устройстве и внесите правки.

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

Вы можете захотеть изменить размер макета, чтобы он хорошо смотрелся на устройствах Android с соотношением сторон 9×16. В таких случаях мы рекомендуем добавить с краев макета «безопасные зоны», в которых можно разместить фоновую графику.

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

Stay tuned!

Ваша, Алена Соснина