Тренды дизайна портфолио 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) выглядит как сайт бара, модельера или профессионального спортсмена в зависимости от того, какую фотографию слайдера вы будете смотреть в первую очередь. Оно смотрится красиво и минималистично. Больше всего впечатляет, что каждый проект просто великолепен сам по себе.

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

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

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

Шаблоны с разделенным экраном уже давно в тренде.