Тренды дизайна портфолио 2022

Улучшение портфолио — хороший способ для демонстрации своих навыков потенциальным клиентам и использования работ из него для участия в конкурсах.

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

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

Едва заметная анимация

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

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

Наличие свободного пространства и черно-белая цветовая палитра — это другие модные элементы, которые также придают портфолио современный вид. При прокрутке страницы можно увидеть и другие едва заметные анимации, которые красиво объединяют все составляющие дизайна воедино.

«Показывай, а не рассказывай»

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

В данном случае Рехчанд Саху (англ. Rekhchand Sahu) использует движущиеся иконки, чтобы помочь вам перейти к разделам сайта и отыскать нужную информацию. Четкая область заголовка/основного текста является частью минималистичного интерфейса сайта.  

Нажмите на иконки, чтобы продолжить работу, или прокрутите вниз, чтобы выбрать нужный раздел. Сайт выглядит современным и демонстрирует стиль, в котором работает дизайнер/разработчик.

Эксцентричный дизайн

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

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

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

Многослойные графические элементы

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

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

Софи Духопельникофф (англ. Sophie Doukhopelnikoff) в своем одностраничном портфолио использует полупрозрачные слои и текстовые элементы с эффектом наложения. Они создают глубину и пробуждают визуальный интерес. Наличие букв, которые расположены как позади, так и перед изображениями, выглядит потрясающе и вовлекает посетителя в изучение сайта. Шрифт без засечек придает общему дизайну еще более классический вид.

Тонкие цветовые эффекты

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

Простой заголовок “Hello There” (с англ. «Приветствую вас здесь») сначала разъезжается для того, чтобы заполнить экран другими текстовыми элементами, которые объясняют суть портфолио. Затем каждые несколько секунд цвет фона начинает плавно меняться, что создает эффект радуги. Это просто, лаконично и очень красиво.

Такому цветовому эффекту можно найти множество применений в других проектах. Он подчеркивает творческую сущность сайта портфолио.

Минималистичный визуал

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

Минималистичный дизайн смотрится элегантно и интригующе. Применение как темного, так и белого фона одинаково хорошо работает в совокупности с простой типографикой и графическими элементами.

Стиль Валентина Семеса (англ. Valentin Semes) максимально простой. Чтобы обозначить для пользователей путь перемещения по сайту и показать им элементы портфолио, он применяет аккуратные интерактивные элементы (обратите внимание на них при наведении курсора мыши).

Журнальный стиль

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

Различные виды работ или индивидуальные проекты дизайнера разделены на блоки таким образом, чтобы у каждого из них было свое собственное пространство.

Антуан Баррес (англ. Antoine Barres) использует такой формат, который позволяет ему наглядно показать большое количество своих творческих проектов. Классический стиль, который выражается в виде серых блоков и белой сетки, дает каждому дизайн-проекту еще больше возможностей для привлечения к себе внимания.

Биография на главной странице

Не существует правила, которое регулирует месторасположение биографии дизайнера на сайте. Одна из самых сильных тенденций в дизайне портфолио — размещение информации о себе или, по крайней мере, ее короткой версии, на главную страницу.

Это отличный способ с самого начала рассказать посетителям о том, чем вы занимаетесь. Таким образом, они узнают, о чем ваше портфолио и о вас, как о творческой личности в сфере дизайна. 

Это место, где можно заявить о себе или даже сделать акцент на определенных проектах. В портфолио Билла Чиена (англ. Bill Chien) биография в форме титров размещена на главной странице. Ее можно прочитать при прокрутке вниз. Это простая информация о том, чем он занимается, которая демонстрирует его творческий настрой.

Высокий уровень интерактивности

Интерактивные портфолио сейчас в моде.

Дизайн многих из них — визуально кричащий, наполнен движением, цветом и элементами, на которые можно кликнуть или которые кардинально меняются при наведении на них курсора. Возможности для применения эффектов и дизайнерских приемов практически безграничны.

Преимуществом интерактивного портфолио является возможность продемонстрировать владение сложными навыками в области UX.

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

Необычные паттерны в дизайне

Сейчас в тренде портфолио, которые тестируют новые шаблоны в дизайне: размещение традиционных элементов навигации в непривычных местах, затемнение текста и эксперименты с анимацией.

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

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

Эта тенденция заставляет задуматься о правилах проектирования и о вашем отношении к ним при работе над проектом.

Черно-белый дизайн

Черно-белый дизайн, как правило, с цветовым акцентом, находится на пике популярности.

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

В сочетании с этой черно-белой тенденцией, как правило, используется еще один фактор. Разделы портфолио не отображаются на главной странице; пользователи должны кликнуть на название, чтобы он открылся на новой странице.

Модная типографика

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

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

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

Впечатляющие эффекты

Поскольку веб-дизайнеры, фотографы и другие творческие люди используют портфолио, чтобы продемонстрировать свои способности, наблюдается явный сдвиг в сторону более эффектных дизайнов. (Некоторые из них слишком велики по размеру для экранов мобильных устройств. Убедитесь, что вы можете посмотреть приведенный выше пример на компьютере).

У таких проектов отличные JavaScript, анимация и эффекты, которые призваны удивить пользователей.

Сайт Виктора Коста (анг. Victor Costa) — яркий пример того, как создать портфолио с впечатляющими эффектами. Оно предлагает пользователям выбор: просмотр стандартного портфолио или с эффектами. Сайт наполнен интерактивными элементами, плавными переходами, действиями по скроллу и анимацией. Эти техники соответствуют тому, о чем он рассказывает в своей биографии. Они являются не только демонстрацией его прошлых работ, но и показывают, что еще он может предложить клиентам.

Много свободного пространства

Большое количество свободного пространства между элементами зачастую используется во всех направлениях веб-дизайна. Сейчас эта тенденция актуальна и для портфолио. 

Ее появление связано с тем, что на мобильных устройствах важно разделить элементы таким образом, чтобы вокруг них оставалось достаточно места для касания. Но свободное пространство отлично смотрится и в десктопных версиях. (Безусловно, я всегда был его поклонником).

Портфолио Лотты Ниеминен (англ. Lotta Nieminen) — прекрасный пример такого дизайна в действии. Очень крупный заголовок занимает более трети экрана, в то время как вертикальное и горизонтальное пространство между изображениями портфолио очень широкое. Увеличенный интервал между проектами дает им пространство, чтобы каждый был расположен отдельно от других. Это может быть особенно хорошим приемом для дизайна портфолио, в котором есть много абсолютно разных изображений.

Захватывающий пользовательский интерфейс

Минималистичный дизайн и стильные UI эффекты помогут в создании потрясающего портфолио. Сочетание чистого визуала и сложного взаимодействия понравится пользователям, и они захотят просматривать страницы и проекты портфолио.

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

Благодаря отличному пользовательскому интерфейсу скорее всего вы проведете много времени на этом сайте портфолио.

Сильная типографика

Сильная типографика и простой язык могут стать идеальным введением в ваш проект (и портфолио). Большинство людей, вероятно, знают Тобиаса ван Шнайдера (прим. Tobias van Schneider) как дизайнера или автора подкастов. Но могли ли вы ожидать, что увидите на его главной странице преимущественно текст?

Типографика и текст — одни из тех элементов, которые дизайнеры часто упускают из виду при планировании работы над проектом или разработке портфолио. Большинство из нас чаще думают о визуальных эффектах и анимации.

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

Портфолио, которое не похоже на портфолио

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

Портфолио Робина Мастромарино (англ. Robin Mastromarino) выглядит как сайт бара, модельера или профессионального спортсмена в зависимости от того, какую фотографию слайдера вы будете смотреть в первую очередь. Оно смотрится красиво и минималистично. Больше всего впечатляет, что каждый проект просто великолепен сам по себе.

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

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

Разделенный экран

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

Хавьер Куссо (англ. Xavier Cusso) использует дизайн с разделенным экраном в совокупности с великолепными эффектами параллаксной прокрутки для перехода от одного проекта к другому. Два цветных блока на экране подчеркивают, что веб-сайт — это работа дизайнера, а элемент посередине — это проект портфолио, который следует посмотреть. Это приводит к некоторому разделению дизайна портфолио и проекта.

