Как сделать прототип сайта не закрывая браузер? Для решения этой задачи есть отличный онлайн-сервис – moqups.com. Эта статья – первая часть обзора Moqups, в которой я расскажу про регистрацию в сервисе и особенности интерфейса.
Итак, приступим!
Проходим регистрацию
Чтобы начать пользоваться сервисом, перейдите на сайт app.moqups.com. Перед нами сразу появляется форма для регистрации. Вводим e-mail и пароль и нажимаем кнопку Create account.
Следующая форма – предложение ввести свое имя и сферу деятельности (необязательно). Заполните поле с именем и нажмите кнопку Continue.
Далее вы можете создать свой проект с чистого листа либо выбрать готовый шаблон. Нажмите на Blank Project.
Следующая форма – приглашение участников проекта. Эту процедуру можно пропустить. Нажмите на I'll do this later.
Перед нами рабочая область. Чтобы убрать оранжевое поле с текстом вверху страницы, подтвердите адрес электронной почты (нажмите на слово here в тексте).
Рассмотрим интерфейс Moqups
Ниже я перечислю только основные элементы интерфейса – этого будет достаточно, чтобы начать создание прототипа.
- Main menu. Выполнение различные действий над проектом – создать, открыть, сохранить, экспортировать и т.д.
- Stencils. Выбор трафарета. Трафареты – это элементы, из которых будет состоять прототип: текстовые блоки, кнопки, ссылки, изображения и т.д.
- Pages. Управление страницами – добавление новых, удаление, скрытие.
- Images. Загрузка своих изображений.
- Icons. Набор иконок для прототипа.
- Comments. Добавление комментариев в проект.
- Полный список трафаретов (Stencils), которые можно использовать для создания прототипа. Когда выбран пункт Pages, в этом окне будет показан список страниц проекта, для пункта Images – доступные изображения и т.д.
- Undo/Redo. Отмена/возврат действия.
- Смена масштаба страницы.
- Workspace. Настройки рабочего пространства. Здесь можно задать размеры страницы, показать сетку для разметки и др.
- Sharing. Поделиться ссылкой для просмотра прототипа.
- Format. По клику можно скрыть/показать окно свойств объекта (15) – трафарета, изображения, иконки.
- Preview. Включение режима просмотра прототипа.
- Рабочий лист на котором создается прототип.
- Окно свойств объекта. Здесь можно поменять размер и начертание шрифта, толщину обводки у кнопки и многое другое.
Прототипирование в Moqups заключается в перетаскивании объектов (например, трафаретов) на рабочий лист, расположение их в нужном месте и редактирование свойств.
Во второй части статьи я приведу пошаговую инструкцию по созданию прототипа и покажу как расшарить его для коллег или заказчика.
Ссылка на продолжение будет размещена в комментариях к этой статье в ближайшее время.
Желаю успехов!