Дизайн любого сайта начинается с разработки проекта и анализа конкурентов. В ходе разработки также следует позаботиться о создании прототипа и подготовки дизайна к верстке. В целом это многоэтапный процесс, который требует четкого соблюдения плана. Причем каждую стадию этого процесса необходимо согласовывать с заказчиком. Благодаря этому, можно аргументировать собственные решения и избежать многочисленных правок.
Этапы разработки дизайна сайта
Условно процесс разработки дизайна веб-ресурсов принято делить на несколько этапов:
- создание брифа;
- анализ конкурентов;
- разработка проекта;
- разработка прототипа;
- разработка дизайн-макета;
- подготовка дизайна к верстке.
Бриф
Бриф представляет собой перечень вопросов, который исполнитель должен задать заказчику. Благодаря этому, исполнитель может понять, какой именно итоговый результат нужен заказчику. Стоит заметить, что это ознакомительный этап. Поэтому у сторон нет никаких обязательств. На данной стадии любая сторона может без проблем отказаться от дальнейшего сотрудничества.
В бриф обычно входят такие вопросы:
- Как заказчик видит будущий сайт?
- Кто является его ЦА?
- Какой должна быть структура ресурса?
- Какие есть предпочтения в вопросах дизайна?
- Для чего создается сайт?
- Кто является конкурентом сайта?
Это только короткий перечень вопросов. В брифе могут быть десятки вопросов, которые помогут исполнителю понять ожидания заказчика. Опрос чаще всего проводится путем звонка. Чтобы ближе познакомиться, чаще всего заказчик и исполнитель общаются через Скайп или любой другой сервис видеосвязи.
Если у сторон нет времени для живого общения по видеосвязи, то исполнитель отправляет на эмейл клиента файл с брифом, который нужно заполнить и обратно переслать.
Кроме брифа, составляется техническое задание. Основой ТЗ являются ответы заказчика в брифе. В техническом задании указываются требования заказчика к дизайну и структуре веб-ресурса. Его необходимо согласовать с клиентом. В целом исполнителю следует обязательно согласовывать все важные этапы разработки с заказчиком. В таком случае можно избежать недопонимания и необходимости переделывать свою работу.
Анализ конкурентов
На следующем этапе между заказчиком и исполнителем заключается договор. Следовательно, у исполнителя появляются обязательства перед заказчиком, которые он должен четко выполнять. В частности, исполнитель должен не только дать готовый результат, но и соблюдать сроки, прописанные в договоре. Свои обязательства есть и у заказчика. Он обязан оплатить работу исполнителя.
Если главной задачей исполнителя является оптимизация рекламной кампании, он должен внимательно изучить и проанализировать нишу и конкурентную среду в ней. Данный этап можно назвать ключевым. Его грамотное выполнение существенно упрощает будущие работы по разработке дизайна сайта.
Исполнитель должен полностью погрузиться в деловую деятельность клиента. Он должен понимать, как работает бизнес заказчика. После этого необходимо обратить внимание на как минимум 5 ключевых конкурентов. Желательно, чтобы сведения об основных конкурентах предоставил именно заказчик. Для этого необходимо прописать соответствующий вопрос в брифе.
Конкурентов также можно найти в поисковых системах. Для этого достаточно указать в поиске нишу клиента (например, продажа смартфонов в Москве). В поисковой выдаче появятся десятки сайтов, которые и являются конкурентами разрабатываемого ресурса. При этом нет никакого смысла анализировать все выданные сайты. Достаточно оценить сайты конкурентов на первой странице поисковой выдачи.
Учитывая, что будут анализироваться сразу несколько сайтов, все полученные сведения следует обязательно записать. В противном случае можно что-нибудь забыть или запутаться. Если в процессе анализа будут возникать какие-либо вопросы, их желательно задать заказчику. Все-таки он намного лучше знает свой бизнес.
Остается добавить, что анализ конкурентов – это возможность взять лучшее у тех, кто уже разрабатывал похожий проект. При этом чужой опыт можно существенно улучшить и получить ожидаемый результат.
Проектирование
На данной стадии разрабатываются проекты будущих блоков сайта. Для этого необходимо учитывать ответы заказчика в брифе и результаты ранее выполненного анализа конкурентов. Данный процесс можно назвать информационной архитектурой. В ходе разработки проекта также важно понимать, что финальный дизайн сайта может несколько отличаться от того, что было задумана изначально.
Данная стадия необходима, чтобы понять, как должен выглядеть готовый сайт. Для разработки проекта можно использовать не только графический редактор, но и обычный лист бумаги. Конечно же, первый вариант намного удобнее и практичнее с той точки зрения, что все материалы по разработке веб-ресурса будут находиться в одном месте.
Итогом данного этапа является четко спроектированная структура веб-ресурса. Ее следует обязательно согласовать с заказчиком.
Прототип
На следующем этапе необходимо собрать референсы, которые вдохновят исполнителя на создание прототипа сайта. Причем референсы могут быть собраны как по теме сайта, так и из любой другой ниши. В ходе данного процесса нужно снова обратиться к брифу. В нем заказчик может детально расписать стилистику сайта.
Отдельно стоит сказать о референсах из других ниш. Их тоже стоит использовать, если по мнению исполнителя эти референсы можно адаптировать под проект, над которым он работает.
Имея на руках референсы, исполнитель может разработать прототип веб-ресурса. Под прототипом подразумевается некий промежуточный результат между проектом и готовым решением. Он представляет собой готовый, но еще не детализированный сайт.
В процессе разработки прототипов исполнитель работает с компоновкой, композицией и т.д. Если прототип получается детализированным, на финальном этапе исполнителю останется только лишь добавить к нему необходимые цвета и изображения. Но стоит понимать, что на данном этапе совершенно необязательно детализировать прототип. Его можно сделать довольно простым. Детализация на данной стадии не является принципиальным вопросом.
В прототипе допускается:
- указание не конкретных изображений, а обыкновенных геометрических фигур (например, квадратов или прямоугольников);
- указание не иконок, а условных обозначений в виде все тех же геометрических фигур;
- возможность не придерживаться отступов и других рамок.
Все перечисленные моменты могут быть доработаны уже на завершающей стадии. А вот на этапе разработки прототипа, прежде всего, нужно сделать так, чтобы заказчик увидел очертания конечного дизайна веб-ресурса. И, конечно же, данный этап разработки также требует обязательного согласования.
Разработка дизайн макета
Именно на этом этапе начинается непосредственная работа с дизайном сайта в привычном для всех понимании. Таким образом, можно сделать вывод, что 80% работы современного дизайнера – это анализ и разработка проекта. А вот на сам дизайн обычно уходит не больше 20% времени, отведенного для работы с конкретным проектом.
На стадии разработки дизайн макета потребуется добавление цвета в ранее подготовленный прототип. Его необходимо строго выровнять, подкорректировать отступы, добавить изображения и иконки и т.д.
На завершающей стадии работ допускается отступление от прототипа в пользу более привлекательных дизайнерских решений. Однако не стоит переусердствовать, так как прототип уже был согласован с заказчиком. Если допустить серьезные изменения прототипа, финальный результат будет существенно отличаться от того, что ожидает клиент.
Если же напрашиваются какие-либо изменения ранее согласованного прототипа, они требуют обязательного согласования с клиентом. После этого можно утверждать, что дизайн сайта полностью готов. Чтобы его презентовать заказчику, можно сделать небольшую анимацию, которая позволит представить разработку в выгодном свете. Данный момент не является обязательным, однако он позволяет создать своеобразный wow-эффект. После этого остается только лишь передать дизайн для подготовки к верстке.
Подготовка дизайна к верстке
Несмотря на то, что все основные работы завершены, исполнитель должен позаботиться о том, чтобы дизайн был удачно интегрирован в веб-ресурс. Для этого потребуется тесное взаимодействие дизайнера с разработчиком сайта, у которого может возникнуть множество вопросов. Чтобы предупредить эти вопросы и сэкономить свое время, исполнителю нужно подготовить так называемый стайл-гайд. В этом гайде нужно указать цвета, шрифты и их начертания, UI-элементы и их состояния и т.д. Благодаря этому, можно исключить ситуацию, когда у разработчика возникнет множество вопросов относительно того, как работает тот или иной элемент сайта.
Также стоит заметить, что формирование стайл-гайда должно проходить еще на этапе разработки прототипа. Благодаря этому, работа исполнителя существенно упрощается. Стайл-гайды могут быть как довольно простыми, так и объемными. Второй вариант актуален, если разрабатывается сложный интерфейс.
Кроме стайл-гайда, потребуется подготовка всех необходимых изображений и фото. Желательно заранее уменьшить их вес, что поспособствует существенному ускорению работы сайта. Также нужно подготовить иконки, которые применялись в дизайне. Они должны быть представлены в формате svg.
Если в дизайне сайта будут присутствовать анимации или иные поведения объектов, их необходимо детально описать. Благодаря этому, разработчик будет четко понимать, как должны работать определенные элементы дизайна.
Позаботившись обо всех перечисленных моментах, исполнитель может отправить свою работу заказчику и получить вознаграждение. На этом работу исполнителя можно назвать завершенной. Он выполнил все возложенные на него обязательства. При этом исполнитель может предложить дизайн-поддержку, предусматривающую внесение изменений в дизайн сайта в течение всего срока его эксплуатации. Это дополнительная услуга, которая должна оплачиваться отдельно.
Заключение
Разработка дизайна сайта – это многоэтапный процесс, в ходе которого важно придерживаться заранее подготовленного плана. Благодаря этому, можно создать качественный дизайн сайта и аргументировать каждое свое действие заказчику. Такой подход к разработке дизайна также будет свидетельствовать о том, что исполнитель является настоящим профессионалом в своем деле. К тому же он позволяет избежать траты времени на многочисленные доработки.
Профессиональную разработку сайта можно прямо сейчас заказать в маркетинговом агентстве business-up.org.
