Пожалуй, это будет один из важных лонгридов за период 2021 года, который пригодится как и веб-дизайнеру, так и заказчику.
Как известно, придерживаться правилам и трендам веб-дизайна очень важно, поскольку каждый человек предпочитает, чтобы его продукт/услуга был в топе и не важно продаете вы шаурму или нефтевышки, ведь так? И поэтому мы и рассмотрим здесь и сейчас, что именно актуально на период 2021 года.
Уверены, кое-кто из вас уже обратил внимание, что очень многие тенденции веб-дизайнеры используют от Apple… и вот опять это случилось, как раз вышедший, новенький интерфейс… and guess what? Да-да, самым главным и популярным трендом этого года именно применение 3D объектов. Подробнее об этих объектах будет ниже.
Их вы можете создавать в БЕСПЛАТНОМ инструменте Figma, он между прочем намного проще многих других сервисов, например, того же самого Photoshop`а. И вам совершенно не нужны какие-либо специальные навыки, чтобы создавать крутые 3D сценарии.
Но естественно существуют и другие крутые тренды, которые обновляются и идут в ногу со временем, ровно также как и в «мире моды» и таким образом создается формат дизайнерского решения, например из `90 и `00. А удивительнее и приятнее всего то, что это вызывает «вау эффект», не крутота ли это?
Итак, начнем:
[ ПРО ЦВЕТ ]
1. Белый цвет
Как бы это банально не звучало, белый цвет так или иначе вновь занимает одну из топовых позиций, но тут есть главный нюанс в сочетании и гармоничности - это поверхности (карточки, плитки, компоненты). Такие поверхности создают при помощи тени, что визуально придает объектам объемность, а также делает сами элементы и поверхности легко отличаемыми друг от друга.
2. Спокойная цветовая гамма
Работа большинства людей напрямую связана с компьютерами, от чего возникает так сказать «раздражительность глаз» и потому хочется после рабочих процессов «сёрфя» по просторам интернета, наблюдать более спокойные тона и оттенки в веб-дизайне и поэтому спецы это учитывают и подстраиваются под пользователя.
Есть вероятность того, что веб-дизайнеры будут в будущем больше ориентироваться не на резкость подачи информации через политуру и объекты, а на комфорт, relax и доступность.
Но это не точно.
3. Правило трех цветов
Опять таки обратимся к Apple, к их новому обновлению Big Sur, где представлены изображения в виде трехмерности цветов, что выглядит еще более органично, чем можно было бы себе представить.
Такой эффект, как будто реального и сочного объекта, который хочется достать прямо из экрана, можно добиться при помощи затемнений (и именно они придают плоским объектам округлость). А если к ним добавить сочной графики и градиентов уж точно получится что-то волшебное.
Такая тенденция предполагает в себе слияние нескольких цветов в том числе, которые могут пересекаться между собой или вливаться друг в друга, что придает максимальной реалистичности целостной картины.
[ АНИМАЦИЯ И ТРАНСФОРМАЦИИ]
1. Анимация и взаимодействия
В последнее время, анимация становится все популярнее и популярнее, без нее сайт уже «не тот», да и не только сайт.
Существует достаточно много способов создать анимацию, вот некоторые из них:
А) Анимацию можно создавать при помощи Step by Step на платформе Tilda, что достаточно удобно и функционально - можно, как говорится, «слепить» все что угодно.
Такую анимацию вы можете увидеть на нашем сайте – lionborn.ru
Б) Использование записи в формате объектов Javascript (JSON) - то есть это преобразование объектов (изображения и анимация) в код. Самым главным преимуществом выступает тот факт, что вес такой анимации в разы меньше, чем тот же самый GIF и поддерживает полную прозрачность.
В) Анимация-инструмент Lottie. Разработали такой инструмент команда Airbnb, но возможно вы заметили очередную закономерность с Apple? Да-да, именно они использовали эту функцию и после чего популярность такой анимации начала расти.
2. Параллакс скролинг и его трансформация
Такой эффект мы наблюдаем по сути каждый день, потому что параллакс - это такая оптическая иллюзия, которая создает впечатление «пейзажа» когда вы идете по улице(вокруг себя вы можете наблюдать приближение или отдаление объектов).
Этот потрясающий эффект позволяет оставаться намного дольше на сайте, наслаждаясь процессами происходящими на экране.
И также при помощи трансформации скроллинга можно привлечь внимание посетителя сайта за счет простых взаимодействий как клик, после которого он сможет наблюдать "реакцию" на экране.
Какие варианты крутого скролла можно создать?
Да, по сути, любые, это может быть полностью измененный цвет на следующем блоке, всевозможные анимации-переходы, которые максимально будут провоцировать посетителя на более продолжительное присутствие на сайте. И такие скроллы, могут ощущаться не просто как отдельная страница в целом, так и как будто отдельный сайт.
Напомним, что для каждого «владельца» сайта важно, чтобы время проведенное на нем было как можно дольше, это повышает эффективность ранжирования в поисковых сетях, что безусловно очень важно.
[ ВИЗУАЛ И ЭФФЕКТЫ ]
1. Эффект глубины в веб-дизайне
Эффект глубины (а именно, грамотное использование теней относительно объектов) в объединении с анимациями и движениями, позволяет сайтам быть ещё интереснее и заставляет посетителей останавливаться и «залипать», что безусловно отлично сказывается на ранжировании сайта, а также запоминании пользователями вашего уникального дизайна.
2. Кастомизированные 3D иконки
Как уже можно было заметить, 3D-эффект становится топовым и трендовым в 2021 году. Если вам хочется обновить и освежить ваш проект, сделайте объемные иконки и ваш готовый проект заиграет уже совсем другими, более современными красками.
3. Искажения, помехи, шум в веб-дизайне
Всё это создается путем пересечения размеров шрифтов, типографики в целом, размытости изображений или их искажение, странными цветовыми решениями и сочетаниями.
В целом, такой тренд дизайна довольно таки смелый и кричащий о том, что «Хватит лепить одно и тоже, давайте внедрять несочетаемость, нечеткость, размытость и вообще все то, что не может никак взаимодействовать между собой».
Но тут есть конечно и одно «НО» – такой формат дизайна, по действительности, нужно чувствовать и правильно изображать и передавать глазу зрителя, чтобы это не пугало, а наоборот интриговало пролистнуть ниже и насладиться этим хаосом.
И также хочется отметить, что не каждой нише может подойти этот формат дизайнерского решения.
4. Прецедентный дизайн
Из-за всей это ситуации в мире, многие бренды решили делать фокус именно на моральных ценностях и социальных проблемах - и это правда, прекрасно. Потому что передача всех тех важных ценностей через картинку обеспечит максимальный комфорт для пользователя и поспособствует идеальному взаимодействию для облегченного переживания непростых времен ( и даже вне карантинных условий).
5. Цифровая интерпретация реальных продуктов
Если вы не знаете как завоевать сердца ваших потенциальных клиентов, попробуйте передать через дизайн сайта прямой продукт, например, если вы продаете шаурму, вы можете изобразить на экране какие-то продукты, которые входят в состав, что даст прочувствовать конкретно ценность, качество, а возможно даже и вкус этого продукта.
Такой тренд позволяет цифровой формат разбавлять реальной жизнью и делать ваш сайт более привлекательным.
6. Абстрактные графические композиции
Такие композиции могут смело заменять какие-то стоковые картинки/фотографии/иллюстрации, несмотря на то, что это простые геометрические формы, которые объединены в некие интересные композиции, свободно гуляющие по экрану.
Как правило, в таком формате, не используются «лица», они заменяются на грамотно подобранные композиции, которые вызовут у посетителя такие же эмоции, а может быть и более яркие, за счет нетипичной передачи сути.
7. Квиз-опросы
Такие опросы позволяет потенциальным клиентам не читать ознакомительную информацию о товаре/услуге, а ознакомиться в процессе мини-викторины, благодаря которой и он будет понимать, зачем пришел и вы будете понимать, что ему нужно и что еще можно предложить, отталкиваясь от его ответов.
Причем квиз-опросы можно изображать в совершенно разных вариациях, от простого небольшого блока до полноэкранной викторины, но главное, что дизайн и сам формат вопросов был понятным, функциональным и подходил под запросы обеих сторон.
[ СТИЛИ ]
1. Опыт 90-х в веб-дизайне
Как уже заведено, feedback к 00 или 90 это уже нормальная тенденция, как и в веб-дизайне, так и в дизайне в целом. Как говорится, «Новое - это хорошо забытое старое», и да, это действительно именно так. Поэтому такая тенденция актуальна может быть и для молодого поколения, (для них это что-то совершенно новое, то что они не застали), а для тех, кто в теме - это уже приятная ностальгия, не правда ли?
2. Хендмейд стиль
Это тот стиль, который действительно становится все популярнее, за счет продуманной стилизации и пересечении двух направлений - это эффект ручной работы (будь то вафли, или цветы) и например, компьютерного стиля.
Такой стиль прекрасен в том случае, если дизайн полноценно получается скучным и холодным, его можно сделать интереснее за счет такого решения.
3. Бессмертный тренд - минимализм
Такой тренд существует испокон веков, так как никак не теряет своей актуальности. Оглянитесь вокруг, вы сможете найти его даже в интерьерах квартир, архитектуре на улице, рекламных баннерах и на сайтах соответственно.
Как вы уже могли заметить, некоторые тренды остаются трендами испокон веков, не теряя своей актуальности, а какие-то только начинают набирать обороты. Поэтому вдохновляйтесь и вносите в этот мир больше красоты.
