Стильный конструктор сайтов: что такое Readymag
Рассказываем о Readymag — конструкторе сайтов, лендингов и презентаций, которым пользуются медиагиганты Conde Nast и Huffington Post.
![](https://248006.selcdn.ru/main/iblock/b5c/b5ca819f1ff27dc9c81f5f47634372c2/43c194d34b98070133a0c666a8b3c7b1.jpg)
![](https://248006.selcdn.ru/main/iblock/b5c/b5ca819f1ff27dc9c81f5f47634372c2/43c194d34b98070133a0c666a8b3c7b1.jpg)
Иллюстрация: Полина Честнова для Skillbox Media
Readymag — это визуальный инструмент для создания сайтов, кейсов, веб-зинов, портфолио и других типов страниц, которым нужна красивая HTML-упаковка. В 2012 году его запустила компания дизайнеров из Москвы, которые сумели за несколько лет сделать из него всемирно известный сервис.
В своей работе Readymag используют не только дизайнеры, но и фотографы, журналисты, художники и все, кому нужен стильный дизайн. С конструктором работают дизайн-студии и коммуникационные агентства, крупные и небольшие компании и медиа: BBDO, IDEO, Airbnb, Huffington Post, Al Jazeera, DTE, Headless Horse, United Colors of Benetton и другие.
Функционал, за который дизайнеры выбирают R/M:
- Кастомные сетка, курсоры и расположение блоков.
- Продвинутая web-анимация, в том числе горизонтальная, на половину экрана, переходов между страницами.
- Анимация взаимодействий: функция Draggable (перетаскивание элементов), виджет Shots (постепенное изменение изображения во время скролла или ховера), виджет Hotspot (появление скрытого контента).
- Возможность работать с вариативными шрифтами.
- Автолейаут и работа с группами.
- Удобный редактор мобильных версий.
- Шаблонные страницы и блоки.
- Возможность вставить свой код.
- Комментарии для командной работы.
— Мы про «короткий метр» — рассказал Антон Герасименко, основатель Readymag. — Лендинги, спецпроекты, презентации и так далее. Когда есть чётко сформулированная идея и нужно максимально быстро и эффектно рассказать о ней людям. Это может быть «дизайнерская картинка», полотно текста или летающие по всему экрану анимированные чёрные шары. Я считаю, полная свобода в подаче своей истории — главная крутость R/M.
![](/upload/setka_images/14214220092023_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
Примеры проектов, сделанных на Readymag
Made with Readymag
На сайте есть раздел Examples, где можно найти подборку последних работ, отобранных редакцией. В неё можно попасть, если прислать свою работу. Также у Readymag есть официальный телеграм-канал, где можно посмотреть классные работы, сделанные в конструкторе.
![](/upload/setka_images/14275420092023_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
В каталоге One Page Love
На порталах с подборками лучших сайтов планеты Awwwards и One Page Love можно сделать поиск по инструменту, с помощью которого был сделан сайт. Проектов туда добавляется немного, но они однозначно заслуживают внимания.
![](/upload/setka_images/14275420092023_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Кейсы брендов
R/M делится небольшими выдержками из кейсов компаний, которые используют Readymag в своей работе: Conde Nast, Mindspace, Complex Media, IDEO, Strelka Institute, Obys, Playtronica и другие. Все бренды и их задачи очень разные, поэтому в разделе можно найти и лендинги, и коммуникационный дизайн, и веб-сайты, и образовательные проекты.
![](/upload/setka_images/14275420092023_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
В кейсах видно, какие именно фичи предлагает Readymag, какие пользуются популярностью и помогают в бизнес-задачах. Например, израильская компания Mindspace использует Readymag для создания креативных лендингов, поэтому ей важны такие вещи, как интеграция с системами аналитики и электронной коммерции, Open Graph и прочие.
![](/upload/setka_images/14275420092023_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
Конкурс лучших работ
Readymag ежегодно проводит открытый конкурс на лучший дизайн в разных категориях. Обычно это визуальный сторителлинг, типографика, навигация, инновации, мобайл и прочее. Заявки на сезон-2023 уже открыты.
В архиве лежат работы победителей конкурса, которыми тоже можно вдохновляться и делать для тренировки что-то похожее.
![](/upload/setka_images/14275420092023_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Скриншот: сайт Readymag / Skillbox Media
![](/upload/setka_images/14275420092023_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Скриншот: сайт Readymag / Skillbox Media
Особенности конструктора Readymag
В плане взаимодействия с интерфейсом, Readymag ближе всего к Figma, Adobe InDesign и Zero Block от Tilda.
Страница в Readymag строится как рабочее пространство, в любое место которого можно добавить любой элемент, а не по принципу блоков, которые идут друг за другом. Именно поэтому ваш дизайн точно будет отличаться от всех.
![](/upload/setka_images/14275420092023_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Скриншот: сайт Readymag / Skillbox Media
Рабочая область проекта выглядит как пустое поле, которому можно назначить любую сетку. Основная панель с действиями расположена в виде двух блоков внизу страницы. При выделении добавленного элемента в правой части канваса появляются его настройки.
![](/upload/setka_images/14295520092023_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Страницу можно собрать с нуля из базовых элементов или использовать шаблонные страницы, которые можно декомпозировать на нужные элементы или просто изменить в них контент.
В 2023 году в Readymag появились пресеты блоков, то есть небольшие шаблоны конкретных элементов и модулей: кнопки, хедеры и футеры, галереи, попапы, формы и другие. В них уже заложена адаптивность под разные устройства, поэтому они помогут быстро набросать прототип или могут стать основой будущего дизайна.
![](/upload/setka_images/14295520092023_d5f448b1d45447906b1518b24eb2cf2b32fb1aed.gif)
В 2022 году были добавлены функции групповых изменений (для работы с текстом, изображениями, кнопками и формами) и продвинутая работа с автолейаутом. С их помощью можно не только оптимизировать работу над десктопом, но и быстро собирать и редактировать адаптивные версии задуманного дизайна.
![](/upload/setka_images/14295520092023_f622bbba013d150bb02a32dc0c82a22b1a5101f6.gif)
Readymag или Tilda
Оба сервиса предоставляют похожие возможности сборки веб-страниц и добавления различного сложного функционала без помощи разработчиков. Но, коротко говоря, если у вас нет дизайнерских навыков, лучше идти в Tilda. Если они есть, можно попробовать Readymag.
Тильда заточена на более быструю работу со строго ограниченными в вёрстке шаблонными модулями и страницами. Readymag — более дизайнерская и креативная история, в которой можно сделать примерно всё.
По сути, это продвинутый Zero Block с огромным количеством вариантов анимации и удобным редактором адаптива.
Читайте также:
Несомненный плюс Tilda — большое количество обучающих материалов, служба поддержки и комьюнити на русском языке. У самого Readymag обучающих материалов на русском языке нет.
Маркетинговые инструменты в Tilda также чуть более удобны в использовании и дают большую возможность раскрутить и оформить проект по всем правилам современного продвижения.
Тем не менее Readymag стабильно выкатывает новые фичи, следить за которыми удобнее всего в блоге.
![](/upload/setka_images/14295520092023_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Онлайн-магазин в Readymag
В Readymag нет возможности создать интернет-магазин с модулями карточек товаров, разделами, флоу и прочим сразу в интерфейсе сервиса. Однако в проект можно подключить e-commerce-модули и сделать красиво.
Вместо собственной CMS Readymag предлагает подключить сторонние сервисы. Например, Shopify, а оплату проводить через Stripe или Ecwid. С другой стороны, иногда можно и заморочиться, чтобы сделать необычный лейаут, переходы, нестандартную анимацию, ховеры.
![](/upload/setka_images/14315420092023_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
![](/upload/setka_images/14320420092023_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
Научиться работать в Readymag
Шаблоны
Хороший способ начать работать в каком-то инструменте — декомпозировать уже имеющийся там контент. В разделе Templates размещено около 70 шаблонов в разных стилях и с разным функционалом.
![](/upload/setka_images/14320520092023_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Песочница
Для тех, кто хочет начать с азов, Readymag предлагает поиграть в песочнице. Здесь описаны основные структуры, с которыми вам придётся столкнуться при работе: сетка, анимация, формы, текст, кнопки, изображения. Каждой структуре посвящена своя страница, на которой вам покажут, что происходит, почему, и предложат самостоятельно что-то настроить.
![](/upload/setka_images/14320520092023_1c076733da30d01108464d85a8ffad1517acec59.jpg)
Гайды
Из основного меню также доступен раздел Learn. В нём собраны основные полезные ссылки: видеоуроки, центр поддержки, форум, гайды, информация по интеграциям. Также Readymag предлагает личные консультации, если у вас нет времени на самостоятельное изучение функционала или возникли неочевидные вопросы по использованию сервиса.
![](/upload/setka_images/14320520092023_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
Видеоуроки
Основы работы с интерфейсом можно изучить на официальном ютуб-канале Readymag. Там доступны видеоинструкции по работе с базовым функционалом и обзоры на новые фичи. Все видео выложены на английском языке.
Подписка на Readymag
Стоимость подписки, как всегда, зависит от количества сайтов и доступных фич.
Индивидуальная подписка на один веб-сайт бесплатна. Добавление к нему своего домена, форм, кастомных шрифтов и прочего обойдётся в 270 долларов в год.
Стоимость для команд зависит от размера аккаунта. Публикация пяти сайтов и добавление пяти коллег будет стоить 432 доллара в год.
![](/upload/setka_images/14320520092023_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
НКО и благотворительным организациям предоставляют скидку 50% на выбранный тариф. Образовательные организации также могут запросить скидку 50% на тарифы Free и Personal.
![](/upload/setka_images/14320520092023_b200d8bc76303a5287d3954213dd40d331052ae4.jpg)
На странице цен есть удобное сравнение доступных фич в зависимости от выбранного плана (team/personal).
![](/upload/setka_images/14320420092023_178ae943fb180dbd85da113c997e71d410f43eb6.jpg)
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!