За минувшие годы компания выросла. Уровень экспертизы и оказываемых услуг — тоже.

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

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

Информация на сайте устарела и собственники отправляют клиентам презентации вместо ссылки на сайт.

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

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

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

На основе этого готовлю Гугл-документ, где прописываю, какие экраны будут на главной странице и какие будут разделы.

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

Назначаем дату старта проекта. Клиент уходит готовить контент.

Также на данном этапе клиент выбирает способ разработки.

Есть 2 варианта разработки сайтов на Тильде: на стандартных готовых блоках из библиотеки или на кастомных зеро-блоках.

Сайт будет создаваться на уникальных кастомных зеро-блоках Тильды.
Почему выбрано такое решение?

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

У кастомных блоков есть минусы — клиенту сложнее в будущем обновлять в них контент.

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

В тех частях, где клиент будет самостоятельно регулярно обновлять контент - в блоге, в разделах “Команда”, “Отзывы” и других подобных местах — будем использовать стандартные блоки.

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

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

Разработка крупного проекта разработка состоит в среднем из 15 этапов.

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

Клиенту не нравится ни один из вариантов.

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

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

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

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

В процессе этого этапа рождаются интересные идеи, как можно дополнительно связать экраны - например, какими-то вспомогательными заголовками.

Дальше начинается непосредственно дизайн. Обращаю внимание, сколько всего пройдено перед тем, как начать этот этап.

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

Задача на данном этапе: отрисовать первые 3-4 экрана, показать их заказчику, чтобы понять, в том же направлении движемся и внести коррективы.

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

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

Находится вариант, который хорошо смотрится и на темном, и на светлом фоне.

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

Поиск вариантов для главного экрана.

В данном случае нужно поместить:

• Меню и логотип
• Название компании
• Длинный заголовок
• Подзаголовок
• Кнопку
• Какое-то визуальное изображение

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

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

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

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

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

Доделываю первые 4 экрана главной страницы, чтобы понять, в ту ли сторону движемся, и отправляю клиенту:

Приходит ответ:

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

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

По итогу получается вот такая главная страница:

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

Хороший сайт от плохого с точки зрения пользователя отличается тем, что на хорошем все понятно, а на плохом ничего не понятно.

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

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

• Главный экран
• О направлении кратко
• Для кого
• Инструменты
• Форма обратной связи
• Примеры программ
• Отзывы
• Контакты

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

Чтобы не стопорить разработку, привели к такой структуре страницу первого направления и я приступил к дизайну

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

После внесения нескольких изменений у нас согласована страницы услуги.

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

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

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

Теперь нужно перенести все это непосредственно в Тильду.

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

В процессе заказчик находит довольно много неточностей в тексте и некоторые другие моменты, которые попадают в документ под названием «Финальные правки».

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

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

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

В процессе вёрстки также идет адаптация под разные размеры экранов: планшеты, мобильные.

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

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

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

До этого этапа сайт находится на техническом домене.

• Сайт привязывается к домену
• Настраивается SSL-сертификат и необходимые переадресации
• Прописываются базовые SEO-настройки и H1-заголовки для каждой страницы
• Загружается бейдж для соцсетей и фавиконка

И много других мелочей.

А затем еще раз перепроверяется, все ли настроено корректно, тестируется на разных устройствах и фиксятся найденные ошибки.

И только после того, как все финальные правки будут внесены, наступает настоящая финишная прямая.

Провожу обучение для клиента - как управлять сайтом.

Доделываем вещи, которые вынесли в отдельный этап - страницу команды, перевод на английский и другие задачи.

Клиент записывает видеоотзыв о работе: