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

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

В статье собрано 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

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

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

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

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

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

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

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

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

    C таким портфолио? Конечно же, обсудим!

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

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

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

    Портфолио фабрики OST Особенности
  • Основная страница портфолио содержит короткий текст, рассказывающий о компании OST, список работ. Обратите внимание – картинки защищены водяными знаками:
  • Текст-превью, подписанные работы с защищенными картинками
  • При наведении на работу появляется лупа. Если щелкнуть, открывается модальное окно – фотогалерея с описанием проекта и географическим размещением объекта
  • Карточка работы из портфолио OST
  • Портфолио можно поделиться в соцсетях. На это есть прямое указание:
  • Призыв к очень эффективному действию – многим на заметку

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

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

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

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

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

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

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

    Согласитесь – очень похожи! Компания «Ремск»

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

    Портфолио компании «Ремск» Особенности
  • Работы разбиты по категориям, подписаны, разделены пагинацией и содержат краткое описание:
  • Внешний вид портфолио компании «Ремск»

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

    Ремонт и дизайн квартиры 75 кв. м.

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

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

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

    Портфолио агентства «ПраздникON» Особенности
  • Портфолио представлено в виде трех разделов:
  • Разделы портфолио – каждый для своей аудитории
  • Портфолио детских праздников начинается с «убойного» примера:
  • Название и фото автоматически поднимают статус агентства детских праздников
  • То же самое можно сказать про портфолио организации юбилеев:
  • Тут даже фото достаточно
  • Страницы в этом разделе портфолио организованы следующим образом:
  • фотогалерея:
  • Девушка с бас-гитарой сразу приковывает внимание. Диану Арбенину вы заметите потом
  • запись мероприятия:
  • Классный, наверное, был юбилей
  • схема работы с заказчиком:
  • Понятная и дружелюбная схема работы
  • и еще несколько продающих моментов:
  • Компания лицом к клиенту
  • и в конце сразу две формы обратной связи:
  • Премиальный характер портит досадная ошибка во «в течении»
  • Что вы можете сделать с любой работой из портфолио и в целом со страницей? Правильно:
  • Полезная фишка любого портфолио

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

    40+ способов привлечь внимание клиентов и получать больше лидов Студия PhotoIDEAL production

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

    Портфолио студии PhotoIDEAL production Особенности
  • Портфолио состоит из шести тематических разделов:
  • Работы студии по категориям
  • При нажатии на кнопку подробнее открывается перечень фотографий, который можно посмотреть, если скроллить страницу вниз. Привычных стрелочек и фотогалереи здесь нет, зато фотографии подписаны и снабжены водяным знаком:
  • Съемки работников УФНС придают работам дополнительный статус
  • По каждой работе можно связаться со студией, заполнив форму обратной связи:
  • Первый раз вижу, чтобы имя и телефон вводились в одно поле

    То портфолио, которое не требует длинных (возможно, коротких тоже) текстовых описаний. Фотографии говорят сами за себя: интернациональные группы медицинских работников, предметы дорого парфюма, рекламные материалы, интерьеры, как со страниц модных журналов.

    Автосервис DUBOKSERVIS

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

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

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

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

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

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

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

    Портфолио тату-студии «Эй, капитан!» Особенности
  • Портфолио долго (от слова «очень») загружается – единственный подобный пример из подборки.
  • Все работы подписаны и снабжены водяным знаком салона:
  • Список работ салона
  • По щелчку на любой работе открывается окно с увеличенной фотографией:
  • Такой вот «Клоун»
  • Если листать фотографии, это будет не эта же работа с другого ракурса, а другая – с новой татуировкой:
  • А это уже «Мумия»

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

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

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

    Портфолио кондитерской Coolnws Foods Особенности
  • Работы в портфолио разделены на категории, но нет категории «Все». Полный список тортов можно вернуть нажатием на ссылку «Портфолио»:
  • Как много разных тортиков!
  • Любой торт изнутри выглядит следующим образом:
  • каждый торт, внимание, имеет свой артикул:
  • Артикул упрощает ведение бухучета и идентификацию конкретного продукта
  • подписанная фотография, которую можно увеличить:
  • Ради такого торта пойдешь и в «аварийку»
  • информация о торте:
  • Цена, состав продукта, информация о минимальном весе торта
  • «продающие» моменты:
  • Скидки + услуга доставки + предложение изменить вес и размер + варианты начинок + доплата за срочность и предоплата
  • похожие торты:
  • Отличный прием мотивации на дальнейший просмотр портфолио

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

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

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

    Портфолио салона «Подружки» Особенности
  • Портфолио разделено на категории. И первая же обеспечивает ему статусность и названием, и фотографией:
  • Все ведь узнали в «звездах» Ксению Бородину
  • Если открыть раздел «Звезды», все станет яснее ясного:
  • Я узнал 6 из 8. А вы?
  • Открываем карточку:
  • Красивая фотография Эвелины Бледанс и ее развернутый отзыв о салоне
  • Раздел портфолио «До и после» не такой эстетически привлекательный, зато необходимый для такой компании. Как видите, здесь подкатегории работ:
  • Косметические услуги в формате «до и после»
  • Если открыть подкатегорию, будет галерея работ по конкретной услуге:
  • Услуги наглядно
  • Раздел «Видео» – ролики с процессом наведения красоты:
  • Важность этих примеров трудно переоценить, но смотреть не тянет

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

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

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

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

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

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

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

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

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

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

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

    Портфолио агентства «Дом недвижимости» Особенности
  • Портфолио имеет классическое оформление блога – картинка / название / дата публикации / текст-анонс:
  • Если не знать, что это портфолио, можно перепутать с разделом «Статьи»
  • Если открыть любую работу, она также будет выглядеть как обыкновенная статья, если не вчитываться:
  • Суть проделанного понимаешь только после прочтения текста

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

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

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

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

    Портфолио, которое начинается с чистого листа

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

    Если хотите, чтобы ваше портфолио как минимум смотрели, помните, что его характеризует:

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

  • сделайте пагинацию;
  • спрячьте часть работ за кнопкой «Посмотреть еще»;
  • сделайте поиск по портфолио.
  • Заканчивайте описание работ призывом к действию – предложение связаться с вами и получить такой же классный результат будет более чем уместным.
  • Скаламбурю: работайте над своими работами. Это как зачетная книжка студента, на которую сначала работаешь ты, а потом она работает на тебя.

    Хотите самостоятельно продвигать свой бизнес? Закажите разработку стратегии в нашей компании. Подробнее primery-oformleniya-portfolio-na-sayte
    Просмотров: 155 | Добавил: wandakinirymwl | Рейтинг: 0.0/0
    Всего комментариев: 0
    avatar