![](https://awdee.ru/wp-content/uploads/2019/11/Screenshot-2019-11-21-at-16.43.35-1024x636.png)
![](https://awdee.ru/wp-content/uploads/2019/11/Screenshot-2019-11-21-at-16.43.52-1024x682.png)
Символы оттепели: архитектура советского досуга
![](https://awdee.ru/wp-content/uploads/2019/11/Screenshot-2019-11-21-at-16.45.16-1024x682.png)
Жизнь человека (спецпроект «Таких Дел»)
Мы советуем вам провести с каждым проектом некоторое время, изучить его в деталях. Попробуйте ответить на следующие вопросы:
- Как элементы проекта — меню, текст, изображения, кнопки — расположены друг относительно друга? Почему именно так?
- Какие инструменты навигации — меню, оглавление, кнопка «Вернуться в начало» / Back to top — вы видите? Из каких мест проекта можно в один клик вернуться на первую страницу, а из каких — нельзя? Как вы думаете почему?
- Как бы вы описали шрифт в проекте — простой, функциональный, интересный, изысканный, необычный? Если шрифтов несколько, как вы думаете, для каких целей используется один, а для каких — другой?
- Какие выбраны цвета для фона, текста, кнопок? Как вы думаете почему?
- Используется ли в проекте анимация, и если да, то для решения каких задач?
Размышления над этими вопросами позволят вам развить насмотренность, понять, на что стоит обращать внимание в веб-проектах, и выработать собственный стиль.
Теперь приступим к работе с Readymag. Давайте начнем с самого простого. В Readymag есть заготовки проектов под конкретные нужды: портфолио, презентация, лендинг, фотоистория, журнал. Они позволяют быстро и просто собрать шаблонный проект — это удобно на ранних стадиях освоения инструмента или в случае, если у вас мало времени.
Сейчас мы создадим самое простое портфолио — для этого следуйте инструкциям.
Зайдите в свой профиль на readymag.com. Если у вас нет профиля — создайте его.
![](https://awdee.ru/wp-content/uploads/2019/11/001-2.gif)
В профиле нажмите на большой красный плюс — знак создания нового проекта.
![](https://awdee.ru/wp-content/uploads/2019/11/002-1024x652.png)
Выберите «Проект» (Project).
![](https://awdee.ru/wp-content/uploads/2019/11/003-1-1024x653.png)
В новом проекте выберите R/m Templates.
![](https://awdee.ru/wp-content/uploads/2019/11/004-1.gif)
Выберите шаблон Sleek.
![](https://awdee.ru/wp-content/uploads/2019/11/005-1.gif)
Добавьте все четыре страницы шаблона в новый проект.
![](https://awdee.ru/wp-content/uploads/2019/11/006.gif)
Вернитесь в проект…
![](https://awdee.ru/wp-content/uploads/2019/11/007.gif)
…и кликните на добавленную страницу.
![](https://awdee.ru/wp-content/uploads/2019/11/008-1024x653.png)
Вы увидите шаблон портфолио. На полях — полезные советы по использованию инструмента (на английском языке).
![](https://awdee.ru/wp-content/uploads/2019/11/009-1024x653.png)
Замените Diana G. Libman в левом верхнем углу на свое имя, а текст «о себе» в середине — на несколько предложений о вас. Чтобы редактировать текстовый блок, дважды кликните на него.
Полистайте проект влево-вправо и замените всю информацию из шаблона на ваши тексты и изображения. Комментарии на полях можно не убирать — они не будут видны пользователю.
Это особенность режима Scale Layout, включенного в выбранном шаблоне по умолчанию. Scale Layout означает, что пользователю будет показана только та часть проекта, которая обведена пунктирной рамкой, а при изменении величины браузерного окна проект автоматически масштабируется вместе с ним.
Чтобы изменить изображение, кликните на него, зайдите в настройки и перетащите на иконку «горы» новое изображение.
![](https://awdee.ru/wp-content/uploads/2019/11/010_1-1024x653.png)
Вы также можете выбрать изображение из фотостоков Flickr и Unsplash — их можно неограниченно использовать в Readymag.
![](https://awdee.ru/wp-content/uploads/2019/11/010-1.gif)
Проверьте, как выглядит проект после правок, нажав на иконку в виде глаза в правом верхнем углу. Еще мы советуем всегда отдельно проверять мобильную версию — переключиться на нее можно в левом нижнем углу.
![](https://awdee.ru/wp-content/uploads/2019/11/011-1024x653.png)
Теперь опубликуем ваше портфолио. Перейдите в меню проекта.
![](https://awdee.ru/wp-content/uploads/2019/11/012.gif)
Выберите «Настройки» (иконка в виде шестеренки).
![](https://awdee.ru/wp-content/uploads/2019/11/013.gif)
Нажмите «Опубликовать» (Publish).
![](https://awdee.ru/wp-content/uploads/2019/11/014-1024x653.png)
Поздравляем! Вы опубликовали свое первое портфолио на Readymag. Ссылку на него можно найти в том же меню — в правой колонке под скриншотом первой страницы.
В следующем уроке мы начнем работать над более сложным портфолио с чистого листа. А пока советуем посмотреть на другие шаблоны — во многих из них на полях вы найдете полезную информацию о возможностях Readymag. Другие содержат упражнения, которые помогут лучше овладеть инструментом.
С любыми вопросами пишите нам на support@readymag.com.
Обсуждение
Похожее
Тренды в дизайне крафтового пива 2022
Джеймс Фостер протестировал иконку «плюса» и «шеврона» (указывающий вниз уголок), чтобы понять, что работает лучше, когда надо скрыть содержимое и позволить пользователю его раскрыть.
Infinite Scrolling: Is It Good or Bad for Your Website?