Мысль может показаться странной, но именно сайты-портфолио в большей степени являются отражением текущего развития сферы веб-дизайна. Все просто. Если заказчик еще не готов к тому, чтобы на его сайте была анимация, смена графики или состоялся переход к иному стилю в целом, то как раз личные сайты (и не только дизайнеров) в большинстве своем располагают этими моментами.. И причина в том тоже простая – произвести впечатление. Большое впечатление. Именно поэтому портфель работ даёт представление о навыках веб-дизайнера – так что, дизайн – мудрая вещь!

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

Места всем хватит

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

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

Обратим взор на romainmurschel, eumray, webinword, measured. Сверхбольшие заголовки занимают около трети экрана, в то время как вертикальное и горизонтальное пространства между изображениями очень широкие или высокие. Каждый элемент при этом находится на своем месте и от изменения масштаба страницы их расположение не меняется. В том плане, что не происходит хаотического разброса. Все элементы связаны друг с другом, их удобно видеть и осознавать. Это-то и является особенно хорошим трендом для дизайна любого сайта, где предусматривается использование большого количества изображений.

Буквы с аршин

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

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

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

В связи с чем и стоит обратить внимание на clay, victor, herbesdeprovence, breadhead, qualiacreative, где большая типографика встречается или на всех страницах, или только на домашней. При этом от её огромного размера не возникает чувства ошеломленности – текст понятен, ясен и органично смотрится в сочетании с иными элементами.

Полноэкранная анимированная навигация

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

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

На примере camiloalvarezhome, adrienlaurent, claudianoronha, kpowers, awink, mattpamer можно увидеть, что несмотря на наличие меню-«гамбургера», эти проекты могут быть понятными и удобными в использовании и без данного меню. Достаточно пролистать страницы и информация, разделы будут сменяться друг за другом. Если же все таки кликнуть по иконке меню, то в списке обнаружатся все те же разделы.

Меньше – лучше

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

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

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

Аналогично минимализм подошел и проектам: .marijnbankers, sirmary, theinlay, epo, designbyroka.

Цветовые всплески

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

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

Портфолио heathershaw великолепно не только от того, что каждый проект отличается от другого, но и цветовая тонировка позволяет произвести систематизацию и направления деятельности. Кроме того, тонировка отлично использовалась и на ringer, serafino, scalzodesign, cyber-duck. И совершенно не имеет значения, тонируется все изображение или поверх него накладывается фигура с текстом и цветом. Суть остается все той же – предоставить пользователям краткую информацию об элементе.

Сетки, таблицы

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

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

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

Использование сетки – естественное и простое решение, не требующее ни долгих раздумий, ни сложной отрисовки. При этом оно и более функционально, оно проще воспринимается пользователями. Наглядные тому примеры: istogether, independentproperties, scalzodesign, blkout, bscmp.

  Завершение

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

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

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

Как вам материал?