Найти тему
Простой маркетинг

Что такое прототип сайта, для чего он нужен и как его создать

Оглавление

Для того, чтобы лучше понять, что такое прототип сайта, приведу простую аналогию.

Допустим вы хотите построить дом. С чего начать? С создания проекта. Один из этапов проектирования – это подготовка чертежей, на которых будут отражены фундамент, несущие стены, перегородки и другие элементы конструкции здания, а также коммуникации.

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

Прототип первого экрана интернет-магазина по продаже водоотводных систем
Прототип первого экрана интернет-магазина по продаже водоотводных систем

Почему нужны прототипы:

  • на ранних этапах работы можно увидеть облик будущего сайта, учесть пожелания заказчика, легко и быстро внести необходимые правки;
  • заказчик и исполнитель смогут согласовать структуру сайта и его функционал до технически сложных этапов работы – дизайна и верстки, когда любая правка может привести к большим трудозатратам и, нередко, конфликтным ситуациям;
  • улучшается взаимодействие всех участников разработки сайта, упрощается работа дизайнера и программиста – прототип для них фактически станет визуально оформленным техническим заданием.

Прототип можно сделать двумя способами:

  1. Нарисовать от руки карандашом на бумаге.
  2. Использовать специализированные программы или онлайн-сервисы.

Если у вас небольшой проект (например, сайт-визитка) вполне подойдет первый способ. Второй вариант более предпочтителен при работе над более крупными проектами (landing page, сайт компании, интернет-магазин).

Для создания прототипов я рекомендую использовать сервис moqups, в котором работаю более 5 лет. Пользоваться им просто.

  1. Проходите регистрацию – вводите адрес почты и придумываете пароль.
  2. Перед вами чистый лист – это первая страница будущего прототипа.
  3. Слева находится панель трафаретов (например, текстовый блок), справа – параметры (размер, начертание), сверху – различные настройки страницы.
  4. Техническая часть прототипирования заключается в перетаскивании необходимых трафаретов на лист и их последующее редактирование.
Интерфейс moqups
Интерфейс moqups

Инструкция по работе в moqups – это тема для отдельной статьи, которая скоро будет на моем канале.