Образец портфолио: 13 вдохновляющих примеров
Создать качественный сайт портфолио — задача не из лёгких. По сути, вам нужно упаковать дело всей жизни в короткий рассказ — продемонстрировать ваш уникальный стиль, подчеркнуть опыт и детально остановиться на проектах, которыми особенно гордитесь. И все это — за несколько минут, пока внимание посетителя приковано к сайту.
В этой статье мы собрали сайты портфолио, которые справились с вызовом, и совместили яркую, самобытную форму с лаконичным и информативным содержанием. Посмотрите, как 13 талантливых профессионалов рассказывают о себе, используя только качественный веб дизайн и возможности Wix.
Графический дизайнер и эксперт по визуальной коммуникации Кристина Ванесса знает толк в выразительной эстетике. Первая страница сайта-портфолио представляет собой зацикленное полноэкранное видео, которое рассказывает о креативных проектах Кристины и о ней самой. В текстовой части — только самое необходимое: имя и должность дизайнера, а также кнопка «Исследовать».
После яркого интро посетителя ждет не менее впечатляющая главная страница со множеством визуальных эффектов. Цветовая схема здесь — важная часть сторителлинга: мягкие кремовые, бежевые и серые оттенки создают атмосферу безмятежности и гармонично дополняют плавную анимацию и представленные на сайте работы.
Софи Бриттэн специализируется на брендинге и UI/UX-дизайне — и сайт-портфолио дизайнера выгодно демонстрирует её навыки в обеих сферах. Главная страница выполнена в четко определенном визуальном стиле: трехцветная палитра, геометрические фигуры и большое количество «воздуха». При этом обманчиво-строгий дизайн сайта разбавляют игровые элементы, намекающие на артистичную натуру Софи: смайлик вместо буквы «О» в логотипе, анимированные векторные иконки и забавные микро-копирайты вместо значков соцсетей. Главное украшение сайта — элегантный слайдер с примерами работ, который также использует геометрические фигуры в качестве фона.
Дизайн-студия Стива Вулфа использовала для демонстрации своих продуктов изображения в очень высоком разрешении — получилось настолько реалистично, что невольно хочется протянуть руку к экрану и схватить одну из пачек кофе. Аккуратный блочный дизайн и широкоформатные картинки выполняют главную функцию сайта-портфолио: моментально приковывают взгляд посетителя к представленным работам. При наведении на любую из работ экран затемняется и отображает название проекта. Применение такого специального эффекта позволяет сэкономить место для текста и сделать сайт-портфолио более лаконичным. Кстати, вы тоже можете создать портфолио с этим эффектом: просто используйте нужный шаблон и отредактируйте текст и изображения. Другие портфолио шаблоны и специальные эффекты можно найти здесь.
4. Wendy Ju
Этот пример портфолио встречает посетителя плавной, нежной анимацией, которая задает тон всей визуальной составляющей сайта. Она напоминает раскрывающуюся книгу или веер, на фоне которой всплывает слово «Привет» на двух языках: английском и китайском. Вся композиция получилась одновременно одновременно заметной и изысканной, и отлично вписывается в минималистичный веб дизайн сайта.
Еще одна интересная деталь — анимированный курсор, который Венди подключила к сайту с помощью Velo от Wix. Курсор не только делает навигацию по сайту более интерактивной и помогает удержать внимание посетителя, но и добавляет яркий акцент в нейтральную цветовую палитру.
В отличие от предыдущего примера, сайт для портфолио фотографа и дизайнера Дэнниса Кравеца лишён всякой нежности и утонченности. И именно поэтому от него невозможно отвести взгляд. Дэннис соединил эстетику восьмидесятых, поп-культурные элементы и безумные гифки из начала двухтысячных, и создал самый запоминающийся сайт портфолио, который мы когда-либо встречали. Веб дизайн Кравеца напоминает мудборд на пробковой доске: изображения, текст и гифки перекрывают друг друга, заставляя посетителя прокручивать страницу вниз-вверх снова и снова. При этом сайт только кажется хаотичным — на первый взгляд нелепые и провокационные элементы выстраиваются в единую историю, которая позволяет узнать больше о самом дизайнере и его работах.
Простота, элегантность, свежесть — вот что отличает пример сайта портфолио дизайн-студии Bagaz’. Интуитивная и функциональная навигация сочетается с богатой, сочной цветовой палитрой — в итоге на странице хочется задержаться подольше и подробнее изучить каждый проект.
Меню на сайте располагается сбоку. Это удобно для посетителей: им не нужно возвращаться к первому экрану, чтобы попасть в нужный раздел. При нажатии меню раскрывается и занимает половину экрана — это добавляет сайту динамики и позволяет познакомиться с проектами студии, не покидая страницы.
7. David Milan
Дизайнер, арт-директор и каллиграф Дэвид Милан сделал портфолио центральной — и чуть ли не единственной — частью своего сайта. Монохромное главное меню занимает минимум места и включает в себя только самые важные элементы: контакты и общую информацию.
Всё остальное место занимает красочная полноэкранная демонстрация проектов — она выполнена в виде инстаграм-ленты и при прокрутке вниз кажется почти бесконечной. Дэвид добился этого эффекта с помощью Wix Pro Gallery — удобная структура такой галереи позволяет дизайнеру добавлять в ленту новые работы без необходимости менять расположение элементов на сайте.
8. Ryan Haskins
Портфолио дизайнера и креативного директора Райана Хэскинса полно сюрпризов — взять хотя бы живописную типографику на главной странице. Обычно сочетание трёх и более шрифтов является большим дизайнерским табу — однако сайт Райана настолько абсурден, что это только играет ему на руку.
Такой авантюрный, бунтарский подход к созданию сайта не может не привлечь внимание — особенно в сочетании с забавными копирайтами, где Райан называет свои работы «всемирно известными» и «очень дорогими». Сайт вызывает интерес и симпатию, и заставляет перейти к работам дизайнера; они, кстати, такие же смелые, провокационные и выходящие за рамки обыденного. При всей кажущейся несерьезности, портфолио выполняет свою функцию и представляет Райана как первоклассного специалиста: на странице можно найти впечатляющий список клиентов и перечень публикаций, восхваляющих его работы.
Главная страница дизайн-агентства By Experience наполнена динамикой — начиная от насыщенного кобальтово-синего фона и заканчивая стремительным анимированным текстом в верхней части сайта. Даже используемая в копирайтах интонация уверенная и прямолинейная, убеждающая потенциальных клиентов связаться с агентством и заказать одну из услуг. В отличие от других портфолио в подборке, By Experience делает большой упор на отзывы. Это удачный шаг: таким образом агентство не только демонстрирует свои проекты, но и рассказывает о прошлых победах устами довольных клиентов.
Связаться с компанией максимально просто: при нажатии на иконку в верхней части плавающего меню посетитель попадает на форму обратной связи.
Образец портфолио фотографа Тай Фам выполнен в необычном стиле. Несмотря на огромную коллекцию работ, Тай выбрал для главной страницы всего одну: мерцающий, таинственный портрет, который только подогревает любопытство посетителя. Широкие белые поля служат своеобразной рамой и делают еще больший акцент на фотографии.
Ниже на странице вы обнаружите обширное собрание свадебных и глянцевых фотографий, созданных в уникальном стиле фотографа. Интересно, что для отображения работ Тай выбрал неровный блочный дизайн, который резко контрастирует с минималистичной эстетикой страницы.
11. Ana Leovy
Звучит парадоксально, но сайты портфолио иллюстратора не обязательно должно содержать иллюстрации. Портфолио Аны Леови — яркий тому пример. На главной странице художницы вообще нет рисунков — только однородный фон, логотип и короткий вступительный текст, который одновременно выполняет функцию главного меню.
Благодаря вниманию к деталям и правильному выбору цвета и шрифтов, Ана создала цельный и привлекательный сайт без использования изображений. Для онлайн-магазина и выставки работ художница выбрала нейтральный белый фон, который служит отличным холстом для ее красочных картин
12. Reut Chen
Образец портфолио текстильного дизайнера Реут Хен использует классическую блочную структуру. Сочетание идеальных, немного отстраненных квадратных блоков и живых хаотичных паттернов в самих работах создает эффект тщательно продуманной выставки; такое портфолио хочется листать снова и снова.
Особого внимание заслуживает новый проект Реут — она вынесла его за пределы сетки и поместила в верхнюю часть экрана. Таким образом дизайнер разделила завершенные работы и те проекты, над которыми она трудится сейчас.
13. Lena Steinkühler
Главная страница дизайнера и аниматора Лены Штайнкюлер производит неизгладимое первое впечатление — ведь именно туда Лена поместила свои лучшие работы. Красочные, сюрреалистичные 3D-изображения сменяют друг друга в формате слайд-шоу, приглашая поближе познакомиться с проектами художницы.
Остальные изображения представлены в виде полноэкранной сетки и разделены широкими белыми полями. Использование неровной блочной структуры позволяет управлять вниманием посетителя и делать акцент на конкретных изображениях, просто увеличивая их размер по сравнению с другими.
Сергей Букринский
контент-менеджер Wix
