11 главных трендов веб-дизайна в 2020 году — свежие тенденции


Содержание материала:

Декор 2020: три тренда

Какой декор будет в тренде весной и летом 2020 года? Сервис по прогнозированию тенденций WGSN назвал три актуальных направления.

Природа объединяет усилия с наукой и техникой, а декоративные аксессуары соединяют в себе несовершенные текстуры и изящные формы. Цвета и поверхности в духе трендов 2020 вдохновлены землей и минералами — от углеродного следа до естественных контуров. Коррозия, химические реакции и «разъеденная» отделка преобразуют декоративные аксессуары, создавая неожиданные узоры и фактуру. Декорирование по всей поверхности выглядит плотным и более рассеянным. Поверхности могут оставаться частично необработанными, натуральными и незаконченными.

Яркая, энергичная тенденция посвящена цвету и форме. Модный дизайн использует удивительные формы, материалы и текстуры, связанные с глобальным и городским влиянием. Броские и контрастные тона сочетаются с простыми геометрическими конструкциями. Тренд года предлагает исследовать три темы в дизайне. Красочные комбинации (Colourful Combinations): яркие контрастные тона, асимметрия, тотемные конструкции, окрашенный металл, цветное стекло и пластик с 3D-печатью.

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

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

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

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

В 2020 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2020.

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

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

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

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

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

В 2020 году имеет смысл немного оживить традиционный плоский дизайн: добавление теней поможет сделать элементы более объемными, сохранив основные концепции минимализма, которые сделали плоский дизайн популярным. Пространство и объем — элементы новой концепции глубины.

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

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

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

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

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

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

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

Брутализм — грубая концепция, рассчитанная на захват внимания. Брутализм применяется в дизайне с 50-х годов прошлого века, в основном для оформления плакатов и афиш (направление возникло в архитектуре 40-х и стало трендом). Концепция снова востребована, ее можно встретить во всех сферах дизайна. Направление призвано шокировать аудиторию прямолинейным подходом, громоздкой типографикой и неизящными дизайнерскими техниками.

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

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

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

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

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

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?

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

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

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

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

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

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

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

17. Изометрический дизайн и фотография

Изометрическое проектирование является способом художественного представления объемных объектов в плоскости. До того, как дизайнеры обнаружили этот прием, он использовался большей частью для составления технических и инженерных чертежей. Изометрический дизайн совершает масштабное восхождение в фотографии, иллюстрировании, 3D графике и иконографике. Можно с уверенностью сказать, что в 2020 году он будет востребован во многих креативных проектах.

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

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

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.

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

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

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

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

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

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

22. Адаптивные лого

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

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

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

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

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

24. Яркие и забавные лого

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

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

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

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

26. Геометрические фигуры и узоры

Оформление логотипа едва заметным кастомным узором делает громкое заявление о бренде. Мелкие геометрические элементы добавляют логотипу разносторонности и оригинальности, поэтому мы определенно увидим этот прием в 2020 году.

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

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

Проекты: Milo Themes , Romain Billaud

28. Градиенты

Градиенты — один из главных трендов, унаследованных от 2020-2020 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

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

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

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

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

31. Микровзаимодействия

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

Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2020 году.

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

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

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

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

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

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

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

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

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

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

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

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

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

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

Сценарий утратил свою привлекательность, когда стало понятно, насколько далеко фильм отошел от реальности, которая оказалась намного менее футуристичной. Однако благодаря Глубокому Анализу и Big Data мы наблюдаем возвращение робототехнических трендов: футуристические орнаменты найдут применение и в 2020.

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

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

Проект: Icon Design / Автор: Eaton

41. Иконки, частично заполненные цветом

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

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

Скроллинг с Parallax настолько вездесущ, что невозможно не принимать его во внимание. Когда скроллинг может управлять скоростью анимации, единственный лимит дизайнера — воображение.

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

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2020 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.

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

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

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

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes

Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты


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

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

Геометрические шрифты были востребованы последние несколько лет и остаются важным трендом и в 2020 году.

Топ-пост этого месяца:  Pagekit. Новая и быстрая CMS

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

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

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

Хаотичность в типографике была одним из главных трендов 2020 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

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

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

Эклектичные тренды всегда эффектны, и этот не исключение. Добавляйте типографику в фотоснимки или 3D отрисовки и получайте авангардный дизайн.

52. Креативная типографика

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

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani

Дизайн упаковки

53. Плоский дизайн

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

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

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

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

Геометрические формы будут присутствовать во всех сферах дизайна. Выбирайте орнаменты, которые отражают суть продукта.

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

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

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

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

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

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

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

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

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

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

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

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

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

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

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

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

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

Последние годы был заметен рост числа проектов с 3D дизайном. Наблюдая работы некоторых 3D художников из топа, например MVSM или Питера Тарка, можно предсказать, что в 2020 году популярность 3D натюмортов возрастет. Для корпоративных коллабораций тренд окажется на одном уровне важности с разработкой лого и размещением продукции.

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

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

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

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

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

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

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

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

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

5 главных трендов в дизайне интерьера на 2020 год, которые захочется воплотить в своей квартире

Получайте на почту один раз в сутки одну самую читаемую статью. Присоединяйтесь к нам в Facebook и ВКонтакте.

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

1. Абстракция в интерьере

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

Абстрактных принтов в интерьерах в 2020 году ожидается много: в приоритете – ломаная геометрия и размытые образы. Такие узоры не имеют четких границ, стиля или очертаний, зрителю предлагается самому дорисовать в воображении их смысл и завершение. Абстракцию важно «подружить» с интерьером. Начните с акцентной подушки или картины на стене, для искушенных декораторов дизайнеры предлагают обои с абстрактным принтом. «Впустить» живопись в интерьер поможет тональное созвучие. Для этого достаточно небольшого вкрапления в интерьер схожих оттенков и повторяющихся мотивов.

2. «Потепление» интерьера

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

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

3. Фактурный текстиль

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

Если у вас раньше не было ковра – самое время о нем задуматься. Обратите внимание на градиентные узоры, сложные текстуры, замысловатые принты, а также теплые обволакивающие оттенки.

4. Немного благородного блеска

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

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

5. Japandi

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

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

Понравилась статья? Тогда поддержи нас, жми:

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

Мы уже обсудили, какие тренды веб дизайна уходят в прошлое в статье « Тренды веб-дизайна — топ-8 устаревших элементов », где говорилось в основном об элементах пользовательского интерфейса, а не о дизайне сайта в целом. Куда более интересно порассуждать о том, чем современные веб дизайнеры готовы завоевывать внимание пользователей. То есть что в текущем 2020 и будущем 2020 годах станется и будет популярным. Давайте изучать тренды веб дизайна и вдохновляться вместе.

1. Минимализм

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

2. Типографика — как центральный элемент дизайна

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

Или еще один интересный пример на dribble, в котором очень хорошо сочетается типографика и праллакс эффект. Kanye West & Adidas Promo Website .

3. Легкая прокрутка страницы

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

Так же легкой прокрутки можно добиться с помощью анимации, когда каждый последующий элемент, который должен увидеть пользователь будет появляться после предыдущего. Все в необходимом порядке, как в проекте Landing — Lakes wealth Loch by Outcrowd .

4. Смещенная сетка макета.

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

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

5. Анимация

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

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

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

6. Полуплоский дизайн.

В тренд входит разбавление привычного для нас плоского дизайна ( flat design ) тенями, что создает дополнительный объем, но не нарушает концепции минимализма. Лично я очень рада этому. Nike Promotion Ads — Parallax Effect .

7. Дуплексные цвета.

Трендом 2020 и 2020 год в веб дизайне стало использование двух цветов в дизайне всего сайта, что делает его невероятно стильным. Fashion by Giga Tamarashvili.

8. Яркие цвета и их сочетания

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

9. Иллюстрации

Они повсюду и просто атакуют интернет пространство. Этот тренд в веб дизайне пришел вместе в flat дизайном и завоевывает свое пространство все больше и больше. И теперь это не просто иконки, а персонажи, фоны и полное оформление страниц сайта. Online taxi page template by Fidann Memmedli

10. Фотография и иллюстрация.

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

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

Тренды веб-дизайна 2020: девяностые возвращаются!

Ох, 90-е… Эта эпоха дала нам столько всего. Гранж был на подъеме, восточное побережье воевало с западным в хип-хопе. Все ходили в джинсах с высокой талией и рубашках, а на ногах (в идеале) были Converse. Кроме того, это десятилетие дало нам сериал «Друзья», «Симпсонов» и «Южный парк». И все, что придет вам в голову – поп-культура, политика, мода – было каким-то грубым, неотесанным. Этот вид ознаменовал эпоху.

Перенесемся в современность: этот образ 90-х годов возвращается на новый уровень. И это не остановить.

Грубая эпоха 90-х рулит дизайном. Яркая анимация, большие шрифты и асимметрия.

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

Хотя каждый веб-сайт сам по себе уникален, есть некоторые элементы, которые совпадают. Ниже мы расскажем об этих элементах – они помогут вам достигнуть стиля 90-х.

Перебор в типографике

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

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

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

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

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

Контрасты в размерах шрифта

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

Ребята из craftedbygc.com проделали большую работу по объединению идеально заданных размеров шрифта с изображениями, которые они выбрали для использования на странице.

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

Асимметричный макет

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

Отличный пример – сайт Burnish Creative.

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

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

Топ-пост этого месяца:  Dividendcare — обзор форекс-брокера. Отзывы

Минимализм

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

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

Контурная типографика

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

Сайт benandmartin.com – отличный пример использования типографики.

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

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

Смелая анимация

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

Как этот парень:

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

Крайности брутализма

Один из способов придать вашим сайтам внешний вид 90-х годов – использование брутализма. Паскаль Девиль (brutalistwebsites.com) дал одно из лучших объяснений того, что такое брутализм:

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

Брутализм – полная противоположность строгим дизайнам, к которым мы все привыкли. Множество ярких цветов, микровзаимодействий, неуместных изображений, анимации… Это некоторые из основных характеристик как эстетики 90-х, так и бруталистического дизайна.

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

Сделайте красным

Мы уже говорили о том, что дизайны, вдохновленные 90-ми годами, в основном лишены цвета – они используют его как изюминку. Но если вы захотите использовать эту изюминку, какого цвета она будет? Какой цвет лучше всего сочетается с простой, но впечатляющей эстетикой 90-х? Конечно же красный!

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

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

Заключение

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

2020 Web Design Trends: 10 Stunning Web Design Trends to Totally Hit

For a limited time, SONDORA MARKETING is offering a FREE SEO Audit to companies interested in assessing their current & potential organic visibility in order to build a robust content marketing & lead generation plan for 2020. Let’s get started?

If the last couple of months were setting a grade, then 2020 is all set to be a breathtaking experience in web design. Couple that with the advancement in display technology for devices most people use to consume web content and web designers will not go wrong to splash a dash of vibrant colors and creative mixes not tried before.

Table of Contents

10 Stunning Trends of Web Design to Totally Hit in 2020-2021

Some trends, such as gradients, are making a comeback although this time as dynamic gradients. That means if flat design decides to take a nap, it could die a sure death starting in 2020 (which is where hard-to-spot ghost buttons are headed). And dynamic gradients could take over the entire darn space – at least for a while.

But then again, with pioneers such as Google and Apple backing flat design, this year might see an injection of depth and color into the minimalist concept. Over the past couple of months, it has been evident flat design can accommodate splashes of deeper and more energetic colors when afforded the attention and experimental dash it deserves.

In any case, the vast majority of designers and developers are focusing their attention on two distinct areas of web design trends for 2020 and beyond:

Top Ecommerce Design Trends

With ecommerce having already taken over as the new norm for tens of millions of consumers, it’s all about giving the online shopper exactly what they want in terms of user experience/interface (UX/UI) and visual appeal. For the most part, the top ecommerce design trends for the immediate future at least focus on usability, speed, and simplicity. The quicker and easier it is to get their hands on whatever it is they want, the better.

Responsive Design Trends

Likewise, we’ve already entered an era where mobile web traffic has comfortably overtaken more traditional desktop traffic in many key regions. Globally, mobile traffic is responsible for approximately 52% of all web traffic. By the end of 2020, 63% of all mobile phone users will access the Internet primarily via their device. Hence, there’s never been a more important time to focus on the leading responsive design trends, approached entirely from the perspective of the end-user.

Taking a look at things at a more general level, there are several key web design trends that are already proving popular among developers worldwide. Some are continuations of existing trends, and others bring bold new features and functionalities into the mix.


But which can you expect to see the most of over the next couple of years?

Want to see the Websites we designed?

Bold Colors + Simplicity

As more brands seek to stand out among a sea of competitors online, more website owners will continue to adopt bold and bright colors.

Think of supersaturation.

Not only are brilliant and deep colors immersive, but they are also attention-grabbers, which are something many online brands can use.

Not only that. Going against the grain, where most web designs have defaulted towards safe shades and shadows, demonstrates a brand’s forward-thinking, daring, and even eccentric personality. And, depending on that particular brand’s target market, that can be a great thing that induces loyalty and association.

It helps that more device screens are adopting In-Plane Switching (IPS) technology, which will make bold colors stand out beautifully for the world to enjoy.

Here’s an excellent example by Egwineco.com; see how they use bold colors to exemplify each can.

Looks crispy to me! Simple, effective, and the kind of stunning website design that makes you want to reach into the screen and grab the product. The inclusion of a simple serving suggestion adds further weight to the message.

That’s bold, no doubt.

And again, the very essence of simplicity in design. Simplicity, in general, is one of the top e-commerce design trends of recent years.

The use of bold colors also reflects the growing sophistication of consumer technology in general. These days, most everyday consumers carry ultra-powerful smartphones that are capable of displaying incredible eye-catching imagery. Bold and beautiful imagery has become the norm today’s consumer expects.

Animations, Integrated GIFs, and Dynamic Illustrations

The video almost went big in 2020. But slow page load times are making it a tough-sell this far, seeing that slow web pages will make you lose readers (potential customers).

Yet motion graphics are pretty popular with readers across the board. So what is taking video’s place?

Animation. Animation. Animation.

There are a couple of ways the animation bug could bite:

  • A transition between pages and parallax scrolling (both of which have roots in 2020)
  • With mouseover effects
  • As mobile animation

These motion graphics tend to take up less time to load compared to outright motion pictures such as good-quality video (despite having a range of possible use cases).

Not only do these motion graphics add spunk and persona to your overall brand, when well executed, but also the integrated animations, GIFs, and custom illustrations can help illustrate what you stand for and tell your story—in a cool, clear and confident manner too.

Shopify illustrates how Polaris is meant to be a guiding light. Works better than photography here!

Of particular note for 2020 is mobile animation.

Mobile-first has been a web design trend for a while now, and mobile’s colossal uptake (over the desktop, no doubt) will continue to drive accelerated enthusiasm for the mobile animation to new heights from 2020.

Illustration, on the other hand, can make it easy for product brands to demonstrate to potential users how to use the product—or help the reader to preview a site’s pages.

Even e-commerce sites could use custom illustrations to help online shoppers navigate through product pages and see how a product works beforehand, how to configure filters and shopping carts and guide them to the checkout page.

Still, “serious” brands can utilize custom animation and illustration to inject fun and pizzazz into a buyers journey or sales funnel. Or to simply keep the reader’s attention while the page loads (such as dadadata.com does).

With advancements in web-based, AI and big data technologies, animation and 3D effects can swoop in to offer less stringent and bland data visualization. Then maybe more people would care to look up the numbers twice.

One of the only provisos with animations being the careful consideration of mobile site visitors. Depending on the size and nature of the device used, it may be difficult or even impossible to provide the same experience for mobile audiences.

Nevertheless, there are many ways to use animation to connect and cement stronger relationships with customers.

Asymmetric Layouts

Most websites are grid-based, obsessively orderly bland fields were playing it safe is the order of the day. Not that well-arranged homepages are a sin, but in 2020, asymmetrical structures are receiving adoptions in a bold bid towards flourishing individuality, brutalism, and unbalanced fun and enthusiasm.

Personal websites, in particular, are increasingly taking this idea to titan levels. Broken-grid structures are especially appealing due to their perceived uniqueness and dogged assertiveness.

But there’s a need to tread carefully here.

Brands with significantly large amounts of live content might find deploying asymmetric design onsets a chaotic web experience for their readers. So, such a brand would do well to reconsider the idea and switch on to a more fitting yet personable design – if they are to keep users happy.

We might as well use dadadata.com again. They use a combination of asymmetric structure and dynamic background, which flows into action as you move your mouse’s pointer to browse:

How audacious is that (or how quickly things can get out of order, in a nice way)?

