Что такое прототипирование сайтов и зачем это нужно: инструкция по созданию

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

Прототипирование – это процесс создания детального макета страницы, который необходим, чтобы сформировать концепт: продумать интерфейс и подготовиться к графическому оформлению страницы. Разберемся, что такое прототипирование, как его сделать и какие особенности процесса следует учесть при работе, более детально читай тут https://ux.pub/interfaces/prototype/.

Общее представление

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

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

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

• скорость создания – до 20-30 минут;
• возможность вносить изменения в отдельные элементы;
• реализация онлайн-доступа;
• подробный уровень детализации.

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

Варианты исполнения

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

1. Бумажный макет. В этом случае будущий сайт рисуется на белом листе. Это удобно тем, кто работает в офисе и принимает заказчиков лично. Также вариант подходит для мозгового штурма, когда над проектом работает команда и нет времени прорисовывать все на ПК. Из недостатков – сложность внесения корректировок. Итоговый вариант может содержать столько правок, что разобраться будет сложно.
2. Мольберт или доска. Этот вариант – расширенная версия бумажного. Главное преимущество состоит в масштабности. К тому же рабочую поверхность можно очищать от ненужных вариантов, поэтому в итоге останется готовое решение со всеми правками. Подходит для тех, кто трудится командой в офисе.
3. Программы и приложения. Способ хорош, поскольку позволяет учитывать не только общую концепцию, но и сразу расставлять элементы в соответствии с версткой сайта. Наиболее точно отражает то, как будет выглядеть страница. Многие решения позволяют делиться результатами онлайн. Также можно использовать интернет-расширения, которые позволяют создавать прототипы в браузере и делиться результатами.

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

Инструкция по созданию

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

• шапка;
• основная часть;
• боковые меню;
• подвал.

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

Header

Это верхняя часть сайта. Как правило, она повторяется на всех страницах, поэтому к ее созданию нужно подходить внимательно. Тут размещается информация, наиболее важная для клиента. Базовые элементы:

• логотип или название компании;
• контакты и/или адрес;
• call to action кнопка или форма обратной связи;
• кнопка входа в личный кабинет;
• офер.

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

Content

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

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

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

Side bar

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

• чат;
• рубрики;
• актуальные новости;
• ссылки на сайты;
• социальные кнопки.

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

Footer

Нижняя часть сайта редко интересна пользователям, но она имеет огромное значение для SEO. Здесь сосредоточены инструменты перелинковки, быстрые ссылки на разделы сайта, информация об авторских правах.

Некоторые дизайнеры в этом блоке дублируют сайд-бар. Это недопустимо, поскольку такое решение создает дубли в рамках одной страницы. Продумайте, какая информация не слишком нужна пользователю, но в то же время связывает между собой все страницы сайта. Именно ей и место в подвале.

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

Источник