пн -пт с 11:00 до 20:00
Заказ с сайта 24 часа

Зачем нужен прототип сайта и как его быстро сделать онлайн

userfiles/chto-takoe-prototip/prototype.jpg

Прообразом готового сайта является прототип. На нем можно отразить будущие страницы веб-ресурса и структурные части: изображения, тексты, кнопки, баннеры, навигационное меню, формы обратной связи и т.д.


Для лучшего понимания проведем аналогию с авиастроением. Фюзеляж, крылья и другие части самолета нужно сначала начертить. Только получив готовые чертежи от конструкторов, на производстве смогут приступить к сборке. В нашем случае прототип сайта – это чертеж.


Зачем нужен прототип? Для заказчика и исполнителя это возможность уже на ранних этапах разработки увидеть, как сайт будет выглядеть и работать. Благодаря «наглядному пособию» взаимодействие всех участников процесса по созданию сайта значительно улучшается. При этом, упрощаются задачи дизайнера, верстальщика, программиста, сокращается время работы на их этапах.


Любые структурные и иные ошибки легко и быстро исправляются на прототипировании, т.е. до начала более трудных с технической точки зрения стадий разработки. Ошибки, обнаруженные после этапов дизайна и, особенно, программирования, могут привести к серьезным переработкам. Для исполнителя это временные и финансовые потери.


Прототип может быть разной детализации (степени проработки). Чем больше на нем подробностей, тем меньше работы (и возможных ошибок) на последующих этапах создания сайта.


Прототипирование сайта онлайн в Moqups


Одним из быстрых и удобных способов создать прототип сайта является популярный сервис Moqups. Для работы в нем не потребуется устанавливать дополнительное программное обеспечение, прототипирование происходит прямо в окне браузера.


Чтобы показать готовый прототип заказчику или коллегам, достаточно просто поделиться с ними ссылкой. Экспорт в pdf и png также есть (но в платной версии).


Отрисовка прототипа выполняется путем перетаскивания с панели инструментов готовых объектов (под объектами подразумеваются структурные части сайта – изображения, кнопки, тексты, иконки и т.д.) на рабочий лист, где их можно расположить в нужном порядке (с учетом правил юзабилити) и отредактировать.


Moqups доступен на английском языке, русской версии нет, но благодаря дружественному и интуитивно понятному интерфейсу освоить главные функции сервиса (которых хватит для решения 90% задач) очень просто.


Итак, начнем! Переходим по ссылке:


app.moqups.com


Поверх открывшейся страницы видим всплывающее окно, на котором предлагается посмотреть ознакомительное видео. Нажимаем на синюю кнопку 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, с помощью которого в короткий срок можно создать полноценный прототип.


Важно понимать, что отрисовка – это только техническая часть работы. Ее предваряет длительная разработка концепции сайта. Именно от тех идей, которые мы закладываем в прототип, зависит насколько комфортным для пользователя и эффективным для владельца будет готовый сайт.

Комментарии (0)

    Оставьте свой комментарий

    НЕ НАШЛИ ОТВЕТА НА СВОЙ ВОПРОС?
    МОЖЕТ, ПРИШЛО ВРЕМЯ
    ОБСУДИТЬ СОТРУДНИЧЕСТВО?

    Если Вы хотите поработать с нами, просто заполните форму и мы Вам перезвоним



    Если вы
    хотите заказать у нас разработку landing-page, отправьте ваши данные нам через форму



    Заполните пожалуйста заявку и мы свяжемся с Вами в ближайшее время