Такой стиль позволяет эффективно работать с известными брендами (обратите внимание на изображение Adidas Climaheat) и при этом сохранить свою индивидуальность в дизайне портфолио. (Не забудьте посмотреть отдельные проекты этого примера; его общий дизайн впечатляет).

Дизайн в стиле минимализм

Преимуществом минималистичного портфолио является наличие большого количества свободного пространства. Оно помогает продемонстрировать сайт в лучшем виде. Дизайн портфолио становится относительно незаметным, так что все внимание сосредоточено на тех элементах, которые вы хотите, чтобы увидели посетители.

Дизайнер Шон Парк (англ. Shawn Park) недавно написал о том, как он ежегодно меняет дизайн своего портфолио для UX Collective. Его текущий проект (ссылка на него находится выше) показывает эволюцию тенденций в дизайне. Я настоятельно рекомендую вам прочитать эту статью.  

Шон Парк разместил все предыдущие версии своего портфолио, начиная с 2013 года. Вы можете проанализировать, как тенденции дизайна влияли на его сайт. Такой минималистичный стиль действительно способствует лучшему восприятию его работ, чем в предыдущих воплощениях.

Лица крупным планом на главной странице

Лицо крупным планом — это большая проблема, особенно для разработчиков и конструкторов взаимодействия.

Вся его суть этого тренда заключается в сильном изображении. Это должно быть больше, чем просто лицо крупным планом; оно должно задавать определенное настроение. В сочетании с красивой типографикой, пользователи сразу поймут, что перед ними сайт портфолио, и узнают, чем вы занимаетесь. Вся эта информация должна умещаться на первой странице, чтобы получить шанс удержать пользователей на вашем сайте как можно дольше. 

Несколько отличных эффектов также не будут лишними.

Модульная сетка

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

Кими Льюис (англ. Kimi Lewis) в своём портфолио применяет сетку немного по-другому. Вместо множества маленьких блоков, которые показывают проекты, она размещает большие. В крупной сетке чередуются изображения квадратной и горизонтальной прямоугольной формы.

Пользователи сразу получают представление о каждом ее проекте. Это портфолио является одним из самых простых для восприятия, которые я когда-либо встречал. Кими Льюис удалось добиться этого за счет огромных фотографий, которые расположены по сетке, и очень большому интервалу между элементами. Также здесь есть отличная анимация: при наведении на каждое изображение появляется имя клиента и тип проекта. Это позволяет предоставить пользователю дополнительную информацию, прежде чем он нажмет на ссылку.

Наложение цвета

‍Портфолио Хизер Шоу (англ. Heather Shaw) эффективно работает, потому что каждый проект уникален, но наложение цвета придает главной странице ощущение единства.

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

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

Портфолио Хизер Шоу (англ. Heather Shaw) эффективно работает (см. пример выше), потому что каждый проект уникален, но наложение цвета придает главной странице ощущение единства. Пользователь также знает, какой проект он будет смотреть, благодаря тому, что на фотографии превью указаны имя клиента и тип проекта. Это удобный и простой для понимания формат, который визуально привлекает внимание.

Концентрация на самих проектах

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

Это гарантирует, что пользователи увидят только то, на чем вы хотите сфокусировать их внимание,  и не будут отвлекаться от сути.

Стефани Бруклер (англ. Stefanie Bruckler) также использует формат модульной сетки, но с меньшим количеством элементов в более ограниченном пространстве. Кроме того, все превью проектов, которые выполнены в минималистичном стиле в виде визитных карточек, можно посмотреть при прокрутке вниз.

Портфолио выглядит изысканно и стильно. Такой дизайн задает особый тон работе Стефани.

Заключение

Все еще не готовы изменить дизайн своего портфолио? Помимо того, что это творческий проект, сайт-портфолио — это инвестиции в ваш бизнес, независимо от того, работаете ли вы в компании или фрилансером.

Потенциальные клиенты ищут вас даже если вы пока не знаете об их существовании. Современное модное портфолио, которое показывает ваши лучшие проекты, может произвести на них сильное первое впечатление.