Портфолио дизайнера: как веб-дизайнеру собрать кейсы, которые продают

Каким должно быть портфолио веб-дизайнера

Портфолио, которое приводит заказы, — это 3–5 актуальных кейсов под нишу, в которой вы хотите работать дальше. В каждом кейсе видно задачу бизнеса, вашу роль, процесс и результат. Рядом — контакты и одно понятное действие: написать, назначить созвон, скачать PDF.

Цифру 3–5 даёт Nielsen Norman Group. В статье NN/g от 10 марта 2019 года Lexie Kane советует держать в портфолио 3–5 проектов и поддерживать их актуальными. Статья написана для UX-исследователей, но её логика подходит и веб-дизайнеру. Человек, который открыл портфолио, должен быстро найти главное и понять, подходите ли вы под его задачу.

Второе правило — из нашей практики. В LOOK мы проектируем сайт как систему привлечения клиентов: исследование бизнеса и аудитории, смысловая структура, дизайн, разработка, SEO и аналитика. Дизайн идёт после смысла, а не вместо него. Портфолио — такая же продающая страница, и правило к нему то же.

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

Для кого портфолио: работодатель, клиент-бизнес или сообщество

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

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

Работодателю важна ваша зона ответственности. Если вы делали только визуальную часть по готовому прототипу, так и пишите. Это честно и сразу подсказывает, на какую позицию вас брать.

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

Сколько и какие работы брать

Берите 3–5 проектов. Это ориентир NN/g, и причина у него простая: чем больше работ, тем глубже уходят важные.

В рекомендациях NN/g частой ошибкой названа привычка включать все прошлые проекты. Сильные работы оказываются далеко внизу страницы, и до них просто не доходят. Двадцать карточек подряд создают ощущение объёма, но заставляют смотрящего самого решать, что здесь важно. Этого он делать не станет.

Как выбрать

NN/g предлагает расставлять проекты по приоритету по трём критериям:

• Влияние. Насколько проект изменил что-то для бизнеса или пользователей.
• Процесс. Насколько полно в нём видно, как вы работали: от исследования до адаптива.
• Свежесть. Работы последних нескольких лет. Старый проект с устаревшими решениями тянет вниз всё портфолио.

Фрилансеру мы бы добавили четвёртый критерий — нишу. Берите кейсы из тех сфер и задач, которые хотите получать дальше. Если вы хотите делать сайты для клиник, а в портфолио три лендинга для инфобизнеса, к вам придут с лендингами для инфобизнеса.

Что делать с похожими работами

Однотипные проекты объединяйте в один сборный кейс. Десять промо-страниц для разных акций одного магазина — это не десять кейсов, а один: «Система промо-страниц для интернет-магазина». Внутри покажите общую логику, шаблон и два-три варианта применения.

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

Анатомия кейса веб-дизайнера

Хороший кейс отвечает на шесть вопросов:

• что было не так;
• кто что делал;
• как вы шли к решению;
• что получилось на промежуточных этапах;
• чем всё закончилось;
• что вы сделали бы иначе.

1. Контекст и задача бизнеса

Начните с ситуации клиента. Не «редизайн сайта клиники», а, например, «главная услуга клиники не имела своей страницы, и человек не находил её с первого экрана». Хорошо, если видно, как проблема влияла на заявки: люди заходили и уходили или звонили с вопросами, на которые сайт не отвечал.

2. Роль и команда

NN/g советует прямо указывать свою роль и описывать команду, по возможности называя коллег по имени. Хватит одной строки: «Я: прототип и дизайн. Тексты — копирайтер, вёрстка — разработчик». Без неё смотрящий либо решит, что вы приписываете себе чужое, либо недооценит ваш вклад.

3. Процесс

Опишите путь, а не только финал. Для примера — цепочка, по которой работаем мы в LOOK: интервью с владельцем → исследование аудитории и конкурентов → текстовый прототип и логика предложения → дизайн и адаптивная вёрстка → SEO, трафик и интеграции → запуск и поддержка. Подробнее этапы описаны на странице о процессе студии.

Повторять все шаги не нужно, если вы их не делали. Но каждый реальный этап покажите с конкретикой: «разобрали [число] конкурентов, которые борются за того же клиента в поиске и на картах». Мы на проект разбираем 10–15 таких конкурентов. В кейсе это объясняет, откуда взялись решения.

4. Артефакты

В видео NN/g сказано, что портфолио должно показывать и проекты, и промежуточные материалы. Для веб-дизайнера это текстовый прототип, схема структуры, два-три варианта первого экрана с объяснением выбора, мобильная версия, карта кликов до и после. Такие материалы убеждают сильнее десятого мокапа на фоне ноутбука.

5. Результат

Если есть цифры, давайте их с периодом и источником данных. NN/g прямо называет метрики ценными и приводит примеры: снижение обращений в поддержку, снижение показателя отказов. У сайта для бизнеса это чаще заявки, конверсия, позиции и сделки. Мы, например, смотрим позиции в Topvisor, заявки и сделки из поиска — в Roistat, трафик — в Яндекс Метрике, Вебмастере и Google Search Console.

