Любой текст о компании будет не более чем набором грамотно выстроенных фраз, если не будет подкреплен разделом с работами. Портфолио – паспорт, визитная карточка, пропуск в мир серьезных клиентов. И его нужно уметь оформлять.
В статье собрано 20 примеров страниц «Портфолио» от разных компаний, чтобы вы оценили, насколько хорошо они сделаны, и что-то применили у себя. Или исправили.
Студия Артемия Лебедева
Ссылка – https://www.artlebedev.ru/everything/

Особенности
- Креативное название портфолио – «Задизайнено».
- Показано общее число работ – и оно внушительное. И растет почти каждый день. Посмотрите сейчас на сайте: число будет уже не 3621.
- Работы разделены не только по направлениям деятельности студии, но и по сферам бизнеса клиентов. В любом из направлений есть свое разделение:

- Если нажать на кнопку «Все теги», можно
идти закрывать свою жалкую студию в провинциидополнительно проникнуться:

- Принцип организации работ – плитки, которые долго-долго листаешь вниз:

- Если навести курсор на конкретную работу, можно увидеть оформленные ссылками аспекты ее создания:

- Внутри:
- описывается поставленная задача и расписывается процесс ее решения;
- указывается, что было создано в рамках решения задачи:

- информация обо всех исполнителях проекта:

- В конце страницы с работами есть панель расшаривания в соцсетях. Согласитесь – лучше поделиться своим портфолио, а не просто скопировать / вставить ссылку на него.
Студия Артемия Лебедева – компания легендарная. Их работы по косточкам разбирают, восхищаясь и презирая, в дизайнерских кругах и не только. Ясно одно – ребята давным-давно ушли от просто веб-дизайна в сторону графического преобразования любого предмета материального мира. Чему доказательство – портфолио.
Компания «Алтэк»
Ссылка – https://altekpro.ru/portfolio/

Особенности
- Интересная особенность портфолио на этом сайте – строка поиска:

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

Список сделан с пагинацией – 15 страниц работ внушают!
- Внутри любой работы:
- большая фотография заведения;
- ее описание:

Компания постаралась и сделала шикарное портфолио на своем сайте – грамотное описание работ, детали, качественные фотографии. Все работает на то, чтобы молодой ресторатор или владелец кафе обратился туда за оборудованием своего заведения.
Строительная компания «Интехстрой»
Ссылка – http://almetfasad.ru/portfolio/

Особенности
- Странное деление работ – всего одна категория «Отделка фасада», нажатие на которую не меняет список работы – они такие же, как и в категории «Все».
- Список выполнен следующим образом:

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

- нажатие на лупу откроет фотогалерею по этой работе;
- нажатие на звенья открывает подробное описание работы.
- Как она выглядит изнутри:

Как человек, участвовавший в покупке дачного дома, я хотел бы прочитать по каждой работе, что и как было сделано – материалы, инструменты, сроки реализации проекта. Этого тут нет – очень жаль.
Фабрика мебели Льва Соловьева
Ссылка – http://www.sl-mebel.ru/portfolio/

Особенности
- Портфолио представлено разделами – каждое со своими фотографиями работ – «Мебель для баров и ресторанов», «Мебель для частных интерьеров», «Реставрация мебели» и т. д. Работы разделены пагинацией.
- Фотографии любой из категорий можно посмотреть в режиме слайд-шоу, а потом вернуться к эскизам.
- При наведении на любую картинку появится всплывающая подсказка, которая укажет на то, что работа над мета-тегом alt не делалась:

- При этом если щелкнуть на работу, все будет в порядке:

В этом портфолио хочется на каждую работу увидеть не только галерею хороших фотографий, но и прочитать хотя бы коротенькое описание – например, кому в голову пришло нарядить диван в куртку-«косуху»?!
Ателье «Гардероб»
Ссылка – http://www.g-atelier.ru/portfolio

