Любой текст о компании будет не более чем набором грамотно выстроенных фраз, если не будет подкреплен разделом с работами. Портфолио – паспорт, визитная карточка, пропуск в мир серьезных клиентов. И его нужно уметь оформлять.
В статье собрано 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
Особенности
Положительное впечатление от того, что все работы подписаны.
Работы разбиты по категориям, которые расположены не сверху, а чуть ниже и сбоку:
Обращает на себя внимание желание создателей сайта мотивировать посетителей захотеть такую же презентацию:
При наведении на работу появляется интригующий вопрос:
Каждая работа внутри состоит из нескольких частей:
слайд-шоу презентации:
все рабочие аспекты:
подробное описание работы:
Интересно, что у компании есть и другие услуги (например, нейминг, создание сайтов, дизайн интерьеров), а портфолио наполнено только работами по созданию презентаций. Очевидно, что это основное и, судя по портфолио, успешное направление компании.
Агентство «Текстерра»
Ссылка – /progress/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»
Ссылка – https://www.prazdnikon.ru/foto-i-video
Особенности
Портфолио представлено в виде трех разделов:
Портфолио детских праздников начинается с «убойного» примера:
То же самое можно сказать про портфолио организации юбилеев:
Страницы в этом разделе портфолио организованы следующим образом:
фотогалерея:
запись мероприятия:
схема работы с заказчиком:
и еще несколько продающих моментов:
и в конце сразу две формы обратной связи:
Что вы можете сделать с любой работой из портфолио и в целом со страницей? Правильно:
Основная страница портфолио выглядит слабо по сравнению с оформлением его разделов. Зато там есть все: статусность, качество текстово-графического описания, продающие блоки. Серьезный подход – серьезные клиенты.
40+ способов привлечь внимание клиентов и получать больше лидов
Студия PhotoIDEAL production
Ссылка – https://photo-ideal.ru/portfolio/
Особенности
Портфолио состоит из шести тематических разделов:
При нажатии на кнопку подробнее открывается перечень фотографий, который можно посмотреть, если скроллить страницу вниз. Привычных стрелочек и фотогалереи здесь нет, зато фотографии подписаны и снабжены водяным знаком:
По каждой работе можно связаться со студией, заполнив форму обратной связи:
То портфолио, которое не требует длинных (возможно, коротких тоже) текстовых описаний. Фотографии говорят сами за себя: интернациональные группы медицинских работников, предметы дорого парфюма, рекламные материалы, интерьеры, как со страниц модных журналов.
Автосервис DUBOKSERVIS
Ссылка – http://dubokservis.ru/nashi-raboty/
Особенности
Работы в портфолио организованы по принципу «До и после» и подписаны названием марок автомобилей, работы разделены пагинацией:
Количество моделей и результат работу внушают уважение у меня как у водителя. Собственно… все!
Очень лаконично. Просто путешествуешь по его страницам, двигаешь туда-сюда ползунком и смотришь, какие были ужасные вмятины и царапины, от которых потом не осталось и следа. На фоне подавляющего большинства СТО, у которых кроме телефона ничего нет, это портфолио выглядит достойно.
Клининговая компания «От чистого сердца»
Ссылка – http://uborkavufe.ru/portfolio.html
Особенности
Портфолио идет между двумя сквозными блоками сайта:
конкурентные преимущества компании:
список клиентов:
Работы подписаны и имеют релевантные фотографии:
Если навести на работу курсор, ее «кружок» превратится в квадрат изображения:
Положительный момент – на многих фотографиях показаны сотрудницы в форменной одежды, где хорошо читается название компании – «От чистого сердца».
Не понимаю, почему было не сделать галерею работ по каждому объекту уборки, рассказать, какие площади и чем убирались. Это очень логично и добавило бы портфолио вес. Тем не менее, список клиентов говорит сам за себя.
Тату-студия «Эй, капитан!»
Ссылка – 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 пунктов внушает слабо. Однако если их сотни, лучше показывать самые лучшие.
Разделяйте работы на категории – тем самым вы упрощаете поиск для клиентов, которых интересуют наиболее близкие их сфере деятельности.
Подписывайте работы и фотографии – так вы показываете, что именно и для кого было сделано.
Подробно описывайте каждую работу – просто показывать их в общем списке недостаточно – надо рассказать, для этого создавайте отдельную страницу под каждую из них. Не скупитесь на фотографии – показывайте фото объекта с разных ракурсов.
Демонстрируйте в портфолио известных клиентов, их фотографии и отзывы – это работает на возрастание клиентской лояльности и повышение статуса.
Если в портфолио очень много примеров:
сделайте пагинацию;
спрячьте часть работ за кнопкой «Посмотреть еще»;
сделайте поиск по портфолио.
Заканчивайте описание работ призывом к действию – предложение связаться с вами и получить такой же классный результат будет более чем уместным.
Скаламбурю: работайте над своими работами. Это как зачетная книжка студента, на которую сначала работаешь ты, а потом она работает на тебя.
Хотите самостоятельно продвигать свой бизнес? Закажите разработку стратегии в нашей компании. Подробнее
primery-oformleniya-portfolio-na-sayte
|