Собираем портфолио на Readymag. Шаг первый — знакомство с шаблонами — Оди. О дизайне
22 Ноя 2019 11931 0
«Оди» и команда Readymag — онлайн-инструмента для создания сайтов и презентаций — запускают серию постов с упражнениями, выполняя которые вы сможете создать портфолио с нуля. Readymag дает полную творческую свободу. Вот несколько примеров — все эти проекты сверстаны прямо в браузере, без помощи разработчиков.
Readymag Team
Readymag — дизайн-инструмент для создания сайтов, портфолио и презентаций в браузере
Дизайн-альманах Readymag
Символы оттепели: архитектура советского досуга
Жизнь человека (спецпроект «Таких Дел»)
Мы советуем вам провести с каждым проектом некоторое время, изучить его в деталях. Попробуйте ответить на следующие вопросы:
- Как элементы проекта — меню, текст, изображения, кнопки — расположены друг относительно друга? Почему именно так?
- Какие инструменты навигации — меню, оглавление, кнопка «Вернуться в начало» / Back to top — вы видите? Из каких мест проекта можно в один клик вернуться на первую страницу, а из каких — нельзя? Как вы думаете почему?
- Как бы вы описали шрифт в проекте — простой, функциональный, интересный, изысканный, необычный? Если шрифтов несколько, как вы думаете, для каких целей используется один, а для каких — другой?
- Какие выбраны цвета для фона, текста, кнопок? Как вы думаете почему?
- Используется ли в проекте анимация, и если да, то для решения каких задач?
Размышления над этими вопросами позволят вам развить насмотренность, понять, на что стоит обращать внимание в веб-проектах, и выработать собственный стиль.
Теперь приступим к работе с Readymag. Давайте начнем с самого простого. В Readymag есть заготовки проектов под конкретные нужды: портфолио, презентация, лендинг, фотоистория, журнал. Они позволяют быстро и просто собрать шаблонный проект — это удобно на ранних стадиях освоения инструмента или в случае, если у вас мало времени.
Сейчас мы создадим самое простое портфолио — для этого следуйте инструкциям.
Зайдите в свой профиль на readymag.com. Если у вас нет профиля — создайте его.
В профиле нажмите на большой красный плюс — знак создания нового проекта.
Выберите «Проект» (Project).
В новом проекте выберите R/m Templates.
Выберите шаблон Sleek.
Добавьте все четыре страницы шаблона в новый проект.
Вернитесь в проект…
…и кликните на добавленную страницу.
Вы увидите шаблон портфолио. На полях — полезные советы по использованию инструмента (на английском языке).
Замените Diana G. Libman в левом верхнем углу на свое имя, а текст «о себе» в середине — на несколько предложений о вас.
Чтобы редактировать текстовый блок, дважды кликните на него.
Полистайте проект влево-вправо и замените всю информацию из шаблона на ваши тексты и изображения. Комментарии на полях можно не убирать — они не будут видны пользователю.
Это особенность режима Scale Layout, включенного в выбранном шаблоне по умолчанию. Scale Layout означает, что пользователю будет показана только та часть проекта, которая обведена пунктирной рамкой, а при изменении величины браузерного окна проект автоматически масштабируется вместе с ним.
Чтобы изменить изображение, кликните на него, зайдите в настройки и перетащите на иконку «горы» новое изображение.
Вы также можете выбрать изображение из фотостоков Flickr и Unsplash — их можно неограниченно использовать в Readymag.
Проверьте, как выглядит проект после правок, нажав на иконку в виде глаза в правом верхнем углу. Еще мы советуем всегда отдельно проверять мобильную версию — переключиться на нее можно в левом нижнем углу.
Теперь опубликуем ваше портфолио. Перейдите в меню проекта.
Выберите «Настройки» (иконка в виде шестеренки).
Нажмите «Опубликовать» (Publish).
Поздравляем! Вы опубликовали свое первое портфолио на Readymag. Ссылку на него можно найти в том же меню — в правой колонке под скриншотом первой страницы.
В следующем уроке мы начнем работать над более сложным портфолио с чистого листа. А пока советуем посмотреть на другие шаблоны — во многих из них на полях вы найдете полезную информацию о возможностях Readymag. Другие содержат упражнения, которые помогут лучше овладеть инструментом.
С любыми вопросами пишите нам на [email protected].
Все части серии:
- Вы здесь → Шаг первый — знакомство с шаблонами
- Шаг второй — сетка, текст, изображения и фон
- Шаг третий — геометрические формы и меню
- Шаг четвертый — фиксированные виджеты, текстовые стили, анимация
- Шаг пятый — мобильная версия и публикация
Поделиться
Отправить
Твитнуть
Запинить
Инструменты Портфолио Статьи
что это за конструктор сайтов: как пользоваться, описание
Фрагмент сайта, разработанного в ReadyMag.
ИсточникКонцепция и особенности ReadyMagПрограмма получила широкую популярность не только у профессионалов в сфере digital, но и у журналистов, блогеров, а также тех, кто ведет социальные сети, создает контент, занимается цифровой журналистикой. ReadyMag позволяет проектировать лендинги и целые сайты, презентации, онлайн-портфолио, блоги и многое другое. По сути, это универсальный конструктор, способный закрыть любую потребность в создании и редактировании вашего представительства в интернете.
Идеей, которая легла в основу редактора, был отказ от шаблонности, ограниченности функционала стандартных «коробочных» решений, которые существовали на тот момент, а также стремление облегчить жизнь специалистам, не имеющим навыков работы с кодом. Еще одно отличие ReadyMag от схожих решений, имеющихся в отрасли, — это ориентация продукта на международный рынок. Конструктор был сразу выпущен на английском языке с красочным интуитивным интерфейсом.
Перед разработкой были тщательно изучены потребности западной аудитории и тренды в UI/UX и графическом дизайне.
Главные особенности, присущие редактору, — это его универсальность и интуитивность. Изначально продукт вышел на рынок и позиционировал себя вне рамок каких-либо концепций. Это не просто набор шаблонов для создания одностраничного сайта, фотоальбома или портфолио, но в первую очередь инструмент, позволяющий дать свободу воображению автора. Дизайнерская картинка, анимация, нестандартные шрифты — все это доступно в рамках работы с ReadyMag.
Интерфейс программы не похож на аналоги, но при этом содержит всё необходимое в удобном для восприятия виде. Например, многие пункты настроек — это не просто окна с параметрами, а наглядная визуализация в виде шкал, слайдеров, заметных кнопок.
Пример настроек шрифта в ReadyMag: размер шрифта и межбуквенное расстояние визуализированы с помощью вертикальных «ползунков». ИсточникФункции ReadyMagТак как редактор позволяет создавать практически любой программный продукт, возможности ReadyMag действительно впечатляют.
Среди стандартных функций можно перечислить следующие:
- создание фотоальбомов, портфолио, презентаций на основе обширной базы шаблонов;
- возможность разрабатывать и добавлять в проект анимацию;
- возможность встраивать видео в создаваемый макет или использовать готовые модули для Vimeo и YouTube;
- создание и корректировка фоновых изображений;
- работа с громкостью аудиоконтента;
- загрузка и применение авторских шрифтов;
- возможность создавать и редактировать элементы макета при помощи кода JavaScript, CSS и HTML;
- использование Google Analytics для отслеживания статистики и др.
Изучить функционал ReadyMag можно бесплатно на официальном сайте проекта, однако все материалы здесь на английском языке, поэтому желательно знать его хотя бы на среднем уровне. Раздел с обучениями поделен на несколько интуитивно понятных категорий.
Здесь можно найти видеоуроки (по клику сайт перенаправляет на канал ReadyMag на TouTube), где доступно и понятно показаны возможности программы, а также наглядно изложен функционал.
Раздел помощи Help содержит материалы и инструкции для чтения, также есть возможность воспользоваться поисковой строкой, введя интересующий запрос по работе ReadyMag. Этот раздел пригодится, если вы не знаете, как решить конкретную специализированную задачу в сервисе, например сделать анимацию надписи.
Очень удобный и интуитивный раздел Shortcuts наглядно демонстрирует быстрые клавиши для реализации той или иной команды прямо на нарисованной клавиатуре. Для лучшего запоминания эти рисунки можно распечатать и всегда держать под рукой на рабочем столе.
На форуме (раздел Forum) участники сообщества и пользователи редактора обсуждают основные вопросы, делятся фишками и возможностями программы.
Песочница (раздел Sandbox) предназначен специально для новичков, которые ранее не работали в сервисе. Он позволяет в игровой форме попробовать основные функции редактора, чтобы принять решение о работе или апгрейде имеющегося тарифа.
В блоге (раздел Blog) основатели бренда делятся новостями и анонсами по выходу новых фич, а также по возможностям, доступным пользователям.
Чек-лист (раздел Ready? Check!) — еще одна удобная и наглядная функция редактора, позволяющая проверить себя перед публикацией созданного продукта.
Для тех, кто хочет углубить знания и прокачать владение редактором, доступна функция персональной тренировки (Training Sessions), где за дополнительную плату технический специалист компании готов провести вас по функционалу и помочь в достижении поставленных задач.
Клиентский гид (Client’s Guide) создан в помощь заказчикам, которые хотели бы обратиться к профессионалам, работающим на платформе ReadyMag, для создания проекта под их нужды.
Здесь описан процесс работы со студиями, а также дальнейшие шаги по оптимизации полученных результатов.
Библиотека сервисов, плагинов и виджетов (Integrations & Embeds) позволяет интегрировать в свой проект различный функционал, вне зависимости от типа проекта. Будь то электронная коммерция или контентный продукт — в библиотеке легко найти решение для своей задачи.
Примеры сайтов, сделанных в ReadyMagПримеры сайтов, созданных на конструкторе, можно найти в разделе Examples на официальном сайте редактора. Широкий функционал позволяет создавать многостраничные интернет-магазины, форумы, сайты-витрины, портфолио и многое другое.
На платформе ReadyMag выполнен сайт «Стрелка Институт 2021». ИсточникНа странице с примерами сайтов, сделанных в редакторе, можно почерпнуть большое количество идей и вдохновиться яркими креативными страницами музея, цветочных магазинов, модельного портфолио, афиш мероприятий и др. Веб-сайты серьезных компаний, образовательных порталов и прочие примеры лишь доказывают универсальность сервиса.
Площадка регулярно публикует рейтинг сайтов, сделанных на движке ReadyMag, так что любой пользователь может не только почерпнуть порцию вдохновения с этой страницы, но и выиграть денежный приз и годовую подписку на один из тарифов ReadyMag.
Плюсы и минусы ReadyMagКак и любой другой онлайн-редактор, ReadyMag имеет свои плюсы и минусы. Среди преимуществ стоит отметить:
- простой и наглядный интерфейс;
- большое количество шаблонов и инструментов;
- возможность создать не только шаблонный, но и авторский контент;
- возможность использования бесплатной версии;
- возможность совместной работы над проектами в платной подписке;
- наличие техподдержки.
Наиболее явные из недостатков — это:
- отсутствие русифицированной версии платформы;
- достаточно ощутимая стоимость подписки;
- у пользователей без опыта работы в графических редакторах интерфейс может вызвать вопросы.
Несмотря на наличие отрицательных отзывов, платформа ReadyMag объективно чаще встречается в положительном контексте. Пользователи отмечают и обилие возможностей, и ее удобство для онлайн-использования. Набор функционала и различные варианты подписки для любых нужд явно относятся к преимуществам площадки.
Где скачать и сколько стоит ReadyMagДля того чтобы узнать стоимость подписки на ReadyMag, можно обратиться к соответствующему разделу с тарифами на официальном сайте. Здесь можно удобно выбрать и оплатить понравившийся вариант сервиса или воспользоваться бесплатной версией.
Всего существует 5 тарифов, отличающихся по стоимости и функционалу.
- Тариф Free бесплатный и дает возможность создавать проекты без ограничения, но публиковать только один из них, используя логотип ReadyMag.
- Персональный тариф подходит для создания портфолио или веб-сайта и дает возможность опубликовать один сайт, используя все возможности библиотеки ReadyMag.
- Тариф для фрилансеров позволяет работать с проектами заказчиков (до 3 штук), включая публикацию 5 проектов одновременно, и предоставляет возможность совместно работать двум аккаунтам над проектами.
- Студийный тариф создан для небольших компаний, позволяет работать на 5 проектами одновременно, а также подключать до 5 пользователей к работе над ними.
- Самый дорогой и одновременно полный по функционалу тариф – для бизнеса. С ним можно работать над 10 проектами, подключать до 10 аккаунтов к работе, использовать без ограничений код и публикацию проектов. Тариф также предусматривает приоритетную поддержку пользователей. Он наилучшим образом подходит для средних и крупных дизайнерских агентств.
неделя знакомства
с дизайн-профессиями
бесплатно
ИСКРА —
неделя знакомства
с дизайн-профессиями
7 дней, которые разожгут в вас искру интереса
к дизайну. Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.
разжечь искру
Другие термины на букву «R»
RedshiftRGB
← Все термины
дизайнов, тем, шаблонов и графических элементов Readymag для загрузки на Dribbble
- Посмотреть редакционную целевую страницу
Редакционная целевая страница
- Посмотреть информационный бюллетень Readymag
Информационный бюллетень Readymag
- Посмотреть контраст
Контраст
- Вид на природу
Природа
- Посмотреть МКТЛМ
- Посмотреть (☞ ͡° ͜ʖ ͡°)☞ Обновление портфолио
(☞ ͡° ͜ʖ ͡°)☞ Обновление портфолио
Новый readymag.com
- Посмотреть МКТЛМ
- Посмотреть личное портфолио
Личное портфолио
- Посмотреть проекты года
Проекты года
- Посмотреть Readymag набирает сотрудников
Readymag нанимает
- Просмотр обновленного редактора Readymag
Обновленный редактор Readymag
Котки — Персональный сайт
- Посмотреть обзор Readymag за 2022 г.
Обзор Readymag за 2022 год
- Посмотреть лунную выставку
Лунная выставка
- Просмотр личного портфолио.
Личное портфолио.
- Просмотр личного портфолио – как это работает
Личное портфолио – как это работает
- Посмотреть Черная пятница
Черная пятница
- Виджет просмотра текста 2. 0
Текстовый виджет 2.0
- Посмотреть истории клиентов
Истории клиентов
- Посмотреть новый readymag.com
Новый readymag.com
- Посмотреть веб-сайт Гаффа
Веб-сайт Gaffa
- Посмотреть обновленный виджет слайд-шоу Readymag
Обновленный виджет слайд-шоу Readymag
- Просмотр обновленной панели виджетов в Readymag
Панель виджетов обновлена в Readymag
com
0Зарегистрируйтесь, чтобы продолжить или войдите
Идет загрузка.
..
Readymag – Medium
Readymag – MediumОткрыть в приложенииReadymag
4.5K подписчиков
Опубликовано в
Geek Culture
·25 декабря 2022 г.
Как Readymag изобрел выстрелы для преобразования видео в управляемые последовательности изображений
Разработчик Readymag описывает процесс от идеи до реализации От пассивного к действенному Интернет — это органическая, постоянно меняющаяся среда, и ожидания пользователей в отношении веб-сайтов с годами выросли. В Readymag мы делаем все возможное, чтобы помочь дизайнерам создавать свежий и захватывающий контент, который раздвигает границы сети. Как часть…
6 минут чтения
6 минут чтения
Опубликовано в
Muzli — Design Inspiration
·7 декабря 2022 г.
Как я создал дизайнерскую компанию, которая соответствует моей личной этике
Некоторые уроки, которые я усвоил, и некоторые убеждения, которые я пытаюсь забыть.
Дайана Касай, соучредитель и генеральный директор Readymag: Бизнес, как известно, труден, даже если это дизайнерский бизнес, состоящий из вдохновляющих мудбордов, минималистичных офисов, сексуальных журнальных столиков и канбанов Notion, которые выглядят так хорошо, что вы могли бы…
Дизайн
8 мин считывания
Дизайн
8 мин считывания
Опубликовано в
Readymag
·27 сентября 2022 г.
Перейдите на наш новый блог
Небольшое предупреждение: этот блог продолжается на новой платформе, но сохраняет тот же URL . Архив старых статей остается в Medium, новые статьи здесь публиковаться не будут. Перейдите на наш новый блог, чтобы читать последние обновления Readymag и черпать вдохновение — ваше масштабное путешествие в буйный мир веб-дизайна только начинается! Подпишитесь на нашу рассылку Создайте свой веб-сайт с помощью Readymag
Чтение 1 мин.
Чтение 1 мин.
10 советов дизайнерам по продвижению в социальных сетях
Присутствовать в социальных сетях полезно: дизайнеры делятся что ведение блога помогает им найти большую часть своих крупных контрактов, получить профессиональную известность, придумать свежие дизайнерские идеи и сформировать жизненно важное личное сообщество. Но в мире социальных сетей есть свои ловушки и подводные камни. Чтобы пройти через это непростое…
Графический дизайн
8 минут чтения
Графический дизайн
8 минут чтения
Опубликовано в
Readymag
·A 23 августа 2022 г.
4 идеи от Airbnb Design Lead о том, как повысить свой уровень дизайнерская карьера
Страннику нет дороги; дорога сделана ходьбой. Та же концепция применима и к вашей карьере: шаги, которые вы делаете, составляют ваш путь. Но вы когда-нибудь намечали шаги, которые вам нужны, чтобы подготовиться к работе своей мечты в дизайне? Ведущий дизайнер Airbnb…
Дизайнерская карьера
5 минут чтения
Дизайнерская карьера
5 минут чтения
Опубликовано в
Readymag
· 27 июля 2022 г.
«Если вы не можете резюмировать суть своей презентации в предложении подача не заслуживает освещения в печати ». Журналисты о представлении дизайнерских работ в СМИ
Хотя участие в мире рекламы может быть пугающим, для любого творческого предпринимателя всегда знак одобрения быть в центре внимания. …
Дизайн
8 минут чтения
Дизайн
8 минут чтения
Опубликовано в
Readymag
·Jul 7, 2022
Как обеспечить бесперебойную работу с клиентами. Советы от Readymag
Чтобы добиться 100% успеха в работе с клиентами, вы должны быть с ними на одной волне. Лучшее общение помогает установить четкие ожидания и сформулировать проблемы, но это может быть сложно. …
Дизайн
4 минуты чтения
Дизайн
4 минуты чтения
Опубликовано в
Readymag
·30 июня 2022 г.
9000 5
Обновление Readymag Editor: что и почему стоит за редизайном
В постоянное состояние изменений, Readymag неизбежно накопил некоторые поверхностные и структурные несоответствия. Даже одно улучшение может привести к разногласиям в других частях интерфейса, что отчасти нормально для таких сложных продуктов, как Readymag. …
Readymag
5 минут чтения
Readymag
5 минут чтения
Опубликовано в
Readymag
· 23 июня 2022 г.
Новый уровень разрешений для текстовых редакторов, отдельные настройки просмотра для мобильных и настольных компьютеров. и гибкая точка доступа: что мы сделали в первой половине 2022 года
Подводя итоги 2022 года, мы познакомим вас с изменениями в настройках нашего средства просмотра для мобильных устройств и настольных компьютеров, режима блокировки макета, гибкой точки доступа и по умолчанию SSL для всех проектов. Вы также заметите несколько небольших, но важных изменений, направленных на ускорение рабочего процесса в этом инструменте.