Как создать дизайн книги для мобильного устройства в 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!
Ваша, Алена Соснина
