С чего начать работу над проектом

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

Предпроектная работа включает в себя четыре основных этапа:

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

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

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

Зачем нужен бриф?

Бриф является ключевым этапом в предпроектной работе веб-дизайнера. И вот почему:

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

В каком формате составить бриф?

Составление брифа может происходить как на личной встрече, так и дистанционно. Обычно бриф заполняет заказчик, но дизайнер может помочь клиенту сформулировать все требования и правильно нацелить на достижение желаемого результата. Один из вариантов, как это сделать, — создать опросник по ключевым пунктам (о них расскажем далее). В каждом из вопросов должно быть 4-5 вариантов ответа — из них заказчик выберет те, которые наиболее соответствуют его проекту. Расписывать все слишком подробно не нужно — обычно бриф содержит 3-4 страницы, а детали перечисляются в техническом задании.

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

Что обязательно должно быть в брифе?

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

Основные пункты бриф-документа:

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

Какие вопросы можно задать:

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

2. Целевая аудитория. На кого будет направлен сайт — какой у этих людей пол, возраст, уровень достатка, интересы, «боли». На данном этапе проводить полноценный анализ не нужно — важно лишь выяснить, как видит свою целевую аудиторию заказчик. В дальнейшем вы сравните этот «портрет» с результатами своего собственного анализа и дополните его.

Какие вопросы можно задать:

• Как вы видите своего клиента (возраст, пол, уровень дохода и т.д.)?
• Какую проблему помогает решить ваш продукт/услуга?
• По каким критериям аудитория выбирает продукт/услугу (скорость доставки, цена и т.д.)?
• Какое целевое действие актуально для клиента (позвонить, оставить заявку, купить прямо на сайте и т.д.)?

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

Какие вопросы можно задать:

• Какие функции и задачи должен выполнять сайт?

4. Тип сайта. Его выбор исходит из цели: если задача — продать какие-либо продукты, то лучше создать интернет-магазин; если необходимо презентовать компанию и ее услуги, то выбираем корпоративный сайт. Выбранный тип будет влиять на функционал, сроки, а значит, и на стоимость работы.
5. Стиль сайта. Его стоит также определить заранее, чтобы понять, в какой цветовой гамме, подходах предстоит работать. Кроме того, для некоторых стилей может понадобиться провести дополнительную работу — отрисовать иллюстрации, снять несколько фото/видео в выбранной цветовой гамме. Если есть брендбук, логотип и фирменные цвета компании — необходимо предоставить их, чтобы дизайнер отталкивался от этой информации.

Какие вопросы можно задать:

• Есть ли у компании брендбук, логотип, фирменные цвета?
• Есть ли у компании готовый контент (фото, видео, презентации, инфографики)?

6. Референсы. Этот пункт важен для того, чтобы дизайнер понимал вкус клиента и его ожидания. Человеку, который не является специалистом в дизайне, порой сложно объяснить словами его представления — поэтому обязательно попросите клиента приложить визуальные референсы, чтобы быть с ним «на одной волне».

Какие вопросы можно задать:

• Сайты каких конкурентов нравятся заказчику?
• Какие сайты ему точно не нравятся, в каком стиле не стоит работать?

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

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

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

На основании ответов в брифе можно будет составить техническое задание. Многие путают эти два документа, но на деле разница огромная: если бриф — это описание цели и задач, то техническое задание — «инструкция» по тому, как этого добиться.

Техническое задание (ТЗ) — это документ, в котором описываются требования и условия, которые должны быть учтены при разработке сайта. В ТЗ максимально четко прописаны все технические детали проекта для дизайнеров, программистов и др. участников команды. Оно помогает настроить эффективное взаимодействие между заказчиком и исполнителем.

Зачем составлять техническое задание:

• У дизайнера и заказчика складывается полное понимание того, каким будет сайт, его структура, стиль, функционал — а значит, за что заплачены деньги.
• ТЗ помогает ускорить процесс согласования — если оно прописано максимально конкретно, то на этапе реализации проекта не возникнет «неожиданностей» и необходимости глобально что-то корректировать.
• Грамотно составленное техническое задание говорит о высоком уровне профессионализма дизайнера, а значит, повышает доверие со стороны клиента.
• В случае, если срок реализации проекта большой (например, несколько месяцев), дизайнеры могут меняться. Тогда ТЗ поможет новому члену команды быстрее влиться в работу и не проходить все подготовительные этапы с нуля.

В каком формате составить техническое задание?

Частично мы ответили на этот вопрос ранее — хорошее ТЗ всегда составляет исполнитель. Происходит так в первую очередь потому, что клиент может не знать многих технических особенностей дизайн-процесса. Однако это не значит, что заказчик должен отстраниться, — вы можете делиться с ним подробностями, задавать уточняющие вопросы и, конечно, согласовать итоговый вариант ТЗ со всеми ответственными лицами.

Обычно ТЗ выглядит как документ А4, в котором подробно прописаны все моменты, касающиеся самого сайта. Такой файл может содержать 20-30 листов, а то и больше — все зависит от масштаба проекта.

Что обязательно должно быть в ТЗ?

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

1. Структура сайта. Здесь важно прописать, какие разделы обязательно должны быть разработаны: главная страница, блок о компании, контакты и т.д. Также важно определить, каким образом на сайте будет организована навигация, какие элементы должны быть на главной странице.

2. Технические требования. Сразу укажите требования к хостингу, в каких разрешениях вы будете делать сайт, будут ли созданы адаптивные версии, какие технологии будут использоваться.
3. Описание функциональности. ТЗ должно содержать детальное описание того, что должен делать сайт и какие функции он должен выполнять. Это может быть список функций, которые должны быть включены на сайте, уникальные возможности (например, калькулятор).

4. Дизайн и визуальный стиль. ТЗ должно содержать описание визуального стиля сайта: цветовую гамму, типографику, сетку, иллюстрации и другие элементы дизайна.
5. Контент. ТЗ должно содержать информацию о том, какой контент должен быть размещен на сайте, включая тексты, изображения, видео и другие материалы.
6. Языковые версии. Здесь важно указать, для каких языков будет разработан сайт, если одним русским языком не обойтись, то стоимость работы будет значительно дороже.

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

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

Зачем нужен конкурентный анализ:

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

Как провести конкурентный анализ?

1. Подготовьте список конкурентов

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

2. Выберите критерии для анализа

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

3. Изучите их сайты

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

4. Изучите маркетинговую стратегию

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

5. Почитайте отзывы

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

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

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

Что такое целевая аудитория?

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

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

Как проанализировать целевую аудиторию:

1. Определите демографические характеристики

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

2. Исследуйте поведение аудитории

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

3. Исследуйте потребности и интересы

Для того чтобы привлечь целевую аудиторию на ваш сайт, вы должны знать, какие потребности и интересы они имеют. В этом может помочь сервис Wordstat от «Яндекс» — он позволяет выявить потребности пользователей, а также определить некоторые сегменты аудитории — люди могут искать один и тот же продукт разными способами и в различных формулировках.

4. Изучите упоминания бренда

С помощью аналитических сервисов Popsters и SimilarWeb можно посмотреть, откуда к клиенту приходит целевая аудитория, как она отзывается о бренде, какой контент «заходит» лучше всего. Таким образом можно сложить образ бренда и использовать его в своем дизайне.

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

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