Особенности
- Интригует надпись «На этой странице представлены изделия, созданные мастерами ателье Гардероб для наших клиентов. Часть 1». Как будто глава в истории. Во вторую часть можно попасть, если подо всеми работами нажать кнопку «Смотреть еще».
- Список работ оформлен плитками, которые просто листаешь до конца страницы. Ничего не подписано.
- Если навести курсор на конкретную работу, появится значок лупы, на который можно щелкнуть и перейти на страницу с галерей снимков. Здесь неожиданность – при листании фотографий будут показаны не / не только снимки с другого ракурса, а другие работы ателье. Это вводит в некое заблуждение:

А вот тут не совсем ясно, что хотели показать:

- Сильный прием в конце списка работ – призыв к действию с формой обратной связи:

Ателье и одежда – не моя тема. В этом портфолио прекрасны фотографии, но мужской ум требует описаний и чтобы все до одной работы были подписаны. Бесплатная консультация в конце – как способ прояснить вопросы к портфолио.
Компания «Репаблайк»
Ссылка – http://republike.ru/portfolio.html

Особенности
- Положительное впечатление от того, что все работы подписаны.
- Работы разбиты по категориям, которые расположены не сверху, а чуть ниже и сбоку:

- Обращает на себя внимание желание создателей сайта мотивировать посетителей захотеть такую же презентацию:

- При наведении на работу появляется интригующий вопрос:

- Каждая работа внутри состоит из нескольких частей:
- слайд-шоу презентации:

- все рабочие аспекты:

- подробное описание работы:

Интересно, что у компании есть и другие услуги (например, нейминг, создание сайтов, дизайн интерьеров), а портфолио наполнено только работами по созданию презентаций. Очевидно, что это основное и, судя по портфолио, успешное направление компании.
Агентство «Текстерра»
Ссылка – /portfolio/

Особенности
- Вообще портфолио «Текстерры» состоит из разделов о клиентах, отзывах, кейсах, сертификатах и непосредственно работах. Свои труды агентство емко характеризует:

- Очень (!) оригинально обыгранное число работ в портфолио. Читайте:

- Работы оформлены пиктограммами-категориями:

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

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

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

Если собрать работы «Текстерры» в один файл, это будет white paper и маркетинг-кит в одном. Как и любой специалист из мира интернет-маркетинга, стремлюсь к тому, чтобы иметь такой же багаж, пусть это и чертовски сложно.
Фабрика художественных кузнечных изделий OST
Ссылка – http://ostmetal.com/portfolio/

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

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

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

От любого портфолио ждешь большего количества работ – тут всего 21 – при том, что компания имеет сайт с 2001 года. Возможно, не все работы можно показывать или же целевую страницу создали не так давно. В любом случае хочется пожелать OST наращивать число работ. Они у них красивые в прямом смысле слова.
Мастерская «Глагол»
Ссылка – https://glagol-maket.ru/blog/cases

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

- Подробное описание работы одновременно является записью из раздела «Кейсы» блога макетчика:

- Для каждого проекта указываются выходные данные:

и рассказано об исполнителях:

- Для каждого кейса можно посмотреть подробно весь процесс создания макета:

- Все кейсы заканчиваются призывом поделиться им в социальных сетях, , заказать макет или перейти в блог главного макетчика:

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

Компания «Ремск»
Ссылка – http://remsk.net/portfolio.html

Особенности
- Работы разбиты по категориям, подписаны, разделены пагинацией и содержат краткое описание:

Если нажать на кнопку «Читать далее», откроется фотогалерея конкретной работы:

В изучении этого портфолио возникает когнитивный диссонанс – с одной стороны такие красивые изображения, краткие описания и «Читать далее», с другой – просто фотографии. Про ремонт хочется узнать гораздо больше.
Агентство «ПраздникON»

Особенности
- Портфолио представлено в виде трех разделов:

- Портфолио детских праздников начинается с «убойного» примера:

