Ознакомьтесь с 21 тенденцией веб-дизайна на 2021 год, которые повлияют на то, как мы проектируем и улучшаем то, как люди взаимодействуют с Интернетом.
Добро пожаловать на наш ежегодный обзор тенденций веб-дизайна. От ретро-типографики до постоянно растущего движения без кода — в 2021 году есть чего ожидать.
2020 год был непростым. С его галлонами дезинфицирующего средства для рук, неудобными встречами Zoom и надвигающейся тревогой неопределенности, мы все чувствуем себя немного измотанными. Несмотря на обстоятельства, мы все сделали все возможное, чтобы пройти через все это. Многие из нас потратили время на изучение новых дизайнерских навыков. А некоторые из нас только что испекли хлеб на закваске. У всех нас есть свои навыки выживания.
Когда дело дошло до дизайна, мы следили за нескончаемыми тенденциями в Интернете. Поговорив с командой Brand Studio в Webflow и несколькими другими дизайнерами, мы составили исчерпывающий список некоторых тенденций веб-дизайна, которые мы ожидаем увидеть в 2021 году. Мы надеемся, что этот список не только вдохновит вас, но и вдохновит. подходить к Интернету более инклюзивно и доступно.https://www.youtube.com/embed/1YUE1FIfQLc
21 современная тенденция веб-дизайна на 2021 год
Вот 21 тенденция веб-дизайна, которые также помогут сделать 2021 год немного ярче.
1. Ретро шрифты
Мы видели, как многие старые вещи снова становились крутыми, а затем, в свою очередь, становились еще более неаккуратными. Подумайте об усах на руле и джинсах для мамы. Ирония недолговечна.
Ретро-шрифты испытали те же приливы и отливы в своей популярности, и многие дизайны с винтажной типографикой не устарели.
Тем не менее, возвратная типографика пережила некоторое возрождение. Мы не видим таких же утомленных шрифтов. Скорее, стилизация и немного артистизма переосмысливают, какими могут быть ретро-шрифты.
Мы видим это слияние старого и нового на странице продвижения Spotify Carnival . Вместо того, чтобы казаться устаревшими и клише, они вдохнули новую жизнь в традиционные жирные шрифты, немного поэкспериментировав. Это хороший пример использования традиционных шрифтов и придания им классного и современного стиля, сохраняя при этом разборчивость.
Здесь, на этом веб-сайте компании по планированию мероприятий Goliath Entertainment, чувствуется ретрофутуризм . Смелая типографика отсылает к прошлому, но при этом очень актуальна.
В 2021 году мы с нетерпением ждем более творческого переосмысления типографики.
2. Анимация прокрутки с параллаксом.
Эффекты прокрутки параллакса были трендом в дизайне веб-сайтов в течение многих лет, и в 2021 году мы надеемся увидеть более тонкие и творческие исследования того, чего можно достичь с помощью параллакса.
Помните, что слишком большое количество движений в эффектах параллакса может быть вредным для людей с вестибулярными расстройствами, потому что иллюзия глубины и движения может вызвать дезориентацию и головокружение. Вот несколько рекомендаций, которые, как мы видим, все больше дизайнеров принимают во внимание, чтобы гарантировать, что они минимально включают параллакс и не причиняют вреда:
- Не позволяйте эффектам параллакса отвлекать от важной информации
- Не усложняйте пользователю выполнение важной задачи
- Сведите к минимуму количество эффектов параллакса
- Сведите к минимуму количество параллаксов в каждом экземпляре.
- Ограничение эффектов параллакса в небольшой области экрана
- Включите возможность отключать эффекты параллакса.
Сайт-портфолио Алисы Ли использует эффекты параллакса, которые реагируют на положение мыши, чтобы оживить ее иллюстрацию. Количество движений невелико и ограничено рамками героя. Это отличный пример использования параллакса с ограничениями и намерениями.
Не всякая параллакс-анимация должна отображать масштабные жесты по экрану. Мы также видели более тонкие приложения. В этом веб-дизайне для Green Meadow этот эффект можно было почти полностью упустить. Но это мягкое раскрытие текста создает достаточное сопоставление, чтобы привлечь внимание к каждому блоку текста по мере его появления.
В следующем году мы рады видеть, что прокрутка с параллаксом будет тонко использоваться не для яркого эффекта, а как инструмент для выделения или выделения важных фрагментов контента.
3. Горизонтальная прокрутка.
Горизонтальная прокрутка, которая раньше считалась ошибкой веб-дизайна, возвращается.
Мы видим, что все больше веб-дизайнеров продолжают экспериментировать с горизонтальной прокруткой. Те, кто это делает, лучше всего ломают шаблон не ради того, чтобы отличаться, а как практический способ постепенно раскрывать вторичную информацию, как в галерее изображений.
Дизайнеры, успешно использующие горизонтальную прокрутку в 2021 году, будут учитывать следующие соображения:
- Не заставляйте пользователей перемещаться по горизонтальному содержимому: разрешите альтернативные способы навигации, например кнопки со стрелками с четкими метками.
- Используйте четкие визуальные подсказки, чтобы указать, где контент использует горизонтальную прокрутку, и не скрывайте эти подсказки за наведением курсора.
- Подумайте о том, какой контент выиграет от отображения в горизонтальной прокрутке — фотогалерея — хороший соперник, поскольку горизонтальная прокрутка покажет пользователям небольшой предварительный просмотр и позволит им просмотреть больше или продолжить движение вниз по странице.
- Избегайте необходимости горизонтальной прокрутки для текста, который необходимо прочитать
На нашей собственной странице функций Designer мы использовали небольшую горизонтальную прокрутку, чтобы увеличить большое изображение и показать более релевантные фрагменты изображения в большем размере, чтобы сопровождать соответствующий контент.
Momento Дизайн — студия домашняя страница «s включает в себя четкую реплику рядом с первой кнопкой , которая также выступает в качестве связующего звена, медленно сдвинув тебя к признакам работ по щелчку. Движение прокрутки идет в быстром темпе и не слишком длинное, что позволяет отображать избранные изображения.
McBride Design использует горизонтальную прокрутку для демонстрации больших фотографий своих работ, не занимая слишком много места на странице. Они также включают четкий индикатор в правом нижнем углу, который устанавливает ожидание, что страница будет прокручиваться по горизонтали.
4. 3D-графика повсюду
С появлением экранов с более высоким разрешением 3D-дизайн далеко ушел от блочных и скошенных краев Geocities. Мы наблюдаем, как высококачественные 3D-изображения органично вплетаются в веб-дизайн. Вместо того, чтобы отвлекать внимание, они улучшают общее впечатление пользователя.
Креативное агентство Sennep добавляет подробности трехмерным элементам на своем веб-сайте. Здесь есть приятное чувство гармонии между всеми элементами дизайна. Это прекрасный пример того, как в более минималистичных макетах 3D может производить еще большее впечатление.
Yaya поместила свою любовь к 3D во главу угла своей домашней страницы с помощью этой причудливой и крутой анимации героя.
В приведенном ниже примере от компании Pitch , производящей программное обеспечение для презентаций , они имеют красочный макет, полный трехмерных форм, теней, градиентов и многослойных элементов. Эти элементы трехмерного дизайна воплощают этот дизайн в жизнь.
Трехмерные элементы добавляют уникальности и объемности любой веб-странице.
5. Мультимедийные возможности
Поскольку у большинства людей есть доступ к более высокоскоростному Интернету, мультимедийные возможности Интернета появляются повсюду. Объединение визуальных элементов, текста, видео и аудио делает пользовательский интерфейс более удобным.
Успешные проекты в 2021 году будут использовать ограничения с мультимедийным опытом:
- Сделайте ставку на простоту, как при сочетании движения и звука. Слишком много происходящего может отвлекать или подавлять людей с когнитивными расстройствами.
- Обдуманно используйте различные форматы мультимедиа, чтобы сделать контент максимально доступным.
- Включите скрытые субтитры и стенограммы для всех предварительно записанных мультимедиа.
- Включите замещающий текст для изображений и сопровождайте сложные изображения более длинным описательным текстом.
- Убедитесь, что весь текст написан с использованием HTML, а не отображается внутри изображений.
- Избегайте автовоспроизведения видео или движущегося контента: вместо этого предоставьте четкую кнопку «воспроизведение», которая дает пользователю возможность воспроизвести и приостановить контент.
Эффективное и доступное использование мультимедиа требует учета множества факторов. Вот дополнительные ресурсы о доступности видео.
Сайт Николаса Эрреры включает элементы управления воспроизведением красивого фонового видео: оно воспроизводится при нажатии, а также может быть приостановлено. Он также включает в себя тонкую анимацию, которая показывает, насколько далеко вы находитесь в видео.
Мультимедийные возможности работают во многих разных областях. В приведенном ниже примере мы видим снимок экрана из Black Yearbook . Это краудфандинговая книга, составленная Адрейнтом Берэлом и его друзьями, чтобы показать, каково быть афроамериканским учеником, посещающим преимущественно белые школы. Полные элементы управления воспроизведением четко видны на всех видео. Красиво снятый кинематографический фильм переходит от одной сцены к другой в начале дизайна с гипнотическим саундтреком, играющим на заднем плане, что очень похоже на трейлер к фильму. За этим введением скрывается страсть, которая заставляет вас захотеть пойти дальше в изучении книги и движений, стоящих за ней.
И для чего-то необычного мы собираемся завершить этот список мультимедийных примеров с помощью MSCHF , печально известной компании, стоящей за множеством вирусных веб- дропов . Внешний вид MSCHF пересекает линию брутализма с почти абсурдистским дизайном, который объединяет строгую типографику, текстовые SMS-сообщения и другие элементы.
6. Опыт дополненной реальности (AR)
Что касается мультимедийных возможностей, давайте не будем забывать обо всех удивительных впечатлениях от погружения с использованием дополненной реальности (AR). AR теперь означает больше, чем просто охота на покемонов на вашем мобильном устройстве Apple или Android. Новые технологии, такие как WebXR API и программное обеспечение от Wayfair Technologies , открыли эту сферу почти для всех.
Jeep использует дополненную реальность для страницы « Постройте и оцените Jeep ». Для тех, кто ненавидит заходить в автосалоны, это будет легким и беззаботным опытом. Все больше веб-сайтов розничной торговли и электронной коммерции используют возможности дополненной реальности, чтобы продавать свои продукты и расширять возможности потенциальных клиентов в процессе покупки.
7. Акцент на зерно
Жесткие сетки и плоские однотонные блоки действительно могут лишить веб-дизайн индивидуальности. Зернистая текстура придает им более естественный вид.
Мы видим красоту зернистости на этом веб-сайте Studio Gusto . Он использует элементы дизайна lo-fi для более грубого пользовательского опыта, который кажется более естественным, чем гладкое совершенство, обычное для многих веб-дизайнов.
8. Акцент на приглушенные цвета.
Точно так же, как зерно может придать дизайну более естественный вид, так и приглушенные цвета могут.
Magic Theater Studio использует светлую цветовую палитру вместе с темными блоками зеленого, что создает четкий контраст между разделами этого веб-дизайна. Эти приглушенные цвета являются идеальным фоном для нарисованного от руки текста и иллюстраций. На заднем плане есть слегка жужжащая зернистость, которая почти неразличима, и легкое искажение светлого и темного фона, что делает дизайн очень живым.
Это маркетинговое портфолио для Бобби Роу, представленное ниже, представляет собой праздник цвета и содержит информативные и забавные записи о работе, которую он выполняет. Может быть трудно создать веб-дизайн, который был бы хорошо округлен по своей красоте, но Бобби Роу справляется с этим веб-дизайном. Есть хорошее разнообразие приглушенных цветов и более смелых.
9. Дизайн на основе предпочтений
Веб-разработка добилась больших успехов в предоставлении более персонализированного опыта. Это может быть что угодно, от включения переключения между темным / светлым режимом и других способов изменения внешнего вида и навигации сайта до предложения контента, адаптированного к вашему вкусу, например, пользовательских списков воспроизведения, созданных Spotify.
Новые методы проектирования и алгоритмы делают Интернет менее пассивным и ориентированным на пользователя. В будущем еще больше внимания будет уделяться удовлетворению потребностей, желаний и вкусов тех, кто просматривает веб-сайты.
10. Размытие по Гауссу
Размытие по Гауссу так хорошо работает, обеспечивая мягкий фокус изображениям и градиентам. Этот эффект существует уже некоторое время, но дизайнеры использовали его в более заметных областях веб-дизайна.
Moment House начинает свою домашнюю страницу не с изображения героя, а с приятного гауссовского размытия цвета. Это придает атмосферу атмосферы и напрямую перекликается с фото городского пейзажа Лос-Анджелеса, которое следует за ним. Он идеально передает линзу золотого света и дымки, через которую просматривается Лос-Анджелес.
Мы видим размытие по Гауссу на заднем плане Monograph Communications . Это пушистое смешение красного, пурпурного и синего создает приятный контраст между прямыми линиями и жирной типографикой, которая их накладывает.
Портфолио UX « Я Тамара» использует тот же подход, добавляя немного размытия по Гауссу на задний план.
Goodbooks объединяет похожий на пар пузырь размытия по Гауссу. Снимок экрана ниже на самом деле не отражает этого, но он кажется чем-то скрытым за белым экраном. Мы видим изменение и вращение формы, но никогда не видим полностью, что это такое. Это создает такой замечательный визуальный якорь и привлекает внимание к призыву к действию под ним, чтобы проверить их 12 лучших рекомендуемых книг.
Нам нравится видеть, как вещи, которые существовали вечно, такие как размытие по Гауссу, становятся все более популярными в руках дизайнеров, которые используют их по-новому и интересно.
11. Скроллинг
Мы наблюдаем растущую тенденцию в том, что дизайнеры рассказывают истории через Интернет. Здесь на помощь приходит скролл- повествование — визуальное повествование, которое подчеркивает сюжет и вовлекает вас в его повествование.
Лучшие применения сдержанности практики скроллинга:
- Сохраняйте движение на небольшом участке.
- Обеспечьте взаимодействие на условиях пользователя: предоставьте очевидные элементы управления воспроизведением для воспроизведения / паузы / остановки взаимодействий и движений.
- Убедитесь, что любые элементы прокрутки помогают подчеркнуть историю, а не отвлекают от важного текста.
На нашем собственном сайте истории искусства веб-дизайна используются небольшие, тонкие анимации и красивые иллюстрации, которые подтверждают рассказ о том, как история искусства влияет на веб-дизайн.
12. Темный режим
Вспомните «Back in Black» AC DC, потому что темный режим появится на всех экранах в 2021 году. Все больше дизайнеров принимают эстетику темного режима , где черный цвет обеспечивает идеальный темный фон, чтобы элементы дизайна выделялись на экране.
В приведенном ниже примере агентство Obys разработало прекрасную дань уважения модельеру Питеру Линдбергу , соединив тонко текстурированный черный фон с красивым шрифтом с засечками.
Не бойтесь уйти из жизни в 2021 году с собственными дизайнерскими работами.
13. Иллюстрации шаржа.
Не так давно было время, когда веб-сайты состояли только из текста и нескольких изображений или графики. Веб-дизайн эволюционировал, и теперь дизайнеры создают работу, которая связывает людей с людьми на более личном уровне. Мультяшные иллюстрации приобрели популярность как способ трансформации веб-сайтов со здоровой человечностью.
Существует так много источников и художников, создающих фантастические мультяшные иллюстрации. Blush — отличная платформа для поиска пользовательских иллюстраций персонажей, таких как этот отличный набор от Виджая Верма .
Мультяшные иллюстрации предлагают очень многое с точки зрения творчества и делают бренд более представительным. Мы с нетерпением ждем появления растущего числа персонажей в веб-дизайне в наступающем году.
14. Геометрические сетки.
Сетки просты, но обладают большой гибкостью в том, как их можно интегрировать в дизайн. Геометрические сетки набирают популярность как способ структурировать макет, придавая ему четкий и смелый вид.
Этот дизайн от Хадсона Гэвина и Мартина использует блоки как для элементов навигации, так и для контента. По этим большим цветным квадратам интересно ориентироваться, и они так хорошо работают, удерживая ваше внимание.
Геометрические сетки не обязательно должны располагаться одинаково. Flowmingo использует более асимметричную геометрическую сетку, но в основе их макета лежат квадраты и линии. Более толстые линии подчеркивают квадратные формы во всем.
И для более легкого прикосновения мы получили красивое расположение квадратов и четких линий в этой геометрической сетке для косметической компании Skin Labs .
Геометрические сетки, обеспечивающие прочную структуру и простое представление, должны быть в наборе инструментов любого веб-дизайнера.
15. Пользовательские курсоры
Курсоры, вероятно, являются одним из самых недооцененных аспектов веб-дизайна, и большинство из нас довольствуется простой старой стрелкой. Когда дизайнер может взять эту незначительную часть сайта и превратить ее во что-то крутое, это настоящее достижение.
Мы только что говорили о HGM Legal и их использовании геометрических сеток, но у них также есть необычный жирный черный курсор.
Инструмент «Перо» продвигает их круговой курсор на один шаг вперед, объединяя анимацию и текст, создавая почти психоделический эффект.
Или посмотрите на этот трансформирующийся круговой курсор от Büro, который меняет свой внешний вид в зависимости от того, над каким элементом дизайна он наведен.
В 2021 году мы надеемся увидеть больше оригинальных вариантов того, чем может быть курсор .
16. Прокрутка карточек
Мы были рады видеть, как прокручиваемые карточки становятся неотъемлемой частью дизайна. Независимо от того, прокручиваются ли они по горизонтали или по вертикали, они добавляют на сайт мгновенное действие и являются отличным способом представления информации.
На этом веб-сайте Ofcina используются привлекательные цвета для прокручиваемых карточек.
Макеты карточек существуют довольно давно, и нам нравится видеть, как они используются в новых направлениях прокрутки.
17. Бесцветный дизайн.
Редкий белый цвет делает дизайн более чистым, а любые цветные элементы привлекают еще больше внимания.
В этом дизайне для Latinxs Who Design много белого пространства с эффектом наведения, который преобразует черно-белое изображение каждого дизайнера в полноцветное.
Даже что-то вроде минималистичного простого дизайна может быть интересным благодаря микровзаимодействию, анимации и другим динамическим эффектам.
База данных пользовательского опыта также использует бесцветный подход к дизайну, что делает ее минимальной и легкой для чтения.
18. Аудио
Использование звука в качестве неотъемлемой части дизайна устраняет барьеры доступности для людей с нарушениями зрения, а также приносит пользу тем, кто предпочитает слушать большой кусок текста на веб-сайте.
The New York Times проделывает фантастическую работу по обеспечению звукового сопровождения некоторых из своих статей.
Мы надеемся увидеть больше вариантов звука на веб-сайтах в будущем, что даст людям возможность выбирать, как они хотят воспринимать контент.
19. Сеть, вдохновленная печатью
Цифровые технологии заменили так много, что когда-то были физическими объектами, и произошло возрождение старых медиа. Популярность виниловых альбомов является доказательством того, что люди хотят испытать что-то, кроме кучи нулей и единиц.
Макеты, которые черпают вдохновение из печати, исполняют желание людей связываться с чем-то в реальном мире. Макеты в стиле журналов и другие элементы традиционного графического дизайна обеспечивают связь с тактильными ощущениями от печати на бумаге.
Приведенный выше пример из Home Run Studio и приведенный ниже для Foundamour черпают вдохновение из печати, давая им возможность познакомиться и связать с публикацией.
20. Разрабатывайте системы на согласованность
Дизайн-системы мощны. Используя CMS для создания повторяемых макетов и связанных коллекций, легко обновлять или редактировать, а также быстро создавать дублирующиеся веб-сайты. Независимо от того, используются ли они в малых или больших масштабах, они полезны для любой организации при создании и управлении своими проектами.
Мы также видели действительно полезные приложения, разработанные, чтобы упростить рабочие процессы дизайн-системы. Zeroheight действует как централизованное пространство для управления задачами и совместной работы. Figma предлагает шаблоны, а также другие инструменты для систем дизайна. А коллекция CMS Webflow может поддерживать дизайн-систему любого размера.
21. Нет кода
Отсутствие кода не означает полного исключения кода. Программисты и разработчики всегда будут важны. Никакой кодекс не означает открытия этих областей знаний для тех, кто в противном случае был бы освобожден. Это позволяет творить любому, у кого есть идея или видение.
Без кода дизайнеры становятся фронтенд-разработчиками. Писатели становятся веб-дизайнерами. А владельцы малого бизнеса могут окунуться в мир электронной коммерции. Кем бы вы ни были, никакой код не дает вам возможности стать чем-то большим. Он убирает границу между не дизайнерами, теми, кто занимается только дизайном, и теми, кто занимается разработкой. Он объединяет людей в сотрудничестве.
Было интересно наблюдать за развитием новых платформ без кода и курсов дизайна, которые включают в свои учебные программы обучение по этому поводу. Нам не терпится увидеть, что произойдет с отказом от кода в 2021 году.
С нетерпением ждем 2021 года
Всегда интересно наблюдать, как веб-дизайн продолжает меняться, и постоянную динамику отказа от кода.
Нам также не терпится увидеть, что вы собираетесь создать в новом году. Разместите свои последние работы в нашей витрине и не забудьте присоединиться к поддерживающему и растущему сообществу на нашем форуме сообщений .
С Новым годом — продолжайте проектировать!
Примечание . В нашем первоначальном посте доступность рассматривалась как тренд веб-дизайна, но его перечисление как тренд подрывает его важность. Мы искренне приносим свои извинения и признаем вред, который мы причинили, указав доступность в Интернете как тенденцию, как и другие в этом списке. Доступность — это не мимолетный тренд в дизайне — это стандарт, к которому должна стремиться наша отрасль.
Мы также добавили некоторые соображения и рекомендации, которые следует учитывать, чтобы использовать эти тенденции, не причиняя вреда. Мы надеемся продолжить обучение и повышение осведомленности о специальных возможностях в Webflow и надеемся побудить наше сообщество дизайнеров сделать то же самое.
