TemplateMonster
810

Моушн-дизайн, градиент, асимметрия: тренды в веб-дизайне 2020 года

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

В закладки

Анимация и motion design

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

Motion design — это когда картинка не просто становится динамичной, но и обретает смысл, рассказывает историю, где первый слайд — ее начало или конец (как задумает автор).

Внедрить анимацию можно в виде слайдера на первом экране, эффекта параллакс (когда отдельные объекты движутся вслед за курсором), картинки-бумеранга. Идеи для реализации motion design:

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

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

Градиент

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

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

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

Внедрения тренда на примере логотипа Instagram:

Еще один пример, где градиент использован частично в качестве фона (сайт itlogia.ru):

Минимализм

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

Оформить ресурс в стиле минимализм можно с помощью таких действий:

  • скрыть панель навигации на время просмотра всех блоков, кроме первого (но тогда добавить стрелочку, которая позволит вернуться наверх);
  • сделать лишь несколько кнопок (с 1-2 СТА);
  • использовать минимум графических элементов, вроде разнообразных и необычных шрифтов, теней, анимации, рисунков.

При работе с этим трендом важно не забывать о юзабилити и постоянно спрашивать себя «а не пострадает ли от этого удобство сайта?».

Самая крутая реализация минимализма представлена на странице Apple.

Цветной фон

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

Яркий пример реализации тренда — сайт Apple Music:

Абстракция и футуризм

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

Для создания дизайна в футуристическом стиле можно использовать такие элементы:

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

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

Пример одновременно абстракции и футуризма — ребрендинг и обновленный сайт BBC Two:

3D элементы

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

3D уместно на сайтах с техникой, автомобилями, товарами ручной работы, играми, игрушками и т.д.

Вот как можно передать особенности продукта через 3D-визуализацию:

Шрифты с необычными засечками

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

Самый простой пример:

Плоский дизайн с тенями

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

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

Пример реализации этого приема:

Много иллюстраций

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

Основные элементы должны быть отрисованы якобы вручную, и среди них могут встречаться:

  • люди;
  • детали интерьера;
  • растения;
  • дома;
  • техника;
  • иконки, другое.

Пример этого тренда (здесь, кстати, есть сразу несколько приемов — минимализм, анимация, моушн-дизайн):

Асимметрия

Этот тренд может проявлять по-разному:

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

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

Яркий пример асимметрии:

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

Тем более, что на TemplateMonster Черная пятница уже стартовала!

{ "author_name": "TemplateMonster", "author_type": "editor", "tags": [], "comments": 2, "likes": 0, "favorites": 6, "is_advertisement": false, "subsite_label": "templatemonster", "id": 93792, "is_wide": false, "is_ugc": false, "date": "Thu, 21 Nov 2019 18:48:30 +0300", "is_special": false }
0
{ "id": 93792, "author_id": 389283, "diff_limit": 1000, "urls": {"diff":"\/comments\/93792\/get","add":"\/comments\/93792\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/93792"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 389283, "last_count_and_date": null }
2 комментария
Популярные
По порядку
2

Мне кажется, все это в трендах года так с 2017. 

Ответить

Комментарий удален

0

Просто в тренде разнообразие. 

Ответить

Комментарий удален

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }