Readymag — конструктор сайтов

Привет, Знакомые недавно посоветовали попробовать продукт Readymag. Говорят, очень крутая штука. Посмотрел видео, вроде всё просто и интересно. Вот хотелось бы узнать у людей, возможно у тех, кто уже работал с данным сервисом. Какие есть плюсы и минусы? И

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий