Тренды 2016 дизайн

Тренды и их применение на практике2016

Тренды и технологии

1. Флэт 2.02. Яркая эффектная типографика3. Акценты цветом, необычные цвета color4. Минимализм5. Карточный дизайн6. Сторителлинг7. Инфографика8. Максиизображения9. Лайф-стайл10. Анимация и интерактивная анимация11. Интеграция сайта и мобильного12. Usability, мобильность, адаптив

Где все эти тренды применимы?

Интернет-магазины, витрины

Промо-сайты продукта или услуги

Акционные сайты, лендинги

Корпоративные сайты

В чем особенности «флэта»? Причины малого распространения иконокдо 2010 года: слишком сложные, детальные, на них уходило много времени, они не всегда были интуитивно понятными.

Флэт 2,0

1. Альтернатива «сквеоморфизму»2. Стиль моментально набрал популярность: понятный,

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

хорошо подобранные цвета.4. Мобильность, адптивность

Флэт 2,0

Источник: uxpin_web_design_book_of_trends_2015_2016.pdf, depositfotos.com

В дизайне сочетание минимализма, простоты и адаптивности (мобильности). В чем произошла эволюция:Иконки и иллюстрации опять начинают усложнятся и становиться более креативными. Появляются дополнительные приемы типа: outline, long shadow, изометрия.

Флэт 2,0

было

сталоИсточник: uxpin_web_design_book_of_trends_2015_2016.pdf, depositfotos.com

Флэт 2,0В дизайне сочетание минимализма, простоты и адаптивности. В чем произошла эволюция:иконки и иллюстрации опять начинают усложнятся и становиться более интересными. Появляются дополнительные приемы типа: outline, long shadow, изометрия.

Источник: depositfotos.com, amado-id.ru

С другой стороны происходит стандартизация, унификация символов.

Флэт 2,0

Источник: https://historyoficons.com/

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

Флэт 2,0

Было:

Флэт 2,0

http://www.forestapp.cc/

http://www.ot-24.co.uk/

https://hell-o-baby.com/promo

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

Итак, особенности тренда:1. Экстремальные размеры: как сверхогромные, так и сверхмалые и их сочетания.2. Креативное сочетание нескольких разных шрифтов, разных семейств.3. Художественные шрифты.

Dramatic Typography, эффектная типографика

http://junduffy.co.nz/

http://www.gogoro.com/smartscooter/customize/

http://www.beoplay.com/products/h6-rapha-edition#in-the-zone

http://hotelmoscow.info/

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

Акцент на яркие цвета,Акцентирование цветом

http://www.linequality.com/

http://www.mixd.co.uk/

http://melaxen.afisha.ru/

http://www.primeit.pt/en

https://www.epicurrence.com/

http://www.helbak.com/

Основанный после второй мировой войны как движение в искусстве, чьим манифестом был девиз:

FORMS FOLLOWS FUNCTIONОн стал мощным инструментом в веб-дизайне, одним из самых выразительных. В основу легла концепция: «Меньше значит больше»: отказ от декоративности, больше пространства, каждая деталь имеет значение. Навигация чаще всего скрыта, все внимание фокусируется на содержании, которое выражается по сути как можно меньшим количеством выразительных средств: простая типографика, мало цвета. Чем меньше элементов на экране, тем более важное значение они имеют. Одна концепция на странице в духе простоты. Экран должен сосредоточиться только на одной концепции, вокруг одного визуального образа.

Минимализм

http://www.etq-amsterdam.com/

http://www.wheelytrikes.ru/

http://leenheyne.nl/

http://booneselections.com/

http://www.keecker.com/

http://huncwot.com/

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

Карточный дизайн, плитка

http://www.erikjohanssonphoto.com/work

http://www.howarkitekter.se/

Вы наверняка все слышали от гуру маркетинга насколько важен строителлинг в рекламе. Нет ничего круче, если вы можете рассказать о своем продукте в виде истории. На самом деле есть – это визуальный сторителлинг! Известная поговорка – одна картинка стоит тысячи слов. По этой причине визуальный рассказ будет работать гораздо лучше, чем просто текст, чтобы сделать ваш рассказ был истинным и живым.Некоторые данные (uxpin_web_design_book_of_trends_2015_2016):100 миллионов человек по всему миру смотрят, по крайней мере одно видео в день.Посетители сайта с 64% более вероятно сделают покупку на сайте после просмотра видео.80% зрителей могут вспомнить, что смотрели в видео -объявлении в течение 30 дней после его просмотра.92% тех, кто смотрит видео на мобильных устройствах делятся содержание с другими.Мозг человека обрабатывает визуальные элементы в 60 000 раз быстрее, чем чтение слов.

Визуальный сторителлинг (storytelling)

http://lavkalavka.com/farmer/full/pavel-abramov

http://andychef.ru/

http://www.beautyofbrewing.com/

http://www.bingbangnyc.com/collections/bingbangbabe-julia http://www.itsmeandyou.com/bing-bang-nyc

Чем сторителлинг отличается от отзыва?Наличием истории!

1. Большие изображения – полноэкранные.

Тренды в работе с фотографиями/изображениями

Натуральная жизнь (лайф-стайл), показываем предметы в контектсе (найк)https://edwin-europe.com/http://www.bingbangnyc.com/

Тренды в работе с фотографиями/изображениями

https://edwin-europe.com/journal

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

Инфографика

Инфографика

http://mcdonalds.ru/chiken_info

http://www.socialbakers.com/social-wars/

Микроанимация

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

http://trasmissione-energia.terna.it/produzione.aspx

http://avenirclinic.com/

Снова завоевывают мир.Скроллы-эффекты (лонг скрол, скролджакинг)ПаралаксВидео и гиф-анимацияМикроанимация3DПромо – игрыУправление с помощью вебкамерыВзаимодействие с мобильными устройствамиVR

Интерактив и анимация

Прием, когда контент изменяется по мере движения скрола мыши.

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

Scrolljacking

http://mixpl.us/makemagic

http://f700gs.bmw-special.ru/

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

http://my.deejo.fr/

http://nissancreativestudio.ru/

http://www.iamsacha.nl/

http://nike.lidyana.com/

Управление сайтом с мобильного

Интеграция телефона и компьютера: телефон как джойстик!

https://spacelamb.12wave.com/

https://lightsaber.withgoogle.com/

http://norilskfilm.com/