Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Сервис для создания интерактивных изданий
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
30
Битрикс24

Битрикс24

www.bitrix24.ru

22
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

11
myPreza

myPreza

mypreza.ru

9
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

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

2 138 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Пару лет назад издатели и авторы совершенно не понимали, чем дизайн книги для смартфона или планшета отличается от печатного дизайна. Сейчас «адаптация под мобильное устройство» — модное словосочетание, которым можно блеснуть на любой тусовке. И что же оно означает? Как правильно создать дизайн книги под мобильное устройство?

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

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

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

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

page-turn.jpg

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

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

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

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

9%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0_133.jpg

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

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

foilpainting-2.jpg

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

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

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

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

55.jpg

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

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

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

milk-was-a-bad-choice.png

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

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

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

wuZKIuDq_80.jpg

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

Erin-Silver-Has-A-T-Mobile-Dell-Streak-7

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

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

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

Stay tuned!

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

+5
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать