Лучшие сайты-портфолио отлично справляются с одной задачей: они позволяют работе занимать всю площадь экрана, не отвлекая внимание от остального.
Люди, которые привлекают клиентов, получают комиссионные и заказы, редко имеют броский сайт. У них всегда понятный сайт.
Ниже представлены 17 портфолио, созданных работающими профессионалами. Pixpa сгруппированные по областям и взятые из более широкой галереи примеры онлайн-портфолио .
Воспринимайте это как вдохновение для создания сайта-портфолио с подробным объяснением, а не как стену из красивых скриншотов, а как тщательно отобранную подборку лучших работ, где каждая заслуживает своего места. Каждая работа имеет один дизайнерский ход, достойный заимствования. После примеров — краткая схема для создания собственного сайта.
Отличный веб-сайт портфолио Он размещает ваши лучшие работы в начале, сортирует их по понятным категориям и предлагает посетителям один очевидный следующий шаг: посмотреть больше, прочитать вашу историю или связаться с нами. Он быстро загружается и хорошо читается на телефоне.
Каждый из сайтов, представленных ниже, заслужил своё место по четырём критериям: насколько хорошо дизайн соответствует выполняемой работе, как организована работа, выполняет ли сайт свою коммерческую задачу и как он работает на мобильных устройствах. Не за красоту, а за реальную проблему, которую он решает.
Фотографы размещают на своих страницах наибольшее количество изображений и самый большой объем текста, поэтому именно для этой группы наиболее важна дисциплина в оформлении. Три представленных ниже примера взяты из более обширного набора. Сайты-портфолио для фотографов.
Фотография, отражающая стиль жизни и серфинг. Балеал, Португалия.
Даниэль Эспириту Санто Сайт снимает прибой и побережье вокруг Балеала, и его планировка позволяет избежать использования больших кадров с океаном. Работы разделены на галереи «Океан» и «Горы», с аэрофотосъемкой и подводными съемками, а принты продаются непосредственно на сайте. В оформлении используется шрифт с засечками (Vollkorn) для заголовков и Open Sans для всего остального, на светло-бежевом фоне, который привлекает внимание к воде.
Возьмите это: Разделить одну серию работ на две или три тематические галереи, например, «Океан» и «Горы», чтобы посетители могли самостоятельно выбирать работы, а не пролистывать длинную ленту.
Свадебная фотосъемка. Натал, Бразилия.
Диего Марсель Документирует свадебные церемонии в регионе Натал и управляет сайтом под этим брендом. Диего и Элизабет В португальской версии страница открывается не в виде сетки, а на весь экран в качестве главного элемента, представляющего собой крупный план рукописного письма под строкой «весь мир помещается внутри нас», с галереями, доступными одним щелчком мыши, под короткой навигацией. Спокойный шрифт с засечками (Source Serif Pro) отвечает за эмоциональный текст; узкий шрифт без засечек (Armata) — за навигацию.
Возьмите это: Открыть для эмоций, а не для сетки. Одно полноэкранное изображение и одна строка текста могут задать тон еще до загрузки первой галереи.
Фото- и видеосъемка природы и дикой жизни. Арденны, Бельгия.
Мартин Делликур Сайт работает в Арденнских лесах и функционирует как двуязычный центр (французский и английский языки), выполняющий сразу несколько функций: галереи, магазин художественных принтов, самостоятельный документальный проект и информационная рассылка. Используются современные и простые шрифты: DM Sans и Source Serif Pro, поэтому структура остается читабельной даже при таком количестве элементов.
Возьмите это: Если на вашем сайте должны быть представлены магазин, проект и список рассылки, используйте простой современный шрифт и четкие разделы, чтобы разнообразие воспринималось как широкий охват, а не как беспорядок.
Искусство должно выдержать путешествие на экран, где масштаб, текстура и истинный цвет сглаживаются. Эти двое решают эту задачу противоположными способами: один с индивидуальностью, другой сдержанностью, и занимают достойное место в более широкой галерее. сайты портфолио артистов .
Живопись и графика. Барселона, Испания.
Ева Алонсо Главная страница превращается в рисунок: навигация представляет собой наброски, выполненные от руки маркером, один из которых гласит «Работы, Картины, Рисунки и т. д.», другой — «Выставки», каждый со своей свободной иллюстрацией. При переходе по ссылкам работы сортируются по аккуратным галереям «Картины» и «Рисунки», а страница «Выставки» служит одновременно и рабочим резюме. Индивидуальность проявляется в меню; сами галереи остаются простыми.
Возьмите это: Пусть интерфейс ведет вас за руку. Если вы создаете работы с помощью рисунков, то навигацию и заголовки тоже можно нарисовать. Сайт становится образцом еще до того, как посетитель доберется до первой галереи.
Татуировки в стиле блэкворк. Нью-Йорк и Лос-Анджелес.
Христос Техада Бренд явно позиционирует себя как место работы мастера татуировок в стиле блэкворк, работающего между Нью-Йорком и Лос-Анджелесом. Сайт полностью оформлен в чёрном цвете, а навигация лаконична: «Татуировки», «Магазин», «О нас», «Контакты» и «Пристройка с сигилами» для оккультной стороны практики. Запись осуществляется через «Магазин», где продаются предоплаты и подарочные сертификаты. Логотип выполнен выгравированным, слегка эзотерическим шрифтом с засечками; меню оформлено чистым геометрическим шрифтом без засечек (Jura).
Возьмите это: Если вы принимаете заказы, переведите деньги в магазин, чтобы он продал вам залог. Это превратит запрос в сделку без лишних переговоров.
Дизайнеров оценивают на их собственном сайте еще до того, как кто-либо прочитает хотя бы слово, поэтому портфолио само по себе является образцом их работы. Эти двое относятся к нему именно так.
Графический и веб-дизайн. Берлин, Германия.
Берлинский дизайнер Бенедикт Шодер расстается элемент-пятьдесят.один Вторая работа посвящена веб-дизайну и аудиовизуальным проектам, а вторая – анимационному ролику. Главный шрифт – Rubik Mono One, моноширинный шрифт для заголовков, необычный и несколько механический выбор, свидетельствующий о том, что дизайнер не боится отходить от привычного использования шрифтов без засечек.
Возьмите это: Один отличительный шрифт может сыграть важную роль в позиционировании. Неброский, ненавязчивый шрифт говорит посетителям о том, что вы сделали осознанный выбор.
Дизайн мебели и продукции. Мельбурн, Австралия.
Дизайнер и производитель Алайна Бодли демонстрирует свои работы по изготовлению мебели и других изделий на выставке. lains.com.au , опираясь на опыт, который также охватывает дизайн интерьеров и сценографию. Под стилизованным фирменным знаком, основной текст и навигация выполнены шрифтом Karla, добротным гротескным шрифтом без засечек, который остается на заднем плане, позволяя объектам говорить за себя.
Возьмите это: Для работ, посвященных предметам и товарам, простой шрифт без засечек и большие межстрочные интервалы создают впечатление галереи, а не каталога.
Сайт модели или стилиста — это инструмент для кастинга. Креативный директор просматривает его за считанные секунды, поэтому скорость и четкость всегда важнее оформления, чем повторяющийся шаблон. сайты портфолио моделирования .
Моделирование для модной и коммерческой рекламы. Округ Ориндж, Калифорния.
Вангечи Оджуок Начинается все с пяти кадров, расположенных на одной полосе, состоящей из редакционных и коммерческих материалов, над ее именем и надписью «Модель из округа Ориндж, Калифорния», а чуть ниже — короткая полоса с упоминанием Amazon, Dell, Essence и Cosmopolitan, так что в верхней части листовки можно оценить диапазон известности и авторитетность бренда. Для заголовков использован шрифт Chivo, а для основного текста — Poppins, оба шрифта лаконичны и современны.
Возьмите это: Разместите свои самые сильные стороны там, где их видят в первую очередь. Для талантливых людей краткая биография в начале текста гораздо эффективнее, чем длинная биография ниже.
Стилистические и подиумные прически. Торонто, Канада.
Мэнди Джейкобс В книге представлены работы для редакций, показов мод и причесок знаменитостей в лаконичных галереях, это своего рода книга, представленная агентством, которую креативный директор быстро просматривает.
Действие всей площадки разворачивается в Интере, что позволяет сосредоточиться на самих фотосессиях.
Возьмите это: Для работы, основанной на съемках, группируйте материалы по производственным процессам и оставляйте интерфейс невидимым. Решение о кастинге принимается быстро на основе изображений.
Моделирование в сфере моды и рекламы. Международный уровень.
Оран Кьюсак Начинается все с названных рекламных кампаний: Colmar, Stone Island, Kador Eyewear. Каждая обложка занимает всю страницу, и при нажатии открывается полное фотоотчет, а на странице «Мои агентства» информация о представительстве говорит сама за себя. Дизайн выполнен в стиле Montserrat, чистый и современный, поэтому кампании выглядят как вырезка из газеты, которую можно быстро просмотреть.
Возьмите это: Ведите работу с каталогом талантов, используя узнаваемые рекламные кампании, а не разрозненные изображения. Специалист по подбору актеров читает информацию о компании Colmar, Stone Island быстрее, чем сетку красивых фотографий.
В архитектурных проектах важны масштаб и последовательность, а не просто красивая фотография. Эти два проекта, а не фотографии, демонстрируют тот же подход, который прослеживается во многих других. веб-сайты-портфолио по архитектуре .
Архитектура. Парагвай.
Асиметрико систематизирует обширный корпус построенных объектов по секторам: городское планирование, общественная инфраструктура, общественные пространства, культура и здравоохранение.
Он набран сжатым, структурным шрифтом (Oswald с Source Sans Pro) на темном фоне, где ритм шрифта перекликается с ритмом фасада.
Возьмите это: Сжатый шрифт и строгая сеточная архитектура. Интерфейс может отражать дисциплину работы.
Фотография интерьеров и архитектуры. Европа.
В неподвижном состоянии фотографирует минималистичные интерьеры и архитектуру, а весь сайт строится вокруг одного высокого, контрастного логотипа с засечками. вставленный На теплом серо-бежевом фоне размещен единственный спокойный интерьерный снимок. Сдержанность – вот суть: один большой шрифт, одно изображение, а затем лаконичный указатель проекта. (Под ним расположен более мелкий текст, набранный шрифтами Montserrat и Work Sans.)
Возьмите это: Пусть сайт отражает суть работы. Один огромный логотип и много пустого пространства обрамляют минималистичные интерьеры более честно, чем перегруженная сетка.
У музыкального сайта, прежде всего, две задачи: проигрывать произведение и принимать заказы на выступления. Дизайн сайта объединяет аудио, даты и контактную информацию на одной понятной странице.
Электронная музыка, диджей и продюсер. Амстердам, Нидерланды.
ТИДИ Встроенная музыка сочетается со списком выступлений и контактными данными для бронирования — тремя вещами, которые действительно нужны промоутеру, — на фоне полноэкранного портрета и надписи «TIDEE — исполнитель в стиле Minimal / Deep Tech House из Амстердама, Нидерланды». Логотип представляет собой широкий, отступающий гротескный шрифт (Archivo) поверх Open Sans, что придает электронному исполнителю чистый, современный вид.
Возьмите это: Для исполнителя музыка, даты и адрес электронной почты для бронирования должны быть превыше всего. В этом и заключается вся задача страницы.
Евангелие и гимновая музыка. Карлстад, Миннесота.
Братья Вагле Четыре брата, исполняющие традиционные гимны, ведут действующий музыкальный сайт: наверху расположена заметная кнопка «Забронировать», раздел «Музыка» и страница с отзывами для церквей и заведений, которые их приглашают. Сайт оформлен одним гуманистическим шрифтом без засечек (Open Sans) под текстовым логотипом с засечками, что делает его легко читаемым, несмотря на большой объем контента.
Возьмите это: Социальные доказательства способствуют продажам билетов. Страница с отзывами с предыдущих площадок приносит гастролирующей группе больше пользы, чем любое количество стилизации.
Писатель или стратег оценивается по качеству слов и по тому, насколько ясно изложена его точка зрения. Сайт должен аргументировать свою точку зрения, а не просто демонстрировать информацию.
Контент- и маркетинговая стратегия. Индия.
Хамса Балегаар Начинается все с теплого личного вступления: «Меня зовут Хамсалекха, я специалист по маркетингу и коммуникациям», на нежно-розовом фоне, затем следует полоса с перечислением специализаций (стратегия бренда, социальные сети, контент, маркетинг, основанный на анализе данных), после чего следуют примеры проектов для таких брендов, как Reckitt, Axis Bank и Aditya Birla, каждый из которых построен вокруг брифа и результата. Шрифтовое оформление сочетает в себе элегантный шрифт Forum, выполненный римскими буквами, и шрифт Inter для чтения, что придает портфолио стратега редакторский вид.
Возьмите это: При разработке стратегии или написании текстов начинайте с указания конкретных клиентов и проблемы, которую вы решили. Логотип и краткое описание результата лучше, чем список навыков.
Киносайт должен воспроизводить контент. Макет организует ролики по типам, не мешая при этом самому видео.
Режиссура и анимация. Портленд, штат Орегон.
Режиссер, лауреат премии «Эмми» Роб Шоу В портфолио, включающем игровые кадры, компьютерную графику, 2D-анимацию и покадровую съемку, представлены работы в различных категориях, в том числе для рекламных кампаний Gatorade и Hershey's. Используются геометрические и современные шрифты (Outfit with Inter), что не позволяет этому игривому, анимационному проекту выглядеть по-детски.
Возьмите это: Классифицируйте разнообразный видеоролик. Позвольте заказчику рекламных роликов сразу перейти к тому типу работы, для которой он нанимает сотрудников.
Производство фильмов и видеороликов. Уилмингтон, Северная Каролина.
Фильм «Крейн Хаус» Компания управляет полноценным производственным подразделением, охватывающим кинопроизводство, видеосъемку, съемку с дронов, фотографию и даже графический дизайн, а затем сортирует главную страницу по четким категориям: Фотография, Музыкальные клипы и Свадебные видео, при этом полный каталог находится за меню «Портфолио». В качестве основного шрифта используется Cinzel, классический гравированный шрифт с засечками, создающий кинематографическое ощущение, как у заставки, наложенный на шрифты Oxygen и Barlow для основного текста.
Возьмите это: Один-единственный выразительный циферблат может задать тон. Cinzel воспринимается как кинопленка еще до начала воспроизведения первого кадра.
Если посмотреть на все 17 ходов, то можно заметить, что повторяются одни и те же четыре варианта.
Они разделили работы на тематические галереи. Даниэль Эспириту Санто руководит Ocean and Mountain, Ева Алонсо разделяет живопись и графику, а Crane House Film разбивает свою главную страницу на разделы «Фотография», «Музыкальные клипы» и «Свадебные видео». Никто не заставляет вас прокручивать одну и ту же однообразную ленту.
Они оформили сайт сдержанным шрифтом. Мэнди Джейкобс использует для оформления всего сайта шрифты Inter и Oran Cusack на Монтсеррате — единый нейтральный шрифт без засечек, позволяющий работе доминировать на странице. Там, где шрифты проявляют свою индивидуальность, как, например, в рукописном меню Евы Алонсо, монохромном шрифте Element Fifty или высоком шрифте с засечками In-Still, это намеренный выбор позиционирования, а не украшение.
Они продают или бронируют товары на одном и том же сайте. Мартин Делликур продает гравюры, Христос Техада принимает предоплату за бронирование, а братья Вагле продают компакт-диски, и все это без необходимости отправлять покупателя куда-либо еще.
Они делают следующий шаг очевидным. Будь то рекламный комикс Вангечи Оджуок вверху, обложки предвыборных кампаний Орана Кусака или контактная информация TIDEE на первой полосе, посетитель всегда может с первого взгляда понять, что делать дальше.
Это те самые сбои, которые незаметно приводят к потере работы, а не очевидные причины.
Все 17 объектов проложили разные пути к одному и тому же месту. По сути, создание веб-сайта-портфолио В итоге всё сводится к пяти ходам:
Объединяющим принципом всех 17 пунктов является сдержанность. Работа ведет, макет поддерживает, а следующий шаг всегда находится всего в одном движении прокрутки. Начните с области, наиболее близкой к вашей, позаимствуйте подходящий прием и запустите продукт на этой неделе, а не доводите его до совершенства в следующем месяце.
Создайте свой сайт-портфолио.
Начните с реальных, работающих сайтов, а не с шаблонных галерей. 17 примеров выше охватывают фотографию, дизайн, искусство, музыку и кино и входят в число лучших сайтов-портфолио, созданных на основе готовых шаблонов. PixpaКаждый из них снабжен пометкой об одном конкретном ходе, который стоит позаимствовать.
Целенаправленная галерея ваших лучших работ, краткая информация о вас или ваша биография, понятный способ связаться с нами, а также, если вы продаете работы, магазин или информация о ценах. 10-15 сильных работ лучше, чем 50 средних.
В большинстве сильных портфолио представлено от 8 до 15 работ. Этого достаточно, чтобы продемонстрировать разнообразие, но при этом достаточно мало, чтобы каждая работа заслужила свое место.
Единообразное межстрочное расстояние, один или два шрифта, изображения, которые не обрезаны и не растянуты, быстрая загрузка и макет, который не отвлекает от работы. Профессионализм воспринимается как сдержанность.
Нет. Все сайты в этом списке были созданы на Pixpa Без написания кода. Вы выбираете шаблон, добавляете свою работу и публикуете.
Стоимость платных тарифов начинается от 5.40 долларов США в месяц за базовый план с ежегодной оплатой, и каждый план включает 15-дневный бесплатный пробный период, для которого не требуется указывать данные кредитной карты.
Добавляйте новые работы всякий раз, когда заканчиваете что-то более качественное, чем ваша текущая самая слабая работа, и пересматривайте весь сайт каждые три-шесть месяцев.
Да. Большинство посетителей заходят на сайт с телефонов, поэтому протестируйте галерею, навигацию и контактную информацию на мобильных устройствах, прежде чем делиться ссылкой.
Это зависит от того, чем вы занимаетесь. Сайты здесь были созданы на основе... Pixpa , что подходит для портфолио, ориентированных на изображения, которым также необходимы клиентские галереи или магазин. Для простого просмотра по разделам. примеры портфолио Начните с этого и двигайтесь в обратном направлении к инструментам.