2021. (Разве не приятно добавить «1?!»)

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

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

Хотя это ни в коем случае не является исчерпывающим, вот 11 основных тенденций веб-дизайна, которые мы наблюдаем на 2021 год:

1. Макеты страниц с горизонтальной прокруткой
2. Пользовательские курсоры
3. 3d объекты
4. Отличный опыт электронной коммерции
5. Видимые линии сетки с толстыми весами линий
6. Параметры предпочтений пользователя на сайтах (не только в приложениях)
7. Переход от создания веб-сайтов к созданию решений
8. Игривые иллюстрации
9. Типографика как дизайн, а не просто слова
10. Геометрические фигуры как элементы фона
11. Вордпресс как CMS

1. Макеты страниц с горизонтальной прокруткой

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

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

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

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

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

2. Пользовательские курсоры

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

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

В этом примере от Rox Studios, бутик-дизайнерского агентства, мышь — это желтый кружок. Он меняется в зависимости от фонового содержимого, на которое вы наводите курсор, превращаясь в саму кнопку CTA для «Просмотра» проекта.

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

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

Видите этот маленький белый круг? Это ваша мышь на веб-сайте Этьена Фаработа, фронтенд-разработчика из Франции. Однако в этом есть нечто большее, чем кажется на первый взгляд. Я настоятельно рекомендую пролистать различные предложения по всему сайту. (Некоторые сюрпризы смайликов ждут!)

Креативное агентство Impero использует большой желтый кружок в качестве курсора, который прекрасно отстает от любого текста, на который вы наводите курсор. Они также используют его как возможность помочь пользователям перемещаться по сайту, например, отображая «перетаскивание» над разделом горизонтальной прокрутки. (Хороший способ объединить несколько из этих тенденций!)

3. 3d объекты

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

Этот красочный пример от итальянского агентства Chip&Byte добавляет элемент игривости на их сайт. Когда вы перемещаете курсор (маленький серый кружок!), фигуры также перемещаются, добавляя ощущение размера.

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

Beans Agency использует 3D-тенденцию, чтобы оживить свои бобы, отображая их в нескольких сценах на сайте. Эта тенденция — отличный способ придать персонажу движение или придать «реалистичности» просто абстрактной плоской иллюстрации.

Не совсем продан на 3d тренде? Вы всегда можете использовать тонкий подход, как C-HM Conseil. Элегантный скос и свечение на монохроматическом фоне гармонично сочетаются с материальным видом, не будучи властным.

4. Отличный опыт электронной коммерции

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

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

Этот винный магазин, Molly Dooker, — это не только красивое и художественное место, но и приятное место для покупок. Легко просматривать вина, просматривать содержимое вашей корзины, а затем совершать покупки — и все это, наслаждаясь восхитительным дизайном сайта.

Zoya's Pantry, магазин здоровых и экологически чистых продуктов, оптимизирует процесс покупок, добавляя несколько товаров в корзину. Когда вы нажимаете «Добавить в корзину», ваше окно не меняется, поэтому вы можете просто продолжить просмотр, не теряя своего места на странице. Затем, чтобы просмотреть свою корзину, все, что вам нужно сделать, это навести курсор на значок в верхней панели навигации (вместо того, чтобы переходить на отдельную страницу).

Вы заметите несколько тенденций дизайна 2021 года на сайте The Cool Club. От простого опыта электронной коммерции до 3D-отображения одного из их продуктов (карточной игры!), Легко увидеть, что именно вы покупаете, а затем положить это в корзину. (Даже прямо над сгибом на главной странице!)

5. Видимые линии сетки с толстыми весами линий

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

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

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

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

6. Пользовательские настройки на сайтах (не только в приложениях)

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

Сразу же, когда вы загрузите веб-сайт Хоанга Нгуена, вы увидите опцию для аудио. По умолчанию установлено «выключено», поэтому, даже если сайт загрузится до того, как вы сделаете выбор, он вас не испугает (хотя, даже если бы было установлено «включено», этого не произошло бы; это очень успокаивающая музыка!) . Это дает вам возможность сразу настроить свой опыт, и если вы передумаете позже, рядом с его логотипом в верхней части сайта есть опция звука.

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

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

7. Переход от создания веб-сайтов к созданию решений

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

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

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

Kappow — цифровое агентство, специализирующееся на веб-дизайне, но вы не обязательно узнаете об этом на их домашней странице. Вместо этого они разделяют ценность того, что их работа действительно дает их клиентам: рост бизнеса, успешный запуск продукта и преимущество перед конкурентами. (Кто не хочет всего этого?!)

8. Игривые иллюстрации

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

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

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

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

9. Типографика как дизайн, а не просто слова

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

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

Loop, креативное агентство с полным спектром услуг, использует шрифт в качестве фонового элемента на своей домашней странице вместе с более удобным для чтения абзацем вверху. Поскольку размер фонового шрифта очень большой (и приятный оттенок желтого), ваши глаза могут читать оба набора текста, не путаясь. Мне также нравится, как он побуждает пользователей прокручивать, чтобы ответить на вопрос: «Дизайн для… чего?»

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

10. Геометрические фигуры в качестве элементов фона

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

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

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

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

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

11. WordPress как CMS

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

WordPress теперь поддерживает более 40% Интернета. Это почти половина всех веб-сайтов (включая те, которые не построены на CMS), и, вероятно, это связано с тем, насколько гибкой CMS действительно стала за эти годы.

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

Что вы думаете об этих тенденциях веб-дизайна на 2021 год? Согласны ли вы с появлением нестандартных курсоров или считаете, что 3D-дизайн — это просто причуда? Дайте нам знать в комментариях ниже, какие тренды вам нравятся, а какие, по вашему мнению, отсутствуют в этом списке!