Прообразом готового сайта является прототип. На нем можно отразить будущие страницы веб-ресурса и структурные части: изображения, тексты, кнопки, баннеры, навигационное меню, формы обратной связи и т.д.
Для лучшего понимания проведем аналогию с авиастроением. Фюзеляж, крылья и другие части самолета нужно сначала начертить. Только получив готовые чертежи от конструкторов, на производстве смогут приступить к сборке. В нашем случае прототип сайта – это чертеж.
Зачем нужен прототип? Для заказчика и исполнителя это возможность уже на ранних этапах разработки увидеть, как сайт будет выглядеть и работать. Благодаря «наглядному пособию» взаимодействие всех участников процесса по созданию сайта значительно улучшается. При этом, упрощаются задачи дизайнера, верстальщика, программиста, сокращается время работы на их этапах.
Любые структурные и иные ошибки легко и быстро исправляются на прототипировании, т.е. до начала более трудных с технической точки зрения стадий разработки. Ошибки, обнаруженные после этапов дизайна и, особенно, программирования, могут привести к серьезным переработкам. Для исполнителя это временные и финансовые потери.
Прототип может быть разной детализации (степени проработки). Чем больше на нем подробностей, тем меньше работы (и возможных ошибок) на последующих этапах создания сайта.
Прототипирование сайта онлайн в Moqups
Одним из быстрых и удобных способов создать прототип сайта является популярный сервис Moqups. Для работы в нем не потребуется устанавливать дополнительное программное обеспечение, прототипирование происходит прямо в окне браузера.
Чтобы показать готовый прототип заказчику или коллегам, достаточно просто поделиться с ними ссылкой. Экспорт в pdf и png также есть (но в платной версии).
Отрисовка прототипа выполняется путем перетаскивания с панели инструментов готовых объектов (под объектами подразумеваются структурные части сайта – изображения, кнопки, тексты, иконки и т.д.) на рабочий лист, где их можно расположить в нужном порядке (с учетом правил юзабилити) и отредактировать.
Moqups доступен на английском языке, русской версии нет, но благодаря дружественному и интуитивно понятному интерфейсу освоить главные функции сервиса (которых хватит для решения 90% задач) очень просто.
Итак, начнем!
Поверх открывшейся страницы видим всплывающее окно, на котором предлагается посмотреть ознакомительное видео. Нажимаем на синюю кнопку Start designing (или на крестик в правом верхнем углу окна).
Мы попали в рабочий интерфейс сервиса. Для регистрации аккаунта, нажимаем кнопку Log in в верхней правой части экрана (создать прототип можно и без регистрации, но сохранить его будет нельзя).
В открывшемся окне нажимаем самую нижнюю кнопку Don’t have an account yet? Sign up here.
Вводим регистрационные данные – email, логин, пароль и нажимаем кнопку Create account.
После регистрации нам сразу предлагается воспользоваться платной версией сервиса.
В бесплатном варианте Moqups есть лимит на количество проектов (только 1) и объектов – трафаретов, иконок, изображений (не более 300). Чтобы снять ограничения, придется оплатить аккаунт, выбрав один из 3-х тарифных планов. Если заплатить сразу за 1 год, скидка составит 40%.
Чтобы закрыть окно, нажимаем на крестик в правом верхнем углу.
Мы вновь находимся в рабочем интерфейсе. Рассмотрим его подробно.
1 – Вызов меню. Различные действия с проектом (открыть новый, сохранить, экспортировать и т.д.), просмотр информации о сервисе и справочное руководство.
2 – Stencils. Набор трафаретов для отрисовки прототипа.
3 – Page. Добавление новых страниц в проект, удаление/скрытие лишних.
4 – Outline. Вывод списка всех объектов с рабочего листа.
5 – Templates. Создание собственных объектов.
6 – Images. Загрузка изображений в проект.
7 – Icons. Добавление графических иконок.
8 – Comments. Добавление комментариев для коллег или заказчика.
9 – Название проекта и активной страницы.
10 – Набор трафаретов.
11 – Кнопки отмены/возврата действия.
12 – Увеличение/уменьшение масштаба.
13 – Group. Группировка объектов.
14 – Lock. Блокировка объектов.
15 – Arrange. Размещение объектов по слоям, выравнивание на рабочем листе.
16 – Sharing. Получение ссылки на проект или открытие доступа для редактирования другим пользователям.
17 – Workspace. Настройки рабочего листа (привязка к сетке, установка размеров и т.д.).
18 – Рабочий лист.
19 – UPGRADE NOW. Выбор платного тарифного плана.
20 – Настройки аккаунта.
21 – Format. Скрыть/показать панель свойств объектов.
22 – Preview. Включить режим просмотра прототипа.
23 – Панель свойств объектов.
Перед началом работы устанавливаем размеры рабочего листа и добавляем сетку для разметки. Нажимаем на кнопку Workspace, ставим галочку у пункта Show paper grid и нажимаем Page Settings.
Задаем размеры, например, 960 px на 2000 px (размеры также возможно изменить, подведя мышку к краю рабочего листа: когда курсор примет вид стрелочки, область можно растянуть или сузить) и нажимаем кнопку Apply.
Удаляем лишние объекты. Выделяем мышкой рабочий лист (так, чтобы захватить все объекты), нажимаем правую кнопку мыши и выбираем пункт Delete в открывшемся меню.
Теперь сделаем шапку сайта. Перетаскиваем мышкой на рабочий лист трафарет Rectangle (прямоугольник) и Paragraph (текстовый блок). Если размер монитора небольшой, то панель свойств справа может частично закрыть рабочий лист. Чтобы скрыть панель, нажимаем в правом верхнем углу кнопку Format.
Выделяем прямоугольник и делаем у него скругленные углы. На панели свойств изменяем значения параметров скругления в пикселях.
Выделяем текстовый блок и делаем двойной щелчок левой кнопки мыши по тексту. После этого текст можно редактировать. Выделяем шаблонный текст, удаляем его и пишем слово «логотип». Рядом с редактируемым текстом появляется маленькая панель для быстрого форматирования. Помимо нее, текст можно оформить через панель свойств (задать размер, гарнитуру, начертание, цвет и т.д.).
Перемещаем текст на прямоугольник. Обозначение логотипа готово.
Теперь сделаем дескриптор. Аналогичным образом перетаскиваем трафарет Paragraph к логотипу и редактируем его.
Далее сделаем поле для поиска по сайту. Находим трафарет Search input, размещаем его чуть правее от дескриптора. Двойным щелчком мыши по тексту в поле поиска меняем маску на «Поиск по сайту».
С помощью трафарета Paragraph указываем контактный телефон, адрес офиса и время его работы. Перетаскиваем трафарет и оформляем текст.
Теперь сделаем верхнее меню. Среди трафаретов есть несколько заготовок для навигации. Но в данном случае можно воспользоваться все тем же универсальным трафаретом Paragraph.
Добавим важный элемент интернет-магазина – корзину. На панели инструментов выбираем вкладку Icons. В ней ищем значок корзины (можно через поиск по первым буквам слова «shopping»). Перетаскиваем значок на рабочий лист. Выделив значок, можно изменить его размеры, подведя курсор к его краям. Второй вариант смены размеров – через панель свойств.
С помощью трафарета Paragraph добавим надпись «Корзина» и информацию о количестве находящихся в ней товаров (на готовом сайте эта надпись будет меняться, в зависимости от наполнения корзины).
Сделаем навигацию по категориям товаров. Воспользуемся трафаретом Tabs.
Двойной щелчок левой кнопки мыши по тексту в трафарете позволяет отредактировать названия категорий и добавить новые. Подведя курсор к краям трафарета меняем его размер.
Добавим обозначение изображений акционных товаров. Используем для этого трафарет Image placeholder.
Добавим заголовок «Специальные предложения» и информацию о товарах (название, старая и новая цена) с помощью трафарета Paragraph.
Под ценами сделаем кнопки «В корзину», воспользовавшись трафаретом Button.
Аналогичным образом продолжаем отрисовку, для этого используем необходимые трафареты, иконки и наполняем прототип текстами.
Сделаем ниже блок «Новинки».
Затем блок «Почему заказывают у нас».
В самом конце отрисуем подвал страницы.
Целиком спроектированная страница выглядит так.
Когда главная страница готова, можно приступать к прототипированию следующих страниц сайта. На панели инструментов слева выбираем вкладку Page и нажимаем кнопку New page.
Мы создали чистый лист для проектирования. Рядом с кнопкой Page выводится список страниц сайта, двойной щелчок левой кнопки мыши по названиям страниц позволяет их переименовать.
Шапка и подвал, как правило, остаются неизменными на всем сайте, поэтому их можно просто скопировать с главной страницы.
Открываем главную страницу, выделяем полностью всю шапку, нажимаем правую кнопку мыши и выбираем пункт Copy.
Открываем новую страницу, делаем щелчок правой кнопкой мыши по рабочему листу и выбираем пункт Paste in place.
В любой момент мы можем переключиться из режима редактирования прототипа в режим просмотра. Для этого нажимаем кнопку Preview в правом верхнем углу рабочего интерфейса.
Чтобы вернуться в режим редактирования, нажимаем кнопку Edit project.
Поделиться прототипом можно с помощью кнопки Sharing. В открывшемся меню копируем ссылку из поля Project Link и отправляем коллегам или заказчику.
Не забываем регулярно сохранять проект. Для этого нажимаем кнопку вызова меню в левом верхнем углу экрана и выбираем пункт Save.
Заключение
В первый части статьи мы выяснили, что такое прототип и для чего он нужен. Далее на примере проектирования главной страницы сайта рассмотрены основные возможности онлайн-сервиса Moqups, с помощью которого в короткий срок можно создать полноценный прототип.
Важно понимать, что отрисовка – это только техническая часть работы. Ее предваряет длительная разработка концепции сайта. Именно от тех идей, которые мы закладываем в прототип, зависит насколько комфортным для пользователя и эффективным для владельца будет готовый сайт.