- То же самое можно сказать про портфолио организации юбилеев:

- Страницы в этом разделе портфолио организованы следующим образом:
- фотогалерея:

- запись мероприятия:

- схема работы с заказчиком:

- и еще несколько продающих моментов:

- и в конце сразу две формы обратной связи:

- Что вы можете сделать с любой работой из портфолио и в целом со страницей? Правильно:

Основная страница портфолио выглядит слабо по сравнению с оформлением его разделов. Зато там есть все: статусность, качество текстово-графического описания, продающие блоки. Серьезный подход – серьезные клиенты.
Студия PhotoIDEAL production
Ссылка – https://photo-ideal.ru/portfolio/

Особенности
- Портфолио состоит из шести тематических разделов:

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

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

То портфолио, которое не требует длинных (возможно, коротких тоже) текстовых описаний. Фотографии говорят сами за себя: интернациональные группы медицинских работников, предметы дорого парфюма, рекламные материалы, интерьеры, как со страниц модных журналов.
Автосервис DUBOKSERVIS
Ссылка – http://dubokservis.ru/nashi-raboty/

Особенности
- Работы в портфолио организованы по принципу «До и после» и подписаны названием марок автомобилей, работы разделены пагинацией:

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

Особенности
- Портфолио идет между двумя сквозными блоками сайта:
- конкурентные преимущества компании:

- список клиентов:

- Работы подписаны и имеют релевантные фотографии:

- Если навести на работу курсор, ее «кружок» превратится в квадрат изображения:

- Положительный момент – на многих фотографиях показаны сотрудницы в форменной одежды, где хорошо читается название компании – «От чистого сердца».
Не понимаю, почему было не сделать галерею работ по каждому объекту уборки, рассказать, какие площади и чем убирались. Это очень логично и добавило бы портфолио вес. Тем не менее, список клиентов говорит сам за себя.
Тату-студия «Эй, капитан!»
Ссылка – http://haycaptaintattoo.com/portfolio

Особенности
- Портфолио долго (от слова «очень») загружается – единственный подобный пример из подборки.
- Все работы подписаны и снабжены водяным знаком салона:

- По щелчку на любой работе открывается окно с увеличенной фотографией:

- Если листать фотографии, это будет не эта же работа с другого ракурса, а другая – с новой татуировкой:

Использованные иглы, чернила для татуировок, время выполнения работы и цена – всей этой информации о работах, к сожалению нет. Очевидно, изображения здесь решают гораздо больше.
Кондитерская Coolnws Foods
Ссылка – https://www.coolnws.ru/home_sweet/portfolio/

Особенности
- Работы в портфолио разделены на категории, но нет категории «Все». Полный список тортов можно вернуть нажатием на ссылку «Портфолио»:

- Любой торт изнутри выглядит следующим образом:
- каждый торт, внимание, имеет свой артикул:

- подписанная фотография, которую можно увеличить:

- информация о торте:

- «продающие» моменты:

- похожие торты:

Единственное портфолио в подборке, которое хочется съесть или подарить – целиком или каждую работу в отдельности. А то, что оно более чем достойно оформлено, делает его образцом для сходных по сфере деятельности компаний и не только.
Сеть салонов лазерной эпиляции и косметологии «Подружки»
Ссылка – https://podruge.ru/portfolio/

Особенности
- Портфолио разделено на категории. И первая же обеспечивает ему статусность и названием, и фотографией:

- Если открыть раздел «Звезды», все станет яснее ясного:

- Открываем карточку:

- Раздел портфолио «До и после» не такой эстетически привлекательный, зато необходимый для такой компании. Как видите, здесь подкатегории работ:

- Если открыть подкатегорию, будет галерея работ по конкретной услуге:

- Раздел «Видео» – ролики с процессом наведения красоты:

