Приветствую во второй части обзора сервиса для прототипирования сайтов Moqups! В этой статье я приведу пошаговую инструкцию по созданию простого прототипа.
Про регистрацию в сервисе и знакомство с интерфейсом читайте в первой части обзора.
Создаем прототип
Заходим на сайт Moqups и открываем новый проект. Перед нами рабочая страница. На ней мы будем делать прототип.
Для удобства добавим сетку для разметки и поменяем размер страницы. На верхней горизонтальной панели выбираем пункт Workspace. В выпадающем списке нажимаем на Show paper grid. Сетка отобразится на рабочей странице.
Далее вновь заходим в Workspace, выбираем Page Settings и вводим размеры: 1140 px ширина, 2000 px высота. Подтверждаем действие, нажав кнопку Apply.
Размеры можно также менять, просто потянув курсором мыши за край рабочего листа (снизу или справа).
Теперь все готово для полноценной работы.
В качестве примера будем прототипировать главную страницу небольшого сайта по ремонту квартир.
Меню
Пролистайте список трафаретов и выберите Horizontal menu (горизонтальное меню). Перетащите трафарет на рабочую страницу, подведите курсор к краю трафарета и растяните его до необходимых размеров по высоте и ширине.
Дважды щелкните мышью по трафарету и введите название пунктов меню через запятую. В нашем примере это будет: Косметический ремонт, Капитальный ремонт, Евроремонт, Дизайн-проект, О нас, Отзывы, Контакты.
Логотип и номер телефона для связи
Логотип схематично изобразим через прямоугольник с надписью логотип. Для этого выбираем трафарет Rectangle (прямоугольник) и Paragraph (текстовый блок) и перетаскиваем их на рабочий лист. Редактируем текстовый блок (кликаем по нему дважды) – удаляем шаблонный текст, вписываем слово логотип. Прямоугольник и текст перемещаем в левый верхний угол.
Добавляем еще один текстовый блок. Пишем номер телефона. На панели свойств меняем размер шрифта. Перемещаем номер в правый верхний угол.
Баннер
Добавим 3 трафарета: Image (картинка), Button (кнопка) и уже знакомый Paragraph. По очереди выбираем каждый из них и редактируем.
Картинку растягиваем по ширине и высоте. Текст кнопки меняем на Оставить заявку (для редактирования кликните по ней дважды). В текстовом поле прописываем пример текста для акции: При заказе капитального ремонта квартиры дизайн-проект в подарок! Увеличиваем размер текста через панель свойств.
Размещаем отредактированные трафареты на соответствующих местах.
Выгоды
На левой вертикальной панели выбираем пункт Icons. Откроется список доступных иконок. Перетаскиваем любую подходящую иконку на рабочую страницу.
Затем возвращаемся в пункт Stencils и добавляем трафарет Paragraph. В нем прописываем выгоду, например: Бесплатный замер. Делаем текст полужирным через панель свойств. После выделяем иконку и текст и выравниваем их по левому краю друг относительно друга.
Вновь выделяем иконку с текстом. Делаем их копию – нажимаем на клавиатуре клавиши Ctrl+C и Ctrl+V. Скопированные трафареты размещаем справа. Делаем еще 2 копии и размещаем их в один ряд. В тексте прописываем новые выгоды, например: Доставка материалов, Мастера граждане РФ, Гарантия 6 лет.
Цены
Разместим информацию о ценах на ремонт.
Добавим новый трафарет Heading (заголовок), разместим его по центру и впишем текст: Цены на ремонт.
Далее добавим трафареты – Paragraph, Button, Rectangle. Проводим с ними знакомые действия – меняем размеры, группируем, делаем копии, прописываем текст.
О компании
Под ценами добавим краткую информацию о компании. Для этого используем трафареты Heading, Image, Paragraph.
Проделываем стандартные действия, описанные выше. Вот один из вариантов этого блока – заголовок по центру, ниже текст и картинка справа от него.
Футер
Сделаем завершающую часть страницы – Футер (или подвал). Добавьте трафарет Rectangle, сделайте его небольшим по высоте (примерно 50 px) и растяните на всю ширину страницы. На панели свойств можно поменять цвет и толщину обводки.
Добавим знак копирайта (его можно найти в Icons) и трафарет Paragraph. В текстовом блоке напишем год и название компании: 2020 ООО «Моя компания». Выравниваем иконку и текст по центру футера.
Учебный прототип главной страницы завершен
Попробуйте использовать другие трафареты, расставляйте и редактируйте их так, как вам необходимо. Прототип – это прообраз будущего веб-ресурса. Именно на этапе прототипирования формируется структура как всего сайта, так и его страниц.
Режим просмотра прототипа
В правом верхнем углу есть пункт Preview. Нажмите на него, чтобы включить режим просмотра прототипа. Чтобы вернуться в режим редактирования, нажмите Edit Project.
Как создать новую страницу
На вертикальной панели слева выберите пункт Page. Нажмите New page. Новая страница создана. Трафареты можно копировать между страницами (например, сразу можно скопировать меню и футер).
Как поделиться ссылкой на прототип
На верхней горизонтальной панели нажмите на пункт Sharing. Чтобы прототип смогли увидеть все, у кого есть ссылка, выберите Anyone with the link can view. Нажмите Copy link. Ссылка скопируется в буфер обмена. Отправьте ее коллегам или заказчику.