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

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

 

Шаг 1. Брифинг

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

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

 

Узнайте о проекте

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

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

 

Целевая аудитория

Можете посчитать сколько вы получите ответов, похожих на «мужчины и женщины 18-40 со средним достатком». Подобная информация бесполезна и не является ответом на вопрос и целевой аудитории.

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

 

Философия клиента

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

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

 

Информация

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

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

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

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

 

Конкуренты.

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

Помимо этого списка, проводите анализ самостоятельно. Не забывайте про иностранный рынок, некоторые решения могут помочь вам. Старайтесь побольше использовать дизайнерских ресурсов,таких как behance.net или Pinterest и поменьше поисковых систем. В поисковых системах очень мало стоящих визуальных решений и много примеров хорошей раскрутки.

 

Результаты брифинга

В результате у вас должно получиться не техническое задание, а именно бриф. Формат, с которым вам удобно работать, всегда держать под рукой в течении проекта и находить все нужные ссылки. Я включаю в файл брифа всю переписку с клиентом, картинки, ссылки — любую полезную информацию. Чаще всего использую Evernote или Google.docs

Итоговый список вопросов, которые я использую, выглядит примерно так:

1) Расскажите о проекте. Название, общая идея. Существует проект или только стартует? Какого рода продукты/услуги/идеи вы продаете/рекламируете/хотите описать?
2) Какова целевая аудитория и цель проекта? Какие люди будут заходить на ваш сайт и что именно вы хотите им сказать?
3) В чем уникальность вашего предложения? Каким вы видите свой продукт: можно описать при помощи прилагательных
4) Кто ваши прямые конкуренты? На кого нельзя быть похожим, с кого хотите брать пример.
5) Есть ли у вас логотип/брендбук/фирстиль/фирменные цвета/шрифты, которые нужно учитывать? Есть ли примеры дизайна, который вам нравится?
6) Какова структура сайта? Сколько страниц, какая информация расположены на них? Есть ли тексты, фотографии?