Сайт Мейлганера

Начинаем собирать сайт по методу предложений Ильи Бирмана. Суть метода в том, чтобы сначала ограничиться в дизайне единственным инструментом — предложениями:

Продолжаем углубляться, выделяем основные слова:

Начинаем придавать тексту форму сайта:

Пытаемся найти способ визуализировать ключевые слова. В какой‑то момент появляется идея: отобразить количество писем и скорость их отправки на циферблатах приборной панели. Циферблаты будут показывать данные в реальном времени и тем самым демонстрировать бесперебойность работы Мейлганера. Начинаем искать красивые циферблаты в интернете:

Устанавливаем приборную панель на страницу:

Параллельно собираем этаж с кейсами:

Продолжаем работать над панелью, пробуем разные варианты подачи кейсов, собираем этаж с отзывами:

Кейсов много, и, как их ни поставь, они сливаются в кашу. Ведущий дизайнер предлагает сгруппировать кейсы по полезному действию:

Из‑за разной высоты кейсов всё равно получается какая‑то неуправляемая каша. Ведущий дизайнер предлагает формат этюдов: каждое полезное действие проиллюстрировать не только кейсом, но и отзывом с фичей, связанной с достижением этого полезного действия:

Рисуем иллюстрации для этюдов, собираем этаж с фичами и форму заказа демонстрации:

Дорабатываем этюды и иллюстрации:

Собираем остальные этажи:

Собираем страницы фич и интеграций:

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

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

Предлагаем клиенту использовать некий условный интерфейс, который создавал бы ощущение сайта айтишного продукта, но при этом не выглядел настоящим. За счёт этого нельзя будет подумать, что Мейлганер так и выглядит, а ещё таким образом мы сможем показать, какие у Мейлганера есть возможности.

Работаем над замечаниями:

В какой‑то момент к иллюстрации даже дотянулись руки из сервиса «Руки»:

Начинает проявляться структура:

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

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

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

Клиенту нравится, но впереди у нас ещё работа над тремя страницами.

Дорисовываем иконки фич:

Рисуем для страницы фич иллюстрации:

Утверждаем у клиента главную страницу, страницы интеграций и фич. Параллельно с вёрсткой начинаем собирать страницу поддержки. Ещё на стадии согласования с клиентом договариваемся о структуре. Нужно объяснить, как работает поддержка и как в неё обратиться. Потом нужно описать, какие задачи умеет решать поддержка. В‑третьих, надо помочь клиентам Мейлганера увидеть, что поддержка клёвая, что это не просто ответы на вопросы, а полноценный сервис, который умеет внедрять фичи по запросу:

Ведущий дизайнер предлагает откатиться назад и начать с текстовой страницы:

Через 10 итераций и попыток получаем версию, где всё разложено по полочкам:

В какой‑то момент мимо проекта проходит Артём Горбунов и предлагает подправить Мейлчимпу лицо:

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