Смотрите на формат: период, абсолютные цифры, изменение и контекст. Строка «конверсия выросла в разы» без периода и базы вызывает недоверие, а цифры с датами — нет. Если дизайн и реклама шли вместе, честно отделяйте вклад одного от другого.

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

6. Ограничения и что бы вы сделали иначе

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

Как писать текст кейса

Пишите простым языком, без профессионального жаргона. NN/g объясняет это тем, что портфолио смотрят рекрутеры, нанимающие менеджеры и руководители не из вашей области. Владелец автосервиса не знает, что такое «визуальная иерархия», но прекрасно понимает «клиент сразу видит цену и кнопку записи».

Умение объяснять — часть работы, а не дополнительный навык. В опросе NN/g среди 963 UX-специалистов самой частой рабочей активностью оказалась презентация решений и концепций: 97% регулярно презентуют идеи большой группе. Текст кейса — первая такая презентация, которую видит заказчик.

Задача и результат вместо списка работ

Частая ошибка — описывать кейс перечнем: «10 экранов, адаптив, анимации, сборка на Tilda». Ту же ошибку мы видим в коммерческих предложениях. Если проект описан как список работ, заказчик начинает вычёркивать пункты и искать дешевле — других критериев ценности ему не дали.

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

• «Сделал адаптивную версию» — описание работы.
• «Больше половины посетителей приходили с телефона, а кнопка записи на мобильном уходила за второй экран. Перенесли запись в первый экран и закрепили кнопку» — задача, решение и причина.

Формулировки — из слов клиента

Задачу описывайте так, как её сформулировал клиент на брифе или в переписке. Для сайтов мы берём формулировки из языка клиентов: отзывы, форумы, агрегаторы, карты, поисковые запросы. В портфолио работает то же самое. «Посетители заходят, теряются и не доходят до записи» следующему заказчику понятнее, чем «низкая конверсия целевой страницы».

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

Собери текст кейса для портфолио веб-дизайнера по шаблону ниже.
Используй только факты из моих заметок. Ничего не додумывай.
Если данных для пункта нет — напиши «нет данных», не заполняй общими словами.
Пиши простым языком, без дизайнерского жаргона: текст читает владелец бизнеса.
Сохраняй формулировки клиента дословно, в кавычках.

1. Клиент и ниша (без названия бренда, если нельзя показывать).
2. Что не работало и как это влияло на заявки или продажи.
3. Моя роль и команда (кто что делал).
4. Этапы: что сделали на каждом этапе и зачем.
5. Промежуточные материалы, которые стоит показать.
6. Результат: цифры с периодом и источником данных или изменения в работе сайта.
7. Ограничения проекта и что я сделал бы иначе.

Заметки по проекту:
[вставьте заметки, переписку, бриф]

Где разместить: личный сайт, Behance, Dribbble и PDF

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

Что знать про загрузку на Dribbble

22 августа 2018 года Dribbble объявил в официальном блоге: лимит загрузки шота увеличен до 10 МБ, ограничения по размеру в пикселях ослаблены. При загрузке есть инструмент кадрирования с зумом и сеткой, а сервис автоматически сохраняет максимальное количество пикселей. Готовить файлы строго определённого размера под шот больше не нужно. Правила площадок меняются, поэтому перед загрузкой сверяйтесь с актуальной справкой.

Сайт-портфолио тоже должен находиться

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

• одна страница — один конкретный вопрос клиента: «дизайн сайта для стоматологии», а не просто «веб-дизайн»;
• короткий ответ в начале страницы, без долгого рассказа о себе;
• то, чего нет в десятке одинаковых портфолио: свой опыт, расчёты, фото процесса, сравнения до и после;
• автор, сведения о вас, дата обновления и источники данных в кейсах;
• понятные заголовки.

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

Получите структуру сайта бесплатно

Никита Лукин, руководитель LOOK · пришлём в течение рабочего дня

Имя Телефон

Как удобнее ответить?

Telegram WhatsApp MAX Звонок

Согласен на обработку персональных данных по политике конфиденциальности Получить структуру бесплатно

Что можно показывать: NDA, работа в штате, заказные проекты

Короткий ответ: не всё и не всегда. Перед публикацией проверьте три документа — трудовой договор, договор с заказчиком и NDA. Если ясного ответа в них нет, письменно согласуйте показ.

Что говорит закон о работах, сделанных в штате

Работы, созданные в пределах трудовых обязанностей, Гражданский кодекс называет служебными произведениями. Их регулирует статья 1295 ГК РФ. Для дизайнера важны четыре положения:

• Авторские права принадлежат автору (п. 1). Макет, сделанный вами в штате, остаётся вашим произведением.
• Исключительное право принадлежит работодателю (п. 2), если трудовым или гражданско-правовым договором не предусмотрено иное.
• Обнародовать служебное произведение может работодатель (п. 4), если договор не предусматривает иное. При этом он вправе указывать своё имя или наименование.
• Право может вернуться к автору. Если в течение трёх лет работодатель не начнёт использовать произведение, не передаст исключительное право другому лицу и не сообщит автору о сохранении произведения в тайне, исключительное право возвращается автору.

