Сайт 2023: 25 оригинальных сайтов, которые вдохновят вас в 2023 году

25 оригинальных сайтов, которые вдохновят вас в 2023 году

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

Иллюстрация Аниты Гольдштейн

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

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

Сайты-портфолио
1. Dalya Green

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

Фоновый градиент на сайте веб-дизайнера Далии Грин

2. Kirill Zakomoldin

Веб-сайт Кирилла Закомолдина, лауреата премии D&AD New Blood, — настоящий мастер-класс по стилю. Видео на фоне позволяет заглянуть за кулисы и понаблюдать за работой мультимедийного дизайнера — отличное решение, которое можно взять на заметку. Ярко-желтый шрифт прекрасно контрастирует с темным фоном.

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

Ярко-желтый шрифт на сайте Кирилла Закомолдина контрастирует с темным фоном.

3. Itamar Makover by Roei Edlar

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

Сайт-портфолио Itamar Makover меняет цветовую гамму в один клик.

4. Kaijie Chen

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

Kaijie Chen берет за основу шаблон Editor X и придает ему уникальность

5. Fanny Demier

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

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

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

6. Derek McKechnie

Дизайнер Дерек Маккечни — самопровозглашенный поклонник панка и гранжа. Чтобы убедиться в этом, не обязательно читать биографию на его сайте. Проекты дизайнера размещены на главной странице в виде вырезок, скотч с нацарапанным на нем от руки текстом “расклеен” по всему сайту, и все это создает атмосферу афиши панк-шоу 90-х. Такие дизайнерские решения выглядят уникально и хорошо запоминаются, при этом в центре внимания все равно остаются навыки Дерека.

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

7. Pacho Vega

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

Сайт Pacho Vega больше похож не на портфолио, а на портал в его мир дизайна.

8. Clem Shepherd

Сайт Клема Шепарда — наглядный пример бруталистского минимализма. Простая двухколоночная сетка, черный шрифт без засечек — на первый взгляд может показаться, что единственное, чем руководствовался дизайнер, — практичность. Но если копнуть глубже, то мы увидим, что Шепард добавил интересных деталей в те разделы сайта, где это необходимо. Например, при создании страницы “Обо мне” дизайнер использовал 3D-редактор Spline и платформу Editor X, чтобы превратить стандартное скучное резюме в интерактивный опыт.

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

9. Odds Graphic

Веб-сайт Odds Graphic призван перевернуть ваш мир с ног на голову. Виртуозное использование вертикальных разделов, нестандартная ориентация текста, интересные эффекты наведения и оригинальный курсор — неожиданности будут поджидать вас на каждом шагу, как только вы “переступите порог” этого сайта.

Odds Graphic использует вертикальные разделы и нестандартную ориентацию текста, чтобы перевернуть ваш мир с ног на голову.

10. Aroke 1

Сайт-портфолио Aroke 1 — прекрасный пример стиля Y2K. Автор используют интерактивные олдскульные окна для отображения своих последних работ. Вы можете закрыть их, чтобы увидеть культовый вращающийся смайлик. Попробуйте нажать на каждую ссылку на левой боковой панели, чтобы узнать больше о стиле, в котором работает дизайнер.

Веб-сайт Aroke 1 сочетает в себе стиль Y2K и интерактивные олдскульные окна.

11. Graphic Post B

Работы дизайнера из Токио, Лизы Куроивы, эффектно представлены на ее сайте Graphic Post B. Они всплывают на экране одна за другой, предоставляя пользователю возможность сделать паузу и более детально рассмотреть то, что ему понравилось. Оригинальный липкий хедер придает сайту особый шарм.

Проекты Лизы всплывают на экране один за другим

12. Eden Abaev

Сайт графического дизайнера Eden Abaev — наглядный ответ на вопрос: “Может ли черно-белый интерфейс быть стильным?” Текст “прокрутите вниз” бесконечно вращается вокруг стрелки, привлекая внимание и побуждая пользователей к действию. При прокрутке на экране появляются яркие и стильные цветные стикеры, которые делают минималистичную черно-белую сетку более интересной. Сайт является отражением творчества и личности Eden.

Яркие стикеры добавляют визуальный интерес черно-белой сетке на сайте Eden Abaev

13. Eldar Partush

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

Портфолио Эльдара Партуша содержит множество неожиданных эффектов, например, изменение шрифта при наведении на него курсора мыши

14. Mr. Itamar

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

Сайт Mr. Itamar содержит всевозможные шрифты, цвета, анимации и взаимодействия.

Интернет-магазины
15. Timeless Pieces

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

Веб-сайт Timeless Pieces содержит анимированные карточки, которые интегрированы в меню сайта для демонстрации ювелирных изделий

16. BEC Furniture

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

Сайт BEC Furniture — идеальное сочетание элегантности и простоты навигации: красивые фотографии и контрастный белый текст.

17. Nueva Sunglasses

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

Бренд очков Nueva Sunglasses создал сайт, такой же минималистичный, как их оправы, с нейтральной цветовой палитрой, трендовым шрифтом и простым лейаутом.

18. Eat Beauty

Что может быть лучше мороженого? Только полезное мороженое! Сайт Eat Beauty достаточно хорош, чтобы еще больше усилить эту привлекательность. Замороженные лакомства буквально танцуют, когда вы наводите на них курсор. Настоящий праздник!

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

Сайты студий и агентств
19. Subcultr

Subcultr называет свою команду “инкубатором оригинальности”, и их веб-сайт является прямым тому доказательством. Смелые шрифты соседствуют с громоздким меню, демонстрируя, насколько влиятельным является это единственное в своем роде агентство.

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

20. Fox Group

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

На сайте Fox Group используется нестандартное меню, цвет фона которого меняется при прокрутке.

21.

OrangeYouGlad

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

Сайт OrangeYouGlad: симпатичные персонажи и уникальный эффект наведения в футере главной страницы.

22. Eggert + Friends

Фиксированное позиционирование как текста, так и изображений на сайте Eggert + Friends придает интерфейсу определенную структуру. Прокрутите страницу, чтобы открыть раздел “О нас” поверх липкого изображения, и продолжайте скроллить, пока не дойдете до раздела “Проекты”. Здесь заголовок выступает в качестве фона — каждый проект появляется поверх него, будто воздушный шар.

Eggert + Friends используют фиксированное позиционирование элементов для создания структуры в “бесконечной” прокрутке сайта.

23. Wix Pro

Wix Pro — это сайт, созданный на Editor X, демонстрирующий другие сайты, построенные на этой платформе. Фиксированное позиционирование и эффекты наведения позволяют без единого клика продемонстрировать пользователям обширную галерею сайтов, отмеченных наградами.

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

24. The Lumio Company

Веб-сайт Lumo Design Studio, созданный компанией Lumio, примечателен своей простой эстетикой и эффектом аккордеона, который помогает умело структурировать подборку проектов, тематических исследований и информацию о бренде.

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

Веб-сайт, который заслуживает отдельного внимания
25. OFFF Barcelona

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

Первый экран главной страницы полностью соответствует заявленной миссии. Здесь представлены изображения крутых работ ведущих дизайнеров, между которыми располагаются слова “OOOOH” и “OFFF”, набранные крупным интерактивным шрифтом. Яркое бирюзовое меню содержит такие разделы, как: состав участников, программа, воркшопы и т.д. Управление контентом осуществляется при помощи встроенной CMS Editor X.

На сайте OFFF Barcelona между изображениями крутых работ ведущих дизайнеров расположены слова “OOOOH” и “OFFF”, набранные крупным интерактивным шрифтом.

Веб-дизайн в 2023 году: какие будут главные тренды

Мария Дрокина

ведущий UI-дизайнер WebValley Studio, Team Leader

Проходные и устойчивые тренды

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

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

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

Минимализм

Сайт бренда спортивной одежды EQPT в эстетике минимализма. Источник

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

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

Шаблонные сайты в однотипном минималистичном оформлении на Тильде. Источник

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

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

Продукт как элемент дизайна

На сайте iPhone 14 сам продукт выступает в качестве элемента дизайна. Источник

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

Баухаус

Дизайн веб-сайта в стиле Баухаус. Источник

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

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

Типографика

Баннер с заголовком на главной странице сайта дизайн-студии Antara. Источник 

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

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

Пример нестандартной типографики, которая подойдет не каждому проекту. Источник

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

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

Смещение заголовков ближе к центру экрана. Источник

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

Ретро-стиль

Оформление сайта в ретро-стиле. Источник

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

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

Использование искажений

Сайт с ненавязчивым эффектом шума. Источник

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

Структурные блоки 

Видимые границы и структурные блоки на сайте. Источник

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

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

Темная тема

Минималистичный моушн-дизайн в темной теме. Источник 

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

Сайт с переключением темной и светлой темы. Источник

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

Пастельные тона

Пастельная палитра на сайте стилиста. Источник

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

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

Монохром

Монохромный проект в розовой палитре из портфолио Марии Дрокиной

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

Эффект глубины и тени

Сайт с эффектом глубины, градиентом и анимацией. Источник 

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

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

Использование тени в дизайне плашек на сайте. Источник

Сплит-экраны

Разделение экрана на части для разграничения информации. Источник

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

Разделение экрана на 3 секции. Источник

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

Микроанимация и моушн-дизайн

Движение букв при скроллинге. Источник

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

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

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

Эффектная моушн-анимация на сайте. Источник 

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

Кастомные курсоры 

Курсор напоминает хвост летающей кометы, при этом функционален. Источник

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

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

3D-элементы 

3D-фигуры и анимация. Источник 

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

При скроллинге двигаются 3D-элементы. Источник

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

22 вдохновляющих тренда веб-дизайна на 2022 год

Эти 22 тренда веб-дизайна на 2022 год помогут информировать и вдохновлять людей на то, что они создают для Интернета. Нырните внутрь.

Миша Вон

Предметов не найдено.

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

Ознакомьтесь с нашей последней публикацией: 11 привлекательных тенденций веб-дизайна на 2023 год .

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

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

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

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

Тенденции веб-дизайна в 2022 году

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

1. Мини-сайты удовольствия

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

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

Day & Night , короткометражка от Pixar в 2010 году повлияла на подходы к анимации, используемые в таких функциях, как Inside Out и Soul.

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

Вы можете поэкспериментировать разными способами: установив намеренно игривый UX-дизайн или преднамеренно разрушив ожидания (но убедитесь, что вы по-прежнему строите доступным образом!). Добавьте юмора не только в текст и изображения, но и в навигацию по сайту, меню и взаимодействия. Будьте тонкими. Делайте вид, что это серьезный сайт, пока это не так. Это возможность создать сайт, который будет функционировать неожиданным образом. Маркетинговый сайт в стиле пасхального яйца для профессиональных целей может работать, если он хорошо выполнен.

Guns 2 Swords — это мини-сайт/предприятие во всей красе Dungeons & Dragons 80-х, с привкусом «Выбери свое собственное приключение». Он был создан MSCHF, группой, которая находится где-то между гонзо-артистами и создателями хайп-приложений, чтобы стать настоящим сервисом. Посетители могли отправить свое оружие, чтобы кузнец мирового класса перековал его в мечи. Действительно эпично.

Компания Blue Check Homes применила противоположный подход к созданию полностью законно выглядящего «серьезного» веб-сайта. То, что началось как шутка Даниэль Баскин в Твиттере, может в конечном итоге превратиться в настоящий мини-бизнес по продаже медальонов с «голубыми чеками» (подобных тем, которые есть в подтвержденных аккаунтах в Твиттере) для домов известных людей.

‍

2. Охота за мусором в Интернете

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

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

Некоторые идеи для подсказок:

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

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

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

‍

3. Приложения, похожие на приложения

