20 примеров оформления портфолио на сайте

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

В статье собрано 20 примеров страниц «Портфолио» от разных компаний, чтобы вы оценили, насколько хорошо они сделаны, и что-то применили у себя. Или исправили.

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

Ссылка – https://www.artlebedev.ru/everything/

Особенности

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

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

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

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

7. Внутри:

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

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

8. В конце страницы с работами есть панель расшаривания в соцсетях. Согласитесь – лучше поделиться своим портфолио, а не просто скопировать / вставить ссылку на него.

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

Ссылка – https://altekpro.ru/portfolio/

Особенности

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

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

Список сделан с пагинацией – 15 страниц работ внушают!

5. Внутри любой работы:

• большая фотография заведения;
• ее описание:

Строительная компания «Интехстрой»

Ссылка – http://almetfasad.ru/portfolio/

Особенности

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

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

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

5. Как она выглядит изнутри:

Фабрика мебели Льва Соловьева

Ссылка – http://www.sl-mebel.ru/portfolio/

Особенности

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

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

Ателье «Гардероб»

Ссылка – http://www.g-atelier.ru/portfolio

Особенности

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

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

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

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

Ссылка – http://republike.ru/portfolio.html

Особенности

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

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

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

5. Каждая работа внутри состоит из нескольких частей:

• слайд-шоу презентации:

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

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

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

Ссылка – /progress/portfolio/

Особенности

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

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

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

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

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

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

В категории «Видео-контент» в примерах работ логично показаны отснятые ролики.

Как и все портфолио целиком, так и любая работа заканчиваются призывом к действию с заполнением формы обратной связи:

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

Ссылка – http://ostmetal.com/portfolio/

Особенности

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

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

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

Мастерская «Глагол»

Ссылка – https://glagol-maket.ru/blog/cases

Особенности

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

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

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

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

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

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

Компания «Ремск»

Ссылка – http://remsk.net/portfolio.html

Особенности

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

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

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

Ссылка – https://www.prazdnikon.ru/foto-i-video

Особенности

1. Портфолио представлено в виде трех разделов:

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

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

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

• фотогалерея:

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

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

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

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

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

Студия PhotoIDEAL production

Ссылка – https://photo-ideal.ru/portfolio/

Особенности

1. Портфолио состоит из шести тематических разделов:

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

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

Автосервис DUBOKSERVIS

Ссылка – http://dubokservis.ru/nashi-raboty/

Особенности

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

2. Количество моделей и результат работу внушают уважение у меня как у водителя. Собственно… все!

Клининговая компания «От чистого сердца»

Ссылка – http://uborkavufe.ru/portfolio.html

Особенности

1. Портфолио идет между двумя сквозными блоками сайта:

• конкурентные преимущества компании:

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

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

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

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

Тату-студия «Эй, капитан!»

Ссылка – http://haycaptaintattoo.com/portfolio

Особенности

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

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

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

Кондитерская Coolnws Foods

Ссылка – https://www.coolnws.ru/home_sweet/portfolio/

Особенности

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

2. Любой торт изнутри выглядит следующим образом:

• каждый торт, внимание, имеет свой артикул:

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

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

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

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

Сеть салонов лазерной эпиляции и косметологии «Подружки»

Ссылка – https://podruge.ru/portfolio/

Особенности

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

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

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

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

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

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

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

Ссылка – http://art-doors.ru/portfolyo/

Особенности

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

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

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

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

Компания «Климатический сезон»

Ссылка – https://www.climatseason.ru/portfolio/

Особенности

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

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

3. Информация о любой работе включает в себя:

   • описание работ;
   • красиво оформленная фотогалерея (но фотографии не подписаны);
   • описание проекта;
   • рассказ о его реализации;
   • используемое оборудование (заметьте, с указанием цены и ссылкой на карточку товара).

Агентство «Дом недвижимости»

Ссылка – http://www.domnedv.ru/page167/portfolio/

Особенности

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

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

Здесь есть все признаки кейса: сложившаяся ситуация, поставленная задача, фото объекта (странно, что везде сняты дома, а не интерьеры квартир) и решение.

3. Любой работой из перечня и портфолио в целом можно поделиться в социальных сетях.

Не говори, что делаешь. Покажи, что сделал

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