Readymag — инструмент для работы с контентом, создания презентаций и анимации

С каждым годом появляется все больше интересных паблишинг платформ, позволяющих создавать полноценные веб-проекты без каких-либо навыков программирования и верстки. От вас лишь требуется умение работать с компьютером и творческий подход. Данные сервисы можно использовать для сайтов разных тематик: от персональных страниц, портфолио, до продающих сайтов. При этом их функциональность также не стоит на месте: добавляются оригинальные инструменты и дизайнерские фишки, улучшается юзабилити. Есть даже сервисы, позволяющие реализовать анимацию на сайте, например, Readymag, о котором сегодня и пойдет речь.

Учитывая то, что анимация и разного рода дизайнерские эффекты для веб-страниц сейчас являются актуальным трендом, думаю, полезно будет познакомиться с подобным сервисом. Разработчики Readymag характеризуют его как дизайн-инструмент для представления контента в сети. В зависимости от имеющихся у вас материалов вы можете создавать:

• лонгриды;
• микросайты и персональные страницы;
• интерактивные онлайн-журналы;
• фотосайты и проекты-портфолио;
• онлайн презентации.

Если просмотреть шаблоны в сервисе, то уклон идет больше на имиджевые эффектные проекты, где обычно используется много качественных фото, нестандартных шрифтов и оригинальной типографики. По формату местами напоминают журналы, отлично подойдут для портфолио в направлениях: дизайн, музыка, искусство, мода, СМИ и т.п. Как бы там ни было, вы ограничены лишь своей фантазией, все остальное для работы предоставит дизайн-инструмент readymag.com. И никакого программирования!

Функции Readymag и пример использования

Управлять элементами в Readymag можно обычным перетаскиванием – drag and drop. Изменение размеров текста или блоков контента, выбор шрифтов, загрузка изображений, добавление видео, — все это делается достаточно легко и быстро. Вот, например, настройка адаптивного дизайна.

Созданная презентация или сайт будут отлично выглядеть на планшетах, смартфонах и корректно работать в современных браузерах.

Проект, созданный на readymag.com полностью соответствует всем требованиям поисковых систем и имеет необходимые функции:

• подключение собственного домена;
• отслеживание статистики через Google Analytics;
• SEO Friendly (добавление заголовка и описания, индексация всех текстов на сайте);
• размещение на собственных серверах сервиса (нет необходимости приобретать хостинг).

Меня лично больше заинтересовали функции, которые я не встречал у других платформ:

• Во-первых, это совместная работа над проектами. Вы можете приглашать других пользователей-коллег для участия в разработке сайта. Допустим, сотрудничаете с фотографом/дизайнером и открываете ему доступ для создания страницы портфолио и т.п.
• Во-вторых, поддержка Retina дисплеев. Кто сталкивался с версткой под ретину, наверняка оценит эту фишку.
• Вы можете встраивать проекты Readymag через Embed-код, например, в другие блоги. Выглядит весьма круто.

Чтобы начать работать в Readymag, нужно выбрать один из имеющихся шаблонов, либо открыть пустую страницу для редактирования. Для создания презентаций есть специальная категория макетов + допускается использование своих наработок.

В некоторые темы включены сразу несколько дизайнов страниц, например, отдельно страница с фотографиями, отдельно с текстами, контактами и т.п. Ненужные вы потом можете удалить. Советую выбирать вариант максимально приближенный к вашим требованиям/задачам, дабы потом меньше пришлось менять.

Интерфейс редактора для отдельной страницы выглядит приблизительно так:

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

В левом нижнем углу находятся основные элементы управления:

• настройки мобильных версий страницы;
• кнопка отмены/повтора действия;
• установка размеров страницы;
• вспомогательные линии: сетки и направляющие;
• работа с фоном (можете ставить картинки и видео);
• созданные элементы (в данном примере это форма, текст и фото).

Для создания нового объекта просто кликаете по иконке «+».

Вариантов добавляемого контента хватает. Кроме обычных картинок, форм и текстов можно вставлять на страницу аудио, слайдшоу, кнопки, карты, виджеты из соц.сетей, а также iframe коды виджетов сторонних сервисов (например, редакторов форм).

Как сделать анимацию в Readymag

Как я уже сказал выше, анимация в веб-проектах (особенно лонгридах) сейчас встречается достаточно часто. Разработчики стараются таким образом выделить определенный контент или просто реализовать эффектную подачу информации. Подобные фишки подойдут как онлайн-журналу, так и креативному дизайнерскому портфолио.

В Readymag анимация появилась относительно недавно. Я бы выделил 3 основных направления для нее:

• При загрузке страницы. Вы можете создавать последовательность всплывающих элементов на странице, будь то эффект плавного появления объекта или увеличение изображения. Такое часто можно увидеть в разных онлайн презентациях.
• При наведении. Отличный пример взаимодействия контента и посетителя — используйте вращающиеся блоки, масштабирование изображений и т.п. Сюда же, в принципе, можно отнести эффекты при клике. Все это добавляет сайту некой интерактивности.
• При прокрутке страницы. Наиболее необычный пример анимации на сайте, с помощью которого можно придумать весьма интересные решения (не только параллакс-эффект). На сайте readymag.com имеется отличный пример данного варианта.

Создание анимации на сайте, по сути, состоит из трех шагов:

1. Определение условия для срабатывания (загрузка, наведение, клик, прокрутка);
2. Выбор эффекта;
3. Добавление шагов для более сложной анимации.

Например, я хочу добавить масштабирование фотографии на своей персональной странице при наведении. Для этого первым делом кликаю по соответствующему объекту.

Затем в меню инструментов справа выбираю триггер для запуска анимации (On hover — эффект при наведении). Далее потребуется задать тип эффекта и определить для него разные параметры. Для удобства здесь же располагается кнопка Preview с демонстрацией работы эффекта.

По следующему видео процесс создания анимации на сайте вам будет более понятен.

Главное, что при этом не используется никакого кодинга, все предельно просто и интуитивно понятно. Из эффектов здесь есть:

• move — перемещение;
• opacity — прозрачность;
• rotate — поворот;
• scale — масштабирование.

Также при создании анимации появляется блок предустановленных эффектов (Presets). В нем есть парочка заранее настроенных вариантов: затухание картинки, исчезновение и перемещение, мерцание.

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

В целом, добавление анимации на сайте с помощью Readymag — это реально что-то новое для подобных платформ. Однако и без нее у проекта есть ряд весьма уникальных фишек: поддержка Retina, совместная работа, анимация. Мне сервис понравился.

Я пробовал разные конструкторы сайтов: для обычных проектов, флешевых веб-страниц, специально заточенные под лонгриды и т.п. Выбирать тот или иной инструмент следует исходя из поставленных перед вами задач. Делать блог в Readymag определенно не стоит, а вот для онлайн-журналов, сайтов-портфолио или создания презентаций он идеально подходит. Наличие разных эффектов и той же анимации позволит подчеркнуть вашу индивидуальность и поразить посетителя нестандартным подходом.