Джереми Бейт, соучредитель ThreeSixtyEight, твердо верит, что такие небольшие, ориентированные на опыт сайты — это будущее веб-дизайна. Он объясняет: «Интерфейс-ориентированный веб-интерфейс, который действительно преувеличен с точки зрения дизайна, — это совершенно новый способ использования Интернета, которого раньше не существовало; это похоже на приложение. Для меня это возможность прямо сейчас». Мир привык к приложениям, в которых взаимодействие, анимация и динамичный опыт являются нормой. Следующим логическим шагом будет перенос этой энергии на веб-сайты и создание там более уникального опыта.

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

4. Одностраничные сайты

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

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

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

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

5. Сайты с сильным чувством места

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

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

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

6. Мотивы ар-деко

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

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

Арт-деко объединил элементы из мира природы с современностью века машин — смелые линии, симметрия, простота и неизменное повторение элементов. Посмотрите, как формы этого крыла стрекозы переходят в обычные узоры классического ар-деко Chrysler Building.

Художественный стиль Alegria, который BUCK разработал для Facebook в 2017 году, во многом напоминает изображения человеческих фигур в стиле ар-деко. Четкие изогнутые линии, овальные лица, уменьшенная детализация и преувеличенные пропорции напоминают об этом художественном стиле. Возможно, новый тип модернистского дизайна фигур, такой как эта потрясающая работа иллюстратора Родольфо Рейеса, мог бы стать обновленной версией этой тенденции.

7. Меньше изображений в главных героях

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

Эти четыре веб-сайта от Humain, SVZ, Heyday и RADAR невероятно разные, но каждый использует макет, типографику, цвет и форму, чтобы передать сильную и уникальную идентичность бренда. Отказ от изображений также создает некоторую загадку, побуждая посетителей узнать, что еще находится за пределами главного раздела.

8. Негабаритная типографика

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

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

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

9. Интерактивные шрифты

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

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

10. Дизайн ответственного движения 

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

Движение можно использовать тонко и ответственно. Кори Моэн, старший дизайнер бренда в Webflow, подробно рассказал о том, как строить с учетом параметра «Уменьшить движение» в MacOS.

Для тех, кто предпочитает уменьшенное движение:

Используйте медиа-запрос Preferences-Reduced-Motion CSS, чтобы скрыть анимированные SVG и показать полный статический SVG иллюстрации, когда у кого-то включена настройка ОС «Уменьшить движение»!

Пример кода здесь: https://t.co/inMvJCnj15

3/4 pic.twitter.com/oNhboHsdl1

— Кори Моэн (@CoreyGMoen) 28 июля 2021 г.

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

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

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

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

Раскройте свой творческий потенциал в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начать бесплатно

12. Абстрактные иллюстрации

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

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

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

13. Градиенты с зернистостью

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

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

Мы использовали несколько зернистых градиентов на веб-сайте для конференции Webflow 2021 No-Code. Градиенты используются в анимированной графике, фонах и элементах по всей странице конференции, и мы выбрали среднюю зернистость, которая создает эффект типа печатного издания.

Еще одно творческое использование градиентов в этом году — оформление их в границах кнопок и других типов элементов. Вот руководство по созданию следующей кнопки с радужной окантовкой.

14. Линии

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

‍На сайте Appart Agency используются сверхтонкие линии. Эффект техничный, резкий и минималистичный. Графический дизайн и выбор оранжевого, черного и серо-коричневого цветов напоминают о минималистском художественном движении 19-го века.60-е годы. Движение горизонтальных линий при прокрутке также приятно.

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

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

15. Веб-сайты с разделенным экраном

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

var!－būt! Веб-сайт фестиваля (разработанный ONEIGHT7) представляет интересную особенность этого дизайна с фиксированным нижним колонтитулом, прокруткой бегущей строки и контрастными направлениями прокрутки в правой и левой частях. Разделенный экран здесь фиксирует зрителя, поэтому вы можете включить много движений, не теряя их.

16. Больше глассморфизма

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

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

Тайлер Галпин использует стекломорфизм для создания завораживающего логотипа с движением.

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

17. Меньше неоморфизма

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

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

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

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

18. Инклюзивная копия

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

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

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

19. Гендерно-нейтральный дизайн

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

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

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

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

