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

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

Давайте сразу разберемся — анимация и 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-визуализацию:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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