Открываешь сайт студии: большой заголовок, шесть карточек, цифры, отзывы, форма. Открываешь следующий. Карточки стали круглее, заголовок поменялся, но ощущение, что ты никуда не уходил.
Для «Вне шаблона» мне хотелось другого. Это сайт об индивидуальной разработке. Если рассказывать о ней тем же лендингом, который посетитель видел уже двадцать раз, возникает неудобный вопрос: а где здесь сама индивидуальность?
Поэтому я выбрал комикс. Не отдельную картинку в первом экране, а мир, через который можно объяснить подход к работе. Посетитель попадает в мастерскую, видит коробки готовых шаблонов, механизм с плагинами и человека, которому нужен сайт для своего бизнеса. Ситуация понятна ещё до длинного объяснения.
Мне нравится, когда сайт хочется переслать со словами «смотри, как сделали». Но дальше человек должен разобраться, что ему предлагают. Именно это сочетание я и собирал.
01 / ВИЗУАЛЬНЫЙ МИР
Одного красивого первого экрана мало
Самое простое решение: нарисовать эффектную обложку, а дальше вернуться к обычным белым блокам. Получится хороший баннер. Цельный сайт из этого ещё не получится.
У «Вне шаблона» есть свой набор материалов: бумага, дерево, красная ткань, чёрный контур рисунка. Занавес открывает сцену, мастерская продолжает её, предметы объясняют происходящее. Всё это даёт опору для следующих разделов, а не заканчивается на первой картинке.
Такой подход полезен и за пределами комикса. У мебельной мастерской мир может строиться вокруг дерева и чертежей, у фотографа вокруг контактового листа, у промышленной компании вокруг конструкции и деталей. Сначала находишь характер бизнеса. Потом решаешь, как он будет жить на странице.
02 / СЮЖЕТ
Прокрутка продолжает разговор
Список «быстро, качественно, индивидуально» почти ничего не объясняет. Вместо него на сайте есть ситуации: готовая коробка сначала кажется удобной, потом для нового требования нужен обходной путь, затем к нему добавляется ещё один.
В комиксе эту мысль можно показать предметами и действием. Коробки одинаковые. Машина обрастает трубами. Герой пытается понять, что выбрать. У посетителя есть за что зацепиться, и соседний текст уже отвечает на возникший вопрос.
Но иллюстрация не должна выполнять всю работу за текст. Суть предложения, названия разделов и переходы остаются на странице обычными HTML-элементами. Человек может быстро пробежать глазами, открыть нужный раздел и перейти к обсуждению проекта.
Я не хотел делать квест, где ради телефона разработчика надо победить финального босса. История помогает понять предложение; форма остаётся формой.
03 / МОБИЛЬНЫЙ ЭКРАН
Уменьшить большой рисунок недостаточно
На широком экране помещаются сцена, герои и текст. На телефоне та же композиция превращается в набор мелких деталей. Если просто ужать её целиком, исчезнет и выразительность, и читаемость.
Поэтому мобильный экран рассматривается отдельно: где останется главный герой, сколько места займёт заголовок, что посетитель увидит раньше кнопки. В проекте есть отдельный мобильный художественный материал, а интерфейс перестраивается под узкую ширину.
Проверять нужно не только красивый статичный кадр. Меню должно открываться, текст читаться без увеличения, а заявка отправляться с того же телефона. Если ради рисунка приходится терпеть неудобства, композицию надо менять.
04 / РАЗРАБОТКА
За комиксом стоит обычный работающий сайт
Для «Вне шаблона» я выбрал Astro. Готовая публичная часть сайта состоит из HTML, CSS и JavaScript: рисунок задаёт настроение, стили управляют композицией, а скрипты отвечают за поведение интерфейса. Для этого лендинга мне не потребовалось превращать каждый раздел в отдельное приложение.
Ни Tilda, ни WordPress для такого сайта не нужны. На Astro можно разработать свою композицию, мобильную версию и поведение страницы без готовой темы и конструктора блоков. Контентные страницы и отдельные интерактивные элементы можно собирать под идею проекта, а не под возможности купленного шаблона.
В коде отдельно живут мобильное меню, поведение хедера при прокрутке и форма обращения. Картинка не заменяет заголовок, кнопку или поле ввода. Это позволяет работать с содержанием страницы, сохраняя художественную оболочку.
Здесь особенно легко увлечься деталями: ещё один эффект, ещё один переход, ещё одна большая сцена. Я смотрю на это через действие посетителя. Рисунок помогает понять идею? Оставляем. Мешает прочитать текст или добраться до заявки? Ищем другое решение.
05 / ВАШ ПРОЕКТ
Вашему сайту не обязательно нужен комикс
Нужен повод его запомнить. В «Вне шаблона» это мастерская и сюжет. В другом проекте им может стать типографика, настоящая съёмка, необычный способ показать продукт или выразительная работа с деталями.
Перед дизайном я разбираю, что компания продаёт, кому и какие вопросы человек задаёт перед обращением. После этого предлагаю визуальное направление. Так появляется сайт с характером конкретного бизнеса, а не новая раскраска знакомого шаблона.
Посмотрите «Вне шаблона» целиком ↗ или откройте кейс в портфолио. Там можно оценить результат, а здесь я показал логику его устройства.