13 лучших примеров по оформлению портфолио

Обновила: Дарья Ракова

Портфолио — визитная карточка, пропуск в мир серьезных клиентов. И с его оформлением не все так просто, как кажется на первый взгляд.

Мы собрали 13 лучших примеров страниц «Портфолио» от разных компаний и специалистов, чтобы вы оценили, что в них хорошо сделано, и смогли по образу и подобию собрать портфолио собственной компании.

1. Студия Артемия Лебедева

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

На что обратить внимание:

1. Креативное название портфолио — «Задизайнено».

2. Есть счетчик общего числа работ студии — и оно внушительное. И растет почти каждый день. Посмотрите сейчас на сайте: число будет уже не 5074 (как в начале сентября 2023, когда мы обновляли эту статью).
3. Работы разделены не только по направлениям деятельности студии, но и по сферам бизнеса клиентов. В каждом из них есть свое разделение:

4. Принцип организации работ — подборка «обложек», которые дают представление о стиле и цепляют глаз посетителя.

5. Под каждой «обложкой» — четкое пояснение фронта работ:

описывается поставленная перед студией задача и расписывается процесс ее решения;

указаны авторы кейсов:

6. Креативная подача работ. Некоторые даже оформлены в стихах:

7. Есть версия портфолио на английском языке:

8. Везде есть кнопки для заказа дизайна:

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

Работы Студия Артемия Лебедева по косточкам разбирают, презирая и восхищаясь (и не только в дизайнерских кругах). Очевидно, что они давным-давно ушли от просто веб-дизайна в сторону графического преобразования любого предмета материального мира. Портфолио студии — тому наглядное подтверждение.

2. Агентство «Текстерра»

Сапожник не может быть без сапог! Скорее всего, вы знаете, что делает «Текстерра». Но если нет — мы создаем и продвигаем сайты, лендинги, мобильные приложения, ведем блоги, создаем фирменный стиль, контент и инфографику, делаем email-рассылки, видеоконтент, SMM и многое другое.

На что обратить внимание:

1. Портфолио «Текстерры» состоит из разделов: о клиентах, отзывы, кейсы, сертификаты и непосредственно сами работы.

2. Оригинально обыгрываем количество работ, представленных (точнее, непредставленных) в портфолио:

3. При открытии каждой категории пользователь переходит в портфолио работ с названием направления, кратким описанием и подписанными скриншотами. При наведении на любую работу появляется ссылка «Подробнее»:

4. Каждая работа (из какой бы категории услуг она ни была) максимально подробно расписана:

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

6. Любая работа заканчивается призывом к действию с заполнением формы обратной связи:

Если собрать работы «Текстерры» в один файл, это будет white paper и маркетинг-кит в одном.

Светлана Шульман, Маркетолог TexTerra:

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

3. Компания «Алтэк»

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

Особенности:

1. Необычная для стандартного портфолио деталь — есть строка поиска:

2. В шапку портфолио также включены отзывы клиентов и их перечень — хороший прием для усиления впечатления от списка работ.
3. Работы разбиты по категориям — так потенциальным заказчикам проще просматривать конкретные направления деятельности, подходящие под их профиль . Кнопка «Все» настроена по умолчанию, она же возвращает список всех работ.
4. Принцип организации портфолио — карточки с фото проектов и их описанием. Список сделан с пагинацией (от лат. pagina — страница): 22 страницы работ внушают уважение.

5. Внутри каждого объекта присутствуют:

• большая фотография заведения;
• описание оборудование, поставленного компанией каждому из заказчиков: :

• галерея фотографий работы:

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

4. Компания «Репаблайк»

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

Особенности:

1. Все работы подписаны, везде видно без перехода на страницу, для кого сделана презентация и как она устроена.

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

Интересно, что компании, кроме создания презентаций предоставляет и другие услуги (например, нейминг, создание сайтов, дизайн интерьеров), однако портфолио наполнено только работами по созданию презентаций — очевидно, что это основное и, судя по портфолио, успешное направление компании.

5. Агентство «ПраздникON»

Как понятно из названия, агентство делает праздники — от камерных до больших корпоративов.

Особенности:

1. Сайт агентства — лендинг. Нажимаем на «Портфолио» — и переходим в соответствующий раздел. Он начинается с фотографий прошедших праздников:

2. Нажимаем на «Подробнее» — и появляется описание мероприятия и фотографии с него:

3. Дальше пользователям предлагают посмотреть похожие праздники и тем самым оставляют их на сайте на более длительное время:

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

5. Затем идут отзывы клиентов — это лучшее решение для доказательства того, что агентство хорошо проводит мероприятия.

6. Дальше идет еще одно социальное доказательство — бренды, с которыми работает агентство:

7. Есть предложение связаться для организации своего праздника:

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

6. Компания «Свое»

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

Особенности:

1. Одно из самых красивых портфолио в этой статье:

2. Работы разделены по категориям, чтобы посетителям было проще ориентироваться:

3. Каждая работа подписана — можно понять, о чем будет речь, не заглядывая на страницу кейса.
4. Внутри каждая работа описана максимально подробно.
5. И сразу же — есть возможность заказать у компании услугу, например, двери: :

Фишка портфолио (помимо красивого визуала) в том, что декларативные заявления об эксклюзивных дверях подтверждено многочисленными работами с подробным описанием процесса изготовления — есть рассказ об объектах, использованных материалах и фурнитуре.

7. Тату-студия Art of Pain

Делают татуировки.

Особенности:

1. Портфолио простое, но информативное. Татуировки разделены по:

• полу (мужские и женские);
• месту нанесения (ноги, руки, тело);
• стилям.

2. У каждой татуировки указан мастер — и тут же можно посмотреть другие его работы.

3. Нажав на «Хочу такую же тату», можно сразу же записаться на прием:

Все использованные приемы помогают лучше ориентироваться на сайте. Интерфейс сайта простой и понятный.

8. Портфолио Павла Федорова

Павел Федоров — редактор, медиа-менеджер и писатель. Написал книгу «Пиши, ленивая «жопа».

Особенности:

1. Портфолио находится не в отдельном разделе, а прямо на главной сайта. По сути, оно даже не называется портфолио.
2. Все проекты и опыт разделены на тематические блоки.
3. Ключевые кейсы выделены. Например, проект «Тинькофф-Банка» выделен фирменным цветом банка — и это сразу привлекает внимание.

4. На всем сайте продуманная навигация — можно посмотреть каждую страницу и ссылку.

5. Здесь сразу же можно оставить вопрос или предложение. К форме привлекают внимание собаки Павла. Сама форма простая и не перегруженная: здесь только имя, почта и текст сообщения.

Этот сайт — баланс простоты и стиля, актуального в 2023 году: монохром с яркими акцентами, скругленные углы инфоблоков.

9. Бюро Горбунова

Бюро Горбунова — дизайн-студия. Клиентам‑компаниям бюро помогает создавать новые и улучшать существующие продукты и услуги (создают название, логотип, визуализацию, интерфейс, сайт, упаковку, оформление бумажных и электронных изданий).

Особенности:

1. Простота. В портфолио нет ярких картинок и призывов к действию — просто перечень сделанных работ.

Перейдем на проект — сразу встречают две вкладки: «Обзор» и «Ведро». В «Обзоре» — рассказ о проекте.

1. 2Для каждого проекта прописаны:

• суть проекта;
• какие результаты были достигнуты;
• даты старта и завершения;
• авторы проекта.

3. «Ведро» — это раздел, где можно посмотреть, как проект выглядел, пока не придумали финальную версию — слогана, брендинга, упаковки, сайта. Благодаря этому можно оценить, как думали авторы проекта и почему выбрали именно такой вариант решения. Это круто, потому что показывает н етолько процесс работы Бюро, но и его творческий потенциал.

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

5. Каждой страницей портфолио можно поделиться — это позволяет бесплатно распространять портфолио Бюро.
6. На каждой странице есть ссылки на похожие материалы — это позволяет задержать пользователя на сайте как можно дольше.

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

10. Love Story фотографа Алексея Китова

Это раздел портфолио ульяновского свадебного фотографа.

Особенности:

1. Все съемки названы не именами моделей, как это часто бывает, а по идее съемки — Baggy, Duna, 007.

2. В портфолио только уникальные и необычные съемки, которые привлекают внимание — а не типичные семейные фотосессии и свадьбы.
3. Показаны разные съемки, которые могут привлечь разные сегменты ЦА.

Есть очень яркие и артхаусные съемки:

И менее радикальные фотосессии:

