Когда потенциальный клиент выбирает подрядчика на сайт или приложение, он почти всегда открывает портфолио раньше, чем страницу услуг. Это витрина: по ней судят не только о вкусе, но и об аккуратности. И именно здесь у многих студий — включая нас до недавнего редизайна — живёт хаос: превью разной высоты, скриншоты, обрезанные на середине баннера, подписи вроде «Corporate website / Landing», которые никто из русскоязычных клиентов не просил.
Мы переделали портфолио на своём сайте и заодно собрали правила, по которым теперь оформляем страницы проектов и для клиентов — веб-студий, дизайнеров, архитекторов, производственных компаний с разделом «наши работы».
Одинаковые пропорции — основа аккуратной сетки
Сетка проектов читается как единый блок, только если все карточки одного размера. Если один скриншот вертикальный, второй — квадратный, третий — широкий баннер, страница выглядит как свалка, даже если каждый проект сам по себе хорош.
Решение — зафиксировать пропорцию превью на уровне вёрстки, а не надеяться, что каждое изображение подготовят одинаково. Мы остановились на 16:10: такой формат близок к экрану ноутбука, в него хорошо помещается первый экран сайта, и он не слишком «вытягивает» сетку по высоте на телефоне.
Технически это делается в пару строк CSS: контейнер карточки получает фиксированное соотношение сторон, картинка заполняет его целиком.
.portfolio-card__image {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.portfolio-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}Обратите внимание на последнюю строку — о ней следующий раздел.
В кадре должен быть верх макета
По умолчанию object-fit: cover обрезает изображение по центру. Для фотографий это нормально, для скриншотов сайтов — нет. Полноразмерный скриншот лендинга — это длинная вертикальная картинка, и её центр приходится на какой-нибудь блок «Наши преимущества» с иконками. В превью оказывается случайный кусок страницы без логотипа, меню и главного экрана.
Свойство object-position: top прижимает картинку к верхнему краю: в карточке видна шапка сайта и первый экран — то, что клиент узнаёт и что лучше всего показывает дизайн. Одна строка, а разница между «какие-то обрезки» и «аккуратная витрина» огромная.
Если для проекта есть отдельно подготовленная обложка — отлично, но правило всё равно полезно как страховка: менеджер загрузит полноразмерный скриншот, и карточка не развалится.
Подписи — на языке клиента
Привычка подписывать проекты по-английски («Web design», «E-commerce», «Branding») пришла из шаблонов и с зарубежных площадок. Если ваши клиенты говорят по-русски, это лишний барьер: человек ищет «интернет-магазин» или «сайт для стоматологии», а видит «E-commerce» и «Healthcare».
У нас подписи портфолио хранились в базе на английском — наследство старого шаблона. При редизайне мы перевели их все на русский и сделали короткими:
- тип проекта: «Интернет-магазин», «Корпоративный сайт», «Мобильное приложение», «Лендинг»;
- отрасль или задача: «Мебельное производство», «Сервисный центр», «Медиа»;
- одна строка о сути: что делали и зачем.
Подписи — это ещё и поисковый текст. Страница портфолио, где написано «интернет-магазин мебели под ключ», имеет шансы найтись по такому запросу. Страница с «E-commerce» — нет.
Структура кейса: задача — решение — результат
Карточка в сетке продаёт клик, а продаёт студию страница проекта. Хороший кейс отвечает на вопросы клиента в том порядке, в котором они у него возникают:
- Задача. Кто заказчик (можно обобщённо: «производитель мебели из региона»), с чем пришёл, что не устраивало в старом решении. Клиент узнаёт в этом себя.
- Ограничения. Сроки, бюджет, существующие системы, которые нельзя было менять. Это показывает, что вы работаете с реальностью, а не с идеальными условиями.
- Решение. Что сделали и почему именно так. Не перечень технологий, а логика: «каталог на сотни позиций — значит, нужны фильтры и быстрый поиск».
- Результат. Что изменилось для бизнеса. Если есть цифры и клиент разрешил их публиковать — отлично. Если нет — честное качественное описание: «заявки приходят сразу в CRM, менеджер больше не переписывает их из почты».
- Визуал. Главный экран, пара ключевых страниц, мобильная версия. Мобильная обязательна: клиент почти наверняка смотрит ваше портфолио с телефона.
Не выдумывайте результаты. «Конверсия выросла на 300%» без источника вызывает больше недоверия, чем отсутствие цифр.
Наведение, клик и мобильная версия
Мелкие детали взаимодействия делают сетку живой:
- лёгкое увеличение или подъём карточки при наведении показывают, что она кликабельна;
- кликабельна вся карточка, а не только маленькая ссылка «подробнее» внизу;
- на телефоне эффекты наведения не работают, поэтому подпись и тип проекта видны сразу, а не появляются при hover;
- сетка перестраивается: три колонки на десктопе, две на планшете, одна на телефоне — с теми же пропорциями.
Мы вынесли карточку проекта в отдельный переиспользуемый шаблон. Она одинаково выглядит на главной, в разделе портфолио и в блоке «похожие проекты» — правка стиля в одном месте меняет все карточки, и разнобой не возвращается.
Чего в портфолио быть не должно
- Проектов без разрешения клиента. Особенно внутренних систем и админок с данными. Если показать нельзя — опишите задачу без скриншотов или замажьте всё чувствительное.
- Мёртвых ссылок. Сайт клиента закрылся или переделан другой студией — уберите ссылку или пометьте, что показан архивный вариант.
- Десятков похожих работ. Пять сильных разноплановых проектов убеждают лучше, чем тридцать одинаковых лендингов.
- Тяжёлых картинок. Полноразмерные PNG по несколько мегабайт превращают портфолио в самую медленную страницу сайта. Превью — в WebP и под размер карточки.
Кто и как обновляет портфолио
Портфолио устаревает незаметно: последний проект добавлен полтора года назад, и посетитель делает вывод, что студия ничего не делает. Чтобы раздел жил, добавление проекта должно занимать минуты, а не требовать программиста.
Поэтому карточка проекта у нас — это запись в админке: название, тип, отрасль, короткое описание, обложка, галерея и текст кейса. Обложка загружается через обычную форму, система сама приводит её к нужному формату и размеру, а пропорции и обрезку берёт на себя вёрстка. Менеджер не думает о пикселях — он думает о том, что рассказать. Хорошее правило: новый проект появляется в портфолио в течение недели после сдачи, пока детали свежи и клиент охотно соглашается на публикацию.
Чек-лист перед публикацией
| Что проверить | Как должно быть |
|---|---|
| Пропорции превью | Одинаковые у всех карточек, задаются вёрсткой |
| Что видно в кадре | Шапка и первый экран проекта |
| Подписи | На русском, тип проекта + отрасль |
| Страница кейса | Задача, ограничения, решение, результат, мобильная версия |
| Права | Есть согласие клиента на публикацию |
| Вес изображений | Превью сжаты, форматы WebP/AVIF |
| Ссылки | Живые или явно помечены как архив |
Итог
Портфолио продаёт, когда выглядит так же аккуратно, как вы обещаете сделать сайт клиенту. Фиксированные пропорции, верх макета в кадре, понятные русские подписи и кейсы со структурой «задача — решение — результат» — это несколько часов работы, которые окупаются каждым посетителем, дошедшим до раздела «наши работы».
Хотите, чтобы ваши проекты выглядели на сайте так же убедительно? Посмотрите наше портфолио и расскажите о задаче — предложим структуру раздела и дизайн карточек под ваши работы.
