Дизайн страницы портфолио: где теряются обращения
Посетитель приходит на страницу портфолио со своей задачей — сверить чужой опыт со своим случаем. Если на первом экране он видит абстрактный слоган вместо результата, а ниже — сетку превью без подписей, ему не за что зацепиться, и он листает дальше по инерции. По картам скролла и событиям клика видно: до описания проекта доходит меньшая часть аудитории, а до обращения — единицы.
Уход посетителя почти всегда объясним. Кейсы не рассортированы по типу задачи, отрасли или объёму работ, поэтому человек вынужден читать всё подряд в поисках одного релевантного. Галереи отдаются в исходном разрешении и собираются целиком только к моменту просмотра — начало знакомства с работами превращается в ожидание. Контакт спрятан в подвале, и момент, когда интерес максимален, остаётся без действия.
Мы проектируем дизайн страницы портфолио как инструмент отбора подходящих задач, а не как выставку. Сначала фиксируем, по каким признакам заказчик узнаёт «свой» проект, затем раскладываем каталог так, чтобы признак читался без клика. Внутри кейса держим единую структуру: что требовалось, что сделали, что получилось на выходе — сравнение занимает секунды.
Дальше проверяем гипотезы на живом трафике: меняем первый экран, порядок кейсов, расположение формы и смотрим, как двигаются глубина просмотра и доля обращений. Правки, которые не улучшают путь до контакта, откатываем.
Эффект переработки страницы: время до контакта и глубина просмотра
После переработки мы смотрим не сумму визитов, а сценарий просмотра: с какой работы человек начинает, куда уходит дальше, на каком блоке закрывает вкладку. Карты скроллов и записи сессий в Яндекс Метрике показывают это напрямую — на старой версии заметная доля посетителей не долистывала до блока с проектами и покидала страницу с первого экрана.
Глубина просмотра — производная от порядка работ. Когда в начале стоят три кейса, совпадающие с типом задачи клиента, а под каждым идёт короткая связка «что было — что сделали — что стало», просмотров на визит становится больше: человек листает не ради листания, а чтобы сверить свой случай с чужим. Время до обращения при этом сокращается с нескольких минут до десятков секунд — контакт перестаёт быть тем, что ищут в самом низу.
Дальше работает удержание. Отказы на странице снижаются, когда первый экран сразу называет специализацию и показывает измеримый результат, а не общий слоган. Повторные визиты растут по другой причине: страницу сохраняют и пересылают коллеге как аргумент на внутреннем обсуждении подрядчика, поэтому возвращаются уже с конкретным вопросом.
Чтобы не принять смену источника трафика за улучшение, мы размечаем цели на клик по контакту, отсекаем служебные заходы и сравниваем периоды равной длины с поправкой на сезонность. Тогда глубина просмотра, время до обращения и доля отказов читаются как следствие изменений в структуре, а не как случайная волна.
Режимы работы: фиксированный макет и гибкая система блоков
Выбор между фиксированным макетом и гибкой системой блоков — решение не про внешний вид, а про то, как портфолио переживёт десятки новых кейсов. Фиксированный макет рисуется под конкретный набор из трёх-шести проектов: точная композиция, полный контроль над акцентами, предсказуемый результат на эталонной ширине. Плата — ручная работа над каждым новым кейсом и адаптивная версия, которую собирают заново: жёсткие позиции не перестраиваются под узкий экран.
Гибкая система блоков строится от модульной сетки и типологии: обложка, метрики, галерея, отзыв, результат. Принципы такой сетки разобраны ещё в Модульные сетки Мюллера-Брокманна, и в вебе они дают главное — новый кейс собирается из готовых элементов, а адаптивная версия получается перестройкой колонок, а не вторым макетом. Граница применимости — нестандартный визуальный сценарий: под него блок проектируют отдельно.
| Вариант | Когда подходит | Ограничения |
|---|---|---|
| Фиксированный макет | 3-6 сильных кейсов, редкие обновления, ставка на уникальную композицию | Новый проект — ручная вёрстка; узкие экраны требуют отдельной сборки |
| Гибкая система блоков | Портфолио растёт, кейсов 10+, нужны единые правила подачи | Нестандартный сценарий ломает шаблон — нужен новый тип блока |
| Гибрид | Блоки для основной массы кейсов, фиксированный макет для флагманов | Две ветки правил вместо одной — дороже сопровождать |
На практике чаще выигрывает гибрид: сетка и типовые блоки закрывают рутину, а фиксированный макет остаётся для кейсов, которые продают.
Этапы работы над макетом: от разбора задач до передачи
Макет портфолио — не картинка, а техническое решение: он задаёт структуру данных, состояния элементов и объём работы для вёрстки. Поэтому начинаем не с отрисовки, а с разбора и каркаса — правка на уровне схемы занимает минуты, та же правка в готовой графике переделывает половину страницы.
-
Разбор задач. Выясняем, кого страница убеждает и какое действие совершает посетитель. Фиксируем, какие проекты показываем, в каком порядке и что доказывает каждый кейс: роль в проекте, результат, срок.
-
Схема страницы. Собираем структуру блоков и иерархию: сколько кейсов видно сразу, где живут фильтры, как разворачивается длинный список. На выходе — карта страницы с приоритетами и объёмом контента под каждый блок.
-
Прототип. Каркас без графики: сетка, пропорции блоков, логика переходов и фильтрации. Проверяем на настоящем контенте — короткие и длинные названия, разное число изображений, пустой результат фильтра.
-
Отрисовка. Визуальный язык поверх утверждённого каркаса: типографика, отступы, состояния карточек при наведении и загрузке, адаптивные версии под узкие экраны.
-
Проверка макета. Прогоняем по чек-листу: контраст, читаемость на промежуточных ширинах, поведение сетки при неполном ряде, длины подписей, состояния ошибок.
-
Передача в разработку. Отдаём не картинки, а разобранный набор: компоненты, отступы, правила сетки, палитру и шрифтовые стили. Вёрстка получает однозначные решения вместо догадок.
Артефакты после работы: макеты, библиотека компонентов, правила
После сдачи в проекте остаётся не папка картинок, а рабочая система: макеты страниц, библиотека компонентов и правила, по которым портфолио развивается без нас. Передачу проверяем по перечню — если пункт нельзя открыть, отредактировать и собрать из него новую страницу, он не считается сданным.
- Исходники макета. Файл с чистой структурой слоёв и понятными именами: страницы, секции, компоненты. Никаких слоёв вида «копия 2» — новый дизайнер входит в проект за день, а не разбирает архив неделю.
- Библиотека компонентов. Кнопки, поля, карточки работ, фильтры, всплывающие окна — с заданными отступами, размерами и связями. Правка кнопки один раз обновляет её на всех страницах портфолио.
- Состояния блоков. Для каждого интерактивного элемента описаны обычное, наведение, нажатие, загрузка, пустой результат и ошибка. Разработчику не нужно угадывать, что показывает фильтр, когда по тегу ничего не нашлось.
- Макеты страниц. Компьютер, планшет, телефон — с реальным контентом: длинные названия проектов, сетка из десятков работ, подписи в две строки. Вёрстка не ломается на случаях, которые не попали в презентацию.
- Правила правок. Что можно менять внутри системы: свои обложки, порядок карточек, набор тегов. Что требует согласования: сетка, шрифтовая пара, палитра.
- Инструкция и текстовые лимиты. Тон описаний, длина заголовков, требования к обложкам и снимкам экрана — чтобы новые работы добавляли в одном стиле.
Всё это уходит команде заказчика с коротким руководством по сборке страницы. Дальше портфолио растёт внутри: новый проект ставят по готовому шаблону, не заказывая макет заново.
Кейс: как изменилось поведение посетителей после переработки
Проект — сайт мастерской, которая строит дома по индивидуальным проектам: «Северный дом». Портфолио занимало половину главной и выглядело как ровная сетка превью: два десятка объектов, одинаковые карточки, подписи в духе «Дом в сосновом бору». Замеры за месяц до переработки: до блока с объектами доходили 38% посетителей, глубина просмотра — 1,4 страницы, карточку объекта открывали двое из ста, а обращения, начатые с портфолио, давали меньше пятой части заявок.
Что показали замеры
Тепловые карты объяснили причину: люди просматривали первый ряд превью, не находили ответа на вопросы «что это за дом, какая площадь, что входило в работы» и уходили, не дойдя до формы. Портфолио работало как витрина картинок, а не как аргумент: посетителю приходилось самому угадывать масштаб проекта и собирать историю из подписи.
Что изменили и что стало
Карточку перестроили вокруг результата: обложка со снятым объектом, три ключевых параметра — площадь, срок, состав работ, — и короткий абзац о задаче заказчика. В конце объекта добавили блок похожих работ и переход к расчёту. Из сетки убрали всё, что не несёт информации, изображения отдали в современном формате с ленивой загрузкой — страница стала открываться заметно быстрее.
Через тот же месяц замеров: до блока с объектами доходят 74% посетителей, глубина просмотра выросла до 3,1 страницы, карточку открывает каждый пятый, отказы на портфолио упали с 68% до 41%. Обращения с портфолио выросли втрое и стали основной точкой входа в заявку — раньше через них приходила примерно каждая шестая, теперь больше половины. Цифры сняты одной и той же панелью аналитики по сопоставимым периодам, без округлений в удобную сторону.
Что делать, если сайт уже свёрстан и структуру менять нельзя
Да, с готовой вёрсткой работать можно, и почти всегда это дешевле полной пересборки. Оформление отделяем от разметки: цвет, отступы, радиусы, тени и типографику выносим в переменные, а правила раскладываем слоями — тогда новые значения перекрывают старые предсказуемо, а не «по весу» селектора.
Точечные изменения — это подмена значений переменных и переопределение отдельных блоков, а не правка структуры документа. Обновление оформления идёт итерациями: сначала общий ритм страницы — сетка, вертикальные отступы, шкала заголовков, затем состояния (наведение, фокус, активная карточка). Каждая итерация проверяется отдельно, поэтому регрессии ловятся сразу, а не в конце.
Ограничения структуры ощущаются в двух местах: порядок блоков на узком экране и композиция карточек портфолио. Первое решается перестановкой уже существующих элементов без правки разметки, второе — псевдоэлементами и рамками-обёртками, которые дают нужный акцент, не добавляя новых узлов в документ.
Отдельно держим то, что ломать нельзя: семантику заголовков, порядок обхода с клавиатуры, контраст текста и работу форм. Если новое оформление требует другой разметки, это фиксируется как отдельная задача с оценкой — менять структуру под видом косметики нельзя.
На практике вопрос «можно ли обновить оформление без пересборки» почти всегда решается «да». Покажите текущую вёрстку — вернёмся с планом точечных изменений и списком мест, где правка разметки всё-таки нужна.
Частые технические вопросы: сетки, состояния блоков, правки
Вопросы по вёрстке обычно всплывают на этапе приёмки — когда страница уже собрана, а сетка ведёт себя иначе, чем в макете. Ниже собрали то, что чаще всего уточняют инженеры заказчика перед стартом: как устроена раскладка, как описаны состояния элементов и что происходит с дизайном, если правки приходят после согласования.
Мы отдаём макет вместе с описанием сетки: базовые колонки, точки перелома, поведение отступов между ними. Так вёрстка не спорит с дизайном, а состояния кнопок и полей — обычное, наведение, фокус, нажатие, отключённое — расписаны для каждого варианта, а не додумываются разработчиком по ходу.
Сетка страницы резиновая или фиксированная?
Резиновая: колонки тянутся в заданном диапазоне, а на точках перелома раскладка перестраивается по описанным правилам. Фиксированную ширину оставляем только для блоков, где важна точная композиция — например, карточек портфолио в галерее.
Как передаются состояния кнопок, чтобы вёрстка не разошлась с макетом?
Отдельной таблицей состояний: для каждой кнопки — обычное, наведение, фокус, нажатие, отключённое и состояние загрузки. Инженер не выбирает оттенок и толщину обводки сам, поэтому спорных мест на приёмке не возникает.
Что если правки макета придут после согласования?
Сначала проверяем, локальная это правка или системная. Локальную — отступ, цвет, порядок блоков — вносим в тот же раздел описания и передаём разработке. Системную, которая меняет сетку или набор состояний, выносим отдельным этапом с пересборкой затронутых экранов.
Как проверяется адаптивность?
Прогоняем раскладку на описанных точках перелома и между ними — там чаще всего ломаются переносы и отступы. Дизайн считается принятым, когда все состояния и ширины экранов подтверждены, а не только основной вид страницы.
Обсудим задачу: покажем схему страницы и вернёмся с оценкой
Чтобы вернуться с планом работ и оценкой, а не с общими словами, нам нужны исходные материалы по странице портфолио и понятные границы задачи. Обычно хватает одного разговора и доступа к тому, что уже существует: текущий сайт, макеты, репозиторий, данные аналитики.
На обсуждении задачи полезно закрыть:
- Роль страницы: витрина кейсов, инструмент продаж или точка входа из поиска — от этого зависит структура и объём.
- Исходные материалы: макеты, логотип, стилевой гайд, шрифты с лицензиями, фото и видео проектов, готовые тексты.
- Контент-модель: какие сущности на странице — проекты, отрасли, услуги, отзывы, сколько записей на старте и кто их наполняет.
- Доступы: хостинг, домен, панель управления, репозиторий, системы аналитики — выдадите нам или работаем через вашего администратора.
- Ограничения: требования к поисковой оптимизации, разметке для соцсетей, доступности и поддержке старых браузеров.
- Интеграции: куда уходят обращения со страницы — форма, CRM, рассылки, внутренние системы учёта.
- Приёмка и сроки: кто согласует с вашей стороны, сколько итераций правок закладываем, есть ли дата, к которой страница должна работать.
После разговора мы присылаем план работ по этапам с оценкой и допущениями: что делаем мы, что требуется от вашей стороны и в какой момент. Если часть материалов ещё не готова, помечаем это отдельным пунктом — структура и контент согласуются до вёрстки, а не после.