Самый полный обзор трендов веб-дизайна (UI/UX) на 2020 год
Вы читаете перевод статьи “UI/UX Design Trends for 2020”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова.
Итак. Что же тут у нас сегодня. Поехали. Кстати, если вам интересно расширить свой арсенал навыков, поглядите новый обзор курсов по UI-дизайну и анимации.
Тренд 1: Продвинутое ценностное предложение
Технологии продолжают качаться, что конечно же дает дизайнерам свободу творить и насыщать инженерные решения не только эмоциями и ощущениями, но и глубоким смыслом.
Каждый продукт начинает рассказывать свою уникальную историю для аудитории (с особенными предпочтениями).
Фалтер Инферно, Wild. Изображение сегодняшнего живого ада, взывающего вас взглянуть в зеркало.
Вспомните, гештальт-теория подразумевает, что целое больше, чем сумма его частей. И даже когда мы решаем бизнес-задачу с помощью дизайна, мы уже способствуем чему-то большему, чем благополучию компании.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Мы все также можем влиять на людей при помощи впечатлений и ощущений, которые дают продукты. К тому же тренд влияния на социум набирает обороты, и то, что движет компанией во время работы, становится так же важно, как и качество продукта или услуги.
Причина, по которой вы делаете что-то, будет важнее того, что вы делаете.
Тренд 2: UI-анимация с упором на пользовательский опыт и впечатления
Есть такое заблуждение, что сложная анимация зависит от аппаратного обеспечения настолько, что нет смысла ее создавать для массового потребителя со слабенькими процессорами.
Оказывается, есть продукты, способные превзойти отраслевые стандарты, заточенные для «слабого железа». Такие продукты – новая высота для производителей оборудования. GreenSock одна из таких. Ребята делают плагины и инструменты разработки интерактивной анимации.
Их детище оптимизирует процесс создания интерактивных проектов для работы практически на любом устройстве, получается мягонько плавненько и без тормозов. Анимации просто радуют глаз.
Corn. Revolution от Resn с сайта GreenSock.
Анимация в продукте – это полноценная чувственная история, которая действует в разы мощнее чем просто текст. С технологиями TweenMax и WebGL вы можете выразить через анимацию ту самую суть. Для многих дизайн-агентств в том числе и для нас, это еще не паханной поле, но как же круто наконец принести в мир огненную анимацию.
Время двигаться. В прямом смысле.
Тренд 3. Асимметрия и экран пополам
Блочный лейаут – это классика, он помогает помогает организовать информацию и сделать ее легко схватываемой на лету. Фактически – он основа страницы. Блоки – это симметрия. Тем не менее, существует и асимметричный тренд, и он всегда был на рынке, хоть и не был мейнстримом даже в эпоху широкоформатных экранов.
Baas Amsterdam и ассиметричный макет.
Нам кажется, что в этом году асимметрия вернется вновь. Во-первых, каждый сейчас работает в нескольких инструментах и наблюдает их борьбу за пространство на экране. Мы уже привыкли к культуре деления пространства на экране, и этот принцип находит свое отражение в макетах.
2019 – ежегодный отчет от Abb-d Choudhury и Sara Scobie.
То, что изначально имело функциональную природу для предоставления двух отдельных блоков информации на одном экране, теперь становится визуально привлекательным способом представления информации любого типа. Королевой асимметрии в 2019 году стала Zhenya Rynzhuk. Рады наблюдать за ее успехами. Подписывайтесь на нее.
Разделяйте.
Тренд 4. Неброские градиенты
Общая тенденция в области дизайна направлена на автоматизацию, применение AI, меньше значит больше, и все такое. Тем не менее, визуальные элементы, в таком дизайне по-прежнему являются в значительной степени человеческой работой.
Один из таких примеров – это нежные цвета, а также упрощения и сокращения. Основная идея в том, чтобы добавиться впечатления чего-то умного и автоматизированного, в итоге получаются легкие и мечтательные оттенки.
10 Quota – Держите цитату дня ✌️ Анимация Sebastian Jungbluth
2018 год был годом синих и фиолетовых градиентов. 2019 год такой же, но с более мягкими оттенками. Поэтому ждем больше разбавленных цветов в 2020 году.
Не раздувайте пламя.
Тренд 5. Гармоничные цвета
Цвета 2020 года сочетают в себе оптимизм и недосказанность.
В целом, смена цвета, ожидаемый тренд во всех отраслях дизайна. В грядущем году они будут еще более натуральными, чем палитры прошлых лет.
A+WQ / Young Lab Slider Animation от Zhenya Rynzhuk.
Однако, это не означает, что все цвета должны быть одной палитры. Яркий неуместный цветной элемент усилит этот эффект еще лучше.
Сбавьте тон.
Тренд 6. Пишите для людей
Развивающийся UX-копирайтинг в последние два года добрался до высокой планочки для копирайтеров. Сам термин «UX Writing» скорее всего исчезнет, поскольку любой копирайтинг для людей и есть UX-копирайтинг.
Текст не сопровождает дизайн, он его часть. Контекст решает, автор решает. Текст так же важен, как и то, что происходит после него. Картинка к статье бесспорно должна соответствать образу мысли читателя и его культурным нормам – это уже подтверждено исследованиями. Когда пишите для людей, вы помогаете читателю с принятием решения, помогаете выбрать продукт и сформировать к нему свое отношение.
До: «Ом» — облачная платформа для управления командной работой, контроля качества обслуживания клиентов и управления ресурсами.
После: «Ом» — программа для управления людьми. Помогает не срывать сроки, грамотно отвечать на звонки и находить бездельников.
Не срывать сроки. Раздаете сотрудникам задания, они видят их в «Оме» и выполняют. Когда придет срок, «Ом» напомнит сотруднику о задаче. Если сотрудник не справится — «Ом» вам сообщит.
Грамотно отвечать на звонки. «Ом» ведет досье на каждого клиента. Когда клиент звонит к вам в офис, «Ом» соединяет его с нужным менеджером и выводит на экран это досье. Менеджер сразу в курсе, кто ему звонит, что он покупал в прошлый раз и как дела по его проекту.
Увольнять бездельников. «Ом» знает, кто, что и как делает в компании. Если кто-то из менеджеров постоянно срывает срок или закрывает мало сделок, «Ом» покажет это в отчете.
Не существует волшебных слов.
Тренд 7. Миксуем опыт
Визуальная коммуникация сильнее слов. Микс быстро загружаемых видео, встроенных в макеты – хороший способ поднять уровень пользовательского опыта. Контент – все еще король, а способ его доставки играет огромную роль в воздействии, которое он оказывает.
Кофейная компания Allpress Culture.
Микс контента – это про создание полезного опыта. Позже мы поговорим о настройке опыта на основе поведения пользователя, но основным трендом является сайт, как единая композиция из видео и иллюстрация, а не простая линейная верстка блок за блоком.
Аниме “OBSOLETE” от JUNNIE.
Создавайте опыт, а не ui-киты и руководства по стилю.
Тренд 8. Красота вернулась
Здесь нечего сказать. Просто примите это. В этой книге всемирно известные дизайнеры Стефан Загмайстер и Джессика Уолш исследуют сущность красоты и преобразующую силу эстетически красивого дизайна.
Загмайстер и Уолш: О Красоте
В этой новаторской визуальной книге они поставили перед собой задачу: выяснить, что такое красота и как она влияет на нашу жизнь. Они обращаются к философии, истории и науке, чтобы понять, почему нас привлекает красота и как она влияет на наши чувства и поведение. Будучи преисполнены решимости воплотить свои открытия в жизнь, Загмайстер и Уолш показывают нам, как красота может сделать мир лучше.
«Убедитесь, что ваше решение создано людьми, для людей».
– Стефан Сагмейстер.
Для кого эта книга: Для дизайнеров, иллюстраторов, архитекторов, фотографов, художников и всех, чья работа связана с визуальными видами искусства. Для всех, кто неравнодушен к красоте и стремится понять ее сущность.
Тренд 9. Desveloper (Дизайнер разработчик в одном лице)
Криптонит дизайнера – это разработка. Иногда мы проектируем вещи, которые невозможно реализовать в определенные сроки, бюджет или силами имеющейся команды. Некоторые дизайнеры учатся кодить и становятся «опасными», потому что они знают достаточно, чтобы спорить, но недостаточно, чтобы на самом деле сделать это.
Эта дихотомия должна прекратиться в 2020 году, благодаря таким инструментам будущего, как Webflow. По сути, это визуальный инструмент, который позволяет вам создавать все, что угодно, до тех пор, пока это можно сделать с помощью HTML и CSS. Каждое движение пикселя является изменением кода, что делает этот подход идеальным способом для дизайнеров начать кодить.
Когда все движется к дизайну взаимодействия (interaction-based design), становится все труднее объяснить, как то самое взаимодействие должно работать и выглядеть. Поэтому важность и необходимость такого визуального инструмента для воплощения решений трудно переоценить.
Станьте «опасным» дизайнером. Возьмите код на вооружение.
Тренд 10. Белое пространство
Когда множество элементов схватились за внимание, никто из них не получит его достаточно. Но когда один элемент выделен, он возьмет на себя все внимание. Учтите идею заложенную в интерфейсе и дайте ему пространство, чтобы не позволить этой идеи утонуть.
Есть микро и макро пустые пространства, пространства для текста и абзацев, они могут быть активными и пассивными, и все они масштабируются. В этом есть прагматический аспект, поскольку мы склонны обрабатывать сжатую информацию дольше и с меньшим пониманием.
Домашняя страница творческой студии Hello Monday с большим количеством пустого пространства.
Окружение идеи пустым пространством – это способ выделить идею. Теперь давайте удостоверимся, что выделяемая информация, того стоит.
Белое пространство – инструмент умелого дизайнера
Тренд
11. Рендеры с чувственным опытом
Кроме применения векторных иконок, особенно в блоках «наши фишки», топовые дизайнеры продолжат активно применять рендеры в своих работах.
youtube.com/embed/NVBn55Yc8rQ?feature=oembed&enablejsapi=1&origin=https://ux-journal.ru» frameborder=»0″ allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»/>
Потрясающая презентация Apple AirPods Pro / лендинг.
Чтобы представить продукт или услугу в 2020 году, все больше компаний будут применять супер-детальные изображения продуктов и людей, использующих эти продукты.
Изображения в высоком разрешении передают чувственный опыт и создают ощущение “в одном шаге от покупки”. Главное не тормозить загрузку промо-страниц, иначе все может скатиться снова в плохой UX
Вот это по настоящему, я чувствую это.
Тренд
12. Множество вариаций UX
Подобно тому, как есть разные типы темперамента, есть разные типы поведения в Интернете. Долгое время мы создавали дизайны только среднестатистического пользователя в среднестатистическом контексте со среднестатистическим уровнем вовлеченности.
В эру больших данных мы можем адаптировать опыт для бесконечного числа людей, основываясь на их поведении. Современная аналитика позволяет нам определить, с кем вы имеете дело: просто путешествующий странник, неуверенный лидер или решительный герой. В зависимости от того, сколько времени они проводят на экране или скорости прокрутки, веб-сайт ведет себя по-разному.
Веб-сайт изменяет размер изображения iPhone 11 Pro в зависимости от вашего скролла.
Такой подход требует активной позиции к исследованию пользователей и, возможно, не совсем подойдет для сервис-дизайнеров, но для бренд-дизайнеров годится как никогда. Это означает обеспечение каждого пользователя полным присутствием: понимание сцены, настроения и последствий действий, предпринимаемых пользователем.
Натренируйте ваши дизайны понимать контекст.
Тренд
13. Мобильный опыт
Движение PWA устраняет пропасть между приложениями и мобильными сайтами. Доступ к одной и той же фиче теперь должен быть возможен двумя способами, что обязывает дизайнеров создавать согласованные паттерны UX.
Одним из различий между приложениями и мобильными веб-сайтами является необходимость в браузере. 2019 год – год, когда появился первый настоящий мобильный браузер Cake.
Юморист Эстер Повицки демонирует Cake – мобильный браузер.
Технически это приложение из AppStore, которое предназначено для освобождения пользователей от приложений. UX этого браузера как у приложений, только заточен он для поисковых систем и просмотра веб-сайтов.
Встречайте свайп.
Тренд
14. Наслоение типографики
Это продолжение тренда смелой типографики. Заголовки перекрывающие постеры являются альтернативой звуку. С его помощью вы можете передать идею графически привлекательным способом.
Заголовки домашней страницы Orkestra перекрывают изображения.
Мы ежедневно потребляем большое количество информации в текстовом формате, читая, мы мысленно проговариваем ее. Попробуйте помочь пользователям потреблять эту информацию в более увлекательном формате.
В студии Spatzek нет никакой суеты.
Мы ежедневно потребляем большое количество информации в текстовом формате, читая, мы мысленно проговариваем ее. Попробуйте помочь пользователям потреблять эту информацию в более увлекательном формате.
Largo Studio использует перекрывающийся текст, чтобы проиллюстрировать видео их работы над проектом.
Замолвите за это словечко.
Тренд
15. Иллюстрации выражение особой культуры компании и продукта
К 2020 году все будет проиллюстрировано до такой степени, что мы заново изобретем стили иллюстрации, которые являются ничем иным, как произведениями изобразительного искусства, созданными теперь на цифровых носителях.
Это огромное окно возможностей для художников, которые терпеть не могут сток.
Иллюстрации Absurd.design
С этой тенденцией все сводится к тому, как вы ее продаете. Absurd design – это хороший пример чисто художественного подхода к созданию контента и постановки его на бизнес-рельсы.
Иллюстрированное меню Qode Interactive Catalog
Сначала веселье, потом бизнес.
Тренд
16. Кастомная навигация
Продукты, которые предоставляют каждому особенный пользовательский опыт – важнейший тренд в 2020. Если вам требуется усилить бренд с помощью мощных визуальных средств, вам следует использовать все ресурсы веб-сайта, в том числе и навигацию.
Сайт Corphes перевернул навигацию, призывая вас подняться на вершину, а не спускаться.
Навигация может дать нужный эффект, если она логически вплетена в историю. Существует два типа элементов навигации: видимый и скрытый. Важно спроектировать навигацию, основываясь на пользовательских сценриях = потоках данных.
Меню навигации сайта 2ndstreet повторяет расположение заголовка страницы.
Плывите по эффекту, а не ждите его окончания.
17. Полноэкранные визуальные эффекты
Займите всю площадь экрана ключевым сообщением. Примените центральной выравнивание. Так вы по максимум привлечете внимание пользователей, только еще учтите естественную тягу внимания к центру страницы.
Главная страница сайта Brand Studio – это окошко в безумный мир.
Чтобы создать захватывающий опыт не забудьте оставить намек на то, что здесь есть еще много полезной информации и перед пользователем только часть видимого контента. Это поможет юзерам сориентироваться и приступить к дополнительным исследованиям, что повысит доверие и снизит показатель отказов.
Shimane Misato из Японии – это интерактивная полноэкранная история.
Вы можете сыграть эффект только однажды для вовлечение на старте или же удерживать внимание увлекательной серией эффектов по мере изучения страницы. Такой подход годится особенно для объемных материалов, в которых неподготовленных веб-серфер мог бы попросту уснуть. С анимацией и эффектами контент станет увлекательнее.
Сайт Fishing Feed знакомит вас с проблемами рыболовной индустрии.
Не стройте стены, сносите их.
18. Визуализация данных
Поскольку технологии, которые создают потрясающий интерактивный опыт, становятся все более доступными, маркетологи могут строить свои целые стратегии вокруг визуальных данных. Показывать лучше, чем рассказывать, но если вы можете рассказать и показать, это самое крутое решение.
WebGL и 3D – это крутая комбинация, особенно если есть интересные данные. Любая выборка данных – это ценный источник для лидогенерации. Все, что нам нужно сделать, это отфильтровать их, найти наиболее сочные и интересные фактыы и применить их.
Autoneum – это визуализация автомобильного акустического управления, целая наука.
Визуализация данных – это не только диаграммы и графики. В зависимости от того, что важно пользователю, мы можем выбрать источники данных и представить их в формате увлекательной графической истории.
Визуализируйте, что важно, а не то, что доступно.
19. Непрерывный UX
Хотите продукт? Нажмите здесь и зайдите на эту страницу. Хотите увидеть больше фотографий? Нажмите здесь и прокрутите. Хотите обзоры? Нажмите здесь и ознакомьтесь с нижним разделом. Хотите купить? Нажмите на значок корзины, затем перейдите на страницу «Оформить заказ», укажите свою кредитную карту, но до этого зарегистрируйтесь, заполните 27 текстовых полей, согласитесь с «Условиями и положениями», получите счет-фактуру по электронной почте, отследите свой заказ.
Каждый шаг этого процесса побуждает вас сомневаться в намерении купить. Каждое поле, которое вы должны заполнить, отнимает время. С таким подходом вы требуете от пользователя невероятной мотивации пройти процедуру покупки онлайн. Возможно, потому что сегодня люди знают, как продавать вещи.
А что, если бы, сайту для отправки покупки было нужно только ваше намерение совершить покупку. Одна кнопка для управления всем процессом. Мобильный телефон уже применяет этот прием, интегрируя в платежи простые жесты, а еще есть Face ID. Нам еще предстоит увидеть рост этого тренда в Интернете.
Конфигурация велосипеда от Den Klenkov – это потрясающий пример совершенно нового опыта покупки онлайн.
Технологии уже многое знают о нас. Почему на полную не применять эти знания для улучшения UX. Пользователь не должен раздумывать, о том стоит ли доверить вам свою личную информацию. Если вы запрашиваете данные, они должны быть в сохранности. И это наша обязанность. Задача продукта – принять намерение пользователя и превратить его в удовольствие. Что бы мы ни использовали для этого, это нормально, если наши действия остаются в рамках этических норм и соответствуют современным требованиям безопасности.
Интернет работает на куки. Без них он превратился бы барахло. Теперь очередь за геолокацией. Непрерывный UX начинается там, где к конфиденциальной информации относятся, как торговому таинству, а не товару.
Речь идет не только о покупках. Любая цель пользователя должна рассматриваться подобным образом. Если вы выиграли битву за внимание пользователя, вы не можете проиграть битву за его удовлетворение.
Не перебивайте человека, который хочет дать вам свои деньги.
20. Собственный путь
Технологический хайп держит всех в напряжении. В стремлении к немедленному обожанию мы начинаем забывать, что привело нас в отрасль, а ведь это годы учебы, шишки, синяки и какой-то опыт, заработанный.
Слепо стремясь к хайпу, мы пренебрегаем этим ради нескольких лайков и репостов на Dribbble. Тренды дизайна – это круто, но лучше иметь собственное мнение.
Быстрый тест. Прокрутите публикации в своем творческом аккаунте за последний год. Сколько хайповых вещей вы там нашли? Уверен, что тоже самое будет с Cybertruck через год. Нет ничего плохого в том, чтобы зарабатывать деньги, но дизайнеров запоминают за то, что они не такие как другие. Рецепта успеха нет, но есть преимущество в его поиске.
В заключение я приведу цитату из книги Марти Ноймайера «46 правил гения: руководство по креативности для новаторов»:
«Творчество и креативность – это дисциплина, которую вы используете, когда не знаете ответов на пути в неизведанное. В таком путешествии ошибочные шаги тоже шаги. Каждая ошибка приближает вас к решению».
Тенденции веб-дизайна 2020: улетный визуал & инновации
Высокотехнологичный улетный визуал – три слова характеризующие тренды и тенденции Web’а. Визуальная лаконичность в оформлении становится мейнстримом современного веб-дизайна. Объединение искусства с высокими технологиями должно сделать «познавательности» более изобразительными. Тенденция наступления визуального формата – это направление будущего, которое требует свежих и нестандартных дизайн-решений уже сейчас.
В 20-м десятилетии ожидаем новых идей совмещения взрывной графики с хайтеком. Дизайнерам придется удивлять изобретательностью. Их задача – реализовать инновационный и обширный функционал без визуального перегруза. Итак, тенденции развития веб-дизайна с лучшими на 2020 год примерами применения трендов.
- Совмещение фотографий с иллюстрациями
- Паттерны: от подложки до интерактива
- Черно-белые палитры
- Шрифты-гиганты, негабаритные надписи и минимализм
- Современный ретро-стиль
- Лайн Арт: креатив с визуальной чистотой
- АРТ и Дизайн: иллюстративное единение
- Трехмерная графика / 3D-моушн эффекты
- Инновации, которые мы увидим в 2020-х
Тенденции в веб-дизайне 2020 года
1. Совмещение фотографий с иллюстрациями
В тренде новая визуальная эстетика – сочетать фото с 2D-иллюстрациями от руки. К фотоснимку добавляются элементы иллюстрации, либо они дополняют друг друга. «Микс двух реальностей» открывает дорогу творческим и маркетинговым идеям.
тренд в дизайне
тренд в дизайне
тренд в дизайне
тренд в дизайне
2. Паттерны: от подложки до интерактива
Интересные паттерны не вышли из моды. Помимо полноэкранных, применение частями будет на пике популярности. Так, дизайнеры задают где надо акценты или общую атмосферу, добавляют сайту эмоциональности.
тренд в дизайне
тренд в дизайне
тренд в дизайне
3. Черно-белые креативы
Черно-белые дизайны – нестареющая классика. Они изящны и элегантны, эффективны для eCommerce / творческих ресурсов. Ожидаем свежих черно-белых решений с отрицательным пространством, крупными шрифтами и элементами line-art.
тренд в дизайне
тренд в дизайне
тренд в дизайне
4. Шрифты-гиганты, негабаритные надписи и минимализм
Гигантские шрифты и большие (но негабаритные) надписи отличат дизайны 2020 года. Крупная типографика при компактной лаконичности заголовков не вызовет хаоса в минималистичном оформлении или на мобильных экранах. К примеру, увеличенная нестандартным кеглем надпись:
- Цепляет взгляд
- Создает интересную визуальную деформацию
- Усиливает дизайн концептуальным посылом «большей решительности»
тренд в дизайне
тренд в дизайне
тренд в дизайне
5. Современный ретро-стиль
С приходом новых веб-технологиий и трендов творческие дизайнеры начинают ностальгировать по прошлому. В 2020-м будут популярны штрихи «состаренного» дизайна: изношенность, черно-белые и зернистые / потертые фото, приглушенные ретро-оттенки и шумные / пыльные текстуры. Высокотехнологичное ретро – это особый шарм.
тренд в дизайне
тренд в дизайне
тренд в дизайне
тренд в дизайне
6. Лайн Арт: креатив с визуальной чистотой
Абсолютный хит во всех сферах графического дизайна 2020-го года. Лаконичность контурной графики и креатив LineArt-иллюстраций сделают дизайны чище, профессиональней на вид.
тренд в дизайне
тренд в дизайне
тренд в дизайне
тренд в дизайне
тренд в дизайне
7. АРТ и Дизайн: иллюстративное единение
Арт-иллюстрирование дизайна – горячий тренд 2020 года. Ожидаем креативных фантазий, концептуальных идей и произведений искусств – от картинок пастелью и акварели до модерна и флэт графики с градиентами. А также, запоминающихся несоответствий / странных художеств с нарочитой непропорциональностью, персонажами без лиц и т.д.
тренд в дизайне
тренд в дизайне
тренд в дизайне
тренд в дизайне
# Интерактивность сайта + моушн-графика
Взаимодействие пользователей с сайтом прокладывает дорогу к взаимопониманию, какие бы цели они не преследовали. Этим объясняется интерес к игровому дизайну, поясняющим графическим роликам и анимационному иллюстрирования с многоуровневым интерактивом.
тренд в дизайне
8. Трехмерная графика / 3D-моушн эффекты
3D скоро станет настоящим мейнстримом в графическом и веб-дизайне. Иными технологиями вам не удастся получить такой глубины и реалистичности. В 2020 году ожидаем новых 3D дизайнов – статичных, анимированных и интерактивных.
# Интерактивные 3D эффекты
Моушн стал увлекательнее, чем когда либо. Задача интерактива – цеплять и удерживать целевую аудиторию. 3D-моделлеры просто расширяют методику «втягивания» посетителя в диалог.
тренд в дизайне
тренд в дизайне
# 3D-анимации
Моушн-дизайнерам известно, что анимированная 3D-графика производит визуальный восторг.
тренд в дизайне
# Статичная 3D графика
Трехмерная графика привлекает плавностью форм и оттенками, а качественный 3D-арт делает сайт узнаваемым. Обычно, дизайнеры упрощают остальное, добиваясь современного чистого вида и сбалансированной структуры дизайна.
тренд в дизайне
тренд в дизайне
# 3D-рендеринг и высокая реалистичность
Завораживающая «фирменная» реалистичность в продающем дизайне – это интересно и ярко. Актуально для eCommerce, промо-сайтов, домашней или посадочной страницы с товарами. Качество создается проработкой объекта: блики на поверхности, рассеивание… Софт-2020 существенно упростит и удешевит реализацию Wow-эффекта. Смотрите пример 3D-рендера продукции на фоне цепляющих мотиваторов в динамичном дизайне товарного лендинга.
тренд в дизайне
9. Инновации в веб-дизайне 2020-х
Передовую технологию спешат представить в виде тренда. Но осмысленного, практичного применения в веб-дизайне каких инновационных направлений ожидать на ближайшее будущее?
# Чат-боты
В 2020 году больше веб-ресурсов предложат услуги говорящего и самообучающегося чат-бота. В режиме 24/7 он ответит на часто задаваемые вопросы, послужит опорой на протяжении всего посещения сайта. Продвинутые ИИ-технологии сделают ботов адекватными как никогда.
# Диалоговые интерфейсы & Автоматизированные агенты
В 2020-х диалоги с сайтом будут интернет-привычкой, а пионерами внедрения разговаривающих ассистентов станут веб-сервисы. Голосовой ввод – глобальный тренд, Популярностью обязан совершенствующимся технологиям распознавания речи и удобству голосового интерфейса (по сути является отсутствием UI). Ожидаем умных ассистентов на основе речевых технологий. Общаться с сайтом командами – совершенно новый пользовательский опыт. Бизнесу пора присмотреться к модной тенденции, а пользователям – приобретать навыки web-коммуникации в реальном времени.
Подводя итог
В WEB-е уже многое менялось, но две тысячи двадцатый обещает быть колоритным. С начала 20-х, сайты начинают впечатлять не только визуально. Для веб-дизайнеров и пользователей 2020-й станет годом технологических возможностей / высокоинтеллектуальных интерфейсов / удивительно креативных решений.
Успешных дизайнов и взаимопонимания с Web’ом 2020-х!
от тёмной цветовой схемы к моушн-дизайну — CMS Magazine
Какие тренды в веб-дизайне будут на пике популярности в следующем году? Мы в дизайн-студии Магвай неустанно следим за всеми новшествами и с радостью подготовили перевод статьи от экспертов Envato (Envato — австралийская it-компания, которая управляет 8-ю интернет-сервисами, ориентированными на продажу графического контента, такого как: шаблоны для веб-дизайна, графические элементы, 3D-модели и т.д).
Профессионалы из Envato рассказывают о главных тенденциях, на которые следует обратить внимание в 2021 году.
Веб-дизайн прошёл огромный путь за последние несколько лет. Эта практика существует на стыке творчества и технологий — двух наиболее быстро развивающихся отраслей в мире, поэтому неудивительно, что в веб-дизайне постоянно появляются новые тренды. Итак, какие же последние тенденции в веб-дизайне?
-
Тёмная цветовая схема
-
Коллаж
-
Антидизайн
-
Минимализм
-
Органический дизайн
-
Иллюстрации
-
Функциональность, инклюзивность и доступность
-
Моушн-дизайн и интерактивность
-
3D и геометрический дизайн
В веб-дизайне всегда будут подходы, которые остаются надолго, например, удобная для пользователя навигация, безопасность данных, быстрая загрузка страниц. А модные тренды будут приходить и уходить. При этом если вы в курсе последних тенденций, стилей и инноваций, ваш сайт всегда будет выделяться среди других даже при условии, что онлайн-экосистема постоянно меняется.
И всё же — от тёмной цветовой схемы до интерактивности: какие популярные тренды в веб-дизайне покорят интернет в следующем году? Мы спросили экспертов из Envato, что отличало классный сайт в 2020, а также их мнение о последних и наиболее удачных тенденциях в веб-дизайне, на которые следует обратить внимание в 2021 году.
Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →
Тёмная цветовая схема
Тёмная цветовая схема — главная страница Apple
Долгое время в веб-дизайне белый фон считался единственным способом создать свободное пространство на сайте или в приложении. Несколько лет назад дизайнеры начали добавлять более тёмные элементы и темы, в 2020 году этот тренд захватил индустрию, и мы ожидаем, что он сохранится и в 2021 году.
Что такое тёмная цветовая схема?
Тёмная цветовая схема — главная страница Clock Strikes Twelve
Крупные бренды, такие как Apple, Hublot, и отдельные дизайнеры, например, Clock Strikes Twelve, для своих продуктов и портфолио используют тёмный фон, так как это отличный способ сделать сайт современным и элегантным. Помимо того, что дизайнеры могут в этом случае поиграть с разными элементами, такими как пастель или неон (два главных тренда 2020 года), исследования также показали, что тёмный режим меньше расходует заряд устройства, кроме того, он лучше подходит для восприятия, поскольку уменьшает негативное воздействие синего цвета на глаза.
«Похоже, сегодня появляется больше продуктов, которые имеют в настройках тёмный режим или ориентированы только на тёмную цветовую схему, это продиктовано исследованиями, в которых изучили воздействие яркого синего света на человека, а также на время автономной работы батареи», — говорит UI-дизайнер из Envato Шон Фихан.
Тёмный режим не только лощёный, элегантный и приятный для глаз, он также увеличивает контраст и делает элементы дизайна более заметными. Вы даже можете добавить на свой сайт переключатель тёмного режима, как показано в этих примерах от Johny Vino, Koos Looijesteijn и Adrian Verde Studio, чтобы посетители могли настраивать сайт под себя.
Переключатель режима — главная страница Johny Vino
«По моему мнению, тёмный фоновый режим — определённо тенденция, которая оказала наибольшее влияние на веб-дизайн в 2020 году, — говорит UX-дизайнер из Envato, Талия Джаннополас. — Благодаря тому, что тёмный режим стал популярным, я уже видела несколько сайтов, где был добавлен переключатель (от светлого к тёмному). Это великолепно и в тоже время так просто, когда пользователь может выбрать настройки, основываясь на своих предпочтениях».
Всё больше и больше неоморфных вариантов с противоречивым UX-дизайном, основанным на скевоморфизме и flat дизайне (такие примеры часто встречаются в интерфейсе iOS или Android), включают опцию тёмного фона, несмотря на то что изначально создавались с использованием исключительно белых и светлых цветовых схем.
Коллаж и смешанные техники
Коллаж — главная страница City Circus
Коллаж — одна из самых популярных тенденций этого года в графическом дизайне и в социальных сетях, этот тренд быстро завоевал популярность и в мире веб-дизайна. Смешанная техника снова в центре внимания благодаря художникам из мира digital и инфлюенсерам, его также приняли многие бренды и веб-дизайнеры, включая Chobani, City Circus и Urban Outfitters.
Что же такое коллаж?
Коллаж — страница бронирования City Circus
Коллаж — это сочетание фотографий, иллюстраций, графики, движущихся элементов и текста, его применяют для создания вдохновляющей и привлекающей внимание эстетики.
Теперь, когда коллаж перешёл в цифровую сферу, он эволюционировал, появились новые элементы: анимированные коллажи, огромные декоративные шрифты, художественные текстуры (такие как мазки кистью) и даже анимированный искажённый текст, всё это даёт невероятные результаты.
«Я думаю, что концепция смешения разных средств будет только набирать обороты в 2021, — говорит Талия. — Многие уже сейчас используют приложения для рисования на iPad и цифровые кисти, имитирующие традиционные краски (например, акварель, масло, гуашь), границы цифрового искусства меняются. Кроме того, удобно, что такие произведения уже на цифровом устройстве, их не надо сканировать или фотографировать, а значит, ими проще делиться в интернете».
Коллаж — главная страница Urban Outfitters
Коллаж — это тренд, который хорошо сочетается с минималистичным UX-дизайном или даже антидизайном, если вы готовы выйти за рамки привычного. Интеграция смешанной техники и коллажей в дизайн вашего сайта — хороший способ добавить яркости и креативности и таким образом выделить свой бренд.
Антидизайн
Антидизайн — главная страница Roze Bunker
Предупреждение: мы знаем, что этот тренд не для каждого!
Если 2020 год нас чему-то и научил, так это отбросить все правила и ожидания. Антидизайн — это тенденция, которая возникла в результате возрождения брутализма в 2019 году, а в последнее время противоречивый стиль просочился в области социальных сетей и поп-культуры, а также в веб-дизайн и графический дизайн.
Антидизайн — главная страница Play Type
Что такое антидизайн?
Антидизайн описывается как нечто сырое, грубое, непримиримое и даже отвратительное, принятие хаоса и уродства в этом случае — знак протеста против традиционных стандартов «хорошего» дизайна. В нём есть экспериментальные и асимметричные детали, преувеличения, искажения, наслоения и традиционно уродливые элементы, которые демонстрируют, что это действительно понравится не каждому. Но если вы относите себя к тем, кто любит выделяться на фоне остальных, то нет смысла отрицать, что сайт, созданный в стиле антидизайна, — эффективный инструмент, когда надо привлечь внимание.
Антидизайн — главная страница XXIX
Многие профессионалы сейчас увлечены странным миром антидизайна, один из примеров — хаотичный, но причудливый сайт голландского бренда Roze Bunker и дизайн-студий Play Type и XXIX. Даже австралийский музыкант Flume решился на такой яркий, смелый и брутальный подход для своего сайта. Несмотря на то, что подобный тренд всегда выделяется среди множества конкурентов (надеемся, что в положительном смысле), эффективный веб-дизайн всё-таки про баланс. Если вы действительно хотите попробовать антидизайн, важно позаботиться, чтобы интерфейс вашего сайта оставался простым, функциональным и удобным для пользователя.
Антидизайн — главная страница Dynamic MTL
«Я думала, что популярность антидизайна постепенно упадёт, но сейчас считаю, что он эволюционирует вместе с трендом на использование смешанных техник, — говорит Талия. — Я встречала много разных сайтов, где изображения накладываются друг на друга, смешиваются шрифты с засечками и шрифт san serif, а также нетрадиционным способом используется анимация. Тем не менее, благодаря отличному UX они прекрасно работают».
Минимализм
Минимализм — Главная страница ETQ
Тренд в дизайне, который отказывается нас покидать, — это минимализм. Именно он кормит веб-дизайнеров последние десять лет. Но что же такое минималистичный веб-дизайн? Он основан не на визуальном подходе, а на строгих принципах дизайна, на использовании только основных графических элементов, таких как формы, простой текст, ограниченные цветовые палитры и свободное пространство. С помощью такого подхода создаётся нечто простое, функциональное и запоминающееся.
Минимализм — главная страница Huge Inc.
Среди брендов есть прекрасные примеры, когда в дизайне используется минимализм. Например, обувь премиум-сегмента ETQ Amsterdam, а также агентство развития бизнеса Huge Inc из Бруклина. При этом часто минимализм ассоциируют с монохромом и белым фоном, однако минимализм — это не просто чёрное или белое. Красочный, яркий минимализм набирает обороты как в графическом, так и в веб-дизайне, в этом случае для создания простого, но потрясающего сайта используются блочные цвета и яркий фон, простые шрифты без засечек и минималистичные шрифты, а также небольшой набор элементов.
Тренд, который направлен не только на упрощение визуального дизайна сайтов, но и на удобство использования, функциональность — ещё одна важная тенденция 2021 года. Минималистичный веб-дизайн будет оставаться ключевым компонентом современного дизайна пользовательского интерфейса на долгие годы.
«Я не разбираюсь в тенденциях, но считаю, что минимализм всегда будет актуален в сфере цифрового дизайна, — говорит Шон. — Чем больше мы усложняем наши интерфейсы, тем труднее людям будет пользоваться нашими продуктами».
Органический дизайн
Органический дизайн — главная страница Ora
Органический дизайн — это один из самых заметных трендов 2020 года, он ориентирован на подражание природе и миру вокруг нас. Хотя эта тенденция часто встречается в дизайне продуктов, интерьере и графическом дизайне, сейчас она начинает набирать обороты и в мире веб-дизайна.
На органический дизайн влияет повышенное внимание к экологии и защите окружающей среды, отсюда тёплые землистые цвета, естественные формы и необработанные органические текстуры — как это видно на сайтах от Ora Floral Agency, A Better Source и Abbotsford Convent в Мельбурне.
Органический дизайн — страница сайта Abbotsford Convent
Нейтральные цвета копируют палитру окружающей среды, это самый простой и наиболее эффективный способ создать на сайте ощущение естественности. Нежные тона коричневого, бежевого и белого цветов, пудового розового, голубого и зелёного также являются прекрасным дополнением к натуральной цветовой палитре, её можно использовать отдельно или в сочетании с более яркими цветами, добавляя контрастности.
Органический дизайн — веб-страница A Better Source
«Я обратила внимание на несколько сайтов, которые сместили свой фокус на естественные тёплые цветовые схемы, это стало долгожданным изменением, ведь обычно на наших экранах яркие холодные оттенки», — говорит Талия.
Иллюстрация
Иллюстрация — Главная страница AHM
В этом году иллюстрация стала абсолютным хитом графического дизайна, она также набрала популярность в социальных сетях и веб-дизайне. Это признало огромное количество брендов, в том числе такие, как страховая компания AHM и даже бренд Gucci, компании и художники интегрировали нарисованные от руки элементы в дизайн своих сайтов.
Как и органический дизайн, иллюстрации отлично подходят для того, чтобы добавить оригинальности сайту, они создают ощущение уюта и располагают пользователя. Так как в 2020 фокус был на разнообразии, то многие иллюстраторы теперь изображают необычных людей, этот стиль ещё называют odd bodies (странные тела).
Иллюстрация — страница результатов поиска Huge Inc
3D-иллюстратор и автор графических элементов Амрит Пэл Сингх —большой поклонник подобных причудливых и инклюзивных иллюстраций, в своей работе он уделяет особое внимание разнообразию и индивидуальности каждого.
3D иллюстрация — дизайн сайта, отрисованный Амритом Пэлом
«Иллюстрации и дизайн персонажей с годами установили неверные стандарты красоты и того, что на самом деле важно. Миндалевидные глаза, светлая кожа, определённые типы телосложения — мы выросли на мультфильмах, которые лишь подтверждают эти предубеждения, — говорит Амрит. — Исправить это — наш долг как создателей и художников. Мы должны осознанно подходить к тому, как представлять подобные стандарты. Я всегда стараюсь делать свои иллюстрации разнообразными, чтобы каждый мог себя в них узнать».
Функциональность, а также инклюзивный и доступный дизайн
Функциональность — главная страница Blue Receipt
Функциональность всегда остаётся ключевым аспектом веб-дизайна. Однако наравне с быстрой загрузкой страниц, интерфейсом, удобным для мобильных устройств, повышенное внимание к инклюзивности и доступности породило потребность в таком веб-дизайне, который учитывает потребности людей с ограниченными возможностями и делает сайты доступными и функциональными для всех.
Доступность — страница сайта Blue Receipt
К счастью, такой веб-дизайн уже используют многие бренды и компании, такие как электронная платформа для торговли Blue Receipt и бренд кошачьего корма Cat Person. Функциональный, доступный и удобный сайт, где любой посетитель может легко разобраться, теперь необходим, чтобы обеспечить эффективное онлайн-взаимодействие.
Доступность — страница сайта Cat Person
Более понятный, инклюзивный дизайн важен не только для хорошего клиентского сервиса, это также увеличивает конверсию, продвигает ваш сайт и даёт больший охват аудитории.
Вот несколько способов сделать ваш сайт более доступным:
-
сделайте сильный цветовой контраст между текстом и фоном;
-
добавьте индикаторы фокуса, например, прямоугольный контур, который появляется вокруг ссылок при использовании навигации с клавиатуры;
-
применяйте лейблы и подсказки в полях формы, а не плейсхолдеры с малопонятными комментариями;
-
задействуйте функциональные ALT-теги (альтернативные тексты) для изображений;
-
используйте лёгкий для понимания контент без сленга.
«В целом, я вижу, как реально вырос уровень, появилось много хорошо проработанных, функциональных и доступных сайтов, и это здорово, — говорит Шон. — Я пришёл к такой мысли, когда заметил, что на сайтах стали использовать более контрастные цвета, крупную типографику, аутентичный контент, большие кнопки и мягкие изогнутые элементы интерфейса. Я верю, что это всё происходит благодаря тому, что растёт понимание и признание той ценности, которую может привнести в бизнес отличный дизайн».
Моушн-дизайн и интерактивность
Моушн-дизайн — главная страница Gridspace
Видео-контент сегодня привлекает интернет-пользователей больше, чем другие формы, неудивительно, что это стало одним из популярных трендов в веб-дизайне. Моушн-дизайн и анимацию используют все: от бутиковых сайтов, таких как Alter Mind и Gridspace, до крупных сервисов по поиску работы, таких как SEEK. Это простой способ сделать обычную веб-страницу более интересной.
Аналогичным образом многие бренды и компании, такие как YouTube Rewind, начали добавлять на сайты больше интерактивных элементов (викторины, игры, квизы и опросы). Отличный пример такого подхода — бренд Estee Lauder. На сайте компании есть интерактивная аркадная игра под названием «THE ANRCADE», это футуристический квест, где пользователи зарабатывают «очки молодости», а бренд таким образом продвигает свой крем Advanced Night Repair.
Интерактивность — игра ANRCADE бренда Estee Lauder
Интерактивность — это не только забавное дополнение к онлайн-опыту, но и отличный способ привлечь ваших посетителей, а также узнать о них больше. Однако здесь важно сохранить баланс, чтобы интерактивные элементы моушн-дизайна не перевешивали и не отвлекали пользователя от основной цели, ради которой он посетил ваш сайт.
Интерактивность — страница поиска YouTube Rewind
«По мере того, как технологии развиваются, становится всё проще применять моушн-дизайн, и это помогает создавать потрясающие впечатления (при правильном использовании), — говорит Шон. — Я вижу, что это хорошо получается, когда есть переход между контентом и взаимодействием с элементами».
3D и геометрический дизайн
Геометрические паттерны и элементы часто используются в современном веб-дизайне, включая классические плоские формы, такие как многоугольники, прямоугольники, треугольники и ромбы. Однако этот тренд эволюционировал и теперь включает в себя более современные элементы, такие как трёхмерные формы, плавающие объекты и видимые линии сетки.
Геометрический дизайн — главная страница The Imagineers
Трёхмерные формы и плавающие объекты в геометрическом дизайне появляются, благодаря смешению сюрреалистичных анимаций с реальными объектами, таким образом создаётся завораживающий футуристический эффект. Этот стиль часто используется в рекламных роликах для демонстрации новых продуктов, которые в этом случае вращаются, словно подвешенные в воздухе. Чтобы ваш сайт привлекал посетителей, можно добавить ещё один слой или измерение. Один из таких примеров — сайт The Artery, который сочетает геометрические элементы с минималистичными простыми линиями модульной сетки.
Трехмерные плавающие объекты — дизайн страницы The Artery
Использование простых линий сетки, границ и других структурных элементов также стало трендом в области веб-дизайна. Например, эту тенденцию можно оценить на сайтах Rail Road Ladies, Monograph Comms и The Imagineers.
Геометрический дизайн у The Railroad Ladies
«Я заметил, что в веб-дизайне снова начинают использовать геометрические элементы и сетку. И мне, как человеку, который любит структуру и порядок, это по-настоящему нравится», — говорит Шон.
Как видно из данного материала — в 2021 году нас ждет много интересных трендов в дизайне, некоторые из них активно используются и набирают популярность уже сейчас. Плодотворного 2021 года и хорошего дизайна!
По материалам статьи.
20 примеров веб-дизайна, которые задают тон 2020 году – Сей-Хай
Кажется, что 2020 год только наступил – а уже прошел целый месяц, который для многих стал очень продуктивным. Январь всегда самый интересный месяц с точки зрения реализации трендов и тенденций, которые прогнозировали в декабре.
Пока 2020 год в веб-дизайне продолжает традиции 2019-го: сайты с большим количество анимации и смелых цветов. Мы собрали 20 свежих примеров отличного веб-дизайна. Все картинки кликабельны и ведут на сайты.
Вдохновляйтесь!
Plink
Чтобы конкурировать с гигантами вроде PayPal, вам нужен убедительный бренд и простое сообщение. А еще можно удивить первым впечатлением — как сделал Plink со своей #D-анимацией.
Madame Turfu
Интересно, что принесет вам год грядущий? Тогда прыгайте на сайт Madame Turfu – здесь вам предскажут будущее с помощью классных диджитал-карт таро.
Nathan Taylor
Как может не нравиться этот сайт? Вы точно найдете здесь что-то для себя; наша любимая часть – разные режимы освещения.
Meatable
Meatable – сложная франшиза: это настоящее мясо, но для его получения не убивают животных – мясо выращивают в лаборатории. Простой сайт отлично объясняет процесс по этапам.
Sussex Royal
Гарри и Меган попали даже в подборку классных сайтов. Персональный сайт принца и его жены просто пышет королевским классом. Для промо-сайта, который ничего не продает, это великолепная работа.
Emotive Feels
Этот фантастический манифест от дизайн-агентства Emotive Brand иллюстрирует все потенциальные эмоции с помощью простых анимаций. «Пожалуйста, скрольте» – давно эту просьбу вы не выполняли с таким удовольствием.
UN\REAL
Сайт швейцарского дизайн-агентства UN\REAL – это история хаотичной любви к веб-анимации. А еще там можно создать собственное лого в безумном стиле агентства, от которого зарябит в глазах.
Kate Jackling
Иногда хороший дизайн просто отступает назад и позволяет насладиться сутью. Сайт фотографа Кейт Джеклинг делает именно это: позволяет вам насладиться прекрасными работами.
Helias
Helias отлично поработал с трендом повторения цветов продукта. Цветовая схема сайта поддерживает продукт, создавая ощущение единства. Это уместно, привлекательно и убирает примитивность строгой сетки.
Klokki
Очень часто самые трудные для разработки сайты – страницы продуктов, о которых мало что можно сказать. Klokki – один из таких примеров, но его сайт получился смелым, уверенным и убедительным.
Jonnie Hallman
Простой сайт-резюме Джонни Холлмана выигрывает от имен, с которыми он работал. Но главная прелесть, которую может перенять любой – переход деталей при прокрутке.
eaast
eaast – парижский дуэт дизайнера и девелопера. Их простой сайт доказывает, что вам не нужно много лет работы, чтобы продать себя.
Pantheone Audio
Pantheone Audio доказывает, что элегантная прокрутка все еще очень важна в 2020 году, и использует ее для плавной навигации по сайту со сложной сеткой.
Leaf
Последние годы производители пытаются переосмыслить процесс бриться. Leaf использует простой маркетинговый подход, но классно его оформляет.
Mociun
Большинство сайтов, которые продают ювелирные изделия, забивают на эмоциональную составляющую и отображают только статусность. Mocuin возвращает правильный подход, используя современную цветовую палитру и потрясающие фото продукта.
Jon Way
В портфолио показаны работы больше чем за 10 лет творчества. Чтобы пользователи не заскучали при скроллинге, авторы добавили анимаций и классный эффект «статики» – он выдержан по всему сайту.
Kota Yamaji
Еще одно портфолио – но оно кардинально отличается от предыдущего. Здесь все просто пестрит цветов. Вау!
Robb Owen
За последние пару лет мы видели много анимированных векторных аватаров, но редко встречаемся с такими проработанными. Робб Оуэн постарался на славу: движение курсора делает его аватара реальным.
Glasgow International Festival 2020
Что нужно для международного фестиваля в Глазго? Конечно же, кельтская типография и яркие цвета!
Megababe
Megababe – дикий бренд, который борется с индустрией красоты не по правилам. Сайт выглядит достаточно просто, но он полностью отражает выбранную линию: такой же сумасшедший.
Источник
Фото на главной: Lee Campbell
Читайте также:
Свежая порция вдохновения: самые инновационные сайты 2019 года
Тренды веб-дизайна 2020: девяностые возвращаются!
Кейс: как NGN Agency создавали дизайн сайта к 100-летию Citroën
Тренды веб дизайна преобладающие в 2020 году
Уже декабрь, и мы, как всегда, затаив дыхание, хотим узнать, что же нас ждёт в следующем году. Неудивительно, что в конце года в индустрии веб дизайна возникает вопрос на миллион долларов: чего ожидать? Иными словами, какие же тренды веб дизайна будут преобладать в 2020 году?
Что ж, на этот вопрос мы постараемся ответить в этом посте.
Но прежде чем начать разговор о трендах, нужно упомянуть, что, как правило, в мире веб технологий не существует очень быстрой смены тенденций. Поэтому многие из них не являются абсолютно новыми. Некоторые тренды уже прошли испытание временем, но не потеряли свою актуальность. Они превратились из тенденции в требование, поскольку продемонстрировали свою эффективность в user-experience и полюбились пользователям. Никто не сомневается, что дизайн сайта очень важен для любого онлайн проекта, будь то интернет магазин или личный блог. Дизайн вашего сайта, это первое, что видит пользователь. И от этого впечатления во многом зависит его отношение к вашему проекту.
Веб дизайнеры TemplateMonster маркетплейс, помогли нам выделить основные актуальные тренды 2020.
Екатерина Кирьянова, Евгений Коршунович, Игорь Хизниченко, Ирина Ковалевич
Веб дизайнеры TemplateMonster Маркетплейс
Давайте перейдем к делу.
- Несовершенства, подчеркивающие индивидуальность
- Безумие типографики
- Тёмная тема
- Яркие и люминесцентные краски
- 3D элементы дизайна
- Мягкие тени и плавающие элементы
- Микс фото и графики
- Негативное пространство
- Ультраминимализм в навигации
- Оптимизированный дизайн для большого пальца
- IVU — голосовой интерфейс пользователя
- Дизайн адаптированный для людей с ограниченными возможностями
- Рекомендации веб дизайнеров TemplateMonster маркетплейс
1. Небольшие недостатки, подчеркивающие индивидуальность
- Рукописные элементы дизайна
Очевидно несовершенные и нарисованные от руки элементы дизайна добавляют эмоциональность и человеческое тепло к дизайну сайта. Технический прогресс уже на протяжении многих лет уже определяет развитие области веб-дизайна. Так, как получается, что ручные рисунки стали привлекательными? Почему бы не сохранить изображения и фотографии с высоким разрешением, которые обычно ассоциируются с впечатляющим и качественным веб-дизайном?
Похоже, что пользователи жаждут увидеть что-то несовершенное и уникальное после того, как увидели так много отточенных, но обезличенных вариантов дизайна за последние несколько лет. В 2020 году добавление некоторой «рисованной реальности» вдохнет в ваш сайт душу, которой порой не хватает.
Иконки и другие нарисованные от руки элементы помогут подчеркнуть индивидуальность вашего бренда и выделиться среди конкурентов.
Будь то рукописные шрифты или иллюстрации, в 2020 году мы увидим, как все больше и больше дизайнеров добавляют намеренно не идеально отрисованные элементы в свои веб-проекты. Особенно эффектно они смотрятся, на фоне минималистического дизайна веб страницы.
Посмотрите пару примеров использования нарисованных от руки элементов в премиальных шаблонах цифрового рынка TemplateMonster:
Шрифт Rohman
Шрифт Ghost
Набор рукописных иллюстраций
- Асимметричные конструкции
Тенденция асимметрии продолжала расти в течение всего 2019 года. В 2020 году она не потеряет свою актуальность. Эта идея состоит в том, чтобы сайты выглядят менее «блочными» и имеют меньше прямых граней. Такой дизайн выглядит свежи и необычно.
Асимметричные рисунки кажутся намного интереснее и привлекают больше внимание. В 2020 году мы увидим различные уровни асимметрии в дизайне: от легкого до очень броского. Однако, вы никогда не должны забывать о визуальном балансе. Помните, что асимметрия должна сделать ваш сайт более запоминающимся, но не лишить гармонии.
2. Безумие типографики
- Еще одним трендом, который мы наблюдаем в этом году, является использование огромных шрифтов и смелых названий. В 2020 году его популярность будет возрастать, образно и в буквальном смысле слова.
Чтобы создать более инновационные и оригинальные макеты, дизайнеры продолжат экспериментировать с типографикой. Художественная типографика, раскрашенная в красивые, сочные цвета, состоящая из геометрических фигур или более креативных элементов, несомненно, привлечет внимание к текстовому сообщению. Акцент на контенте продолжает набирать обороты в веб индустрии.
- В настоящее время тенденция отказа от обезличенных стандартных шрифтов в пользу рукописных получает все больше внимания. Но речь идет не только о выборе визуально привлекательных шрифтов и их правильном сочетании, но и об использовании «слов» как основного элемента эстетики и семантики. Слова теперь физически присутствуют в дизайне и служат ключевым структурным элементом композиции. Это все еще смотрится несколько необычно. Однако, при правильном использовании этого элемента дизайна, такие сайты выглядит стильно и впечатляюще.
В 2020 году все больше дизайнеров начнут обрабатывать шрифты так же, как они обычно обрабатывают другие графические элементы. Они будут применять деформации, эффекты и анимацию к шрифтам своих проектов, а также комбинировать различные стили и размеры, жирный, курсив, с засечками и без … почти все мыслимое в одном абзаце.
Еще одна замечательная тенденция касательно типографики, которую мы увидим в следующем году, — это тенденция рисовать фигуры шрифтами. Имеется в виду геометрические фигуры, лестницы, круги или кривые, которые повторяют другие элементы дизайна. Формы могут быть как двухмерными, так и трехмерными.
- Полупрозрачность также будет в моде. В 2020 году мы уже видели эту тенденцию в разных формах: частично перекрывающиеся слова, «двойная типографика» с другим прозрачным шрифтом или просто полупрозрачные шрифты на фоне фотографий и других элементов композиции.
Шрифт Сontraband
Шрифт Dream
3. Тёмная тема
Иногда самые впечатляющие тенденции веб-дизайна возникают по очень практическим причинам. Темные изображения считаются лучшими для OLED-экранов, поскольку они экономят энергию и продлевают срок службы экрана. Кроме того, они действительно хорошо смотрятся. А темные фоны улучшают видимость акцентных цветов, способствуя этим по-настоящему динамичному дизайну сайта. К слову, на Аwwwords. регулярно попадают в Топ победителей. Такой дизайн позволяет сфокусироваться на качественном и продуманном user-experience.
Темный веб дизайн не только выглядят ультрасовременным и радует глаз, но позволяет расставить акценты, не перегружая деталями.
По совпадению, популярность темного дизайна также идеально сочетается и с другими преобладающими тенденциями дизайна в 2020 году: это, прежде всего, сочетание темных цветов с яркими неонами, и широкое использование футуристических, но темных стилей киберпанка и антиутопии.
4. Яркие и люминесцентные краски
Так называемые, футуристические цвета также будут модными и в следующем году.
В 2020 году мы увидим все более смелые сочетания цветов, которые будут использоваться стратегически для того, чтобы веб-дизайн «выпрыгивал» с экрана. Веб дизайн становится все смелее и свободнее. Использованиенасыщенных цветов, в сочетании с более темными и приглушенными оттенками, позволяет добиться неонового эффекта, светящегося в темноте.
В частности, двухцветный дизайн придает этой тенденции блеск. Этот вариант двухцветного дизайна (мы говорим о тенденции сочетания неонов с темными цветами) является самым смелым на сегодняшний день . И мы надеемся увидеть что-то еще более смелое и яркое в 2020 году.
5. 3D элементы дизайна
В 2020 году мы надеемся увидеть еще более впечатляющие варианты 3D веб дизайна, визуально нарушающие границы между цифровым пространством и реальностью.
3D-изображения всегда привлекали пользователей. Эта тенденция не получила широкое распространение из-за высокой стоимости технологии. Однако, современные технологии позволяют разрабатывать 3D-элементы без оборудования уровня NASA, тем самым открывая двери в мир 3D большему количеству пользователей.
Пока виртуальная реальность не станет более традиционным решением, трёхмерная графика будет оставаться лучшим способом удивить ваших пользователей захватывающими спецэффектами. Это поможет привлечь внимание и повысить трафик вашего сайта.
3D дизайн может принимать разные формы. То, что мы видели в 2018 и 2019 годах, было трехмерными иллюстрациями. Со временем эта тенденция эволюционировала и приобрела другие очертания. Скорее всего, в будущем мы увидим гораздо больше вариаций 3D-дизайна: статических, анимированных и интерактивных.
В 2020 году эта тенденция станет наиболее востребованной, чем когда-либо. Веб-дизайнеры удивят нас интерактивными 3D-эффектами, которые буквально приклеивают глаза пользователя к странице сайта.
Что касается статичной 3D-графики, нас также удивят мягкие формы, реалистичный вид и яркие цвета. В случае использования 3D, дизайнеры, как правило, стараются свести к минимуму остальные элементы, чтобы конечный результат выглядел хорошо сбалансированным и не перегруженным.
6. Мягкие тени и плавающие элементы
Эта тенденция также посвящена созданию глубины в 2D-пространстве вашей страницы.
Вам нравится 3D-эффект, но вы думаете, что это через чур? Тогда выбирайте мягкие тени и плавающие элементы, которые могут добавить немного глубины в стиле «3D Lite». И речь идет не только о графике. Вы также можете добиться того же эффекта с помощью текстов.
Стараясь выйти за привычные рамки, дизайнеры могут добавить немного больше динамики и глубины в свои 2D-проекты, используя мягкие тени и размещая элементы друг над другом. Эта тенденция полностью противоположна классическому плоскому дизайну, в котором слои сайта кажутся … ну, абсолютно плоскими.
7. Микс фотографий и графики
Креативная тенденция в современном веб дизайне — комбинировать фотографии с очень простыми и зачастую рукописными 2D-иллюстрациями. Используя эту технику, дизайнеры заменяют части фотографий иллюстрациями, создавая забавную смесь двух реальностей.
Миксуя оригинальную графику с реальными фотографиями, дизайнер создает нечто совершенно неординарное и привлекающее внимание.
Используя эту тенденцию, не забывайте, чтобы стиль иллюстраций и графики соответствовал общему стилю вашего веб-ресурса. Именно этот стиль может повлиять на то, как люди интерпретируют фотографию:героев мультфильмов ожидают увидеть на веселых веб-страницах, а геометрические иллюстрации подходят как для серьезных сайтов, так и для более неформальных ресурсов.
8. Негативное пространство
Сегодня дизайнеры экспериментируют с различными способами использования пустого пространства (фактически это пространство любого цвета, и не только белого цвета) для создания структуры дизайна и улучшения user-experience.
Эксперты прогнозируют, что к 2020 году дизайнеры будут использовать еще больше пустого пространства в своих работах. Обрамляя элемент дизайна большим количеством негативного пространства, мы делаем акцент на этом элементе. В те же время, такой дизайн остается чистым и не перегружен деталями. Тщательно структурированное пустое пространство создает приятное ощущение упорядоченности и помогает удобно организовать разделы страницы.
9. Ультраминимализм в навигации
Из-за растущей популярности небольших портативных устройств веб дизайн год от года глубже уходят в минимализм. Это необходимо для качества user-experience на страницах смартфонов. Более всего эта тенденция затронула навигацию по сайту. В последние годы навигация стала еще проще вписываться в очень маленькие устройства, даже такие как умные часы.
User-experience очень выигрывает от такой тенденции. Чем меньше вы думаете о том, где нажимать, тем больше времени вы можете уделить контенту сайта, просматривая его страницы, а не гадая, как найти нужную информацию.
В то же время важность изображений возрастает. Если на какой-либо странице мало текста, большие изображения автоматически становятся центром вашей композиции. Тем не менее, убедитесь, что вы используете великолепные мощные визуальные эффекты, которые действительно говорят более тысячи слов.
10. Оптимизированный дизайн для большого пальца
Адаптивный веб дизайн уже не тренд, а требование современной жизни. Сегодня ваш сайт ДОЛЖЕН работать хорошо и быть простым и понятным в использовании на мобильных устройствах. Но к 2020 году все будут смотреть на создание веб-сайтов, удобных для большого пальца, то есть оптимизированных для пользования одной рукой.
Возможно, для кого-то это прозвучит странно, но большинство мобильных пользователей держат свои устройства в одной руке, пролистывая страницы большими пальцами.
Принимая во внимание поведение пользователей мобильных устройств, веб-дизайнеры будут тратить больше времени на упрощение навигации по своим сайтам. Они постараются организовать свои проекты так, чтобы кнопки, меню, вкладки и другие важные элементы были легко доступны с помощью большого.
Поэтому мы рекомендуем вам не забывать об этой тенденции в 2020 году.
11. IVU — голосовой интерфейс пользователя
Пять крупнейших технологических компаний инвестируют миллиарды долларов в развитие и совершенствование своих помощников по искусственному интеллекту.Siri, Apple iOS и HomePods, такие как Google Home, появляются в домах более 40 миллионов пользователей в месяц.
Технология IVU делает возможным голосовое общение между людьми и компьютерами.Проще говоря, это технология распознавания человеческого голоса, которая позволяет компьютеру понимать голосовые команды и даже отвечать на вопросы.Хотя голосовое управление различными устройствами становится частью нашей повседневной жизни, такая технология все еще не может полностью контролировать наш веб-опыт.
Согласно прогнозам к 2020 году 50% всех поисковых запросов будет осуществляться с помощью голоса. Фактически, некоторые эксперты даже думают, что клавиатура исчезнет через пять лет из-за невероятного развития пользовательских голосовых интерфейсов. Таким образом, IVU несомненно повлияет на тенденции в веб-дизайне и изменит наш взгляд на информацию в Интернете в 2020 году.
Следующая статистика иллюстрирует, как и почему IVU является одной из самых важных тенденций вебдизайна на 2020 год:
- Ожидается, что к 2022 году IVU станет каналом в 40 миллиардов долларов. (Источник:OC & C Strategy Consultants).
- Согласно статистике, к 2022 году 55% домохозяйств будут иметь интеллектуальные устройства с голосовым управлением (Источник: OC & C Strategy Consultants).
- 65% пользователей в возрасте от 25 до 49 лет используют свои устройства IVU хотя бы раз в день.(Источник:PwC).
- 61% пользователей в возрасте от 25 до 64 лет говорят, что в будущем они будут чаще использовать свои голосовые устройства.(Источник:PwC).
Скорость внедрения интерфейсов с управлением голосом пользователей на сайтах в настоящее время относительно невелика. Однако нам кажется, что IVU станет новым веб-стандартом в недалеком будущем.
12. AI и чат-боты
Веб-интерактивность пользуется большим спросом благодаря популярности платформ социальных сетей и приложений для обмена сообщениями. В этом смысле все большее число пользователей выбирают сайты с чат-ботами. Это происходит по разным причинам.
Исследования, проведенные Gartner, Inc., показывают, что в 2020 году 25% всех операций по обслуживанию клиентов будут включать технологию виртуального помощника (на английском языке, VCA) или чат-бота.Для сравнения, в 2017 году процент участия чат-ботов составлял всего 2%.Кроме того, в 2020 году прогнозируется, что 85% взаимодействия с клиентами будет осуществляться без участия человека-агента.Почему?Потому что люди ожидают, что смогут связаться с вашей компанией 24/7.К счастью, чат-боты могут отвечать на вопросы, когда живые чат-агенты не могут этого сделать (например, ночью), а также они могут приглашать посетителей на определенные страницы, чтобы выполнить нужные действия, например, встречи с книгами.
Это подразумевает, что в будущем все больше и больше веб-сайтов будут интегрировать чат-ботов, что избавит от необходимости встраивать живые чаты и нанимать большие команды агентов поддержки.Может даже случиться, что контактные формы и другие «безличные» контактные каналы будут полностью удалены, когда чат-боты смогут отвечать на все входящие вопросы и обслуживать всех клиентов.
13. Дизайн адаптированный для людей с ограниченными возможностями
Доступность и удобство становятся все более важными концепциями во всем мире. Это способствует развитию тенденции создания сайтов, адаптированных для пользователей с ограниченными возможностями. Другими словами, речь идет о создании сайтов, доступных каждому.
Вот некоторые «хитрости» веб-сайтов, адаптированных для людей с ограниченными возможностями, которые вы сможете реализовать на своем сайте в следующем году: добавьте режим дальтонизма и позаботьтесь о написании соответствующих альтернативных тегов изображений, чтобы сделать ваш сайт более легким в использовании. с нарушениями зрения, а также добавление субтитров и транскриптов видео для облегчения жизни пользователей с нарушениями слуха и интеграции функции голосовой навигации (не забывайте, что IVU является одной из ключевых тенденций на 2020 год) для людей с ограниченными возможностями.
Также свои позиции сохранят такие тренды, как «white space» и минимализм. На самом деле тренды можно перечислять бесконечно: цвета, градиенты, чат боты, виртуальная реальность, но самым главным трендом всех времен остается уже много лет профессионализм.
Ключевая идея всех тенденций 2020 года состоит в том, чтобыустранить грань между реальностью и виртуальной жизнью и тем самым заставить пользователя погрузиться в сайт, даже не замечая каких-либо препятствий, ни в отношении взаимодействия со страницей, ни с получением необходимой информации.
Наконец, тенденции приходят и уходят.Некоторые остаются на десятилетия, а другие длятся всего пару месяцев.
Выберите тенденции дизайна, которые наилучшим образом отражают ценности вашей компании. Если говорят, что что-то «модно» это не значит, что этой тенденции обязательно нужно следовать. Вы должны выбрать тренды, которые помогут вам создавать эффективные, привлекательные и запоминающиеся продукты. Как же не растеряться во всём этом разнообразии и на что стоит ориентироваться? Мы спросили у наших дизайнеров с многолетним опытом:
Как вы вдохновляетесь создавая шаблоны?
Самый простой способ для вдохновения — пересмотреть работы других авторов. Ведь придумать что либо с нуля — просто невозможно. Это вовсе не значит украсть идею, смысл в том, чтобы вдохновиться, понять что сейчас актуально, запастись креативными идеями, позитивным и даже негативным опытом, чтобы избежать каких-то ошибок.
А еще наша команда часто ищет вдохновение в простых вещах. Ведь не обязательно вдохновение приносит что-то новое. Иногда это самые обыкновенные вещи, окружающие нас ежедневно, на которые внезапно ты посмотришь свежим взглядом.
Какие тенденции веб дизайна, на ваш взгляд, заслуживают внимания в 2020?
Прежде всего можно выделить тренд, который будет на вершине еще не один год — Mobile First. Веб-страница должна быть читаемой и внешне привлекательной на любом экране или его части. Потому адаптивность – одно из ключевых требований веб-дизайна.
Также свои позиции сохранят такие тренды, как «white space» и минимализм. На самом деле, тренды можно перечислять бесконечно: цвета, градиенты, чат боты, виртуальная реальность, но самым главным трендом всех времен остается уже много лет профессионализм.
Читайте также:
Лого-тренды 2020 года
Тренд веб-дизайна: пузырьки, кругляшки и капельки
Лучшие цвета для оформления сайта: палитры из кино
10+ трендов веб дизайна 2020
Уже декабрь, и мы, как всегда, затаив дыхание, хотим узнать, что же нас ждёт в следующем году. Неудивительно, что в конце года в индустрии веб дизайна возникает вопрос на милион долларов: чего ожидать? Иными словами, какие же тренды веб дизайна будут преобладать в 2020 году?
Что ж, на этот вопрос мы постараемся ответить в этом посте.
Но прежде чем начать разговор о трендах, нужно упомянуть, что, как правило, в мире веб технологий не существует очень быстрой смены тенденций. Поэтому многие из них не являются абсолютно новыми. Некоторые тренды уже прошли испытание временем, но не потеряли свою актуальность. Они превратились из тенденции в требование, поскольку продемонстрировали свою эффективность в user-experience и полюбились пользователям. Никто не сомневается, что дизайн сайта очень важен для любого онлайн проекта, будь то интернет магазин или личный блог. Дизайн вашего сайта, это первое, что видит пользователь. И от этого впечатления во многом зависит его отношение к вашему проекту.
Веб дизайнеры TemplateMonster маркетплейс, помогли нам выделить основные актуальные тренды 2020.
Екатерина Кирьянова, Евгений Коршунович, Игорь Хизниченко, Ирина Ковалевич
Веб дизайнеры TemplateMonster Маркетплейс
Итак, давайте перейдем к делу.
- Несовершенства, подчеркивающие индивидуальность
- Безумие типографики
- Тёмная тема
- Яркие и люминесцентные краски
- 3D элементы дизайна
- Мягкие тени и плавающие элементы
- Микс фото и графики
- Негативное пространство
- Ультраминимализм в навигации
- Оптимизированный дизайн для большого пальца
- IVU — голосовой интерфейс пользователя
- Дизайн адаптированный для людей с ограниченными возможностями
- Рекомендации веб дизайнеров TemplateMonster маркетплейс
Содержание статьи
- 1 1. Небольшие недостатки, подчеркивающие индивидуальность
- 1.1
2. Безумие типографики - 1.2 3. Тёмная тема
- 1.3 4. Яркие и люминесцентные краски
- 1.4 5. 3D элементы дизайна
- 1.5 6. Мягкие тени и плавающие элементы
- 1.6 7. Микс фотографий и графики
- 1.7
8. Негативное пространство - 1.8
9. Ультраминимализм в навигации - 1.9 10. Оптимизированный дизайн для большого пальца
- 1.10 11. IVU — голосовой интерфейс пользователя
- 1.11
12. AI и чат-боты - 1.12
Веб-интерактивность пользуется большим спросом благодаря популярности платформ социальных сетей и приложений для обмена сообщениями. В этом смысле все большее число пользователей выбирают сайты с чат-ботами. Это происходит по разным причинам.
Исследования, проведенные Gartner, Inc., показывают, что в 2020 году 25% всех операций по обслуживанию клиентов будут включать технологию виртуального помощника (на английском языке, VCA) или чат-бота. Для сравнения, в 2017 году процент участия чат-ботов составлял всего 2%. Кроме того, в 2020 году прогнозируется, что 85% взаимодействия с клиентами будет осуществляться без участия человека-агента. Почему? Потому что люди ожидают, что смогут связаться с вашей компанией 24/7. К счастью, чат-боты могут отвечать на вопросы, когда живые чат-агенты не могут этого сделать (например, ночью), а также они могут приглашать посетителей на определенные страницы, чтобы выполнить нужные действия, например, встречи с книгами.
Это подразумевает, что в будущем все больше и больше веб-сайтов будут интегрировать чат-ботов, что избавит от необходимости встраивать живые чаты и нанимать большие команды агентов поддержки. Может даже случиться, что контактные формы и другие «безличные» контактные каналы будут полностью удалены, когда чат-боты смогут отвечать на все входящие вопросы и обслуживать всех клиентов.
13. Дизайн адаптированный для людей с ограниченными возможностями
- 1.1
1. Небольшие недостатки, подчеркивающие индивидуальность
- Рукописные элементы дизайна
Очевидно несовершенные и нарисованные от руки элементы дизайна добавляют эмоциональность и человеческое тепло к дизайну сайта. Технический прогресс уже на протяжении многих лет уже определяет развитие области веб-дизайна. Так, как получается, что ручные рисунки стали привлекательными? Почему бы не сохранить изображения и фотографии с высоким разрешением, которые обычно ассоциируются с впечатляющим и качественным веб-дизайном?
Похоже, что пользователи жаждут увидеть что-то несовершенное и уникальное после того, как увидели так много отточенных, но обезличенных вариантов дизайна за последние несколько лет. В 2020 году добавление некоторой «рисованной реальности» вдохнет в ваш сайт душу, которой порой не хватает.
Иконки и другие нарисованные от руки элементы помогут подчеркнуть индивидуальность вашего бренда и выделиться среди конкурентов.
Будь то рукописные шрифты или иллюстрации, в 2020 году мы увидим, как все больше и больше дизайнеров добавляют намеренно не идеально отрисованные элементы в свои веб-проекты. Особенно эффектно они смотрятся, на фоне минималистического дизайна веб страницы.
Посмотрите пару примеров использования нарисованных от руки элементов в премиальных шаблонах цифрового рынка TemplateMonster:
Шрифт Rohman
Шрифт Ghost
Набор рукописных иллюстраций
- Асимметричные конструкции
Тенденция асимметрии продолжала расти в течение всего 2019 года. В 2020 году она не потеряет свою актуальность. Эта идея состоит в том, чтобы сайты выглядят менее «блочными» и имеют меньше прямых граней. Такой дизайн выглядит свежи и необычно.
Асимметричные рисунки кажутся намного интереснее и привлекают больше внимание. В 2020 году мы увидим различные уровни асимметрии в дизайне: от легкого до очень броского. Однако, вы никогда не должны забывать о визуальном балансе. Помните, что асимметрия должна сделать ваш сайт более запоминающимся, но не лишить гармонии.
2. Безумие типографики
- Еще одним трендом, который мы наблюдаем в этом году, является использование огромных шрифтов и смелых названий. В 2020 году его популярность будет возрастать, образно и в буквальном смысле слова.
Чтобы создать более инновационные и оригинальные макеты, дизайнеры продолжат экспериментировать с типографикой. Художественная типографика, раскрашенная в красивые, сочные цвета, состоящая из геометрических фигур или более креативных элементов, несомненно, привлечет внимание к текстовому сообщению. Акцент на контенте продолжает набирать обороты в веб индустрии.
- В настоящее время тенденция отказа от обезличенных стандартных шрифтов в пользу рукописных получает все больше внимания. Но речь идет не только о выборе визуально привлекательных шрифтов и их правильном сочетании, но и об использовании «слов» как основного элемента эстетики и семантики. Слова теперь физически присутствуют в дизайне и служат ключевым структурным элементом композиции. Это все еще смотрится несколько необычно. Однако, при правильном использовании этого элемента дизайна, такие сайты выглядит стильно и впечатляюще.
В 2020 году все больше дизайнеров начнут обрабатывать шрифты так же, как они обычно обрабатывают другие графические элементы. Они будут применять деформации, эффекты и анимацию к шрифтам своих проектов, а также комбинировать различные стили и размеры, жирный, курсив, с засечками и без … почти все мыслимое в одном абзаце.
Еще одна замечательная тенденция касательно типографики, которую мы увидим в следующем году, — это тенденция рисовать фигуры шрифтами. Имеется в виду геометрические фигуры, лестницы, круги или кривые, которые повторяют другие элементы дизайна. Формы могут быть как двухмерными, так и трехмерными.
- Полупрозрачность также будет в моде. В 2020 году мы уже видели эту тенденцию в разных формах: частично перекрывающиеся слова, «двойная типографика» с другим прозрачным шрифтом или просто полупрозрачные шрифты на фоне фотографий и других элементов композиции.
Шрифт Сontraband
Шрифт Dream
3. Тёмная тема
Иногда самые впечатляющие тенденции веб-дизайна возникают по очень практическим причинам. Темные изображения считаются лучшими для OLED-экранов, поскольку они экономят энергию и продлевают срок службы экрана. Кроме того, они действительно хорошо смотрятся. А темные фоны улучшают видимость акцентных цветов, способствуя этим по-настоящему динамичному дизайну сайта. К слову, на Аwwwords. регулярно попадают в Топ победителей. Такой дизайн позволяет сфокусироваться на качественном и продуманном user-experience.
Темный веб дизайн не только выглядят ультрасовременным и радует глаз, но позволяет расставить акценты, не перегружая деталями.
По совпадению, популярность темного дизайна также идеально сочетается и с другими преобладающими тенденциями дизайна в 2020 году: это, прежде всего, сочетание темных цветов с яркими неонами, и широкое использование футуристических, но темных стилей киберпанка и антиутопии.
4. Яркие и люминесцентные краски
Так называемые, футуристические цвета также будут модными и в следующем году.
В 2020 году мы увидим все более смелые сочетания цветов, которые будут использоваться стратегически для того, чтобы веб-дизайн «выпрыгивал» с экрана. Веб дизайн становится все смелее и свободнее. Использование насыщенных цветов, в сочетании с более темными и приглушенными оттенками, позволяет добиться неонового эффекта, светящегося в темноте.
В частности, двухцветный дизайн придает этой тенденции блеск. Этот вариант двухцветного дизайна (мы говорим о тенденции сочетания неонов с темными цветами) является самым смелым на сегодняшний день . И мы надеемся увидеть что-то еще более смелое и яркое в 2020 году.
5. 3D элементы дизайна
В 2020 году мы надеемся увидеть еще более впечатляющие варианты 3D веб дизайна, визуально нарушающие границы между цифровым пространством и реальностью.
3D-изображения всегда привлекали пользователей. Эта тенденция не получила широкое распространение из-за высокой стоимости технологии. Однако, современные технологии позволяют разрабатывать 3D-элементы без оборудования уровня NASA, тем самым открывая двери в мир 3D большему количеству пользователей.
Пока виртуальная реальность не станет более традиционным решением, трёхмерная графика будет оставаться лучшим способом удивить ваших пользователей захватывающими спецэффектами. Это поможет привлечь внимание и повысить трафик вашего сайта.
3D дизайн может принимать разные формы. То, что мы видели в 2018 и 2019 годах, было трехмерными иллюстрациями. Со временем эта тенденция эволюционировала и приобрела другие очертания. Скорее всего, в будущем мы увидим гораздо больше вариаций 3D-дизайна: статических, анимированных и интерактивных.
В 2020 году эта тенденция станет наиболее востребованной, чем когда-либо. Веб-дизайнеры удивят нас интерактивными 3D-эффектами, которые буквально приклеивают глаза пользователя к странице сайта.
Что касается статичной 3D-графики, нас также удивят мягкие формы, реалистичный вид и яркие цвета. В случае использования 3D, дизайнеры, как правило, стараются свести к минимуму остальные элементы, чтобы конечный результат выглядел хорошо сбалансированным и не перегруженным.
6. Мягкие тени и плавающие элементы
Эта тенденция также посвящена созданию глубины в 2D-пространстве вашей страницы.
Вам нравится 3D-эффект, но вы думаете, что это через чур? Тогда выбирайте мягкие тени и плавающие элементы, которые могут добавить немного глубины в стиле «3D Lite». И речь идет не только о графике. Вы также можете добиться того же эффекта с помощью текстов.
Стараясь выйти за привычные рамки, дизайнеры могут добавить немного больше динамики и глубины в свои 2D-проекты, используя мягкие тени и размещая элементы друг над другом. Эта тенденция полностью противоположна классическому плоскому дизайну, в котором слои сайта кажутся … ну, абсолютно плоскими.
7. Микс фотографий и графики
Креативная тенденция в современном веб дизайне — комбинировать фотографии с очень простыми и зачастую рукописными 2D-иллюстрациями. Используя эту технику, дизайнеры заменяют части фотографий иллюстрациями, создавая забавную смесь двух реальностей.
Миксуя оригинальную графику с реальными фотографиями, дизайнер создает нечто совершенно неординарное и привлекающее внимание.
Используя эту тенденцию, не забывайте, чтобы стиль иллюстраций и графики соответствовал общему стилю вашего веб-ресурса. Именно этот стиль может повлиять на то, как люди интерпретируют фотографию: героев мультфильмов ожидают увидеть на веселых веб-страницах, а геометрические иллюстрации подходят как для серьезных сайтов, так и для более неформальных ресурсов.
8. Негативное пространство
Сегодня дизайнеры экспериментируют с различными способами использования пустого пространства (фактически это пространство любого цвета, и не только белого цвета) для создания структуры дизайна и улучшения user-experience.
Эксперты прогнозируют, что к 2020 году дизайнеры будут использовать еще больше пустого пространства в своих работах. Обрамляя элемент дизайна большим количеством негативного пространства, мы делаем акцент на этом элементе. В те же время, такой дизайн остается чистым и не перегружен деталями. Тщательно структурированное пустое пространство создает приятное ощущение упорядоченности и помогает удобно организовать разделы страницы.
9. Ультраминимализм в навигации
Из-за растущей популярности небольших портативных устройств веб дизайн год от года глубже уходят в минимализм. Это необходимо для качества user-experience на страницах смартфонов. Более всего эта тенденция затронула навигацию по сайту. В последние годы навигация стала еще проще вписываться в очень маленькие устройства, даже такие как умные часы.
User-experience очень выигрывает от такой тенденции. Чем меньше вы думаете о том, где нажимать, тем больше времени вы можете уделить контенту сайта, просматривая его страницы, а не гадая, как найти нужную информацию.
В то же время важность изображений возрастает. Если на какой-либо странице мало текста, большие изображения автоматически становятся центром вашей композиции. Тем не менее, убедитесь, что вы используете великолепные мощные визуальные эффекты, которые действительно говорят более тысячи слов.
10. Оптимизированный дизайн для большого пальца
Адаптивный веб дизайн уже не тренд, а требование современной жизни. Сегодня ваш сайт ДОЛЖЕН работать хорошо и быть простым и понятным в использовании на мобильных устройствах. Но к 2020 году все будут смотреть на создание веб-сайтов, удобных для большого пальца, то есть оптимизированных для пользования одной рукой.
Возможно, для кого-то это прозвучит странно, но большинство мобильных пользователей держат свои устройства в одной руке, пролистывая страницы большими пальцами.
Принимая во внимание поведение пользователей мобильных устройств, веб-дизайнеры будут тратить больше времени на упрощение навигации по своим сайтам. Они постараются организовать свои проекты так, чтобы кнопки, меню, вкладки и другие важные элементы были легко доступны с помощью большого.
Поэтому мы рекомендуем вам не забывать об этой тенденции в 2020 году.
11. IVU — голосовой интерфейс пользователя
Пять крупнейших технологических компаний инвестируют миллиарды долларов в развитие и совершенствование своих помощников по искусственному интеллекту. Siri, Apple iOS и HomePods, такие как Google Home, появляются в домах более 40 миллионов пользователей в месяц.
Технология IVU делает возможным голосовое общение между людьми и компьютерами. Проще говоря, это технология распознавания человеческого голоса, которая позволяет компьютеру понимать голосовые команды и даже отвечать на вопросы. Хотя голосовое управление различными устройствами становится частью нашей повседневной жизни, такая технология все еще не может полностью контролировать наш веб-опыт.
Согласно прогнозам к 2020 году 50% всех поисковых запросов будет осуществляться с помощью голоса. Фактически, некоторые эксперты даже думают, что клавиатура исчезнет через пять лет из-за невероятного развития пользовательских голосовых интерфейсов. Таким образом, IVU несомненно повлияет на тенденции в веб-дизайне и изменит наш взгляд на информацию в Интернете в 2020 году.
Следующая статистика иллюстрирует, как и почему IVU является одной из самых важных тенденций вебдизайна на 2020 год:
- Ожидается, что к 2022 году IVU станет каналом в 40 миллиардов долларов. (Источник: OC & C Strategy Consultants ).
- Согласно статистике, к 2022 году 55% домохозяйств будут иметь интеллектуальные устройства с голосовым управлением (Источник: OC & C Strategy Consultants ).
- 65% пользователей в возрасте от 25 до 49 лет используют свои устройства IVU хотя бы раз в день. (Источник: PwC ).
- 61% пользователей в возрасте от 25 до 64 лет говорят, что в будущем они будут чаще использовать свои голосовые устройства. (Источник: PwC ).
Скорость внедрения интерфейсов с управлением голосом пользователей на сайтах в настоящее время относительно невелика. Однако нам кажется, что IVU станет новым веб-стандартом в недалеком будущем.
12. AI и чат-боты
Веб-интерактивность пользуется большим спросом благодаря популярности платформ социальных сетей и приложений для обмена сообщениями. В этом смысле все большее число пользователей выбирают сайты с чат-ботами. Это происходит по разным причинам.
Исследования, проведенные Gartner, Inc., показывают, что в 2020 году 25% всех операций по обслуживанию клиентов будут включать технологию виртуального помощника (на английском языке, VCA) или чат-бота. Для сравнения, в 2017 году процент участия чат-ботов составлял всего 2%. Кроме того, в 2020 году прогнозируется, что 85% взаимодействия с клиентами будет осуществляться без участия человека-агента. Почему? Потому что люди ожидают, что смогут связаться с вашей компанией 24/7. К счастью, чат-боты могут отвечать на вопросы, когда живые чат-агенты не могут этого сделать (например, ночью), а также они могут приглашать посетителей на определенные страницы, чтобы выполнить нужные действия, например, встречи с книгами.
Это подразумевает, что в будущем все больше и больше веб-сайтов будут интегрировать чат-ботов, что избавит от необходимости встраивать живые чаты и нанимать большие команды агентов поддержки. Может даже случиться, что контактные формы и другие «безличные» контактные каналы будут полностью удалены, когда чат-боты смогут отвечать на все входящие вопросы и обслуживать всех клиентов.
13. Дизайн адаптированный для людей с ограниченными возможностями
Доступность и удобство становятся все более важными концепциями во всем мире. Это способствует развитию тенденции создания сайтов, адаптированных для пользователей с ограниченными возможностями. Другими словами, речь идет о создании сайтов, доступных каждому.
Вот некоторые «хитрости» веб-сайтов, адаптированных для людей с ограниченными возможностями, которые вы сможете реализовать на своем сайте в следующем году: добавьте режим дальтонизма и позаботьтесь о написании соответствующих альтернативных тегов изображений, чтобы сделать ваш сайт более легким в использовании. с нарушениями зрения, а также добавление субтитров и транскриптов видео для облегчения жизни пользователей с нарушениями слуха и интеграции функции голосовой навигации (не забывайте, что IVU является одной из ключевых тенденций на 2020 год) для людей с ограниченными возможностями.
Также свои позиции сохранят такие тренды, как «white space» и минимализм. На самом деле тренды можно перечислять бесконечно: цвета, градиенты, чат боты, виртуальная реальность, но самым главным трендом всех времен остается уже много лет профессионализм.
Ключевая идея всех тенденций 2020 года состоит в том, чтобы устранить грань между реальностью и виртуальной жизнью и тем самым заставить пользователя погрузиться в сайт, даже не замечая каких-либо препятствий, ни в отношении взаимодействия со страницей, ни с получением необходимой информации.
Наконец, тенденции приходят и уходят. Некоторые остаются на десятилетия, а другие длятся всего пару месяцев.
Выберите тенденции дизайна, которые наилучшим образом отражают ценности вашей компании. Если говорят, что что-то «модно» это не значит, что этой тенденции обязательно нужно следовать. Вы должны выбрать тренды, которые помогут вам создавать эффективные, привлекательные и запоминающиеся продукты. Как же не растеряться во всём этом разнообразии и на что стоит ориентироваться? Мы спросили у наших дизайнеров с многолетним опытом:
Как вы вдохновляетесь создавая шаблоны?
Самый простой способ для вдохновения — пересмотреть работы других авторов. Ведь придумать что либо с нуля — просто невозможно. Это вовсе не значит украсть идею, смысл в том, чтобы вдохновиться, понять что сейчас актуально, запастись креативными идеями, позитивным и даже негативным опытом, чтобы избежать каких-то ошибок.
А еще наша команда часто ищет вдохновение в простых вещах. Ведь не обязательно вдохновение приносит что-то новое. Иногда это самые обыкновенные вещи, окружающие нас ежедневно, на которые внезапно ты посмотришь свежим взглядом.
Какие тенденции веб дизайна, на ваш взгляд, заслуживают внимания в 2020?
Прежде всего можно выделить тренд, который будет на вершине еще не один год — Mobile First. Веб-страница должна быть читаемой и внешне привлекательной на любом экране или его части. Потому адаптивность – одно из ключевых требований веб-дизайна.
Также свои позиции сохранят такие тренды, как «white space» и минимализм. На самом деле, тренды можно перечислять бесконечно: цвета, градиенты, чат боты, виртуальная реальность, но самым главным трендом всех времен остается уже много лет профессионализм.
Какими будут сайты в 2020 году: тренды веб-разработки, веб-дизайна и интернет-маркетинга
Если бы Илон Маск следил за трендами дизайна, Cybertruck, скорее всего, выглядел бы иначе и не стал бы мемом. Чтобы ваш сайт не превратился в предмет насмешек, а методы продвижения приносили деньги вам, а не только подрядчикам по интернет-маркетингу, мы проанализировали запросы наших клиентов за этот год, опросили наших разработчиков, дизайнеров, интернет-маркетологов и отдел продаж, о том, куда движется digital, и собрали самые важные, по нашему мнению, тренды веб-разработки, веб-дизайна и интернет-маркетинга в 2020 году вместе.
Презентация Чуранова Евгения Эффективный сайт 2020
Тренды веб-разработки
Тренды веб-дизайна
Тренды интернет-маркетинга
Тренды в сфере разработки и дизайна сайтов зависят от трех ключевых факторов: поведение интернет-пользователей, спрос со стороны заказчиков сайтов и технологическое развитие. Они влияют на отрасль в комплексе. Когда все три фактора учтены, мы получаем тенденцию, которая скорее всего выстрелит в ближайшем будущем. Мы собрали самые важные прогнозы, на которые команда WebCanape делает ставку в следующем году.
Аналитика бизнеса — первый этап веб-разработки
Если раньше нам приходилось убеждать клиентов «раскрыться» перед нами, чтобы создать сайт, максимально соответствующих их бизнес задачам, то сейчас многие уже осознают важность предпроектной аналитики бизнеса. У нас изучение компании, процессов, продуктов и аудитории включено в услугу разработки сайта.
Юрий Милютин
руководитель отдела продаж
Все больше клиентов готовы начинать разработку сайта с этапа аналитики. На этом этапе мы анализируем нишу клиента, его прямых конкурентов, целевую аудиторию. На основе этого формируется структура сайта, разрабатываются функциональные решения. Естественно, это удорожает процесс, но позволяет сдавать сайт, конкурентоспособный, полностью готовый к работе — это по-настоящему эффективный инструмент привлечения клиентов.
Анжелика Трофимова
директор
Заказчики сайтов хотят получать результат разработки быстро и при этом платить меньше. На первый взгляд, аналитика бизнеса, которая увеличивает чек на разработку, не очень вяжется с этим желанием, но в пересчете на реальные деньги это все равно выходит для клиента выгоднее. Ведь сайт уже на старте «заточен» под выполнение реальных бизнес-задач, и его не придется переделывать.
Кроме того, аналитика бизнеса до начала разработки позволяет проявить заботу о посетителе. Мы рисуем портреты пользователей и создаем сайты, которые будут им нравиться. Сегодня без тщательной проработки пути пользователя по сайту сложно добиться хорошей конверсии.
Интеграции с внешними системами
Анжелика Трофимова, директор:
Сегодня компаниям необходима интеграция сайта с их маркетинговыми и бизнес-процессами. Наши клиенты сами приходят с этими запросами, и их становится все больше. Без внедрения CRM и систем комплексной аналитики сложно понять, окупается ли сайт и что делать, чтобы он работал еще эффективнее.
Юрий Милютин, руководитель отдела продаж:
Клиенты хотят погружаться в анализ результатов, понимать окупаемость вложенных в интернет-маркетинг денег.
Татьяна Матвеенкова
руководитель отдела Performance-маркетинга
Все больше клиентов интегрируют рекламные системы с системами аналитики и CRM. Без хорошей аналитики невозможна качественная оптимизация. Тут в целом ничего нового, но при растущей конкуренции похвастаться хорошими результатами смогут только те, кто выстраивает глубокую сквозную аналитику.
Интерактив и геймификация
Анжелика Трофимова, директор:
Посетителей привлекают игровые моменты: тесты, викторины, мини-квесты. Пользователь хочет получать полезный контент, но делать это без труда. Задачи коммерческого сайта в 2020 году — вовлечь, развлечь, обучить и только после этого продать.
Дмитрий Савушкин
руководитель отдела дизайна
Пользователям скучно листать простые сайты наполненные текстами, картинками и каталогом. Калькуляторы расчета, фильтры подбора, пошаговые инструкции, опросники, квесты, игры — все добавляет вовлеченности. Когда-то делали для оконного сайта однорукого бандита, у которого можно было выиграть москитную сетку или подоконник. Дизайн был ужасным, но затея отличная.
Мобильность, адаптивность, отзывчивость
Анжелика Трофимова, директор:
Несмотря на то, что адаптивность — это уже несколько лет стандарт веб-разработки, многие сайты по-прежнему плохо выглядят и функционируют на смартфонах. Сегодня уже недостаточно делать гибкую сетку для масштабирования дизайна. Нужно грамотно прорабатывать точки слома в мобильной версии и в принципе адаптировать контент страницы под мобильных пользователей, которые нацелены на быстрый поиск и восприятие информации в движении.
Все телефоны на сайте должны быть кликабельными и звонибельными.
Дмитрий Савушкин, руководитель отдела дизайна:
Адаптивные сайты делать научились все, но многие (и мы в том числе) по-прежнему считают десктопное разрешение основным, хотя современный человек большинство своих задач решает именно через телефон. Такой подход не очень эффективен в разработке сайтов. Самый простой пример — много графики и избыточность элементов еще можно терпеть на десктопе, но на телефоне это становится критичным. Веб-дизайн движется к максимальному сокращению графических элементов. В ближайшем будущем возможен рост популярности темных интерфейсов — что позволит сэкономить заряд смартфона.
Слияние функций back-end и front-end
Анжелика Трофимова, директор:
Сейчас требования к визуальной части сайтов сильно изменились по сравнению с ситуацией двух-трехлетней давности. Это уже не просто красивая картинка, а продуманный адаптивный интерфейс между пользователем и серверной частью. Множество сценариев выполняется на стороне браузера, и за все это отвечает front-end, в функции которых раньше входила в большей степени верстка для отображения отработанных сценариев. В текущих реалиях front-end — это уже программирование. Стирается граница между сценариями, которые отрабатывают на сервере (back-end), и сценариями на клиентской стороне (front-end). В связи с этим растет спрос на full-stack-специалистов, которые могут разрабатывать сценарии и на стороне сервера и на стороне клиента.
Гибрид сайта и мобильного приложения
Анжелика Трофимова, директор:
Последние годы у владельцев сайтов стояла дилемма: разрабатывать в дополнение к сайту еще и мобильное приложение или достаточно адаптивного сайта. Сайты, разработанные на PWA-технологии, имеют функции мобильного приложения. С ними удобно работать при слабом сигнале или полном отсутствии сети, так как данные подгружаются из кэша. Эта технология делает интерфейс более удобным для пользователя, отрубая все лишнее, если посетитель заходит на сайт со смартфона. И такое решение значительно дешевле отдельного мобильного приложения, которое не всегда окупается.
В дизайне все веяния либо мимолетные, которые за месяц всем надоедают и забываются, либо долгоиграющие, которые несколько лет набирают обороты, их применение расширяется, меняются дизайнерские приемы для их реализации. О долгоиграющих трендах, которые будут определять веб-дизайн в 2020 году мы спросили Дмитрия Савушкина, руководителя отдела дизайна WebCanape.
Минимализм
Вечный тренд, который сейчас превратился в настоящее помешательство. Это напрямую связано с переходом на мобайл. Многие считают, что чем сайт больше похож на меню настроек iPhone, тем он эффективнее и позволяет пользователю максимально быстро решить свои задачи.
Смелый дизайн
Большие компании с ресурсами для экспериментов становятся все смелее и выбирают динамичные, ассиметричные, иногда даже немного «шизовыми» решения в дизайне. Рядовой клиент агентства к таким вещам не готов. Тут при всей любви к чему то свежему и нестандартному нужно сохранять здравый смысл и помнить, что удобство интерфейса все же важнее.
UX-дизайн
Юзабилити всегда считалось хорошим тоном, но сегодня это превращается в отраслевой стандарт. Скоро это окончательно станет гораздо важнее красивой картинке на сайте, на чем до сих пор настаивают многие клиенты агентств. Сложность в том, что это требует очень глубокого погружения в бизнес клиента и изучения поведения посетителей сайтов.
Яркие цвета и градиенты
Постоянно находятся новые и свежие оттенки привычных цветов. Все пресытились классической палитрой: если желтый то как у Яндекса, если зеленый то как у Сбербанка и т. п. Чем уникальнее оттенок, тем лучше.
Градиенты становятся сложнее и многоцветнее, с плавными переливами и нарушенной геометрией (классическая линейная перетяжка двух цветов уже не актуальна, но все как всегда временно). В целом все чаще размываются ограничения фирменного стиля, а конкретно корпоративных цветов. Нет ничего страшного в использовании широкой палитры и тонов, отличных от корпоративных. Монотонность быстро утомляет людей.
Иллюстрации и 3D-графика
Этот тренд бодро продолжает набирать обороты. В погоне за уникальностью, когда одни и те же изображения повторяются на каждом втором сайте, стало очевидно, что фотографии не всегда могут решать эту задачу. Важно что поменялось восприятие иллюстраций. Раньше считалось, что фото — это вроде кино, а иллюстрации — что-то детское, мультики. Теперь же даже поросшие мхом крупные компании не боятся использовать в дизайне иллюстрации.
Типографика
Текст давно уже не воспринимается как абзац с вылетами и параграфами. Это самостоятельный элемент дизайна — крупные заголовки, хаотично разбросанные слова, эффекты для шрифта (тени, контуры, градиенты), нарочно нарушенная читабельность, смелые начертания шрифтов.
Чтобы вам ни говорили SEOшники, уменьшение количества текста — тенденция, к которой стоит присмотреться. Большой объем текста не делает вас солиднее, он делает вас скучнее.
Юлия Сергеева
руководитель отдела контент-маркетинга
Действительно, кирпичи текста никто уже давно не читает (а читал ли?). Классно, когда страница построена на заголовках, по которым посетитель перескакивает как с кочки на кочку и сваливается в воронку продаж, оставив заявку в форме, к которой вы его привели. Сегодня эффективный текст плотно привязан к дизайну, и этот тренд пришел, чтобы остаться.
Но большинству наших клиентов по-прежнему хочется много сказать на каждой странице, хоть их аудитории нужно совсем другое. Верю, что в конце концов пользователь победит.
Видео и motion-дизайн
Сайт должен быть живым — это давно уже стало правилом, и чем больше движения картинки и элементов сайта, тем лучше. От необычных ховеров кнопок и плавной подгрузки контента до сложной анимации элементов дизайна — все это будет бурно развиваться еще долго.
Анжелика Трофимова, директор:
Аудитории приятно взаимодействовать с сайтами, которые вызывают эмоции: содержат графику, видео, анимации, меняют внешний вид в зависимости от сезона, времени суток.
Антон Меренков
руководитель отдела поискового продвижения сайтов
Видеоконтент уже не первый год в трендах в продвижении и дизайне. Пользователи больше доверяют продукту, который понимают. А содержательный ролик как раз способствует лучшему пониманию. Пора уже всем завести канал на YouTube. Что вы за бизнес, если вам нечего показать?
Татьяна Матвеенкова, руководитель отдела Performance-маркетинга:
С такой популярностью видеоконтента немудрено, что видеореклама тоже набирает обороты. Таргетированная реклама в TikTok сейчас на пике популярности.
Внутриплатформенное продвижение, месседжеризация, эмоционально заряженный маркетинг — главные тенденции, с которыми мы вступаем в 2020 год. Подробнее о них и других трендах расскажут наш директор по внутреннему маркетингу Евгений Чуранов, руководитель отдела performance-маркетинга Татьяна Матвеенкова и руководитель всея SEO в WebCanape Антон Меренков.
Влияние технологических платформ на рынок интернет-рекламы
Евгений Чуранов
директор по внутреннему маркетингу
На рынок интернет-маркетинга стали сильно влиять технологические платформы. Уже сейчас существует много проектов типа Яндекс Такси, Яндекс Услуги, Яндекс Еда, и таких агрегаторов все больше. Они меняют традиционные бизнес-модели — профессионалу/компании теперь не обязательно иметь сайт, чтобы получать заказы. Вместе с бизнес-моделями меняется и маркетинг — появился спрос на продвижение внутри платформы, чтобы заказывали у вас, а не у других участников платформы. Это видно по Amazon и AliExpress, где услуги продвижения внутри платформы уже супервостребованы.
Сейчас мы активно работаем с платформами Яндекс Дзен и Яндекс Кью и продвигаем бизнес наших клиентов там.
Антон Меренков, руководитель отдела поискового продвижения сайтов:
Кроме крупных независимых агрегаторов стоит обратить внимание и на собственные сервисы поисковых гигантов. Близок тот день, когда Яндекс полностью вытеснит из выдачи чужие сайты. Подозреваю, что Яндекс и Google и в 2020 году продолжат отдавать предпочтение собственным сервисам. Без продвижения внутри этих платформ коммерческие сайты рискуют остаться на задворках.
Компаниям стоит бросить силы на развитие репутации в системах отзывов и ранжирование в Яндекс Картах и Google Maps. Стимулируя клиентов оставлять отзывы на внешних платформах, бизнес сможет не только подтолкнуть внешнюю аудиторию к покупке, но и получить более выгодные позиции в поисковой выдаче.
Татьяна Матвеенкова, руководитель отдела Performance-маркетинга:
Репутация компании на этих платформах действительно очень важна и помогает сделать рекламу эффективнее. В Google Рекламе, например, рейтинг по отзывам можно добавить к рекламному объявлению.
Консультации в мессенджерах
Евгений Чуранов, директор по внутреннему маркетингу:
Люди не хотят делать лишние действия, любая потеря времени воспринимается очень болезненно. В первую очередь это касается коммуникаций. Массовое увлечение мессенджерами изменило потребительские привычки, аудитория стала нетерпеливее, и это заставляет менять подходы к работе с клиентами. Если вы не можете за 30 секунд ответить на сообщение в онлайн-консультанте или мессенджере — посетитель сайта уйдет к конкурентам.
Эмоциональный маркетинг
Евгений Чуранов, директор по внутреннему маркетингу:
Эмоции — новый KPI в интернет-маркетинге. Сегодня клиента нужно по-настоящему удивлять — не ценами или условиями, а именно вызываемыми эмоциями и подходом.
Миссия компании — это не просто строчка в разделе «О нас» на сайте. Это то, что разделяет ваша аудитория, и то, во что вы сами верите и чему следуете. Она должна прослеживаться в стиле сайта, креативах, подходе к продажам. Чтобы ваш продукт, бизнес, имидж резонировал с вашей целевой аудиторией, вам необходимо вникнуть в потребности клиента — составить его портрет. Клиента, которого вы совсем не знаете, очень сложно удивить.
Поиск не по тексту
Антон Меренков, руководитель отдела поискового продвижения сайтов:
Пользователь ленится, поэтому голосовой поиск на подъеме. Пользователь не всегда знает, что он хочет, поэтому ищет по картинкам. Голосовой и визуальный поиск — то, на чем нужно сконцентрироваться при продвижении сайта в 2020 году. Чтобы не терять людей, которым удобно искать именно так, внимательно отнеситесь к текстам и метатегам, а у изображений обязательно прописывайте альтернативные заголовки и описания.
Автоматизация рекламы
Татьяна Матвеенкова, руководитель отдела Performance-маркетинга:
В рекламных кабинетах все меньше отдается на откуп специалистам и все больше инструментов автоматизируется. Площадки делаю ставку на машинное обучение и искусственный интеллект. У Яндекса появились ключевые цели, Facebook за счет своих алгоритмов лучше работает на широкие аудитории, Google совершенствует автоматические стратегии и умные компании, позволяет автоматически формировать фиды на основе сканирования сайта. Автоматизируются и отчеты.»
Персонализация креативов
Татьяна Матвеенкова, руководитель отдела Performance-маркетинга:
Баннерная слепота — болезнь (или благословение) современной интернет-аудитории. Чтобы завладеть вниманием пользователя, нужно сделать личный посыл — поэтому динамическая реклама завоевывает позиции. Пользователь должен узнать в вашем объявлении себя, только тогда он на него кликнет. Ну и чтобы вам не приходилось тратить на это сильно много времени, в рекламных кабинетах предусмотрели инструменты для создания адаптивных креативов. Так вы меньшими усилиями получите охваты на максимальном количестве площадок в РСЯ и КМС.
Расширение рекламных площадок
Татьяна Матвеенкова, руководитель отдела Performance-маркетинга:
Рекламные площадки стараются искать новые инструменты для получения платного трафика. Яндекс запустил рекламу в Яндекс Дзене, появилась возможность создания рекламной кампании для продвижения контента, теперь можно делать медийные кампании в приложении Яндекс Метро. В 2020 мы точно увидим еще много нового. И цены точно не будут падать, потому что конкуренция растет.
Диджитал в 2020 году — пользователь решает
Чтобы добраться до пользователя, нужно поставить его в центр и показать ему его важность. Юзер-центричный интернет вбирает в себя все больше умных технологий. Сервисы, платформы, приложения становятся умнее лишь затем, чтобы пользователю не приходилось думать. Реклама, сайты и контент апеллируют к эмоциям, а не к разуму. Интерфейсы и дизайн становятся проще на стороне пользователя, но сложнее на этапе их разработки.
Избавление аудитории от долгих размышлений — пожалуй, главный тренд в разработке, дизайне и маркетинге. Диджитал стал эмоциональным, эмпатичным и умным.
11 главных тенденций веб-дизайна, которые будут править в 2020 году | от PopArt Studio | NYC Design
Можете ли вы вспомнить, как выглядел дизайн Facebook в момент своего появления, полтора десятилетия назад? По современным меркам — не очень лестно. Так что, если вам случится сегодня встретить такой дизайн веб-сайтов, признайте это, вы, вероятно, сразу же потерялись бы.
Быть в курсе последних тенденций в дизайне полезно независимо от того, являетесь ли вы профессиональным веб-дизайнером, новичком в отрасли или предпринимателем, который хочет, чтобы его бизнес-сайт отличался высоким качеством.
Кроме того, включение последних и самых популярных тенденций веб-дизайна гарантирует, что ваш веб-сайт будет выглядеть современным, обновленным и действительно ухоженным — большой плюс, когда дело доходит до создания впечатления надежности в глазах ваших клиентов.
Мы обозначили тенденции веб-дизайна, которые будут доминировать в 2020 году, а также несколько профессиональных советов о том, как успешно реализовать их в своем дизайне.
Как может такая простая вещь, как размещение светлого текста, значков и элементов пользовательского интерфейса на темном фоне, быть настолько мощной? Темный режим — это тенденция веб-дизайна, которая, несомненно, доминировала в 2019 году, и маловероятно, что ее господство закончится в 2020 году.
Темный режим покоряет онлайн-мир с появлением лучших приложений и веб-сайтов, таких как Facebook Messenger, YouTube, Instagram, Viber, WhatsApp и Chrome, а также последних выпусков операционных систем Android и Apple. свет гаснет один за другим.
Популярность цветовой схемы заключается в ее многочисленных преимуществах, от предложения пользователям более элегантной и элегантной рабочей среды до положительного влияния на время автономной работы устройства и энергопотребление. Между тем, так называемый ночной режим также удобен, потому что он уменьшает использование светлых пикселей, что, в свою очередь, снижает общую яркость экрана, вызывая меньшее напряжение глаз и облегчая чтение.
Совет. Чтобы создать визуально потрясающий веб-сайт, смешайте темный режим с минималистичными белыми элементами и чистой графикой и типографикой. Для большей эстетической привлекательности добавьте несколько ярких акцентных цветовых схем, светящуюся неоновую типографику или футуристические элементы.
Источник: https://dribbble.com/shots/
66-Furniture-e-commerce-app Источник: https://dribbble.com/shots/4992178-Reuters-News-Night-Mode Источник: https://dribbble.com / shots / 8565906-The-Energetic-Tumbler-Landing-Page
Взрыв из прошлого, минимализм — это классическая тенденция веб-дизайна, которая останется неизменной.Хотя формы и особенности минимализма с годами изменились, его основные принципы остались прежними, завоевывая сердца как дизайнеров, так и конечных пользователей своей элегантностью, удобством использования и простотой.
Минимализм в веб-дизайне может означать множество вещей — от минималистичных графических элементов и узких цветовых палитр до минимума текста и навигации по сайту.
Эта тенденция приобрела известность как способ приспособиться к уменьшающимся размерам экрана и продолжительности внимания. Удобство использования и навигация по веб-сайту облегчаются благодаря чрезвычайно минималистичному меню, которое устраняет большую часть трудностей, смещая фокус посетителей с того, как найти определенную информацию, на использование самой информации.
Хороший способ достичь минимализма в веб-дизайне — отказаться от тяжелого абзаца для высококачественного изображения или видео, которое передало бы смысл текста более привлекательным и простым способом.
Совет. Минимализм и функциональность идут рука об руку, поэтому при разработке навигации по веб-сайту избегайте втискивания несвязанной информации в один раздел. Сделайте так, чтобы вашим посетителям было легко найти услуги, которые вы предлагаете, страницу контактов или часто задаваемые вопросы, сохраняя при этом легкость.
Источник: https: // dribbble.com / shots / 3583923-Mono-WeatherSource: https://dribbble.com/shots/8622369-Mobile-app-Vegan-mealSource: https://dribbble.com/shots/8631208-Unix-Banking-App
2020 будет быть годом минимализма даже в цветовой гамме веб-сайта. Черное и белое в сочетании с очень узким спектром оттенков серого неизменно элегантны, эстетичны и современны.
Чтобы ваш веб-сайт не выглядел скучным, добавьте несколько высококачественных черно-белых фотографий или художественных иллюстраций.
Совет: 50 оттенков серого могут быть литературным бестселлером, но в дизайне веб-сайтов это провал.Если вы выбираете черно-белый веб-сайт с элементами в оттенках серого, придерживайтесь двух-трех оттенков серого.
Источник: https://dribbble.com/shots/5179726-Lookbook-Black-White Источник: https://dribbble.com/shots/7117245-HI-RISE-BUILDERS-DEVELOPERSS Источник: https://dribbble.com/shots / 9136014-Week-31-Photo-Discovery-App-Concept
Напротив, светящиеся цветовые схемы станут шагом вперед в изометрической тенденции в веб-дизайне. Светящиеся неоновые цвета, такие как синий, фиолетовый и розовый, сделают ваш сайт современным и футуристическим.В сочетании с более глубокими и темными оттенками эти яркие цвета будут появляться с экранов, создавая смелый и дерзкий вид вашего сайта.
Совет. Элементы неонового цвета хорошо сочетаются с любой из вышеупомянутых тенденций веб-дизайна (темный режим, минимализм, черный и белый), поскольку более темный, не красочный фон делает эти светящиеся цвета еще более заметными.
Источник: https://dribbble.com/shots/5577531-Atomic-DNA-Manifesto-Introduction Источник: https://dribbble.com/shots/47
-Landing-Page-ICO Источник: https: // dribbble.com / shots / 4827534-Saving-Animals-Illustration
Ориентированный на человека подход в дизайне в последнее время переживает период возрождения, и нет лучшего примера этого, чем рисованные элементы. Будь то карикатурные иллюстрации, нарисованные значки или рукописные надписи, технологии последних лет — это все, что связано с эмоциями, человечностью и индивидуальным подходом.
Кроме того, рисованная графика излучает позитив, душевность и легкость, поэтому эта тенденция является обязательной для 2020 года, если вы стремитесь показать своим клиентам, насколько вы креативны и изобретательны.
Совет. Художественные иллюстрации сделают ваш веб-сайт немного аутентичным и непринужденным, но будьте осторожны — иллюстрированный веб-сайт принесет пользу не всем профессионалам. Чтобы ваша веб-презентация выглядела детской, легкомысленной или легкомысленной и, следовательно, отпугивала как существующих, так и потенциальных клиентов, обратитесь за советом к профессионалу в области веб-дизайна.
Источник: https://dribbble.com/shots/7160309-Snapsound-Homepage-In-progress Источник: https://dribbble.com/shots/6685757-Vacation-House-Cooking-Landing-Page Источник: https: // dribbble .com / shots / 9220552-Landing-page-Nature
В последние годы основной целью веб-дизайнеров было обеспечение приятного взаимодействия с пользователем. Один из самых важных аспектов хорошего UX — чистая, разборчивая типографика. Жирные шрифты с заглавными буквами, монохромные цвета или прозрачные с контуром — самая популярная тенденция сегодня.
Курсивные шрифты трудно читать, и очень легко смешивать похожие на вид буквы, поэтому такая типографика не имеет ничего общего с новым, современным веб-сайтом, который нацелен на хороший UX.
Совет. Крупный шрифт отлично подходит для привлечения внимания посетителей, но убедитесь, что размер букв правильный на всех устройствах, от настольных компьютеров до смартфонов. Одна буква, занимающая весь экран смартфона, — плохой пользовательский опыт.
Источник: https://dribbble.com/shots/6103123-Thrive-Conference-Promo-March-15-16 Источник: https://dribbble.com/shots/7725993-Funky-Fresh Источник: https://dribbble.com / shots / 7088514-Ten
Вероятно, одна из самых заманчивых тенденций веб-дизайна выходит на широкую ногу благодаря огромным технологическим достижениям последних лет.Трехмерные элементы — это весело, увлекательно и, как правило, дольше удерживают посетителей на сайте.
Depth добавляет ощущение реализма, качество, которое может быть особенно полезным для электронной коммерции, где трехмерные изображения могут использоваться для презентации продуктов с различных точек зрения или для практического использования.
Совет. 3D-элементы могут быть довольно тяжелыми для загрузки, поэтому не волнуйтесь, добавляя их на свой веб-сайт. Умеренно занятые, они могут творить чудеса; чрезмерно они могут снизить эффективность SEO вашего сайта.
Источник: https://dribbble.com/shots/6759955-Pastel-Pink-Lighting-Material-StudySource: https://dribbble.com/shots/6247971-Push-WeightSource: https://dribbble.com/shots / 8811213-3D-Design-Shoes-for-Commercial-Characters Источник: https://dribbble.com/shots/7779269-Otto
Приглушите хвастовство 3D, используя тени, слои и плавающие элементы. Это шаг вперед по сравнению с тенденцией материального дизайна, которая может превратить простое изображение в великолепный элемент. Этот псевдо-3D-эффект может быть применен также к значкам, графике и тексту.
Еще одна приземленная тенденция, которая может создать иллюзию глубины, — это перекрытие слоев. Размещение нескольких элементов, таких как текст, изображения, видео, значки и т. Д., Может превратить переполненный и загруженный веб-сайт в веб-презентацию с продуманным расположением и бесперебойным потоком.
Совет: здесь определенно применимо старое доброе «меньше значит больше». Если ваш веб-сайт начинает напоминать презентацию PowerPoint со всеми доступными эффектами, такими как затухание, (исчезновение) появления, изменение размера, отбрасывание теней и т. Д.- прервать миссию.
Источник: https://dribbble.com/shots/6762159-Reimagining-99pi Источник: https://dribbble.com/shots/4677040-Porcelanosa-web-designhttps://dribbble.com/shots/6768450-99pi-Miss -Manhattan
До недавнего времени анимация веб-сайтов в основном происходила сама по себе, независимо от действий посетителей на самом сайте. 2020 год изменит это с появлением анимации, запускаемой пользователем.
Вышеупомянутые тренды трехмерных, плавающих или многослойных элементов можно включить в анимацию, запускаемую пользователем.Щелчки, наведение и другие действия посетителей могут привести к изменению цвета, размера, дизайна и т. Д. Эти анимации полезны, когда вы хотите, чтобы ваш веб-сайт был более увлекательным и стимулирующим, но сохранял свою простоту и элегантность.
Совет: не переусердствуйте — одной или двух анимаций, запускаемых пользователем, вполне достаточно. Большое количество анимаций может привести к тому, что каждое движение мыши пользователя будет делать что-то на веб-сайте, создавая путаницу и неудовлетворенность.
Источник: https: // dribbble.com / shots / 7885798-Pet-food-website-design Источник: https://dribbble.com/shots/8493535-Book-Festival-Website-Interactions
Градиенты снова в моде, сильнее, чем когда-либо. В 2020 году появятся смелые разноцветные градиенты на всем, от фона до текстовых заливок. Сочетание нескольких цветов, создающих контраст и иллюзию глубины, — выигрышная комбинация для гладкого, ультрасовременного внешнего вида веб-сайта.
Совет. Избегайте монотонных градиентов, поскольку они выглядят неряшливо, скучно и не стильно.
Источник: https://dribbble.com/shots/8660936-Birds-Guide-APPS Источник: https://dribbble.com/shots/5635469-Hero-image-illustration-for-music Источник: https://dribbble.com / shots / 7013067-App-concept
«Картинка стоит тысячи слов». Верно для 2019 года, но благодаря высокоскоростному подключению к Интернету статические изображения героев исчезли. Вместо этого высококачественные видеоролики, которые создают впечатление фильма, являются отличным способом приветствовать, вовлекать и развлекать посетителей в 2020 году. Изображения имеют решающее значение в визуальном дизайне, потому что они позволяют доставлять сообщение быстро и прямо, и нет лучшего способа показать это чем использование видео.
Au contraire, есть только текстовые герои. Большая, жирная, жирная типографика, без фотографий и видео, оформленная в монохромной цветовой схеме, — новая горячая тенденция 2020 года. Удаление части веб-сайта, которую посетители увидят первой, — смелый эксперимент, но тенденция, которая обязательно будет очевидна. его пик в текущем году.
Совет. Для загрузки видео требуется время, поэтому, если вы выберете один из главных разделов, убедитесь, что он имеет правильный размер и не задерживает время загрузки вашего веб-сайта.Поместить видео с YouTube в героя — большой запрет — либо интегрируйте его на свой веб-сайт, либо полностью избегайте видео.
Источник: https://dribbble.com/shots/3169448-Type-color
2020 год станет годом разнообразия, когда дело доходит до тенденций, доминирующих в мире веб-дизайна. От абсолютной простоты до необычных сочетаний цветов и элементов, у дизайнеров будет множество вариантов создания веб-сайта, который будет выделяться среди всех других привлекающих внимание дизайнов.
Дизайнерам, которые стремятся к лучшему UX и привлекательному внешнему виду веб-сайтов, следует помнить о некоторых из тенденций веб-дизайна, которые будут доминировать в 2020 году:
- Темный режим
- Минимализм
- Черно-белый
- Светящиеся цветовые схемы
- Рисованные элементы
- Жирная типографика
- 3D-элементы
- Тени, слои и плавающие элементы
- Анимация, запускаемая пользователем
- Разноцветные градиенты
- Видео или текстовые герои
Уже в этом году выглядит многообещающе, как для дизайнеров, которые будут заняты объединением этих тенденций, так и для маглов веб-дизайна, которые получат возможность наблюдать и наслаждаться ими по всей сети.
22 тенденции веб-дизайна на 2020 год, о которых нужно знать
Поскольку технологии меняются каждый день, неудивительно, что все, что от них зависит, также быстро развивается. Веб-разработка не исключение. С постоянными обновлениями и новыми тенденциями веб-дизайнеры часто изо всех сил стараются не отставать. В конце концов, знание возникающих или продолжающихся тенденций жизненно важно для того, чтобы оставаться на вершине игры. Итак, что это за новые тенденции? Что лучше всего сработает в 2020 году?
Читайте дальше, чтобы узнать о 22 тенденциях веб-дизайна на 2020 год, которые помогут вашему сайту не только хорошо выглядеть, но и сделать его интуитивно понятным.
1. Изображения и заголовки героев
Позвольте мне начать с простого и простого. Изображения-герои — популярная концепция в веб-разработке. Изображения-герои — это изображения больших баннеров, помещаемые на главную домашнюю страницу (или любую веб-страницу, но домашняя страница — обычная практика), которые могут быть или не быть динамическими.
Ниже я привел пример с официального сайта Samsung с одной из последних тенденций веб-дизайна на 2020 год:
Изображения
Hero — отличный способ привлечь клиентов, поскольку фон становится заметным, а не просто белым.Главные изображения также полезны с точки зрения бизнеса, поскольку вы пытаетесь показать свой продукт в хорошем качестве, а пользователь даже не зайдет на страницу этого продукта. В наши дни изображения-герои очень популярны, и они стали общей тенденцией для любого другого веб-сайта. Но даже если их использует каждый веб-сайт, они по-прежнему являются отличным способом привлечь внимание.
2. Пустые пространства и минималистичный дизайн
Минимализм — это мода не только на веб-сайтах, но и везде.Чем меньше контента, тем лучше, и чем его больше, тем сложнее становится. Когда мы находим много вариантов на веб-сайте рядом друг с другом и все в одном месте, мы запутаемся и покидаем веб-сайт. При минималистичном подходе мы сохраняем как можно меньше контента и предоставляем как можно больше белого пространства, тем самым создавая удовлетворительную веб-страницу без места для путаницы. Однако не путайте это с изображением героя, поскольку белые пространства объединяются с изображением героя для получения более значительных эффектов.
Если вы хотите использовать эту тенденцию веб-дизайна в 2020 году, приведенный ниже пример от Squarespace.
Несмотря на пространство на главной странице, она по-прежнему выглядит элегантно, красиво и привлекательно.
3. Эмоциональный дизайн
Веб-дизайн — это налаживание связи с пользователем. Если вам это удастся, вы заставите его вернуться на ваш сайт. Новейшей тенденцией в этом отношении стала эмоциональная связь с пользователем через веб-дизайн.Такой веб-дизайн использует изображения, которые вызывают явные эмоции (как смайлики). Люди часто называют их «соединяющимися», что означает, что они даже не замечали, они связаны с этим.
Важной частью эмоциональной связи является то, что люди часто помнят веб-сайт и с большей вероятностью порекомендуют его своим друзьям, когда их спросят. Домашняя страница и веб-дизайн почти везде, где они могут поместиться, например, получение отзывов, предоставление обзоров, размещение вариантов и т. Д.
Вы хотите создать адаптивный веб-сайт? Ознакомьтесь с 10 проблемами адаптивного веб-дизайна и их решением
4. Динамическая прокрутка
Динамическая прокрутка набирает обороты, и все крупные компании движутся к ней. Причина проста; чем привлекательнее выглядит их веб-сайт, тем красивее будет продукт. С запуском Note 20 в августе этого года я зашел на веб-сайт Samsung, чтобы проверить характеристики мобильного телефона и Galaxy Watch 3. Я был удивлен тем, как они представили свой продукт с помощью динамической прокрутки.То же самое произошло во время сентябрьского мероприятия Apple. Взгляните:
5. Градиенты 2.0
Благодаря минималистичному дизайну и максимальному количеству пустых пространств на домашней странице разработчики часто использовали один цвет в качестве фона, чтобы сделать все максимально простым. Но у пользователей было достаточно, и возникла необходимость в изменениях, двигая тенденцию к градиенту 2.0, где на странице преобладает оттенок нескольких светлых цветов. Пользователи приветствовали новое изменение по всему миру.Это помогло сделать сайт менее скучным и немного более привлекательным.
6. Темный UI
Темный режим сейчас в тренде почти во всех приложениях. У WhatsApp и Skype есть темная тема, у Gmail она есть, у Facebook она есть, у Youtube есть и еще масса приложений. В наши дни это настолько распространено, что даже производители мобильных телефонов начали включать темный режим в свои последние обновления, и черт возьми! Успокаивает глаза. Так почему бы не веб-дизайн? Они ничем не отличаются.Веб-дизайнеры также начали использовать эти темные режимы, предоставляя темные изображения героев, которые делают веб-сайт полностью черным. Но лучше всего использовать контрастные цвета с оттенком, если вы выбираете черный. Например, # 000000 идеально сочетается с #FFFFFF, желтым и т. Д.
Веб-сайт на скриншоте поможет вам лучше понять это:
7. Сайты, созданные с помощью прокрутки
Веб-сайты, созданные с помощью прокрутки, — это последние тенденции веб-дизайна, которые подхватили веб-дизайнеры.Создание прокрутки может звучать как динамическая прокрутка и, возможно, немного сбивать с толку, но они отличаются друг от друга. Веб-сайт с прокруткой зависит от движений прокрутки для создания элемента веб-сайта при его прокрутке. С другой стороны, динамическая прокрутка — это просто получение содержимого с помощью прокрутки, уже находящейся на веб-странице, без какой-либо прокрутки.
Следующее изображение с веб-сайта говорит само за себя:
8. Игривые курсоры
Анимированные курсоры меняют внешний вид курсора на привлекательный.Помимо изменения размера, формы и вида курсора, разработчики также могут реализовать в курсоре анимацию, чтобы они анимировались при перемещении. С фреймворками 2020 года и инструментами веб-разработки это несложно реализовать.
Веб-сайт ниже объясняет это лучше:
9. 3D дизайн
3D-модели привлекательны для человеческого глаза. Перенести трехмерную часть на веб-сайты было непросто. Однако 3D-проекты потребляют больше полосы пропускания, чем стандартные 2D-проекты, и они огромны.С тех пор как в настоящее время люди начали переключаться на сторону с более высокой пропускной способностью, веб-разработчики инициировали различные веб-сайты. Трехмерный дизайн выглядит очень привлекательно и реалистично при правильном использовании.
Веб-сайт, представленный ниже, является прекрасным примером 3D-дизайна.
10. Оптимизированная навигация
Оптимизированная навигация обеспечивает навигационное содержимое не на обычной панели навигации, а на всей странице пользователя. Обеспечение упрощенной навигации с другими тенденциями веб-дизайна 2020 года делает его привлекательным и позволяет пользователю исследовать весь веб-сайт, поскольку навигация — это не просто текст в заголовке.
Для вдохновения взгляните на этот снимок экрана с сайта Bikebear:
.
11. Повышение UI и UX Focus
Увеличение объема работ по разработке различных фреймворков и усовершенствований существующих привело к созданию красивых веб-сайтов, оснащенных UI / UX. Поскольку у некоторых из них появились такие сайты, у тех, кто не стал отставать. В 2018 году Интернет захлестнула волна обогащенного пользовательского интерфейса и пользовательского опыта. Люди начали так сильно сосредотачиваться на UI / UX, что сделали свою карьеру.Причина проста. Пользовательский интерфейс слишком привлекателен для глаз, а UX помогает пользователю очень плавно выполнять некоторые задачи. Таким образом, пользователи могут получить незабываемые впечатления от посещения веб-сайта, чего хочет каждый разработчик. Следовательно, если вы думаете о разработке веб-сайта, будет лучше иметь хороший пользовательский интерфейс и удобство.
Следующий снимок экрана взят из LambdaTest:
12. Крупный и жирный шрифт
Шрифты Big и Bold на главном изображении были в тренде с прошлого года.Крупные и жирные шрифты привлекают внимание и передают то значение, которое вы хотите передать. Их легко установить, и вы должны нанести их нескольких контрастных цветов и оттенков, чтобы они выглядели лучше и удобнее.
На сайте показано, как использовать большие и полужирные шрифты:
13. Художественные иллюстрации
Художественные иллюстрации — это схематичные изображения на главной странице. Эти художественные иллюстрации больше похожи на карандашную работу и в последнее время набирают популярность.Это одна из самых популярных тенденций веб-дизайна на 2020 год. Эти художественные иллюстрации также известны в различных видео, таких как TED, музыкальные клипы и т.д. предстоящий.
Ниже приведена демонстрация Лизы Гланц:
14. Сетка
Разработчики и дизайнеры помешаны на сетках. Сетки — не новая концепция, если вы хоть немного занимались веб-разработкой.Сетки — это концепция разделения чего-либо на части (я имею в виду буквально) и представления различных частей информации в каждой из них. Важно отметить, что цвет сетки должен контрастировать с фоном веб-дизайна. Сетки не должны быть слишком большими по размеру и должны применяться только там, где это возможно.
Лучший пример — Pinterest.
15. Объединение фотографии с графикой
Слияние фотографии с графикой — правильное сочетание абстрактного и красочной графики.Фотография — прекрасный способ передать что-то (обычно это такая важная тема, как феминизм), используя довольно скучные слова. Фотография оказывает уникальное влияние на пользователей, и, поскольку они представляют интересующую тему, вы должны использовать ее с умом.
Веб-сайт, используемый для демонстрации, — Wix.
Фотография, использованная здесь, отражает тему сайта, то есть контакт для свадебной фотосессии. Что бы вы хотели видеть в сообщении в виде фотографии или двух абзацев о свадебных фотосессиях?
16.Анимация, запускаемая пользователем
Веб-сайты часто видят анимацию через @keyframes и другие фреймворки, такие как anime.js. Новой тенденцией в этом отношении является использование анимации путем получения некоторых данных от пользователя. Взаимодействие с пользователем вовлекает пользователя и привлекает его к веб-сайту, а также улучшает общее впечатление пользователя.
На этом веб-сайте показан удачный пример анимации, запускаемой пользователем.
17. Плавающие элементы
Плавающие элементы можно рассматривать как дополнение к трехмерным компонентам, упомянутым выше.Однако деталь парит в воздухе. Он создает захватывающие изображения и узоры в веб-дизайне.
99Designs используется для демонстрации здесь:
18. Рассказы с графикой
Обзоры были неотъемлемой частью покупки, и мы все часто просматриваем некоторые отзывы, прежде чем выбрать продукт. Но знаете ли вы, что отзывы клиентов могут рассказать истории? Такие захватывающие истории — лучший способ помочь пользователям почувствовать связь со своим миром.Например, обзор веб-сайта доставки еды побудит пользователей проводить больше времени на веб-сайте, поскольку они используют систему доставки много времени. Истории с графикой могут вывести читателя на новый уровень.
Для демонстрации использовался веб-сайт Apple:
.
19. Предоставление графиков данных на веб-сайтах
Мы все используем статистику на нашем веб-сайте много раз, так как это отличный способ привлечь пользователей, но, к сожалению, не каждый пользователь является читателем.Пользователи часто пропускают текстовую часть и больше сосредоточены на достижении своей цели, ради которой они попали на сайт. Но мы можем это изменить. Все, что нам нужно, это та же стратегия, которую мы используем в презентациях: предоставление графиков и визуализаций. Техники визуализации, такие как графики, 3D-визуализации и т. Д., Можно найти в Интернете. Визуализации — отличный вариант, если вы хотите передать большой объем информации точным и привлекательным способом, ничего не записывая.
Для демонстрации используется веб-сайт Uber:
.
20.Черно-белый
Черное и белое — вечнозеленое сочетание. Не только на сайте, но и во многих других вещах, таких как фотография, эскиз, настенная живопись, наручные часы и т. Д. Комбинации черного и белого очень привлекательны для глаз. Может быть, из-за контрастных элементов, о которых мы говорили в предыдущем разделе. Использование черно-белой цветовой схемы на веб-сайте (с оттенками черного) — это новая тенденция веб-дизайна на 2020 год, и похоже, что она будет в тренде и в будущем.
Для демонстрации использовался веб-сайт Dribble.
21. Геометрические фигуры и узоры
Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения. Геометрия присутствует в природе повсюду, поэтому мы от природы склонны к геометрическим узорам и формам. Если использовать правильный цвет и контраст, геометрические формы могут быть очень привлекательными.
Веб-сайт, использованный для демонстрации, демонстрирует реальное использование геометрических фигур и узоров:
22.Эксперименты с иллюстрациями
До сих пор вы, должно быть, понимали, что иллюстрации становятся горячей темой среди тенденций веб-дизайна на 2020 год и экспериментов. Веб-дизайнерам и пользователям нравится все в этом. Вы всегда можете поэкспериментировать с этими иллюстрациями, а также с любыми из упомянутых выше тенденций веб-дизайна 2020 года. Кроме того, вы можете снабдить его фотографиями, 3D-эффектами и т. Д.
Сайт — отличный тому пример:
Вам также могут понравиться 14 лучших инструментов веб-дизайна для дизайнеров при удаленной работе.
Заключение
Надеемся, этот выбор вдохновил вас. Хотя как веб-разработчик я уверен, что эти тенденции продолжают меняться. Все, что вы видите, в будущем превратится во что-то еще лучшее. Точно так же, как я никогда не думал об использовании этих трех или четырех лет назад, я не могу представить то же самое на три или четыре года вперед.
А теперь я хотел бы услышать от вас: какая ваша любимая тенденция веб-дизайна из этого списка? Или, может быть, у вас есть вопрос. В любом случае, оставьте комментарий ниже.
Хариш Раджора
Я инженер по информатике. Мне нравится расти вместе с развитием технологического мира. Я считаю, что нет более мощного инструмента, чем компьютер, чтобы хоть как-то изменить мир. Помимо моей специальности, я очень люблю читать книги и иногда пишу на https://www.themeaninglesslife.com.
горячих трендов веб-дизайна, на которые стоит обратить внимание в 2021 году!
Пришло время обновить ваш веб-сайт, чтобы он отвечал новым требованиям веб-дизайна.Не паникуйте, есть не так много вещей, которые нужно изменить или обновить.
В этом сообщении в блоге команда веб-разработчиков WishDesk исследует самые потрясающие тенденции веб-дизайна, на которые стоит обратить внимание в 2021 году. Следите за обновлениями!
Основные тенденции веб-дизайна на 2021 год
Вот список тенденций веб-дизайна, на которые стоит обратить внимание в 2021 году:
- Крупные буквы
- Асимметричные схемы
- Анимация
- 3D-дизайн
- Пользовательские изображения
- Разделить содержимое
- Скрытая навигация
- Полноэкранные формы
- Параллакс веб-дизайн
- Голосовой интерфейс пользователя
Узнайте больше о каждом из них и обновите свой веб-дизайн, чтобы идти в ногу с грядущими тенденциями!
Полужирный шрифт
Негабаритные буквы или жирный шрифт набирают все большую популярность, поскольку владельцы веб-сайтов стремятся максимально упростить веб-дизайн.
Огромная типографика имеет очевидные преимущества. Во-первых, вы можете привлечь внимание к своему бренду или бизнес-цели, выделив их крупным шрифтом на главной странице вашего веб-сайта. Посетители обязательно запомнят, что было написано жирным шрифтом, и с большей вероятностью вернутся на вашу платформу.
Language Media — компания, специализирующаяся на развитии бренда. Использование негабаритных букв на их веб-сайтах действительно привлекает внимание посетителей.
Асимметричные макеты
Большинство веб-сайтов основаны на сетке.Сетка состоит из воображаемых линий, которые помогают упорядочивать элементы макета на странице. Владельцы веб-сайтов, которые хотят быть уникальными, начнут применять технику ломанной сетки и хаотично размещать элементы дизайна. Этот метод делает веб-сайты более креативными и станет главной тенденцией веб-дизайна в 2021 году.
Разбитая сетка, используемая на сайте Dada-Data, действительно нравится посетителям.
Фоновое видео
Перемещение визуальных элементов различных форм и форматов всегда было популярным в веб-дизайне.Последняя тенденция — использование фонового видео! Анимация вместо статического фона оживляет вашу платформу и заставляет посетителей оставаться дольше — или, по крайней мере, достаточно долго, чтобы просмотреть все видео.
Фоновое видео на сайте The Hidden Worlds of the National Parks действительно потрясающее.
3D-дизайн
Еще одна потрясающая тенденция 2021 года — использование трехмерных элементов. Важность 3D-графики уже признана в игровой и киноиндустрии, и веб-дизайн не отстает! Использование 3D-дизайна более увлекательно и повысит интерес к вашему бренду.
Сайт Campo Alle Comete выглядит как сказка из-за использования трехмерной графики. Этот метод также позволяет компании продемонстрировать историю своего бренда.
Пользовательские изображения
Пользовательские рисунки добавляют сайтам неповторимый характер. С помощью этой тенденции веб-дизайна вы можете отобразить свой бренд и сделать его запоминающимся для посетителей. В следующий раз, когда пользователи увидят одно из ваших пользовательских изображений, даже на другом ресурсе, ваш веб-сайт всплывет им в голову, и им напомнят вернуться снова.Еще один трюк, чтобы завоевать популярность в Интернете и увеличить количество конверсий!
Разделить содержимое
С помощью техники веб-дизайна с разделением содержимого вы можете продемонстрировать более одного важного сообщения одновременно на одной странице. Это также делает ваш сайт более привлекательным и хорошо организованным.
Веб-сайт Hello Monday — хороший пример успешно реализованной компоновки разделенного экрана.
Скрытая навигация
Скрытая навигация также используется с учетом минимализма, который, как видите, является основным трендом веб-дизайна на 2021 год.С помощью скрытой навигации можно сэкономить много места. Не стесняйтесь использовать его на своем веб-сайте, особенно если он сделает ваш дизайн более понятным.
Например, на веб-сайте Masi Tupungato меню появляется, когда вы щелкаете значок в верхнем левом углу.
Полноэкранные формы
Как мы уже упоминали выше, огромная типографика особенно популярна среди владельцев веб-сайтов, которые предпочитают простоту.Так почему бы не создать контактную форму, которая умещается на весь экран? Добавление полноэкранных форм на главную страницу — еще одна растущая тенденция в веб-дизайне. Таким образом, процесс отправки форм упрощается и упрощается для посетителей сайта.
Этот полноэкранный интерфейс от дизайнера Мэри Лу идеально подходит для тех, кто хочет придерживаться минимализма в веб-дизайне.
Параллакс веб-дизайн
Техника параллакс-прокрутки в веб-дизайне пришла из видеоигр.Его секрет заключается в том, что фон движется с разной скоростью во время прокрутки веб-страницы, что создает псевдо-3D-эффект.
Сайт Cyclemon — яркий пример реализации техники параллакс-скроллинга.
Голосовой интерфейс пользователя
Голосовой пользовательский интерфейс (VUI) позволяет пользователям взаимодействовать с веб-сайтом с помощью голосовых команд. Несмотря на то, что это не связано строго с дизайном, эта тенденция повысит удобство использования и функциональность вашей платформы и обеспечит доступность всех элементов веб-сайта для людей с физическими недостатками.
Сделайте свой сайт модным с помощью услуг веб-дизайна WishDesk!
Это был список главных тенденций веб-дизайна на 2021 год. Это не значит, что вы должны использовать их все сразу. Выберите те, которые отражают индивидуальность вашего бренда и идеально подходят для вашего сайта. Не можете решить? Без проблем! Веб-дизайнеры WishDesk помогут вам с выбором подходящих техник и сделают ваш сайт модным!
Высокие технологии и умопомрачительный вид [+ примеры]
Обновление окт.2020: Тенденции веб-дизайна 2021 уже вышли! Проверь их.
Хотите знать, какими будут тенденции веб-дизайна в 2020 году? В этой статье мы проливаем свет на эту тему.
Тенденции веб-дизайна 2020 года — это абсолютное сочетание визуальной стороны графического дизайна и высокотехнологичной стороны развивающихся технологий. Мы не можем скрыть, что, начав исследование, мы были абсолютно впечатлены современным веб-дизайном. Веб-дизайнеры становятся невероятно креативными, сохраняя при этом функциональность сайтов и убирая беспорядок.Тем не менее, им удается создавать вещи, которые абсолютно выделяются. Мы видели несколько удивительных примеров CSS-параллакса и красивых микро-анимаций, и мы обязательно увидим все больше и больше интерактивных и анимированных веб-дизайнов в будущем. Давайте больше не будем задерживаться и углубимся в тенденции веб-дизайна 2020 года.
Основные тенденции веб-дизайна на 2020 год:
1. Совместная работа фотографий и иллюстраций в веб-дизайне
2. Паттерны в веб-дизайне
3. Черно-белый вечнозеленый веб-дизайн
4.Минималистские веб-сайты с макси-типографикой
5. Ретро-стиль в современном веб-дизайне
6. Штриховой рисунок для чистых и креативных веб-сайтов
7. Иллюстрации, сочетающие искусство и дизайн
8. Трехмерные элементы и эффекты движения, которые впечатляют
9. Инновации, которые будут на вершине дизайна сайтов в 2020
Реклама
1. Совместная работа фотографий и иллюстраций
Огромной тенденцией в веб-дизайне сейчас является сочетание фотографий с очень простыми рисованными 2D-иллюстрациями.Следуя этой тенденции, иллюстрации будут либо заменять части фотографий, либо взаимодействовать с ними, создавая забавную смесь двух реальностей.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для интернет-магазина в 2020 году
2. Паттерны в веб-дизайне
Выкройки
снова вернутся в 2020 году, они очень разнообразны и освежают! Помимо полного покрытия фона, в тенденциях веб-дизайна 2020 года будут очень популярны узоры, которые распространяются только на отдельные части фона.Они создадут модные и современные образы веб-дизайна.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Хотите вдохновиться 40 классными веб-дизайнами с узорчатым фоном?
Реклама
Набор Ultimate Seamless Pattern Designs
Мега-набор с более чем 1000 рисунков, эксклюзивно созданных GraphicMama
А если вы увлекаетесь узорами, вам обязательно стоит заглянуть в наш премиальный мегапакет с более чем 1000 прекрасных бесшовных узоров в разных стилях и темах.
- 1114 Бесшовные модели
- Полностью редактируемые векторы / Svg, Ai /
- Бесшовные файлы Png с высоким разрешением.
- Хорошо структурированные и организованные файлы
Посмотрите их
3. Черно-белый вечнозеленый веб-дизайн
Черно-белый веб-дизайн — это стильный, вечнозеленый и всегда модный. Обычно они присутствуют в тенденциях веб-дизайна каждого года, поэтому в 2020 году мы обязательно увидим элегантные черно-белые веб-сайты.Часто они будут минималистичными, содержать макси-типографику и элементы линейного искусства.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
4. Минималистичные сайты с макси-типографикой
Минималистский тренд в веб-дизайне стал популярным несколько лет назад, и сегодня он по-прежнему выглядит современно и стильно. Дизайнеры по-прежнему удаляют ненужные детали и украшения, но, в отличие от пары лет назад, в настоящее время они используют макси-типографику, чтобы выразить свое мнение.Возможно, вы захотите вдохновиться некоторыми креативными дизайнерскими идеями типографики.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Хотели бы вы черпать еще больше вдохновения из этой тенденции? Ознакомьтесь с 20 красивыми минималистскими дизайнами веб-сайтов.
5. Ретро-стиль в современном веб-дизайне
Скоро нас ждет настоящий взрыв из прошлого.Стиль дизайна 50-х и 60-х годов является огромным источником вдохновения для многих веб-дизайнеров. Эффекты, напоминающие нам о ретро, такие как пыль, шум, черно-белые фотографии, более тусклые цвета, будут присутствовать в тенденциях веб-дизайна 2020 года. Возможно, вам также будет интересно ознакомиться с другими примерами ретро-дизайна в наше время.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
6.Штриховой рисунок для чистых и креативных веб-сайтов
Line art — настоящий хит во всех областях графического дизайна. По логике вещей, это тоже нашло свое отражение в веб-дизайне! Веб-сайты с штриховыми иллюстрациями выглядят профессионально, чисто и при этом очень креативно. В 2020 году мы будем часто наблюдать эту тенденцию.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
7. Иллюстрации, сочетающие искусство и дизайн
Иллюстрации в разных стилях веб-дизайна будут одними из самых горячих трендов 2020 года.Мы увидим удивительные произведения искусства — от акварели и пастели до современного и причудливого искусства, такого как персонажи с непропорциональными телами, персонажи без черт лица и многое другое.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
8. 3D-элементы и эффекты движения, которые впечатляют
В наши дни 3D стало неотъемлемой частью графического и веб-дизайна. Уровень глубины и реализма, который он позволяет создавать дизайнерам, пока недостижим для других цифровых технологий.В 2020 году мы увидим множество трехмерных веб-дизайнов — статических, анимированных или интерактивных.
# Интерактивные 3D эффекты
В 2020 году движение будет более увлекательным, чем когда-либо. Веб-дизайнеры удивят нас интерактивными 3D-эффектами, которые заставят пользователей дольше оставаться на сайте.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
# Статическая 3D-графика
Статические 3D-модели также поразят плавными формами, реалистичным внешним видом и завораживающими цветами.Дизайнеры обычно сохраняют все остальные элементы в минималистском стиле, чтобы общий дизайн выглядел хорошо сбалансированным, чистым и современным.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
9. Инновации, которые будут на вершине дизайна веб-сайтов в 2020 году
Современные технологии неизбежно влияют на веб-дизайн. Но какие веб-инновации будут самыми модными в 2020 году?
веб-сайтов в 2020 году станут более интерактивными, чем когда-либо, благодаря растущему использованию чат-ботов.Чат-боты находятся в распоряжении пользователя 24/7, чтобы ответить на наиболее часто задаваемые вопросы и направлять пользователей по сайту. Более того, передовые технологии искусственного интеллекта будут продолжать делать чат-ботов более адекватными, чем когда-либо.
Голосовой интерфейс пользователя и автоматические помощники
Или, другими словами, способность вести реальный разговор с устройствами. Теперь это возможно благодаря технологии искусственного интеллекта и голосового пользовательского интерфейса. В ближайшем будущем мы увидим быстрый рост использования автоматических помощников на веб-сайтах, которые используют технологию голосового пользовательского интерфейса.Беседа с сайтом, который вы посещаете, безусловно, звучит увлекательно, но, что наиболее важно, это поможет людям с ограниченными возможностями лучше взаимодействовать с веб-сайтами.
Взгляните на эти 15 идей дизайна веб-сайтов, которые можно попробовать прямо сейчас + бесплатные материалы для дизайна
Итак,
Дизайн веб-сайтов претерпел значительные изменения на протяжении многих лет. В 2020 году он будет не только чрезвычайно впечатляющим с точки зрения визуального представления, но и будет ориентирован на технологии.Мы надеемся, что вам понравились наши прогнозы относительно тенденций веб-дизайна на 2020 год. Конечно, вас ждет красочный год, наполненный творчеством и потрясающими дизайнами. Вы согласны с этими тенденциями? Мы будем рады узнать, что вы думаете, в комментариях ниже.
Вы проверили наш
Набор из 240+ красочных фоновых иллюстраций
Полностью редактируемые сцены, которые можно легко адаптировать к любой цветовой схеме и размеру. Доступны как в векторных, так и в растровых файлах — идеально подходят для любого дизайн-проекта.Идеально подходит для модного дизайна сайтов.
Скачать сейчас
Может быть, вам будет интересно почитать еще несколько статей по теме:
Реклама
21 уникальная тенденция веб-дизайна на 2021 год
Добро пожаловать в наш ежегодный обзор тенденций веб-дизайна. От ретро-типографики до постоянно растущего движения без кода — в 2021 году есть на что рассчитывать.
2020 год был непростым. С его галлонами дезинфицирующего средства для рук, неудобными встречами Zoom и надвигающейся тревогой неопределенности, мы все чувствуем себя немного измотанными.Несмотря на обстоятельства, мы все сделали все возможное, чтобы пройти через все это. Многие из нас потратили время на изучение новых дизайнерских навыков. А некоторые из нас только что испекли хлеб на закваске. У всех нас есть свои навыки выживания.
Когда дело дошло до дизайна, мы следили за нескончаемыми тенденциями в Интернете. Поговорив с командой Brand Studio в Webflow и несколькими другими дизайнерами, мы составили исчерпывающий список некоторых тенденций веб-дизайна, которые мы ожидаем увидеть в 2021 году. Мы надеемся, что этот список не только вдохновит вас, но и вдохновит. подходить к Интернету более инклюзивно и доступно.
21 современная тенденция веб-дизайна на 2021 год
Вот 21 тенденция веб-дизайна, которая также поможет сделать 2021 год немного ярче.
1. Ретро-шрифты
Мы видели, как многие старые вещи снова становились крутыми, а затем, в свою очередь, становились еще менее крутыми. Подумайте об усах на руле и джинсах для мамы. Ирония недолговечна.
Ретро-шрифты испытали те же приливы и отливы своей популярности, и многие дизайны с винтажной типографикой не устарели.
Однако типографика с возвратом пережила некоторое возрождение. Мы не видим таких же утомленных шрифтов. Скорее, стилизация и немного артистизма переосмысливают, какими могут быть ретро-шрифты.
Мы видим это слияние старого и нового на странице продвижения Spotify Carnival. Вместо того, чтобы казаться устаревшими и клише, они вдохнули новую жизнь в традиционные жирные шрифты, немного поэкспериментировав. Это хороший пример использования традиционных шрифтов и придания им классного и современного стиля, сохраняя при этом разборчивость.
На этом веб-сайте компании Goliath Entertainment, занимающейся планированием мероприятий, чувствуется ретрофутуризм. Смелая типографика отсылает к прошлому, но при этом очень актуальна.
В 2021 году мы с нетерпением ждем более творческого переосмысления типографики.
2. Анимация прокрутки параллакса
Эффекты прокрутки параллакса были трендом в дизайне веб-сайтов в течение многих лет, и в 2021 году мы надеемся увидеть более тонкие и творческие исследования того, что можно достичь с помощью параллакса.
Помните, что слишком большое количество движений в эффектах параллакса может быть вредным для людей с вестибулярными расстройствами, потому что иллюзия глубины и движения может вызвать дезориентацию и головокружение. Вот несколько рекомендаций, которые, как мы видим, все больше дизайнеров принимают во внимание, чтобы гарантировать, что они включают параллакс минимально и не причиняют вреда:
- Не позволяйте эффектам параллакса отвлекать важную информацию
- Не усложняйте пользователю выполнение важная задача
- Свести количество эффектов параллакса к минимуму
- Свести к минимуму количество параллаксов в каждом экземпляре
- Ограничить эффекты параллакса в пределах небольшой области экрана
- Включить возможность для пользователей отключить эффекты параллакса
Сайт портфолио Алисы Ли использует эффекты параллакса, которые реагируют на положение мыши, чтобы оживить ее иллюстрацию.Количество движений невелико и ограничено рамками героя. Это отличный пример использования параллакса с ограничениями и намерениями.
Не каждая параллакс-анимация должна отображать большие жесты по экрану. Мы также видели более тонкие приложения. В этом веб-дизайне для Green Meadow этот эффект можно было почти полностью упустить. Но это мягкое раскрытие текста создает достаточное сопоставление, чтобы привлечь внимание к каждому блоку текста по мере его появления.
В следующем году мы будем рады видеть, как прокрутка с параллаксом используется тонко, не для яркого эффекта, а как инструмент для выделения или выделения важных фрагментов контента.
3. Горизонтальная прокрутка
Горизонтальная прокрутка, ранее считавшаяся ошибкой веб-дизайна, возвращается.
Все больше веб-дизайнеров продолжают экспериментировать с горизонтальной прокруткой. Те, кто это делает, лучше всего ломают шаблон не ради того, чтобы отличаться, а как практический способ постепенно раскрывать вторичную информацию, как в галерее изображений.
Дизайнеры, успешно использующие горизонтальную прокрутку в 2021 году, будут иметь в виду следующие соображения:
- Не заставляйте пользователей перемещаться по горизонтальному содержимому: разрешите альтернативные способы навигации, такие как кнопки со стрелками с четкими метками
- Используйте четкие визуальные подсказки для указать, где контент использует горизонтальную прокрутку, и не скрывать эти подсказки за наведениями.
- Подумайте о том, какой контент выиграет от отображения в горизонтальной прокрутке — фотогалерея — хороший соперник, поскольку горизонтальная прокрутка покажет пользователям небольшой предварительный просмотр, и предоставить им возможность просматривать больше или продолжать движение вниз по странице.
- Избегайте необходимости горизонтальной прокрутки для текста, который необходимо прочитать.
На нашей собственной странице функций Designer мы использовали небольшую горизонтальную прокрутку для увеличения на большом изображении и покажите более релевантные фрагменты изображения в большем размере, чтобы сопровождать релевантный контент.
На главной странице Momento Design Studio есть четкая подсказка рядом с основной кнопкой, которая также действует как ссылка, медленно перемещая вас к избранным работам при нажатии. Движение прокрутки идет в быстром темпе и не слишком длинное, что позволяет отображать избранные изображения.
McBride Design использует горизонтальную прокрутку для демонстрации больших фотографий своих работ, не занимая слишком много места на странице. Они также включают в себя четкий индикатор в правом нижнем углу, который устанавливает ожидание, что страница будет прокручиваться по горизонтали.
4. 3D-визуализация повсюду
С появлением экранов с более высоким разрешением 3D-дизайн прошел долгий путь от блочных и скошенных краев Geocities. Мы видим, как высококачественные 3D-изображения органично вплетаются в веб-дизайн. Вместо того, чтобы отвлекать внимание, они улучшают общее впечатление пользователя.
Креативное агентство Sennep добавляет глубины с помощью трехмерных элементов на своем веб-сайте. Здесь приятно ощущение гармонии между всеми элементами дизайна.Это прекрасный пример того, как в более минималистичных макетах 3D может производить еще большее впечатление.
Yaya поместила свою любовь к 3D во главу угла своей домашней страницы с помощью этой причудливой и крутой анимации героя.
В приведенном ниже примере от компании Pitch, производящей программное обеспечение для презентаций, они имеют красочную компоновку, полную трехмерных форм, теней, градиентов и многослойных элементов. Эти элементы трехмерного дизайна воплощают этот дизайн в жизнь.
3D-элементы добавляют уникальности и объемности любой веб-странице.
5. Мультимедийные возможности
Поскольку большинство людей имеют доступ к более высокоскоростному Интернету, мультимедийные возможности Интернета появляются повсюду. Объединение визуальных элементов, текста, видео и аудио делает пользовательский интерфейс более удобным.
Успешные проекты в 2021 году будут использовать ограничения с мультимедийными возможностями:
- Сделайте ставку на простоту, например, при сочетании движения и звука. Слишком много происходящего может отвлекать или подавлять людей с когнитивными расстройствами.
- Обдуманно используйте различные форматы мультимедиа, чтобы сделать контент максимально доступным.
- Включите скрытые субтитры и стенограммы для всех предварительно записанных мультимедиа.
- Включайте замещающий текст для изображений и сопровождайте сложные изображения более длинным описательным текстом.
- Убедитесь, что весь текст написан с использованием HTML, а не отображается внутри изображений.
- Избегайте автоматического воспроизведения видео или движущегося содержимого: вместо этого предоставьте четкую кнопку «воспроизведение», которая дает пользователю возможность воспроизвести и приостановить воспроизведение содержимого.
Эффективное и доступное использование мультимедиа требует учета множества факторов. Вот дополнительные ресурсы о доступности видео.
На сайте Николаса Эрреры есть элементы управления воспроизведением красивого фонового видео: оно воспроизводится при нажатии, а также может быть приостановлено. Он также включает в себя тонкую анимацию, которая показывает, насколько далеко вы находитесь в видео.
Мультимедийные возможности работают во многих различных областях. В приведенном ниже примере мы видим снимок экрана из Black Yearbook.Это краудфандинговая книга, составленная Адрейнтом Берэлом и его друзьями, чтобы показать, каково быть афроамериканским учеником, посещающим преимущественно белые школы. Полные элементы управления воспроизведением четко видны на всех видео. Красиво снятый кинематографический фильм переходит от одной сцены к другой в начале дизайна с гипнотическим саундтреком, играющим на заднем плане, что очень похоже на трейлер к фильму. За этим введением стоит страсть, и вы захотите углубиться в изучение книги и движений, стоящих за ней.
И для чего-то необычного, мы собираемся завершить этот список мультимедийных примеров с MSCHF, печально известной компанией, стоящей за множеством вирусных веб-дропов. Внешний вид MSCHF пересекает линию брутализма с почти абсурдистским дизайном, сочетающим строгую типографику, текстовые SMS-сообщения и другие элементы.
6. Опыт дополненной реальности (AR)
А с мультимедийными возможностями, давайте не будем забывать все удивительные впечатления от погружения с использованием дополненной реальности (AR).AR теперь означает больше, чем просто охота на покемонов на вашем мобильном устройстве Apple или Android. Новые технологии, такие как API WebXR и программное обеспечение от Wayfair Technologies, открыли эту сферу почти для всех.
Jeep использует дополненную реальность для страницы «Сборка и цена джипа». Для тех, кто ненавидит заходить в автосалоны, это будет легким и беззаботным опытом. Все больше веб-сайтов розничной торговли и электронной коммерции используют возможности дополненной реальности, чтобы продавать свои продукты и расширять возможности потенциальных клиентов в процессе покупки.
7. Акцент на зернистость
Жесткие решетки и плоские однотонные блоки действительно могут лишить веб-дизайн индивидуальности. Зернистая текстура придаст им более естественный вид.
Мы видим красоту зернистости на этом веб-сайте Studio Gusto. Он использует элементы дизайна lo-fi для более грубого взаимодействия с пользователем, которое кажется более естественным, чем гладкое совершенство, которое является обычным явлением во многих веб-дизайнах.
8. Акцент на приглушенные цвета
Так же, как зерно может придать дизайну более естественное ощущение, приглушенные цвета могут сделать это.
Magic Theater Studio использует светлую цветовую палитру вместе с темными блоками зеленого цвета, что создает четкий контраст между разделами этого веб-дизайна. Эти приглушенные цвета являются идеальным фоном для нарисованного от руки текста и иллюстраций. На заднем плане есть слегка жужжащая зернистость, которая почти неразличима, и легкое искажение светлого и темного фона, что делает дизайн очень живым.
Это маркетинговое портфолио для Бобби Роу, представленное ниже, представляет собой праздник цвета и содержит информативные и забавные записи о работе, которую он выполняет.Может быть трудно создать веб-дизайн, который был бы хорошо продуман, но Бобби Роу справился с этим веб-дизайном. Есть хорошее разнообразие приглушенных цветов и более смелых.
9. Дизайн на основе предпочтений
Веб-разработка сделала большие успехи в предоставлении более персонализированного опыта. Это может быть что угодно: от переключения между темным / светлым режимом и другими способами изменения внешнего вида сайта и навигации до предложения контента, адаптированного к вашему вкусу, например, пользовательских списков воспроизведения, созданных Spotify.
Новые методы проектирования и алгоритмы делают Интернет менее пассивным и ориентированным на пользователя. В будущем еще больше внимания будет уделяться удовлетворению потребностей, желаний и вкусов тех, кто просматривает веб-сайты.
10. Размытие по Гауссу
Размытие по Гауссу очень хорошо работает для обеспечения плавного фокуса изображений и градиентов. Этот эффект существует уже некоторое время, но дизайнеры использовали его в более заметных областях веб-дизайна.
Moment House начинает свою домашнюю страницу не с изображения героя, а с приятного гауссовского размытия цветов. Это придает атмосферу атмосферы и напрямую перекликается с фото городского пейзажа Лос-Анджелеса, которое следует за ним. Он идеально передает линзу золотого света и дымки, через которую просматривается Лос-Анджелес.
Мы видим размытие по Гауссу на заднем плане Monograph Communications. Это пушистое смешение красного, пурпурного и синего цветов создает приятный контраст между прямыми линиями и жирной типографикой, которая их накладывает.
Портфолио UX Я Тамара использует тот же подход, добавляя немного размытия по Гауссу на задний план.
Goodbooks объединяет похожий на пар пузырь размытия по Гауссу. Снимок экрана ниже не передает этого должного, но похоже на то, что скрыто за белым экраном. Мы видим изменение и вращение формы, но никогда не видим полностью, что это такое. Это создает такой замечательный визуальный якорь и привлекает внимание к призыву к действию под ним, чтобы проверить их 12 лучших рекомендуемых книг.
Нам нравится видеть, как вещи, которые существовали вечно, например размытие по Гауссу, становятся все более популярными в руках дизайнеров, которые используют их по-новому и интересно.
11. Прокрутка
Мы заметили растущую тенденцию в том, что дизайнеры рассказывают истории через Интернет. Здесь на помощь приходит скролл-повествование — визуальное повествование, которое подчеркивает сюжет и вовлекает вас в его повествование.
Лучшие применения ограничения практики скроллинга:
- Сохраняйте движение в пределах небольшой площади.
- Обеспечьте взаимодействие на условиях пользователя: предоставьте очевидные элементы управления воспроизведением для воспроизведения / паузы / остановки взаимодействий и движений.
- Убедитесь, что любые элементы прокрутки помогают подчеркнуть историю, а не отвлекают от важного текста.
На нашем собственном сайте истории искусства веб-дизайна используются небольшие, тонкие анимации и красивые иллюстрации, которые подтверждают рассказ о том, как история искусства влияет на веб-дизайн.
12. Темный режим
Активируйте AC DC «Снова в черном», потому что темный режим появится на экранах в 2021 году.Все больше дизайнеров принимают эстетику темного режима, где черный цвет обеспечивает идеальный темный фон, чтобы элементы дизайна выделялись на экране.
В приведенном ниже примере агентство Obys Agency разработало прекрасную дань уважения модельеру Питеру Линдбергу, соединив тонко текстурированный черный фон с красивым шрифтом с засечками.
Не бойтесь уйти из жизни в 2021 году с собственными дизайнерскими работами.
13. Мультяшные иллюстрации
Не так давно были времена, когда веб-сайты были просто текстом и несколькими изображениями или графикой.Веб-дизайн эволюционировал, и теперь дизайнеры создают работу, которая связывает людей с людьми на более личном уровне. Мультяшные иллюстрации приобрели популярность как способ трансформации веб-сайтов со здоровой человечностью.
Существует так много источников и художников, создающих фантастические мультяшные иллюстрации. Blush — отличная платформа для поиска пользовательских иллюстраций персонажей, таких как этот отличный набор от Виджая Верма.
Карикатуры предлагают очень многое с точки зрения творчества и делают бренд более представительным.Мы с нетерпением ждем появления в следующем году новых персонажей веб-дизайна.
14. Геометрические сетки
Сетки просты, но обладают большой гибкостью в том, как их можно интегрировать в проект. Геометрические сетки набирают популярность как способ структурировать макет, придавая ему четкий и смелый вид.
Этот дизайн от Хадсона Гэвина и Мартина использует блоки как для элементов навигации, так и для контента. По этим большим цветным квадратам интересно перемещаться, и они так хорошо работают, удерживая ваше внимание.
Геометрические сетки не должны располагаться одинаково. Flowmingo использует более асимметричную геометрическую сетку, но в основе их макета лежат квадраты и линии. Более толстые линии подчеркивают квадратные формы во всем.
И для более легкого прикосновения мы получили красивое расположение квадратов и четких линий в этой геометрической сетке для косметической компании Skin Labs.
Геометрические сетки должны быть в наборе инструментов любого веб-дизайнера, чтобы обеспечить прочную структуру и простое представление.
15. Пользовательские курсоры
Курсоры, вероятно, являются одним из наиболее недооцененных аспектов веб-дизайна, и большинство из нас довольствуется простой старой стрелкой. Когда дизайнер может взять эту незначительную часть сайта и превратить ее во что-то крутое, это настоящее достижение.
Мы только что говорили о HGM Legal и об их использовании геометрических сеток, но у них также есть необычный жирный черный курсор.
Инструмент «Перо» продвигает круговой курсор на один шаг дальше, объединяя анимацию и текст, создавая почти психоделический эффект.
Или посмотрите на этот трансформирующийся круговой курсор от Büro, который меняет свой внешний вид в зависимости от того, над каким элементом дизайна он наведен.
В 2021 году мы надеемся увидеть больше оригинальных вариантов того, чем может быть курсор.
16. Карточки с прокруткой
Мы были рады видеть, что карточки с прокруткой стали неотъемлемой частью дизайна. Независимо от того, прокручиваются ли они по горизонтали или по вертикали, они добавляют на сайт мгновенное действие и являются отличным способом представления информации.
На этом веб-сайте Ofcina используются привлекательные цвета для прокручиваемых карточек.
Макеты карточек существуют уже довольно давно, и нам нравится видеть, как они используются в новых направлениях прокрутки.
17. Бесцветный дизайн
Редкий белый цвет создает чистый дизайн, а любые цветные элементы привлекают еще больше внимания.
В этом дизайне для латинских дизайнеров много белого пространства с эффектом наведения, который преобразует черно-белое изображение каждого дизайнера в полноцветное.
Даже что-то вроде минималистичного простого дизайна может быть интересным благодаря микровзаимодействию, анимации и другим динамическим эффектам.
User Experience Database также использует бесцветный подход к дизайну, что делает его минимальным и легким для чтения.
18. Аудио
Использование звука как неотъемлемой части дизайна устраняет барьеры доступности для людей с нарушениями зрения, а также приносит пользу тем, кто предпочитает слушать большой кусок текста на веб-сайте,
The New York Times отлично справляется с предоставлением звукового сопровождения к некоторым из представленных ими статей.
Мы надеемся, что в будущем на веб-сайтах появится больше вариантов звука, которые позволят людям выбирать, как они хотят воспринимать контент.
19. Сеть, вдохновленная печатью
С цифровыми технологиями, заменяющими так много, что когда-то были физическими объектами, произошло возрождение старых медиа. Популярность виниловых альбомов является доказательством того, что люди хотят испытать что-то, кроме кучи нулей и единиц.
Макеты, вдохновленные печатью, удовлетворяют желание людей найти что-то в реальном мире. Макеты в стиле журналов и другие элементы традиционного графического дизайна обеспечивают связь с тактильными ощущениями от печати на бумаге.
Приведенный выше пример из Home Run Studio и приведенный ниже пример для Foundamour черпают вдохновение из печати, давая им возможность познакомиться и связать их с публикацией.
20. Системы проектирования для единообразия
Системы проектирования мощные. Используя CMS для создания повторяемых макетов и связанных коллекций, легко обновлять или редактировать, а также быстро создавать дублирующиеся веб-сайты. Независимо от того, используются ли они в небольших масштабах или в более крупных, они полезны для любой организации при создании и управлении своими проектами.
Руководство по стилю от Saasly
Мы также видели действительно полезные приложения, разработанные, чтобы еще больше упростить рабочие процессы дизайн-системы. Zeroheight действует как централизованное пространство для управления задачами и совместной работы. Figma предлагает шаблоны, а также другие инструменты для систем дизайна. А коллекция CMS от Webflow может поддерживать дизайн-систему любого размера.
21. Отсутствие кода
Отсутствие кода не означает полное удаление кода. Программисты и разработчики всегда будут важны.Никакой кодекс не означает открытия этих областей знаний для тех, кто в противном случае был бы освобожден. Это позволяет творить любому, у кого есть идея или видение.
Без кода дизайнеры становятся фронтенд-разработчиками. Писатели становятся веб-дизайнерами. А владельцы малого бизнеса могут окунуться в мир электронной коммерции. Кем бы вы ни были, никакой код не дает вам возможности стать чем-то большим. Он убирает границу между не дизайнерами, теми, кто занимается только дизайном, и теми, кто занимается разработкой. Он объединяет людей в сотрудничестве.
Было захватывающе наблюдать за развитием новых платформ без кода, а также за разработкой курсов дизайна, которые включают в свои учебные программы учения об этом. Нам не терпится увидеть, что произойдет с отказом от кода в 2021 году.
Мы с нетерпением ждем 2021 года
Всегда интересно наблюдать, как веб-дизайн продолжает меняться и продолжает расти движение без кода.
Нам тоже не терпится увидеть, что вы собираетесь создать в новом году. Разместите свои последние работы в нашей витрине и не забудьте присоединиться к поддерживающему и растущему сообществу на нашем форуме сообщений.
С Новым годом — продолжайте проектировать!
Примечание : Наш первоначальный пост включал доступность как тенденцию веб-дизайна, но перечисление ее как тенденции подрывает ее важность. Мы искренне приносим свои извинения и признаем вред, который мы причинили, указав доступность в Интернете как тенденцию, как и другие в этом списке. Доступность — это не мимолетный тренд в дизайне — это стандарт, к которому должна стремиться наша отрасль.
Мы также добавили некоторые соображения и рекомендации, которые следует учитывать, чтобы использовать эти тенденции, не причиняя вреда.Мы надеемся продолжить обучение и повышение осведомленности о специальных возможностях в Webflow и надеемся побудить наше сообщество дизайнеров сделать то же самое.
10 тенденций веб-дизайна, которые будут доминировать на вашем экране в 2020 году
Конец года приближается быстро, и мы уже смотрим, что принесет следующий год. Для таких дизайнеров, как я, конец года — время вдохновения. Какие тренды и эстетика дизайна будут популяризированы в 2020 году? Какие тенденции, скорее всего, исчезнут?
«Взгляд на эти тенденции на 10 000 футов ясно показывает, что« веб-дизайн »больше похож на традиционный« графический »или« печатный »дизайн, чем когда-либо.Степень гибкости, которую дизайнеры проявляют в выразительности и творческой ловкости, поразительна по сравнению с тем, что было всего пять или десять лет назад », — заявляет Хой Винь, старший директор по дизайну продуктов в Adobe XD.
Винь как нельзя более прав. Сделав такой взгляд на тенденции дизайна в течение нескольких лет, я могу полностью согласиться с тем, что эти тенденции показывают, насколько креативными стали дизайнеры, заставляя Интернет больше походить на другие типы медиа, такие как графический дизайн и полиграфический дизайн.
Если вы дизайнер или поклонник великолепного дизайна, вам повезло.Я сделал за вас большую часть тяжелой работы и собрал основные тенденции веб-дизайна, которые, вероятно, украсят ваши экраны в 2020 году.
1. Текстовые герои
Я упоминал в прошлогодней статье, что эксперименты с областями-героями — часть веб-сайта при первой загрузке сайта, также известная как «верхняя часть сгиба», вероятно, станет более очевидной в течение 2019 года. Это определенно так, и одним из этих экспериментов были текстовые герои .
В то время как некоторые основные области были больше связаны с различными типами элементов, чем просто стандартная настройка текста на изображении, эта тенденция «только текст» интригует тем, что удаляет типичное фоновое изображение и позволяет типографии делать все возможное. работай.
Веб-сайт Phase3 — отличный пример того, как убрать вещи обратно в область героя и сосредоточиться только на типографике (хотя меняющий цвет фон, который вы можете увидеть на их сайте, является тонким приятным штрихом). Эта типографика также имеет некоторую индивидуальность, вместо стандартного или часто используемого шрифта без засечек. Вы также можете увидеть эту тенденцию в The New York Times, которая объединила пользовательский шрифт с анимацией для своего текстового заголовка на своем веб-сайте Food Festival.
2.Вовлеченные иллюстрации
Хотя иллюстрации преобладали на веб-сайтах в течение многих лет, в последнее время наблюдается растущая тенденция к тому, чтобы на веб-сайтах появлялись индивидуализированные, подробные и хорошо выполненные иллюстрации, и я уверен, что это только начало.
Веб-сайты, такие как DottedSign (вверху) и Fixate (внизу), являются прекрасными примерами этой растущей тенденции. Оба веб-сайта используют очень хорошо продуманные и подробные иллюстрации не только в их главном разделе, но и на всем веб-сайте, чтобы связать все вместе.
Сочетание иллюстраций с небольшой анимацией действительно помогает привлечь внимание и может использоваться как еще один способ общения с вашими посетителями. Анимированные иллюстрации отлично подходят как дополнительный инструмент к тексту и часто лучше подходят для иллюстрации и коммуникации, когда используются в качестве более тонких и второстепенных функций вместо основного.
3. Цвета и типографика в винтажном стиле
В своей прошлогодней статье я затронул тему возвращения ностальгии в дизайн к прошлым временам.На это часто влияют другие формы средств массовой информации того времени, такие как телевидение и журналы, особенно если это возврат к доинтернетовой эпохе.
Я ожидаю, что в 2020 году эта тенденция примет иную форму. Вместо того, чтобы идти ва-банк в стиле ретро или ретроспективе, я вижу, как веб-сайты берут ностальгические мелочи и смешивают их в современном стиле.
Одним из наиболее распространенных элементов дизайнерского вдохновения, которые сегодня используются на веб-сайтах, является использование винтажных цветов и / или типографики как способа передать это чувство ностальгии.Новый веб-сайт Крисси Тейген — отличный пример использования винтажного шрифта и винтажной цветовой схемы (землистой, но яркой).
Популярный веб-сайт о тенденциях в области типографики Typewolf также использует винтажную типографику и цвета, чтобы повлиять на дизайн своего сайта, оставаясь при этом современным в эстетике. Их шрифт в сочетании с цветом фона выглядит винтажным, но не устаревшим.
4. Черно-белый
Монохромный — значит 2019 год. 2020 будет годом, когда все больше и больше сайтов экспериментируют с отсутствием цвета вообще, придерживаясь только черного и белого с очень небольшими промежутками.Считайте, что это монохромный, но минималистичный.
Сайт Кана Уилсона — отличный пример эстетики дизайна без цвета. Веб-сайт, ориентированный в первую очередь на черно-белое изображение с изображениями в оттенках серого, является чистым, четким, современным и модным по сравнению с другими современными сайтами. Сайт Александра Яременко (ниже) также сохраняет черно-белую цветовую схему за пределами примеров его портфолио.
5. Основные сетки соответствуют карточкам
Большинство веб-сайтов спроектированы на основе невидимой системы сеток, которая помогает упорядочивать элементы на странице и размещать их в строках.Однако в 2020 году я ожидаю, что эти сетки станут более доминирующими в визуальном плане и будут использоваться в качестве основного эстетического элемента дизайна, явно вдохновленного популярным трендом «карточного» дизайна.
Сайт Frames for Future — отличный пример использования сетки в качестве эстетики дизайна, а не просто инструмента дизайна. Контент их сайта организован в виде больших прямоугольников, выровненных по сетке. Большая часть сайта Evergib (ниже) также размещена в виде сетки с «ячейками» разного размера, чтобы придать ему объем, визуальный интерес и изменить темп.
6. Набросок типографики
Если вы еще не можете сказать, мне очень нравится типографика, и я особенно замечаю типографские тенденции. Одной из новых тенденций является обрисованная в общих чертах типографика, и мы можем ожидать, что в 2020 году ее будет все больше и больше.
«Типографическая отличительная черта стала императивом в Интернете, что удивительно, учитывая, что это было не так давно, когда у дизайнеров было только несколько шрифтов, с которыми можно работать », — объясняет Вин из Adobe. «У нас больше веб-шрифтов; нам также нужна более смелая и разнообразная веб-типографика.«Несомненно, это проявляется не только в этой тенденции, но и в других, уже упомянутых здесь.
Сайт фазы 3, упомянутый в начале этой статьи, имеет эту обрисованную в общих чертах типографику. Redscout также использует крупный контурный шрифт как часть эстетики своего веб-дизайна, комбинируя анимацию, чтобы вытягивать «заливку» букв, оставляя только контур, когда вы прокручиваете страницу вниз.
7. Огромные размеры шрифтов
Да, еще одна типографская тенденция, но как можно не заметить постоянно увеличивающиеся размеры шрифтов в Интернете? Тенденция, идущая в 2020 году, — это простая типографика, которую можно читать из любой точки комнаты.
Redscout и The New York Times Food Festival (оба были упомянуты ранее в этой статье) — прекрасные примеры этой тенденции. Baina (вверху) увеличивает размер шрифта своего имени до очень большого размера, занимая почти половину области просмотра их домашней страницы.
HalloBasis имеет очень крупную типографику, заполняющую область просмотра, как стиль навигации, помогающий посетителям переходить к различным частям своего сайта.
8. Геометрические формы и узоры
В прошлом году я упоминал, что в 2019 году будут в тренде более плавные, органические формы, поэтому неудивительно, что противоположные этому тоже будут модными.Геометрические формы, линии и узоры возвращаются в 2020 году.
На веб-сайте Future London Academy представлены анимированные геометрические фигуры в области героев, которые также соответствуют тенденциям геометрической формы и анимации, упомянутым выше. На веб-сайте XXXI (ниже), посвященном их статье «Введение в кодирование», аналогичным образом используются геометрические формы.
9. Анимация, запускаемая пользователем
Обычно, когда мы думаем об анимации, мы видим, что она происходит сама по себе, независимо от каких-либо действий, которые мы можем предпринять на странице как посетители сайта.Однако растущая тенденция в веб-дизайне заключается в том, что анимация запускается каким-либо типом ввода или действия посетителя.
Винь от Adobe конечно согласен. «Сочетание взаимодействия с пользователем с красивой анимацией и стильным шрифтом — одна из самых захватывающих вещей, которые случились с типографикой за последнее поколение. Несмотря на то, что веб-дизайн все в большей степени соответствует выразительности печатного дизайна, перевод текста в движение в ответ на вводимые пользователем данные добавляет новое измерение в то, как мы думаем о письменном общении.Еще об этом, пожалуйста! »
Сайт Ромена Авалле является прекрасным примером этой тенденции, как и сайт Intro to Coding’s (упоминавшийся ранее). В центре их веб-сайта очертания инициалов перемещаются в зависимости от того, где находится курсор. Этот тип интерактивной анимации помогает заинтересовать зрителя и замедляет его понимание анимации, делая его частью взаимодействия с веб-сайтом, а не пассивным потребителем.
10. Модные цветовые схемы попадают на веб-сайты
Я уверен, что все мы знакомы с цветовыми комбинациями и цветовыми схемами, которые модны в других сферах нашей жизни, будь то музыка, одежда, социальные сети. , так далее.Я ожидаю, что в 2020 году некоторые из этих цветовых комбинаций найдут свое место в дизайне веб-сайтов.
Примером модного сочетания цветов является основная схема синего и бледно-розового / пыльного румянца, ставшая популярной в Pinterest и Instagram. Сайты Collate Art (вверху) и Datalands (внизу) используют эту модную цветовую схему в своем дизайне.
Другие примеры модных цветовых схем включают тона драгоценных камней (зеленый, пурпурный), землистые тона (загар, коричневый, зеленый, текстура дерева) и радужные / жемчужные цветовые схемы (пастели, которые сливаются вместе как жидкость, давая почти металлический вид).
Основные выводы о тенденциях
Некоторые из самых больших тенденций, которые мы, вероятно, увидим в 2020 году, связаны с анимацией, иллюстрациями и типографикой, смешанными с новыми типами цветовых схем и взаимодействий.
Типографика, однако, кажется здесь большим победителем, поскольку я ожидаю увидеть эти несколько тенденций в типографике далеко за пределами 2020 года. Вин из Adobe может сказать следующее о типографике в тенденциях веб-дизайна по мере того, как мы вступаем в новое десятилетие «Дизайнерам и брендам необходимо отказаться от единообразия, которое стало доминирующим в веб-типографике.По-прежнему слишком много технологических компаний пытаются снизить свою неприглядную деятельность с помощью округлых шрифтов без засечек. И слишком много потребительских брендов используют типографику с засечками, чтобы идентифицировать себя с этим иллюзорным понятием бруклинского хипстерского классицизма ».
(Вам нужно больше вдохновения? Ознакомьтесь с нашим руководством по веб-дизайну 2019 года, руководством по веб-дизайну 2018 года, руководством по веб-дизайну 2017 года и руководством по веб-дизайну 2016 года).
От крупной типографики до очерченной типографики, цветовых схем в винтажном стиле и модных цветовых схем и всего остального, о чем здесь упоминается, 2020 год выглядит отличным годом для дизайнеров и поклонников дизайна, и я, например, не могу дождаться, чтобы увидеть эти тенденции дизайна оживают, когда мы вступаем в следующее десятилетие.
10 тенденций в дизайне веб-сайтов на 2020 год
Вступая в новое десятилетие, интересно остановиться и подумать, сколько на самом деле изменилось за последние 10 лет, особенно когда речь идет о веб-дизайне. По мере того, как технологии продолжают развиваться все быстрее и быстрее, растут и потребности потребителей, что заставляет веб-дизайнеров постоянно адаптировать свои стили, чтобы не отставать.
Подумайте об этом: всего 10 лет назад мобильные сайты почти не существовали, а те, которые действительно существовали, не совсем удобны для пользователей.Перенесемся в сегодняшний день, и потребителям нужны быстрые веб-сайты, которые хорошо спроектированы и просты в использовании, что делает современный веб-дизайн более важным для бизнеса, чем когда-либо.
Если вы хотите придать своему сайту современный вид, обратите внимание на следующие тенденции для вдохновения:
Темный режим
Благодаря появлению функции «темного режима» на смартфонах и в популярных приложениях потребители все чаще предпочитают использовать эту функцию, когда у них есть такая возможность.Это не только намного проще для глаз для тех из нас, кто постоянно использует экраны, но и имеет визуально простой и чистый вид.
Когда черный или темный фон сочетается по всему сайту с яркими кнопками с призывом к действию, дизайн выделяется еще больше, предлагая посетителю визуально гладкий опыт.
Элементы и графика, нарисованные вручную
Элементы, нарисованные вручную, возвращают старомодный дизайн в современной интерпретации. Будь то статические мультфильмы, написанные вручную иконки и графика или рисованная анимация, дизайн веб-сайтов начинает возвращать позитивные, теплые и почти уютные эмоции, которые приносит этот индивидуальный дизайн.
В конце концов, любой нарисованный вручную дизайн напоминает нам о людях, стоящих за работой — то, чего часто не хватает в сегодняшнем мире, где доминируют технологии, где футуристический дизайн взял верх в последнее десятилетие, стремясь смотреть вперед. Тем не менее, независимо от того, насколько технологии используются в нашей работе и личной жизни, мы всегда будем работать с людьми, и привнесение того же человеческого элемента в наши проекты напомнит нам об этом.
Призывы к действию сверху
В наши дни все сводится к тому, чтобы посетители веб-сайта совершали конверсию как можно скорее.Для веб-сайтов это означает размещение кнопок с призывом к действию (CTA) в верхней части страницы, чтобы их посетители видели в первую очередь. В мире непродолжительного внимания и высоких показателей отказов верхняя часть страницы является одним из самых важных пространств в дизайне веб-сайтов. Вот почему все больше компаний предпочитают размещать заголовок, подзаголовок и кнопку с призывом к действию именно в этом месте. С привлекательной иконографией и правильной фотографией в заголовке или баннером, сопровождающим CTA, этот дизайнерский трюк обязательно увеличит конверсию.
Видимые сетки
Как следует из названия, проектные сетки представляют собой серию горизонтальных и вертикальных линий, которые пересекаются вместе несколько раз, служа структурой для работы дизайнеров внутри, а не хаотичным свободным пространством. Тем не менее, тенденция, которую мы продолжаем наблюдать в веб-дизайне, — это фактическое отображение сеток даже после завершения дизайна. Будь то более мягкие линии сетки или более доминирующие линии сетки, делая их вообще видимыми, создает чистый, структурированный дизайн сайта, который придает сайтам профессиональный вид.
Рамки белого пространства
Минимализм — это название игры в 2020 году, и создание веб-сайта с центрированным контентом, обрамленным белыми пространствами, — один из лучших способов обеспечить, чтобы все внимание посетителей было сосредоточено на реальных продуктах или услугах, которые предлагает ваш сайт. Белые пространства не только создают баланс, но также создают дополнительный акцент и привлекают внимание именно к тем словам или визуальным эффектам, на которых вы хотите, чтобы ваша аудитория сосредоточилась.
Типографика большего размера
Говорят, чем больше, тем лучше — по крайней мере, это верно для шрифтов для веб-сайтов в 2020 году.Дизайнеры веб-сайтов каждый год используют более крупные шрифты, привлекая внимание аудитории всего несколькими словами в яркой форме. Крупные шрифты созданы по образцу типичных печатных плакатов, которые часто используют крупные шрифты, чтобы привлечь внимание читателя даже издалека. Что хорошо в крупной типографике, так это тем, что ее можно использовать на любом веб-сайте.
Геометрические узоры
Кто знал, что геометрия может так хорошо выглядеть? Геометрические формы настолько универсальны, что их можно использовать множеством творческих способов, чтобы привлечь внимание именно туда, где вы хотите.Будь то полосы, квадраты, треугольники или любые другие забавные нестандартные формы, геометрические узоры — верный способ создать современный минималистичный вид для вашего сайта.
Светящаяся или неоновая графика
Яркая неоновая графика и элементы никогда не были так популярны. Со временем многие веб-сайты становятся все ярче и ярче, создавая смелый футуристический вид. Комбинируя неоновые элементы с более темным фоном (аналогично тому, как разрабатываются сайты в темном режиме), сайты могут создавать действительно выделяющуюся графику.В 2020 году мы можем ожидать увидеть множество неоновой графики, плавающей в 3D, предлагая посетителям заглянуть в будущее дизайна.
Минималистская навигация
В 2020 году меньше значит больше. Практически во всех направлениях, перечисленных в этой статье, минимализм играет роль. Кнопки навигации — один из наиболее недооцененных аспектов дизайна веб-сайтов, и все больше сайтов начинают создавать минималистичные эффекты с помощью навигации. Объединив все кнопки навигации в одно раскрывающееся меню, сайты могут убрать отвлекающие кнопки и объединить весь фокус в текст или видео в верхней части страницы, спереди и по центру.
Цветовые схемы 1970-х годов
70-е вернулись! В то время как некоторые сайты идут полным ходом с футуристическим неоновым дизайном, другие стремятся к более ретро-стилю с пастельными цветовыми палитрами 70-х годов. Кто сказал, что современный дизайн должен основываться на футуристических ощущениях? Иногда дизайн, который возвращает лучшее из прошлого, — это все, что нужно, чтобы ваш сайт выглядел классическим и неподвластным времени.
Ясно одно: это новое десятилетие приносит с собой новые дизайны, которые определенно не заставят посетителей сайта скучать.Независимо от того, основаны ли дизайны на ностальгии или стремятся с головой окунуться в футуристические видения, компании, которые создают визуально привлекательные сайты на основе этих 10 тенденций, обязательно привлекут внимание своей аудитории.
Добавить комментарий