Блог дизайнера

Как сделать прототип сайта?

Что такое прототип сайта?

Прототип сайта — это схема будущего сайта, которая помогает визуализировать размещение информации (контента) на сайте.

Каким может быть прототип сайта?

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

Примеры прототипа сайта

Графический прототип (пример)
Текстовый прототип (пример)
_____ 1 блок _____

Заголовок: "Свежие морепродукты с доставкой на дом"

Подзаголовок: "Свежая рыба, красная икра, морские деликатесы и множество других морепродуктов по низким ценам."

Кнопка "Заказать" (переход на всплывающее окно с формами имени, телефона и кнопкой "отправить". Заголовок: "Оставьте свой телефон и мы вам перезвоним")

Этот блок должен быть ярким, мне бы хотелось видеть фотографию морепродуктов на заднем фоне.

_____ 2 блок _____

Заголовок: "Почему заказывать морепродукты следует у нас: "Следующий текст оформите на свой вкус:

- Доставка в Новосибирске и Новосибирской области

- Собственный склад в пределах города

- Доставка до квартиры в течение 1 суток

Кнопка "Узнать больше" (будет вести на блок ниже, под названием "Мы гарантируем качество нашего товара")

_____ 3 блок _____

Заголовок: "Мы гарантируем качество нашего товара "Тут следует разместить фотографии наших сертификатов, которые находятся по ссылке "ссылка"

_____ 4 блок _____

Заголовок: "Отзывы наших клиентов" Тут следует разместить отзывы наших клиентов, которые находятся в текстовом документе.

_____ 5 блок _____

Заголовок: "Контакты"

Телефон: +7 999 999 99 99

E-mail: mail@mail.ru

Далее нужно сделать форму обратной связи

Подзаголовок: "Оставьте свой телефон и мы вам перезвоним"

Поля для ввода имени и телефона и кнопка "отправить".

В каком виде нужно передавать прототип дизайнеру?

Во-первых: Весь контент в одном месте.
Весь текстовый контент нужно собрать в один документ расставив поочередно, все фотографии пронумеровать и разделить по папкам (страницам).

Во-вторых: Пример дизайна, который вам нравится.
Приведите в пример любой сайт или несколько сайтов, которые вам нравятся. Они послужат реферансами (ориентиром) и будут взяты за основу вашего сайта.
Если вам нравятся отдельные элементы с разных сайтов, то так и распишите в ТЗ: Адрес сайта www.site.ru, мне нравится оформление главной страницы, адрес сайта www.site2.ru, мне нравится как сделан каталог товаров и т.п.

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

В-четвертых: Дополнительные пожелания.
Напишите уточнения (пожелания) по картинкам, блокам, кнопкам, формам, всплывающим окнам и другим элементам.

Заключение

Заключение
Прототип сайта является важным инструментом при создании сайта, позволяющим определить основные элементы дизайна и функционала и получить представление о том, как будет выглядеть ваш готовый сайт. Прототип поможет сэкономить время и ресурсы на этапе разработки, предотвратит ошибки и позволит быстро внести изменения.
Made on
Tilda