В целом, портфолио похоже на портфолио других фотографов, но названия съемок запоминаются. Вывод — ищите свою фишку для подачи информации.

11. Портфолио Максима Ильяхова

Максим Ильяхов — популярный редактор, главред «Кода» и «Кинжала», экс-главред «Тинькофф-Журнала» и «Мегаплана».

Особенности:

1. Проекты описаны в одинаковой структуре:

• для какого заказчика был сделан;
• кто еще участвовал в работе;
• что еще почитать о проекте.

1. 2Все проекты помещаются на нескольких экранах. Дополнительно почитать о каждом проекте можно по ссылкам под основным описанием. Благодаря этому те, кто заинтересован в конкретном проекте, знают, где читать дальше, а те, кому нужно посмотреть все и быстро — могут просто «пробежаться» по проектам.

Это портфолио — пример того, как не усложнять. При видимой простоте однако, в портфолио хорошо презентован весь опыт Ильяхова.

12. Alexander Tischler

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

Главный в интерьерной компании — Карен Карапетян, а не Александр Тишлер, как можно подумать сначала. Александр Тишлер — учитель основателя компании Карена.

Особенности:

1. Интерьеры и мебель представлены в разных разделах — это упрощает навигацию на сайте.

2. У каждого проекта обозначен метраж — чтобы его посмотреть, не нужно заходить в карточку. Благодаря этому, если кто-то ищет пример интерьера для конкретной квартиры/дома, поиск займет меньше времени.
3. Каждый проект описан по общей структуре:

• главное о проекте;
• основные параметры — площадь, тип помещения, годы работы, особенности помещения;
• планировка — было/стало;
• обширное описание работы;
• этапы работы;
• команда проекта;

3. Полностью описаны все затраты — тк потенциальный клиент может прицениться и не писать по этому поводу сообщения в студию.

4. Здесь же можно оставить заявку — есть кнопка перехода на сайт, в Telegram или WhatsApp.
5. Есть ссылки на похожие проекты — чтобы пользователь подольше остался на сайте.

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

13. Фабрика художественных кузнечных изделий OST

Фабрика с 1990 года делает художественные кованые изделия и металлодекор.

Особенности:

1. Основная страница портфолио содержит короткий текст, рассказывающий о компании OST, есть перечень работ. Обратите внимание — иллюстрации защищены водяными знаками:

2. При наведении на работу появляется лупа. Если щелкнуть, открывается модальное окно — фотогалерея с описанием проекта и географическим размещением объекта:

3. Портфолио можно поделиться в соцсетях. На это есть прямое указание:

От любого портфолио ждешь большего количества работ — тут всего 21 — при том, что компания имеет сайт с 2001 года. Возможно, не все работы можно показывать. В любом случае хочется пожелать OST наращивать число работ. Они у них красивые в прямом смысле слова. И обновить сайт в соответствии с трендами 2023 года.

Резюме: как сделать хорошее портфолио на сайте

1. Наращивайте число работ — что бы ни говорили, но список из 1-2 пунктов мало внушает доверия. Однако если работ у вас сотни, имеет смысл показывать только лучшие.
2. Если в портфолио очень много примеров:

• сделайте пагинацию (по страницам);
• спрячьте часть неосновных работ за кнопкой «Посмотреть еще»;
• сделайте поиск по портфолио.

3. Разделяйте свои кейсы на категории — тем самым вы упростите поиск для клиентов, которых интересуют наиболее близкие к их сфере деятельности работы.
4. Демонстрируйте в портфолио известных клиентов, их фотографии и отзывы — это работает на возрастание клиентской лояльности и повышение статуса. И подписывайте работы и фотографии — так вы сформируете у посетителей понимание, с профессионалами какого уровня (и ценового диапазона) они имеют дело.
5. Подробно описывайте каждую работу — просто показывать свои кейсы в общем списке недостаточно. Для этого создавайте отдельную страницу под каждую из своих работ. Не скупитесь на фотографии — показывайте фото объекта с разных ракурсов.
6. Заканчивайте описание работ призывом к действию — предложение связаться с вами и получить такой же классный результат будет весьма уместным.

Читайте также:

Гайд: как запустить сайт на собственном компьютере за один день

Лендинги: развенчание некоторых мифов о посадочных страницах

Как бесплатно создать сайт на Tilda — пошаговый гайд