Of course, there is such a thing as taking even the most prevalent web design trends too far. The key to stunning website design when working with asymmetry lying (ironically) in balance. To create a sense of balance in an asymmetric design, it’s important to ensure that no part of the page is significantly ‘heavier’ than the rest. Using larger images is fine, under the condition that they are perfectly balanced with text, space, and other elements.

Irrespective of how complex or otherwise the design may be, the eye of the viewer always hits the larger on-page elements first, before traveling to its smaller accompanying elements.

Loud and Proud Typography

Typography as visual is not entirely a new web design trend in 2020, now is it?

But while previous to 2020 typeface design made use of traditional san serif fonts to say it loud, the emerging crop of typefaces are set to be bolder, dogged and entirely hard to miss.

Sometimes words speak louder than the thousand words a photo might yell out. For those times, deploying big, bold and custom fonts to usher in more elaborate typefaces makes a ton of sense. With more tools and devices available to support custom fonts, 2020 is a big year to make bold statements that set you apart from the crowd.

Variable fonts are coming on strong as well. A variable font is fundamentally a single, dynamic font that changes to appear like multiple fonts.

Here is an excellent example by Typekit Blog.

OpenFormat is officially supporting the new trend. In fact, type designers can easily interpolate individual glyphs alongside up to 64,000 axes of variation—from width to weight and so on. So adventurous typeface designers will have a wide variety of options to play around with and flourish.

And, of course, typography counts for something for any online business that appreciates (wants, actually) to tap and leverage the power of search engine optimization by using targeted, yet well-designed keywords.

Nevertheless, there’s much to be said for simplicity and basic readability. Taking things to extremes with illegible fonts in a vain attempt to be creative can be off-putting and counterproductive. Then there’s the importance of balancing loud and proud typography with mobile responsiveness. The issue is that typography that does the business on a large desktop screen might not be quite as suitable for a tiny smartphone. Don’t shortchange your mobile visitors for the benefit of your desktop traffic.

CSS Grids

Here is a web design trend born to solve the evergreen responsive design question.

In recent times, online brands have had to decide between creating a mobile-only or desktop-only site. And designers have had to configure those sites to detect what device a visitor is using, so the latter can be re-directed to a version of one website that suits their device size.

And while it has been official since 2020 that more people now browse the web through their mobile devices than on desktops, a smart CSS grid offers a brilliant option to flex one site into multiple versions to fit a user’s screen size (instead of opting for mobile-only web design). From the perspective of the end-user, this is by far one of the most important responsive design trends of recent years.

As touched upon previously, mobile web traffic volumes have already overtaken traditional desktop traffic in the majority of key markets worldwide. The fact that Google itself continues to demonstrate a strong commitment to mobile-friendly websites really says all that needs to be said.

The latest advance in responsive web design, CSS grids ensure every visitor is presented with the same high-quality experience irrespective of the size, type, and nature of the device used to access the website. The layout system allows the web owner to organize content into rows and columns that respond to the user’s screen size. What better way to demonstrate this than bring up a visual?

If you are wondering how to capitalize on this most important of 2020 Responsive Design Trends, Robin Rendle breaks the process down in this actionable post.

Scalable Vector Graphics to Boost Mobile Prioritization

People love multimedia, and sites that host engaging multimedia content score higher than text-only webpages when it comes to engaging and retaining visitors.

But in the past, websites with rich content have had to suffer slower page-load times thanks to traditional file formats such as GIF, PNG, GIF, and other video formats. These formats have been notoriously anti-mobile.

Now Google recently made everyone aware they’ll soon be using mobile-first indexing results to rank websites. This statement doesn’t come as big news seeing the number of people using mobile devices quelled desktop traffic since two years ago.

What this means for website owners is it is time to make the early bird switch to responsive, mobile-first designs that put mobile prioritization at the heart of the design process – without sacrificing rich visual content that enchants visitors.

And that’s where SVG comes in.

These are vector images that scale with the size of a screen while upholding the quality of the original graphics. SVGs are not pixels, which is a significant contributor to their scalability aspect. Another critically important responsive design trend for today and for years to come, SVGs ensure the consistent quality of the user experience for all mobile visitors.

Rather than some getting the full website experience and others being shortchanged, SVGs are all about consistent mobile performance – essential in a mobile-first web society.

Hand Drawings

As more webmasters realize a website represents more than an online address, hand-drawn elements that add a unique sense of character to website pages will pop up more often.

This web design trend took off on the back of two other growing web design trends in recent times – bold typography and custom illustrations. But given the sophistication and technological advancement of most web design trends for 2020, what’s the appeal of hand drawings? Why not stick with the high-resolution imagery and photography more typically associated with stunning website design?

The short answer – hand drawings are both charming and human.

You can utilize hand drawings to enlighten, engage, and enchant while oozing personality and standing out from the crowd – a massive differentiator among the billions of quality websites choking for attention around the web.

Following the usual web design trends with 4k imagery and inspiring photography is always an option. Nevertheless, it’s important to consider one key fact:

21st-century web design is often too perfect.

Everything is far too immaculate and flawless to have been produced by anything but a machine. By contrast, throw a hand drawing into the mix, and you immediately add the human element to your pages. Particularly if the drawing is a little on the rough side – something most non-artists will relate to much better.

Anyone can shoot a bunch of beautiful photographs and then arrange them on a website. Nevertheless, it says something about your character (and that if your business) if you draw something by hand and display it with pride. Hire help to produce your pictures if you wish, but nothing says more about an online business than a hand-drawn picture or two from the team behind the scenes.

Voice-capable Interfaces

Attention spans are fleeting. And smart webmasters know they need to team up with progressive web designers to capture and lead an increasingly distracted readership.

With millions of devices hosting smart virtual assistants like Siri, Google Now and Cortana, more people are embracing voice over text. Primarily due to the convenience of speaking directly into a device, rather than taking the time to enter your queries or requests manually. Web developers can take advantage and treat busy audiences to less effort browsing by levering the more engaging voice-powered model.

Device screens are also becoming smaller and more crowded, and voice-powered models take up little (if any) space and personalize content delivery in a way text might not.

Things may have gotten off to a slow start, but the popularity of voice control/input is finally hitting its stride. The following statistics illustrate how and why voice is one of the most important web design trends for 2020 and beyond:

  • Voice is expected to be a $40 billion channel by 2022. (Source: OC&C Strategy Consultants).
  • Globally, smart speaker shipments grew nearly 200% YOY in Q3 2020. (Source: Strategy Analytics).
  • 55% of households are expected to own smart speaker devices by 2022. (Source: OC&C Strategy Consultants).
  • 65% of 25-49-year-olds speak to their voice-enabled devices at least once per day. (Source: PwC).
  • 61% of 25-64-year-olds say they’ll use their voice devices more in the future. (Source: PwC).
Топ-пост этого месяца:  Пользователи Google Диск смогут создавать резервные копии локальных файлов

The introduction of voice-capable interfaces by mainstream businesses remains relatively slow. Nonetheless, evidence suggests it’s only a matter of time before voice takes over as the primary or exclusive input/control option for the masses.

Artificial Intelligence and Advanced Machine Learning Infusion

The social media giant, Facebook, welcomed 2020 by releasing their predictions for social media trends to take off in the year ahead. Three among those were (Social) Augmented Reality, Artificial Intelligence, and Machine Learning.

For UX designers looking beyond 2020, you’ll be enlightened to know the UI of tomorrow is headed towards doing away with the traditional homepage.

A bubbling trend is to swap it for more targeted and personalized landing pages geared along with use cases and context.

Advanced machine learning will help webmasters, web developers, and UX/UI designers to capture readers’ details based on their browser history and location, for example.

In turn, this information will help website owners, developers and designers to come up with relevant web pages that land individuals based on the kind of information, product or service they’d be looking for on say, an e-commerce website.

Artificial intelligence is no newcomer to the web design and development landscape. Any automated system whatsoever that provides a personalized experience based on the user’s preferences and perceived behaviors qualify as AI. Likewise, Adobe Sensei and TheGrid are offering a stack of tools to help designers move with speed to conquer this growing trend.

It’s just that further down the line, the average web user will begin to expect (and demand) far more multi-dimensional personalization of their online experiences. Online experiences where the websites they visit and interact with know what they want before they even realize it themselves.

Brutalism in Web Design

Before material and flat design popped into the scene, stringent grid layouts with sharp edges ruled over the web design block.

We have seen in the past year big brands embrace organic designs with their soft, curved lines, shapes and patterns – true works of art meant to add a dash of authentic fun and help uncover the brand behind the design by humanizing them to the target audience.

Google’s rounded-edge designs flash to mind as a good example.

Towards the end of 2020, a new tide blew in that sought to redefine the traditional web design layout. The incoming results highlight a branch from good old static-print-design-like websites with organized, conformist layouts. The aim is to inspire originality and blatant individuality to foster a sense of belonging among target audiences.

From a mix of horizontal and vertical text to color clashing, you’ll recognize it when you see it because a website sporting the new look will have distinct asymmetrical visuals that are in open defiance to conservative website layouts.

In short, the site is brutally original (example 1 and example 2).

What’s more, Brutalism has always been associated with a certain sense of functionality and purpose, over and above unnecessary aesthetic extras. A theme reflected in one of the most popular web design trends for 2020 among everyday users – simplicity and accessibility. Brutalism has the potential to be eye-catching and engaging, but can also be used to create seamlessly functional websites that are all business.

Need more information about our Web Development?

Conclusion

As web consumption devices and technology advances, more web designers are coming up with unique and creative works that will continue to dominate the top web design trends in 2020 and beyond.

Some of our top picks are already growing concepts such as web animation while others such as CSS grids will become some of the hottest web design developments over the next couple of months. However, what the long-term future holds for popular web design trends will continue to be determined by one thing and one thing alone:

“The preferences of the end-user.”

Theoretically, it’s possible that the tastes, preferences, and expectations of the typical web user could shift radically at any time. In doing so, laying to waste any number of web design trends previously considered superb. If consumers suddenly begin responding negatively to asymmetric layouts, for example, they’re out of the picture.

Then comes the inevitability of technology mapping-out the future web design as we know it. Right now, it’s all about mobile. Rapid advances in the sophistication of mobile technology have transformed the way the world accesses and interacts with websites. Voice-capable interfaces are also making their mark. A few years down the line, virtual reality could usher in an entirely new era of web design and development.

Still, it’s unlikely we’ll be seeing sweeping VR-influenced changes in web design trends over the next couple of years at least. For the time being, it’s a case of the ten trends detailed above, forming the cornerstones of truly stunning website design for today’s web user.

Author: Dennis Dubner, CEO of SONDORA

Новые тенденции в мире дизайна интерьера в 2020 году.

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

Дизайнеры немецкого бюро Stilbüro bora.herke.palmisano, которые являются ведущими экспертами и партнерами ежегодной интерьерной выставки Ambiente в области дизайна, архитектуры, искусства и моды, выявили три основных направления 2020 года:

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

— Материалы с упором на индустриализацию. Полированное или состаренное темное дерево, сталь, бронза в матовом исполнении, тяжелые ткани как твид, велюр и букле, терраццо и кожа. Цветовая гамма не менее серьезная – оттенки кирпича, бетона и глубокого сумеречного.

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

Архитектура, стиль, конструкции.

Что касается архитектуры пространства: open space сдает свои позиции, но пока не уступает место несущим перегородкам. Что делать? Смотрим в сторону легкого зонирования – стеклянные перегородки, колоны и фальш-стены.

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

Любителям экостиля на радость – по-прежнему ценятся такие материалы как дерево, камень и ротанг. Приветствуются натуральные и органические материалы, особенно это касается декора – глиняные вазы, тарелки, каменные подставки, плетеные корзины, льняные подушки и скатерти. Стоит отметить, что в тренде коллаборация естественного и технического. Природа объединяет усилия с наукой и техникой, а декоративные аксессуары соединяют в себе несовершенные текстуры и изящество. Цвета и поверхности в духе трендов 2020 вдохновлены землей и минералами — от углеродного следа до естественных контуров. Коррозия, химические реакции и «разъеденная» отделка. Все это ждем в следующем году.

Rusability

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

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

SMM тренды на 2020 год

Локальные страницы

Отдельные аккаунты для вовлечения местной аудитории. Создавайте локальные аккаунты для продвижения мероприятий и новостей офиса.

Анализ активности

Кастомизированный контент для мотивации подписчиков. Анализируйте усилия и создавайте контент, ориентируясь на поведение пользователей.

Исчезающий контент

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

Знакомство с продуктом в соцсетях

