Сделал сайт курса для разработчиков энтерпрайз-бэкенда. Собрал структуру, написал текст, подготовил картинки и сверстал в Тильде.

Авторы курса — Евгений и Сергей — за десять лет практики собрали все грабли, устали от унылого хаоса в разработке и решили передать свой опыт в формате онлайн-курса. Курсу требовался сайт, который бы объяснял пользу, показывал экспертность авторов и отличался от лендингов с перепродажей чужих лекций. Получилось так: howto.stringconcat.com

Скриншот страницы целиком (4 мегабайта)

Работа над сайтом условно делится на шесть смысловых этапов:

уточнение задачи → сбор и анализ материала → поиск структуры → текстовый макет → подбор иллюстраций → вёрстка

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

Уточнение задачи

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

Исследование

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

Для сайта курса я изучил черновики рекламных писем, заметки по ЦА, сценарий вводного ролика, посмотрел несколько лекций, изучил учебный план, почитал Хабр и Ebanoe.it. Это помогло погрузиться в тему, собрать вопросы для интервью и наметить способы демонстрации полезного действия курса.

Поиск структуры

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

Хорошая структура появляется эволюционным путём

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

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

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

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

Текстовый макет

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

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

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

Как разработать продукт, за который не стыдно

Как поддерживать и развивать проект, не жертвуя сном и здоровьем

Перестать выгорать и начать жить

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

По началу всё идёт хорошо, но потом проект превращается в зиккурат из костылей и противоречий. <...> Никто не знает, как работает ключевой модуль, а кто знал — уже на пенсии, ушёл к конкурентам или умер.

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

Иллюстрации

Самая важная и самая сложная часть. Иллюстрации создают настроение и убеждают сильнее слов, демонстрируя работу продукта.

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

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

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

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

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

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

Оригинал и результат. Евгений демонстрирует позитив, спокойную уверенность и открытость

Вёрстка

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

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

Всё, кроме шапки, сделано на типовых блоках Тильды. Шапка — зеро-блок с вариантами под разные устройства.

Рассказ о курсе свёрстан в две колонки. Левая кратко пересказывает правую и работает как якорь, чтобы взгляду было за что зацепиться.

Всё набрано шрифтом Open Sans. У него почти нет характера, открытый рисунок и широкий диапазон жирности. Сейчас я бы сделал заголовки чем-то более выразительным, например, шрифтом IBM Plex.

Для удобства чтения размер основного текста подобран так, чтобы в строке было не больше 80 знаков. Местами текст немного подрезан или переписан, чтобы выровнять правый край абзаца. Где не получилось переписать, стоят мягкие переносы.

Особый шик — колонки одинаковой высоты:

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

Отзыв из переписки Евгения