Сверено по редакции части четвёртой ГК РФ от 23.07.2025 с изменениями, вступившими в силу с 04.01.2026. Отдельного правила про портфолио в статье нет, поэтому на практике всё решают условия вашего договора. Если в нём ничего не сказано, безопаснее заранее спросить разрешение письменно.

Фриланс и NDA

Проект, сделанный фрилансером по договору с клиентом, как правило, не подпадает под ст. 1295: для работ по заказу в ГК РФ есть отдельная статья 1296. Многое зависит от того, что написано в договоре о передаче прав и об упоминании исполнителя, поэтому формулировки стоит сверить с юристом. Если вы подписали NDA, его условия ограничивают показ независимо от того, кому принадлежат права на макет.

Если показывать нельзя

Кейс можно сохранить в другом виде:

• Обезличенный кейс. Без бренда, логотипа, реальных данных и узнаваемых фото. Ниша и задача остаются: «сеть клиник в региональном городе».
• Разбор процесса. Логика решений, схемы, прототипы без контента — если договор это допускает.
• Показ при встрече. Без публикации, если это не запрещено соглашением.

Для согласования удобно отправить короткое письмо. Ответ останется в переписке.

Здравствуйте, [имя].

Я собираю портфолио и хотел(а) бы показать в нём проект [название или описание проекта], который делал(а) для [компании] в [период].

Планирую показать:
— [что именно: первый экран, мобильную версию, прототип, описание процесса];
— [упоминать ли название компании или показать обезличенно];
— [цифры результата, если есть, или без них].

Не буду публиковать: [персональные данные, внутренние документы, цифры продаж и т. п.].

Подтвердите, пожалуйста, можно ли разместить проект в таком виде. Если нужно что-то убрать или изменить — поправлю до публикации.

Спасибо.

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

Портфолио без коммерческого опыта

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

Редизайн реального сайта

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

1. Соберите отзывы о компании и её конкурентах на картах и агрегаторах. Выпишите, что людей беспокоит и по каким критериям они выбирают.
2. Разберите конкурентов, которые борются за того же клиента в том же канале. Мы на проект берём 10–15.
3. Опишите проблемы текущего сайта языком клиента: что человек ищет и не находит.
4. Соберите текстовый прототип: какие блоки, в каком порядке и почему.
5. Только после этого делайте дизайн и мобильную версию.

Концепт — значит концепт

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

Учебные и волонтёрские проекты

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

От портфолио к заказу: что происходит после просмотра

Портфолио открывает разговор, но продаёт обычно не оно. Продаёт то, как вы объясняете клиенту его задачу и путь к результату. Это хорошо видно на коммерческом предложении LOOK на сайт, где основной тариф — 460 000 ₽.

КП сработало не оформлением. Клиент увидел, как понята его задача, из каких этапов состоит работа, что он получает на каждом этапе, что входит в стоимость и где заканчивается зона ответственности исполнителя. Если в КП только портфолио и «услуга — цена», клиент сравнивает по цене. Если показана логика работы — сравнивает подходы. Полный разбор этого предложения — в статье «Пример коммерческого предложения».

Как кейсы подводят к этому разговору

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

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

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

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

Чек-лист перед публикацией портфолио

Пройдите по списку перед тем, как отправить ссылку работодателю или клиенту.

Отбор

• В портфолио 3–5 кейсов, хотя бы один из них свежий.
• Кейсы из той ниши и с теми задачами, которые вы хотите получать дальше.
• Похожие работы объединены в сборный кейс, архив вынесен отдельно.

Содержание кейса

• Есть задача бизнеса, описанная словами клиента.
• Указана ваша роль и команда.
• Показан процесс и промежуточные материалы, а не только финальные мокапы.
• Результат дан с периодом и источником данных или описано, что изменилось в работе сайта.
• Есть ограничения проекта и то, что вы сделали бы иначе.
• Концепты помечены как концепты.

Права

• Проверены трудовой договор, договор с заказчиком и NDA.
• Если ответа в документах нет, показ согласован письменно.
• Из обезличенных кейсов убраны бренд, логотипы и реальные данные.

Сайт и площадки

• Портфолио удобно смотреть с телефона.
• Контакты видны без прокрутки, есть одна понятная кнопка действия.
• У каждого кейса своя страница с понятным заголовком, автором и датой обновления.
• Ссылки с Behance, Dribbble и соцсетей ведут на ваш сайт.
• Для откликов собрана PDF-подборка под конкретную компанию или нишу.

Частые вопросы

Автор

Никита Лукин

основатель и руководитель веб-студии LOOK

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

• Стоматология: 39 из 48 запросов по имплантации в ТОП-3 Яндекса, 77 заявок из поиска
• Интернет-магазин доставки раков: 3,6 млн ₽ дохода за 2025 год, без платной рекламы

Пишу о сайтах, SEO и ИИ в Telegram → @lukindesign