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

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

Проект я нашла довольно быстро, предложила знакомому фитнес тренеру сделать сайт. У него были только соцсети, так что личный сайт очень даже поможет продвижению. Как и во множестве других реальных проектов, перед дизайнером изначально встаёт проблема недостатка контента. Вот какие материалы были у меня: фото тренера, его тарифы и отзывы пришедших в форму клиентов с фотографиями до и после. И конечно тренер не знал, что нужно разместить на его сайте. Это совсем не трудная задачка. Я нагуглила множество сайтов данной тематики (почти все сильно устарели) и выбрала лучшие, чтобы показать ему. Вместе обсудили стиль и наполнение, я попросила его подробнее рассказать о профессии, из чего состоит его работа, как он общается с подопечными, как проходят тренировки и так далее. Чтобы ничего не упустить, вопросы составила заранее. И он тоже нашёл пару сайтов, в стиле которых хочет увидеть свой. Я заполнила бриф и ещё раз всё уточнила, чтобы мы пришли к полному пониманию.

Ура, можно приступать к дизайну! Конечно, не к отрисовке макета, а к аналитике — всё по порядку. Для начала я написала ответы на два главных вопроса: зачем клиенту нужен сайт и почему пользователи выберут именно его. Это очень важно понимать, чтобы правильно расставить акценты, и в итоге не получилась бы просто красивая (или не очень) картинка. Для трёх сайтов-конкурентов и моего проекта заполнила табличку, где ответила на много вопросов типа за счёт каких аспектов возникает желание совершить покупку, понятна ли навигация, есть ли адаптивная версия сайта и т.д. На все 46 вопросов сделала выводы, что нужно или не нужно будет делать.

Следующая стадия — создание функционального прототипа (и конечно же согласование его с клиентом, чем больше общения — тем лучше будет результат). Этот прототип простой, но он — основа сайта, его структура. Здесь просто расписываются блоки и их состав, например первый экран будет состоять их хедера с ссылками, заголовка, описания, фото и кнопки "Записаться на консультацию". На этом этапе клиент внёс серьёзную правку в структуру. Ему очень понравился один сайт, где половину странички занимает сторителлинг с фразочками и картинками из мемов: ожидание — реальность — в итоге — а вот с тренером всё по-другому. Это не стандартно и интересно, вот только как это всё оформить, чтобы блоки не повторялись? Ко мне пришла хорошая идея: составить "персон", типичных клиентов тренера, которые будут проходить эти четыре маркетинговые стадии, с их фотками и фразами. По итогу в прототипе получились такие блоки: первый экран, персоны, тезисы, услуги, CTA, отзывы, FAQ и футер.

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

Сперва отрисовала макет без цвета, минимум по два варианта каждого блока. Тексты (многие написала сама) перевела на английский. Этот метод моего артдира Евгения Кузьмина мне очень нравится: на латинице макет намного приятнее смотрится. Ведь не секрет, что кириллица появилась намного позже, и её глифы не так совершенны, как у собрата. Естественно, окончательно утверждённый макет потом переводится обратно, немного корректируется и презентуется клиенту. Итак, далее самый красивый чёрно-белый вариант окрашивается в цвета заказчика. Фирменные цвета были жёлтый и оранжевый. На белом фоне они плохо смотрелись (это и так было понятно, но лучше показать заказчику наглядно), поэтому фоном странички я выбрала чёрный. Ещё несколько вариантов блоков, где есть сомнения, несколько правок — и макет принят артдиром. Для презентации клиенту я заранее сделала пометки, чтобы не упустить важное. Во время записи экрана рассказала, за счёт чего достигается цель проекта (получение заявок на услуги персонального тренера от “подогретых” клиентов, которые хотя бы примерно понимают, что им нужен тренер), показала каждый блок с объяснениями. Потом позвонила и спросила, всё ли хорошо. Он даже не ожидал, что сайт будет настолько крутым — очень приятно, но история на этом совсем не заканчивается. Я как положено отрисовала планшетную и мобильную версию, собрала UI киты, привязала стили текста и цвета и уже готовилась отдыхать...

Дизайн и правда настолько понравился клиенту, что он обратился в маркетинговое агентство для продвижения. Маркетологи не дураки порадоваться на макет, им нужна вторая кнопка на обложке, из трёх карточек услуг нужно сделать две и т.д. Выдохнув, внесла правки (не со всеми была согласна, кое-что удалось отстоять). Супер, теперь ищем верстальщика. Изначально я уже договорилась с начинающей программисткой, которая была готова сверстать сайт ради портфолио, но клиент не захотел ждать, и с третей попытки нашёлся программист. Всё, через пару недель сайт готов? А вот и нет, в реальности некоторые моменты выглядели не так, как в макете. И второй акцентный шрифт почему-то отображался как интер. Посмотрела на сайт с компа, планшета и телефона, заскринила что не так и расписала правки. По итогу всё стало замечательно, со шрифтом разобрались, программисту останется только внести данные ИП тренера, которое в процессе оформления. Открываем шампанское?

Как бы не так... Юрист исправил мою политику конфиденциальности, добавил ещё два документа. Внеслись небольшие изменения в форму заявки, и тренер решил изменить фотку. Что ж, новые профессиональные фотографии и правда лучше старой. Две немного отретушировала в ФШ (через мой Фотошоп прошли тысячи фешн снимков, я раньше работала ретушёром), в частности убрала "гармошку" по краю футболки — так снимок стал выглядеть намного лучше, сделала фон прозрачным и подставила фотки в макеты. Одна подошла не очень, а вторая просто идеально. Затем дело за программистом и продвижение. Но я чувствую, что маркетологи потом опять скажут что-нибудь менять, работа у них такая вредная🙃