Блог Lionborn Studios
Дизайн

ТРЕНДЫ ВЕБ-ДИЗАЙНА 2021

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


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

Уверены, кое-кто из вас уже обратил внимание, что очень многие тенденции веб-дизайнеры используют от Apple… и вот опять это случилось, как раз вышедший, новенький интерфейс… and guess what? Да-да, самым главным и популярным трендом этого года именно применение 3D объектов. Подробнее об этих объектах будет ниже.

Их вы можете создавать в БЕСПЛАТНОМ инструменте Figma, он между прочем намного проще многих других сервисов, например, того же самого Photoshop`а. И вам совершенно не нужны какие-либо специальные навыки, чтобы создавать крутые 3D сценарии.

3D веб-дизайн
Проект: Google Cloud – Healthcare Insights Website / Авторы: Martin Ehrlich, Jam3, Steffen Christiansen, Charlotte Lucas, M L
3D веб-дизайн
Проект: Solo: SaaS Landing Page Kit / Автор: Tran Mau Tri Tam

3D веб-дизайн
Проект: Blueberry Original Website / Автор: Petr Hostas

Но естественно существуют и другие крутые тренды, которые обновляются и идут в ногу со временем, ровно также как и в «мире моды» и таким образом создается формат дизайнерского решения, например из `90 и `00. А удивительнее и приятнее всего то, что это вызывает «вау эффект», не крутота ли это?

Итак, начнем:

[ ПРО ЦВЕТ ]


1. Белый цвет


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

Тренды веб-дизайна
Проект: Concept UI&UX and animation for store / Автор: DMITRY R

Тренды веб-дизайна
Проект: Anna C. Bride dresses website / Автор: Sasha Polykovskaya, Denis Miliutin
Тренды веб-дизайна
Проект: Dyson - Interaction Design / Автор: Benjamin Brunton

2. Спокойная цветовая гамма


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

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

Тренды веб-дизайна
Проект: Faura / Автор: Ozan Karakoc

Тренды веб-дизайна
Проект: Sanctuary: Yoga Studio Brand Identity / Автор: Anna Morozova

Тренды веб-дизайна
Проект: Studio Kos / Автор: Dominika Kuszel

3. Правило трех цветов


Опять таки обратимся к Apple, к их новому обновлению Big Sur, где представлены изображения в виде трехмерности цветов, что выглядит еще более органично, чем можно было бы себе представить.

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

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

Тренды веб-дизайна
Проект: Landing page 3d illustration / Автор: Harish gowtham

Тренды веб-дизайна
Проект: Mobile app icons / Автор: Lizaveta Kostoreva, Сodabrasoft LLC Design

[ АНИМАЦИЯ И ТРАНСФОРМАЦИИ]


1. Анимация и взаимодействия


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

А) Анимацию можно создавать при помощи Step by Step на платформе Tilda, что достаточно удобно и функционально - можно, как говорится, «слепить» все что угодно.

Такую анимацию вы можете увидеть на нашем сайте – lionborn.ru

Б) Использование записи в формате объектов Javascript (JSON) - то есть это преобразование объектов (изображения и анимация) в код. Самым главным преимуществом выступает тот факт, что вес такой анимации в разы меньше, чем тот же самый GIF и поддерживает полную прозрачность.

Тренды веб-дизайна

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

Тренды веб-дизайна
Проект: Animated Website Icons (Lotties) / Автор: Victoria Bezazi

2. Параллакс скролинг и его трансформация


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

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

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

Тренды веб-дизайна
Проект: Peter Lindbergh | In memory

Тренды веб-дизайна
Проект: Social Tonic

Тренды веб-дизайна
Проект: Digital Agency

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

[ ВИЗУАЛ И ЭФФЕКТЫ ]


1. Эффект глубины в веб-дизайне


Эффект глубины (а именно, грамотное использование теней относительно объектов) в объединении с анимациями и движениями, позволяет сайтам быть ещё интереснее и заставляет посетителей останавливаться и «залипать», что безусловно отлично сказывается на ранжировании сайта, а также запоминании пользователями вашего уникального дизайна.

Тренды веб-дизайна
Проект: Inspiration design/ Автор: Дмитрий Пеленев

Тренды веб-дизайна
Проект: web-design "fattorino"/ Автор: Vlad Vasiliev

Тренды веб-дизайна
Проект: EXPLORE / Автор: Martin Rangelow

2. Кастомизированные 3D иконки


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

Тренды веб-дизайна
Проект: iOS 14 Big Sur 3D icon pack / Автор: Vivian niu, Vikiiing ł

Тренды веб-дизайна
Проект: Social media Icon collection / Автор: Roman Haswell, Anton Merzlyakov

Тренды веб-дизайна
Проект: 3D Icons Pack - Fitness / Автор: Kirill Emelyanov, UI8 Design

3. Искажения, помехи, шум в веб-дизайне


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

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

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

Тренды веб-дизайна
Проект: WASTE | Experimental posters / Автор: Juan Bautista Espíndola

Тренды веб-дизайна
Проект: HAVOK- DISTORTION PACK / Автор: TRAN LA

4. Прецедентный дизайн


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

Тренды веб-дизайна
Проект: Concept of the site nature protection "Save the nature" / Автор: Angelina Savenko

Тренды веб-дизайна
Проект: save the planet / Автор: Zhuldyz Tazhigaliyeva

Тренды веб-дизайна
Проект: PAPER BAG DESIGN / Автор: Divvya B Narayan

5. Цифровая интерпретация реальных продуктов


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

Такой тренд позволяет цифровой формат разбавлять реальной жизнью и делать ваш сайт более привлекательным.

Тренды веб-дизайна
Проект: LUSH - UIUX WEB DESIGN / Автор: ej lee

Тренды веб-дизайна
Проект: Ellle Effect / Автор: Smack Bang

Тренды веб-дизайна
Проект: CBN Web design / Автор: Szatmári Zsolt , Onefox

6. Абстрактные графические композиции


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

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

Тренды веб-дизайна
Проект: Website concept in geometric style / Автор: Sofiia Astanina

Тренды веб-дизайна
Проект: DSM. – Geometric Pattern / Автор: Tran Mau Tri Tam

Тренды веб-дизайна
Проект: Geometric website design / Автор: Евгений Блажевич

7. Квиз-опросы


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

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

Тренды веб-дизайна
Проект: WEB-студия / Автор: Lionborn Studios

Тренды веб-дизайна
Проект: Studyk / Quiz landing / Автор: Dmitryi Vlasov

Тренды веб-дизайна
Проект: Fasting Quiz / Автор: Florian Pollet

[ СТИЛИ ]


1. Опыт 90-х в веб-дизайне


Как уже заведено, feedback к 00 или 90 это уже нормальная тенденция, как и в веб-дизайне, так и в дизайне в целом. Как говорится, «Новое - это хорошо забытое старое», и да, это действительно именно так. Поэтому такая тенденция актуальна может быть и для молодого поколения, (для них это что-то совершенно новое, то что они не застали), а для тех, кто в теме - это уже приятная ностальгия, не правда ли?

Тренды веб-дизайна

Тренды веб-дизайна
Проект: Pictures Animation Studio / Автор: аватар пользователя Fat Head Studio, Akram William, Mohamed Abobakr, Sara El Kady, Bassant Ahmed

Тренды веб-дизайна
Проект: Kodak ChromaticFILM Design / Автор: Jake Pressure

2. Хендмейд стиль


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

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

Тренды веб-дизайна
Проект: web / Автор: Мария Болотова

Тренды веб-дизайна
Проект: Passione Vino

Тренды веб-дизайна
Проект: Secret 2020 Zine / Автор: Max Mollison

3. Бессмертный тренд - минимализм


Такой тренд существует испокон веков, так как никак не теряет своей актуальности. Оглянитесь вокруг, вы сможете найти его даже в интерьерах квартир, архитектуре на улице, рекламных баннерах и на сайтах соответственно.

Тренды веб-дизайна
Проект: Minimalist design for architectural firm from Russia / Автор: Levan Jamelashvili

Тренды веб-дизайна
Проект: Antiquarian - online store of ceramics products / Автор: Anastasiya Malysheva

Тренды веб-дизайна
Проект: MV jewellery | website redesign / Автор: Julia Sarapina

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