Эскиз, прототип, макет, шаблон: в чем разница, и зачем они нужны при разработке сайта

Речь сейчас пойдет не о «правильности» или «неправильности» тех или иных терминов, а об их наиболее распространенных смыслах. Тема поднята только для того, чтобы привести «хотелки» заказчика и результат исполнения к единому знаменателю.

Какие термины используются для обозначения этапов разработки сайта

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

Пример эскиза реального проекта

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

Пример прототипа реального проекта

Макет (мокап) – визуальное, «раскрашенное» воплощение сайта – готовый дизайн, сделанный в каком-либо графическом редакторе, готовый к верстке. Тексты в макете уже должны быть реальными, так как их объем напрямую влияет на дизайн.

Пример макета реального проекта

Шаблон – сверстанный сайт с «рыбными» данными, который можно выложить на хостинг и наполнять реальными текстами, графикой и пр. В качестве примера можно привести шаблоны WordPress.

Зачем нужны все эти эскизы, прототипы, макеты?

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

Во-вторых, часто на каждом этапе – отдельный исполнитель (прототипщик, дизайнер, верстальщик, программист). Каждый подходит к проекту со своими компетенциями и привносит в него свое видение. А конечный продукт одного специалиста служит ТЗ для другого. Верстальщик вряд ли возьмется за работу без полноценного дизайн-макета, а дизайнеру нужен хотя бы эскиз, чтобы понять стоящую перед ним задачу.

Имейте в виду, что итог может сильно отличаться от задумки.

Говорите с исполнителями на одном языке. Красивых и продающих вам сайтов!

И обращайтесь за дизайном. Буду рада поработать над вашим проектом!