Что сказать – таким портфолио можно гордиться. Поток богатых и знаменитых клиентов и клиенток в «Подружки» после таких лестных комментариев обеспечен.
Компания «Свое»
Ссылка – http://art-doors.ru/portfolyo/

Особенности
- Работы организованы плитками, подписаны и имеют водяной знак:

- Под списком работ идет очень большой для такого типа страниц текст:

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

- Страница любой работы и страница с портфолио имеют в конце заявку на расчет:

Приятное для чтения и просмотра портфолио – не только декларативные заявления об эксклюзивных дверях, но и многочисленные работы с подробным описанием процесса изготовления, включая рассказ об объектах, использованных материалах и фурнитуре.
Компания «Климатический сезон»
Ссылка – https://www.climatseason.ru/portfolio/

Особенности
- Здесь есть фильтр работ по объектам и по видам. Все работы подписаны, указан их тип и категория использованного оборудования:

- Подробное описание работы выглядит так:

-
Информация о любой работе включает в себя:
- описание работ;
- красиво оформленная фотогалерея (но фотографии не подписаны);
- описание проекта;
- рассказ о его реализации;
- используемое оборудование (заметьте, с указанием цены и ссылкой на карточку товара).
Если говорить о недостатках, здесь довольно маленький шрифт как на самой странице портфолио, так и в каждой из работ. В остальном же это очень не плохое портфолио в ряду конкурентов, у многих из которых нет даже более-менее вменяемых сайтов.
Агентство «Дом недвижимости»
Ссылка – http://www.domnedv.ru/page167/portfolio/

Особенности
- Портфолио имеет классическое оформление блога – картинка / название / дата публикации / текст-анонс:

- Если открыть любую работу, она также будет выглядеть как обыкновенная статья, если не вчитываться:

Здесь есть все признаки кейса: сложившаяся ситуация, поставленная задача, фото объекта (странно, что везде сняты дома, а не интерьеры квартир) и решение.
- Любой работой из перечня и портфолио в целом можно поделиться в социальных сетях.
Самое странное и простое оформление портфолио в подборке. И самое информативное с точки зрения текстовой составляющей. Повторюсь – надо читать каждую конкретную работу – там очень интересно.
Не говори, что делаешь. Покажи, что сделал
Перед вами сайт клининговой компании, который я хотел включить в подборку, но не включил по вполне понятной причине:

Судя по футеру, сайт никак не менялся с 2015 года. Тем не менее, он в выдаче поисковых систем, иначе я бы его не смог найти. С точки зрения «Яндекса» все не так уж плохо. Но для людей, потенциальных клиентов, отсутствие у компании работ – тревожный звоночек и повод быстро уйти искать конкурентов с портфолио.
Если хотите, чтобы ваше портфолио как минимум смотрели, помните, что его характеризует:
- Наращивайте число работ – что бы ни говорили, но список из 1-2 пунктов внушает слабо. Однако если их сотни, лучше показывать самые лучшие.
- Разделяйте работы на категории – тем самым вы упрощаете поиск для клиентов, которых интересуют наиболее близкие их сфере деятельности.
- Подписывайте работы и фотографии – так вы показываете, что именно и для кого было сделано.
- Подробно описывайте каждую работу – просто показывать их в общем списке недостаточно – надо рассказать, для этого создавайте отдельную страницу под каждую из них. Не скупитесь на фотографии – показывайте фото объекта с разных ракурсов.
- Демонстрируйте в портфолио известных клиентов, их фотографии и отзывы – это работает на возрастание клиентской лояльности и повышение статуса.
-
Если в портфолио очень много примеров:
- сделайте пагинацию;
- спрячьте часть работ за кнопкой «Посмотреть еще»;
- сделайте поиск по портфолио.
- Заканчивайте описание работ призывом к действию – предложение связаться с вами и получить такой же классный результат будет более чем уместным.
Скаламбурю: работайте над своими работами. Это как зачетная книжка студента, на которую сначала работаешь ты, а потом она работает на тебя.