Прототип сайта это простыми словами
Коротко
Прототип сайта — это схема страницы до дизайна: какие блоки на ней есть, в каком порядке идут, что в них написано и куда ведут кнопки. В нём нет цветов, шрифтов и картинок. Прототип отвечает на вопрос «что и зачем на странице», дизайн — «как это выглядит».
Зачем нужен прототип
Прототип показывает структуру страницы до того, как в работу включился дизайнер. На нём видно, сколько блоков, какие заголовки, где форма заявки, что человек прочитает первым, а что в конце. Пока это схема, поменять местами два блока или убрать лишний стоит минуты. В готовом дизайне та же правка тянет за собой перерисовку макета и вёрстку.
Второе: прототип заставляет написать текст заранее. Если блок задуман, а сказать в нём нечего, это выясняется на схеме, а не на готовом сайте с рыбой вместо текста. Поэтому прототип делают после того, как собран спрос и понятно, какими словами покупатели ищут услугу.
Что входит в прототип
- Список страниц: какие нужны и как они связаны между собой.
- Структура каждой страницы: последовательность блоков сверху вниз.
- Заголовки и основной текст в блоках — не рыба, а то, что прочитает покупатель.
- Кнопки и формы: где стоят, что написано на кнопке, куда ведёт нажатие.
- Меню и навигация: какие пункты, сколько их, что в подвале.
- Пометки для дизайнера: что важнее показать крупно, какие элементы интерактивные.
Прототип и дизайн: в чём разница
| Прототип | Дизайн | |
|---|---|---|
| Что решает | Что и зачем на странице | Как страница выглядит |
| Что видно | Блоки, тексты, кнопки, порядок | Цвета, шрифты, фото, отступы |
| Когда делают | До дизайна | После утверждённого прототипа |
| Цена правки | Минуты: переставить блок | Часы: перерисовать макет и вёрстку |
Какие бывают прототипы
По детализации прототипы делят на два вида. Низкой детализации — серые прямоугольники и подписи: видно только каркас и путь человека по странице. Высокой детализации — почти готовый интерфейс с настоящими текстами, кнопками и состояниями, но без финального оформления.
По способу исполнения прототип бывает статичным — картинка или документ, и интерактивным — кликабельная модель, где можно нажать кнопку и перейти на следующую страницу. Для проверки структуры хватает статичного. Интерактивный нужен, когда тестируют сценарий на живых людях: дают человеку задачу и смотрят, где он застревает.
Частые вопросы
Можно ли сделать сайт без прототипа?
Можно, и так часто делают. Тогда структура и тексты рождаются уже в дизайне, и каждая правка стоит дороже. Прототип нужен там, где важно заранее договориться о содержании страниц: на лендинге под рекламу, на сайте услуг, на страницах под поисковый спрос.
Прототип — это то же самое, что макет?
Нет. Макет — это дизайн: цвета, шрифты, картинки, отступы. Прототип — схема без оформления. Дизайнер рисует макет по утверждённому прототипу, а не придумывает структуру заново.
Кто делает прототип?
Обычно проектировщик интерфейса или маркетолог, который отвечает за смысл страницы. Если сайт делают под продвижение, прототип собирает тот, кто знает, какими словами ищут услугу: иначе страницы не совпадут со спросом.
Сколько времени занимает прототип?
Зависит от числа страниц и готовности текстов. Срок называют после того, как определён список страниц: одна страница и двадцать — разная работа.
Что делать после утверждения прототипа?
Прототип уходит в дизайн, затем в вёрстку. Если по ходу меняется структура, правку сначала вносят в прототип и заново утверждают: так дизайн и вёрстка не расходятся с согласованной схемой.
Читать в журнале
Когда прототип нужен под заявки, а не для красоты
Чтобы страницы совпали с тем, как ищут вашу услугу
Прототип, собранный без спроса, повторяет структуру конкурентов: те же блоки, те же слова. Тогда сайт выглядит прилично, а заявок не прибавляет.
Я собираю спрос и язык покупателей, по ним планирую страницы и только потом делаю лёгкий сайт на своём движке. Прототип в этой работе — первый шаг, а не картинка для согласования.