К 2020 году 50% поисковых запросов будет приходиться на изображения и голос. Публикуйте оптимизированные фото продуктов и указывайте цены.

Видео продолжит расти

56% пользователей смотрят видео в социальных сетях. Создавайте еще больше роликов для эффективного SMM продвижения.

Освоение VR и AR

В 2020 мы увидим еще больше сценариев применения VR и AR в маркетинге. Используйте специальные инструменты, например, Facebook 360, чтобы создавать нестандартный контент.

Маркетинг влияния

22% пользователей в возрасте от 18 до 34 лет покупают продукт, вдохновившись постом инфлюенсера. Сотрудничайте с надежными лидерами мнений, чтобы эффективнее продвигать продукты и услуги. Полный гид по работе с инфлюенсерами ждет вас здесь.

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

Каким должен быть дизайн сайта в 2020

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

С таким количеством текущих задач digital-продвижение может отойти на второй план. Однако это станет серьезной ошибкой.

Британские ученые (нет) из Harvard Business Review недавно провели исследование насчет того, что именно заставляет людей совершать покупки на определенном сайте. Оказалось, что если покупатели чувствуют себя в безопасности, комфортно и непринужденно, находясь на сайте, то у вас становится гораздо больше шансов не просто «продать» им, но и сделать их постоянными клиентами.

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

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

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

Вот пять главных трендов веб-дизайна и UX, которые работают на ваш бизнес.

1. Видео на лендинге

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

Мало вставить старые видосы с YouTube. Вместо этого шагните на новый уровень, создав видео-лендинг.

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

Согласно исследованию Vidyard и Demand Metric «State of Video Marketing 2020», в котором приняли участие 159 специалистов и предпринимателей в сферах B2B и B2C, 69% трафика веб-сайта приходится на видео, а 70% участников сообщили, что видео конвертирует лучше, чем другие формы контента.

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

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

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

Например, проект Make Your Money Matter использовал эффект с красочно проиллюстрированной временной шкалой, проходящей как по горизонтали, так и по вертикали. Она отлично захватывает внимание!

3. Анимированные призывы к действию

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

Однако просто поставить кнопку уже недостаточно. Люди видят кучу стимулов и call-to-action постоянно, поэтому чтобы выделить ваш CTA, нужно что-то другое.

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

Нужны примеры? Хорошо. Скажем, Airbnb использует приложение Lottie для создания графических анимаций поверх своих CTA на всех сайтах и в приложениях.

4. Индивидуальная типографика

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

Пример нестардартной типографики в дизайне сайта. Актуально в 2020

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

5. Искусственный интеллект

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

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

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

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

Пример использования чат-бота

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

  • Сделайте так, чтобы пользователи чувствовали себя комфортно
  • Нужно презентовать компанию нужным образом
  • Акцентируйте внимание на важные призывы к действию
  • Дайте пользователям информацию, необходимую для осознанного выбора.

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

3 основных тренда в веб-дизайне: Ноябрь 2020

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

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

Вот что в тренде в этом месяце.

1. Скрытый текст

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

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

Каждый из приведенных ниже примеров использует эту тенденцию несколько по-разному.

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

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

Paco The Judo Popcorn от Ride & Crash имеет текстовый слой, который находится за полупрозрачной анимированной иллюстрацией. Его не слишком трудно читать, но это заставляет вас остановиться и действительно подумать о словах на экране. Использование пространства помогает привлечь внимание и сделать текст немного легче для понимания.

2. Анимированные круги

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

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

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

2nd Street использует большие круги по правому краю в качестве вторичного уровня навигации. Средние круги имеют ссылку и анимацию при наведении, чтобы помочь сигнализировать об этом действии. Нижний круг — это украшение с движением, которое помогает привлечь внимание и побуждает пользователей перемещать мышь в этом направлении, активируя другие круглые кнопки.

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

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

3. Большие левые поля

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

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

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

Ervaxx использует простую анимацию в сочетании с крупным жирным текстом. Большой размер шрифта компенсирует вес анимированного объекта справа.

Lifted Logic переносит текстовый элемент через белое пространство в видео. Использование пространства действительно тянет взгляд через текст в изображение и обратно.

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

Заключение

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

А вы склонны к тому, чтобы быть более визуальным или функциональным дизайнером?

Всем успешной работы и творчества!

Добавить комментарий