Проектирование сайта: что входит, с чего начать и зачем нужен прототип?

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

С чего начать проектирование сайта?

1. Анализ

На самом деле создание самого прототипа – это далеко не первый этап, как может сначала показаться. В начале идет аналитика. Возвращаемся к примеру со строительством дома. Чтобы создать чертеж (то есть прототип), нам необходима информация, которая непосредственно будет влиять на внешний вид, размеры и другие параметры дома. Сколько людей будет в нем жить? Есть ли у них автомобиль? Сколько необходимо этажей? Есть ли у них дети, домашние животные и так далее.

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

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

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

2. Создание структуры сайта и составление технического задания

Когда основные вопросы «Зачем?» «Для кого?» и «Для чего?» закрыты, можно переходить к следующему этапу. Мы разрабатываем структуру сайта. Это пока еще не прототип, но уже близко к нему. В текстовом виде перечисляются разделы и подразделы, которые будут у нас на сайте. В итоге получается «карта сайта». Для еще более детального понимания, что у нас будет в каждом из разделов и как именно они будут функционировать, мы разрабатываем техническое задание (ТЗ). Структура сайта и техническое задание необходимы прототипировщику и копирайтеру для их работы.

3. Сбор информации и составление прототипа

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

Итак, что такое прототип?

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

Важно! Никакого отношения к итоговому дизайну прототип не имеет. Вспоминаем наш пример с домом. Представьте черно-белый чертеж, на котором вся мебель, окна, двери изображены в виде простых значков. Это такой же прототип. Он ни коем образом не передает стиль интерьера и экстерьера. Точно также это работает и в сайтостроении.

Зачем нужен прототип?

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

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

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