+7 (499) 424-03-65
пн -пт с 10:00 до 19:00
Обратный звонок
  • Главная
  • /
  • Блог
  • /
  • Зачем нужен прототип сайта и как его быстро сделать онлайн

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

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

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



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



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



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



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



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



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


Вас может заинтересовать:

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