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

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

Обзор Readymag

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

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

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

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

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

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

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

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

Возможности Readymag

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

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

Readymag - встраивание страницы в другие сайты через Embed

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

Readymag - шаблоны

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

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

Readymag - интерфейс редактора

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

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

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

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

Readymag - добавление новых элементов

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

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

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

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

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

Анимация в Readymag

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

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

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

Readymag - создание анимации на сайте

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

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

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

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

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

Readymag - эффекты для анимации на сайте

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

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

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

Похожие статьи

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

  1. Каролина

    В редимаге очень удобно и быстро создать эффектную презентацию) один минус — бывает, что слетает анимация или некоторая инфа иногда)

Leave a Comment