20. Приоритет скорости страницы

С технической точки зрения, в этом году веб-разработчики уделяют особое внимание скорости страницы. Обновление алгоритма Google 2021 года делает скорость более важным фактором для SEO, чем раньше. Это также отражает более высокие ожидания пользователей в отношении скорости работы сайта, поскольку 53% пользователей покинут страницу, загрузка которой занимает более 3 секунд. Прошли времена терпеливого ожидания на экранах загрузки.‍

Google PageSpeed ​​Insights или Lighthouse — это инструменты, которые можно использовать для оценки оптимизации скорости страницы. Есть также несколько простых шагов, которые разработчики (или их платформа по выбору) могут предпринять, чтобы обеспечить быструю загрузку страниц, такие как оптимизация изображений и отложенная загрузка изображений за пределами экрана. Также может помочь ограничение количества используемых шрифтов. Вы также хотите избежать разработки своих страниц на платформе, которая слишком сильно зависит от плагинов, поскольку это может иметь большое влияние.

21. Здание с динамическим наполнением

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

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

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

22. No-code используется для большего числа команд

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

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

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

Мы рады видеть, как они будут реализованы в 2022 году

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

Ознакомьтесь с изданием 2023 года, 11 привлекательных тенденций веб-дизайна на 2023 год или совершите путешествие в прошлое и ознакомьтесь с тенденциями веб-дизайна 2021 года. , 2020, 2019, 2018, 2017 и 2016 гг. 03

Веб-дизайн

Веб-дизайн

Подписаться на Webflow Inspo

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

Электронная почта

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

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

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

Портфолио дизайнеров

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

Dribbble

8 минут чтения

26 января 2023 г.

Просмотр вакансий в области веб-дизайна

Art by Kasia Bojanowska

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

1. Повышение доступности веб-сайтов

18 марта 2022 г. Министерство юстиции США опубликовало набор руководств по доступности веб-сайтов и Закон об американцах-инвалидах, антидискриминационный закон, принятый в 1990 г. Согласно обновленным правилам, коммерческие веб-сайты подпадают под Раздел III ADA. Раздел III применяется к предприятиям, которые «открыты для публики», таким как банки, розничные магазины, больницы, рестораны и места проведения исполнительских искусств. Это также относится к предприятиям электронной коммерции и другим предприятиям, работающим только в Интернете.

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

Искусство Саши Ермоленко

2. Ностальгия

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

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

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

Искусство от Craftwork Studio

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

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

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

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

Искусство Даниэллы

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

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

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

  • ZenX Labs Site by Cuberto

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

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

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

  • Поле ввода Фила Гудвина для разворота

6. Удобный для мобильных устройств дизайн

Удобный для мобильных устройств дизайн не является чем-то новым, но он важнее, чем когда-либо, что делает его одной из главных тенденций веб-дизайна 2023 года. По состоянию на 2021 год примерно 85% американцев владели смартфоном; многие из этих людей используют свои телефоны, чтобы сделать заказ, просмотреть меню ресторана, запланировать техническое обслуживание автомобиля и решить другие задачи. Если веб-сайт компании плохо работает на мобильных устройствах, потребители могут перевести свой бизнес в другое место, что приведет к упущенной выгоде.

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

Art by tubek UX

7. Дополненная реальность

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

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

  • Augmenteers AR configurator by Paulina Jadeszko for Frajda Studio

8. Темный режим

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

  • Переключатель темы шаблона Compact Framer от Mateusz Nieckarz

Бесконечные возможности трудоустройства для веб-дизайнеров

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

Нанимайте лучших дизайнеров мира на Dribbble.

Найти дизайнера

  • #1 Доска объявлений о дизайне

  • Фильтры расширенного поиска

  • Неограниченное количество сообщений

Образование

Как стать веб-дизайнером в 2023 году

Узнайте, как стать веб-дизайнером шаг за шагом. Откройте для себя инструменты и ресурсы…

27 июля 2022 г.
12 минут чтения

Портфолио дизайна

2023 Тенденции графического дизайна

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