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

Эбиа

www.ebia.ru

21
YAGLA

YAGLA

yagla.ru

16
Cookiezz

Cookiezz

cookiezz.com.ua

15
Enlite

Enlite

enlited.ru

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

11
Relap

Relap

relap.io

11
Perezvoni.com

Perezvoni.com

perezvoni.com

11
E-Commerce and Venture projects

E-Commerce and Venture projects

Продажа товаров от производителей оптом и в розницу

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

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

2 148 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
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать