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