Содержание
Функции Readymag и пример использования
Управлять элементами в Readymag можно обычным перетаскиванием – drag and drop. Изменение размеров текста или блоков контента, выбор шрифтов, загрузка изображений, добавление видео, — все это делается достаточно легко и быстро. Вот, например, настройка адаптивного дизайна.
Созданная презентация или сайт будут отлично выглядеть на планшетах, смартфонах и корректно работать в современных браузерах.
Проект, созданный на readymag.com полностью соответствует всем требованиям поисковых систем и имеет необходимые функции:
- подключение собственного домена;
- отслеживание статистики через Google Analytics;
- SEO Friendly (добавление заголовка и описания, индексация всех текстов на сайте);
- размещение на собственных серверах сервиса (нет необходимости приобретать хостинг).
Меня лично больше заинтересовали функции, которые я не встречал у других платформ:
- Во-первых, это совместная работа над проектами. Вы можете приглашать других пользователей-коллег для участия в разработке сайта. Допустим, сотрудничаете с фотографом/дизайнером и открываете ему доступ для создания страницы портфолио и т.п.
- Во-вторых, поддержка Retina дисплеев. Кто сталкивался с версткой под ретину, наверняка оценит эту фишку.
- Вы можете встраивать проекты Readymag через Embed-код, например, в другие блоги. Выглядит весьма круто.
Чтобы начать работать в Readymag, нужно выбрать один из имеющихся шаблонов, либо открыть пустую страницу для редактирования. Для создания презентаций есть специальная категория макетов + допускается использование своих наработок.
В некоторые темы включены сразу несколько дизайнов страниц, например, отдельно страница с фотографиями, отдельно с текстами, контактами и т.п. Ненужные вы потом можете удалить. Советую выбирать вариант максимально приближенный к вашим требованиям/задачам, дабы потом меньше пришлось менять.
Интерфейс редактора для отдельной страницы выглядит приблизительно так:
В правом верхнем углу располагаются иконки просмотра и настройки проекта. В последних можете добавлять стрелочки навигации, менять метаданные, подключать свой домен и т.п. Снизу — элемент, позволяющий в один клик задать вопрос команде продукта, если возникнут какие-то вопросы.
В левом нижнем углу находятся основные элементы управления:
- настройки мобильных версий страницы;
- кнопка отмены/повтора действия;
- установка размеров страницы;
- вспомогательные линии: сетки и направляющие;
- работа с фоном (можете ставить картинки и видео);
- созданные элементы (в данном примере это форма, текст и фото).
Для создания нового объекта просто кликаете по иконке «+».
Вариантов добавляемого контента хватает. Кроме обычных картинок, форм и текстов можно вставлять на страницу аудио, слайдшоу, кнопки, карты, виджеты из соц.сетей, а также iframe коды виджетов сторонних сервисов (например, редакторов форм).
Wow-анимация на ReadyMag
Еще один крутой урок мастер-класс от SkillBox по анимации сайта на ReadyMag совершенно бесплатно.
Открытая лекция: «Как создать портфолио в редимаге?»
Как создать портфолио на ReadyMag
1:45-7:40 Кому нужно портфолио дизайнера и какие бывают проблемы с ним
7:40-14:00 Как арт-директор смотрит портфолио дизайнеров и что ему важно
14:00-17:10 Что такое Редимаг, преимущества портфолио на этой платформе
17:10-19:50 Удачная структура для портфолио
19:50-23:15 Примеры портфолио на Редимаге
23:15-28:08 Подробный разбор структуры
28:08-30:50 Текст о себе: что написать
30:50-34:50 Разбор ещё двух примеров
34:50-37:10 Как сделана анимация в примере
37:10-53:20 Создание кейса на Редимаге
53:20-55:40 Где искать вдохновение на портфолио
Деконструкция в дизайне как ломать, чтобы создавать в Readymag
ReadyMag обучение, уроки, туториалы
Онлайн-лекция о создании и сломе шаблонов в дизайне. Лекция пройдет в рамках проекта «Встречи с дизайнерами» в Лектории Skillbox. Многие дизайнеры знакомы со страхом белого листа — задача есть, но непонятно, как к ней подступиться. Деконструкция — одно из возможных решений, которое поможет избавиться и от страха, и от белого листа как такового. Таня Егошина подробно рассказывает о деконструкции, учит искать готовые решения, ломать шаблоны или подстраивать их под свои цели. Таня Егошина — мультимедиа-дизайнер Readymag. Работала с «Т—Ж», баром «Стрелка» и ЦУМом. Автор обложки для сингла Вики Пестровой «Вести», соавтор веб-альбома «Объект и среда» и фотопроекта «Делаю, что хочу».
Как сделать анимацию в Readymag
Как я уже сказал выше, анимация в веб-проектах (особенно лонгридах) сейчас встречается достаточно часто. Разработчики стараются таким образом выделить определенный контент или просто реализовать эффектную подачу информации. Подобные фишки подойдут как онлайн-журналу, так и креативному дизайнерскому портфолио.
В Readymag анимация появилась относительно недавно. Я бы выделил 3 основных направления для нее:
- При загрузке страницы. Вы можете создавать последовательность всплывающих элементов на странице, будь то эффект плавного появления объекта или увеличение изображения. Такое часто можно увидеть в разных онлайн презентациях.
- При наведении. Отличный пример взаимодействия контента и посетителя — используйте вращающиеся блоки, масштабирование изображений и т.п. Сюда же, в принципе, можно отнести эффекты при клике. Все это добавляет сайту некой интерактивности.
- При прокрутке страницы. Наиболее необычный пример анимации на сайте, с помощью которого можно придумать весьма интересные решения (не только параллакс-эффект). На сайте readymag.com имеется отличный пример данного варианта.
Создание анимации на сайте, по сути, состоит из трех шагов:
- Определение условия для срабатывания (загрузка, наведение, клик, прокрутка);
- Выбор эффекта;
- Добавление шагов для более сложной анимации.
Например, я хочу добавить масштабирование фотографии на своей персональной странице при наведении. Для этого первым делом кликаю по соответствующему объекту.
Затем в меню инструментов справа выбираю триггер для запуска анимации (On hover — эффект при наведении). Далее потребуется задать тип эффекта и определить для него разные параметры. Для удобства здесь же располагается кнопка Preview с демонстрацией работы эффекта.
По следующему видео процесс создания анимации на сайте вам будет более понятен.
Главное, что при этом не используется никакого кодинга, все предельно просто и интуитивно понятно. Из эффектов здесь есть:
- move — перемещение;
- opacity — прозрачность;
- rotate — поворот;
- scale — масштабирование.
Также при создании анимации появляется блок предустановленных эффектов (Presets). В нем есть парочка заранее настроенных вариантов: затухание картинки, исчезновение и перемещение, мерцание.
Можете попробовать их установить и посмотреть, как именно эффекты будут проявляться на сайте. После этого просто меняете настройки на те, которые вам нужны.
В целом, добавление анимации на сайте с помощью Readymag — это реально что-то новое для подобных платформ. Однако и без нее у проекта есть ряд весьма уникальных фишек: поддержка Retina, совместная работа, анимация. Мне сервис понравился.
Я пробовал разные конструкторы сайтов: для обычных проектов, флешевых веб-страниц, специально заточенные под лонгриды и т.п. Выбирать тот или иной инструмент следует исходя из поставленных перед вами задач. Делать блог в Readymag определенно не стоит, а вот для онлайн-журналов, сайтов-портфолио или создания презентаций он идеально подходит. Наличие разных эффектов и той же анимации позволит подчеркнуть вашу индивидуальность и поразить посетителя нестандартным подходом.
Функции и простота использования
Шаблоны. Сервис предоставляет шаблоны, но … их трудно найти! Здесь есть 29 шаблонов, каждый из которых выглядит как журнал или персональное портфолио. Модульная сетка в шаблоне напоминает файл Microsoft Excel. Каждый шаблон содержит от 1 до 12 предварительно разработанных страниц.
Хотя шаблоны Readymag хорошо разработаны, они однообразны, в отличие от Wix, который предлагает свыше 500 шаблонов и гораздо больший диапазон макетов журналов.
Readymag предлагает журнальные шаблоны с ограниченным количеством страниц.
А что насчет уток, спросите вы? Что ж, дорогой читатель, по какой-то неведомой причине для вас, меня или всего человечества, это одна из «популярных» форм, предлагаемых Readymag. Вы можете добавить на свой сайт все классические формы — квадраты, треугольники, круги и, конечно же… уток.
Единственная причина, по которой кто-то может нажать на значок утки, заключается в том, чтобы понять, зачем он вообще нужен. Однако никто не догадается, что при нажатии на утку появится еще больше фигур и значков!
Вы можете БЕСПЛАТНО добавить на свой сайт столько уток, сколько захотите
Уйма изображений, шрифтов и значков. О боже. Как я уже говорила, Readymag определенно специализируется на создании сайтов в стиле журнала, поэтому логично, что в графические элементы конструктора были вложены большие средства.
Здесь есть 500 000 фотографий, 2 миллиона иконок и огромное количество бесплатных шрифтов. Фотографии взяты из Unsplash, значки — из The Noun Project, а шрифты — из Adobe, Webtype, Google Fonts и дополнительных источников. Я определенно утонула в объеме доступной графики…
SSL-сертификаты. На сайте Readymag утверждается, что сервис предоставляет SSL-сертификат для обеспечения критически важной безопасности как ваших проектов, так и личной информации ваших пользователей. Однако он не указан в качестве функции в бесплатном или платном плане, поэтому неясно, как получить этот сертификат или сколько он стоит
ReadyMag уроки
Видеоурок для тех, кто только начинает работать в Readymag. Вы узнаете, как создать проект, поменять фон страниц, добавить изображения, иконки, кнопки и текст, выбрать шрифт, настроить сетку и внешний вид ссылок.
Мобильная версия в ReadyMag
Видеоурок, посвященный работе с мобильной версией проекта в Readymag. Вы научитесь создавать или улучшать существующую мобильную версию проекта, узнаете, какие настройки виджетов можно менять независимо друг от друга в разных вьюпортах и как создать гамбургерное меню в мобильной версии макета. Кроме того, вы научитесь быстро переходить к выбранному виджету в другом вьюпорте, скрывать объекты и переключаться между вьюпортами.
Обзор readymag: заключение
Конструктор сайтов Readymag способен на довольно-таки интересные вещи, если вы готовы потратить свое время и силы. Но без справочного центра и интерактивных руководств вы можете в конечном счете запутаться и остаться разочарованным.
Преимущества
- Простое добавление уток на сайт
- Огромная библиотека шрифтов, изображений и иконок
- Очень отзывчивая служба поддержки
- Пустые шаблоны не ограничивают ваше творчество
Недостатки
- Трудно ориентироваться без руководств
- Дорогие тарифные планы
Если вы хотите создать сайт в журнальном стиле и готовы потратить время на обучение, Readymag может стать хорошим вариантом. В остальном вам следует попробовать один из наших лучших рекомендованных конструкторов в 2021.
