Embed Size (px)
Citation preview
Тренды и их применение на практике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
Флэт-дизайн стал популяризировать типографику. Появилось множество приятных кастомизированных шрифтов, которые можно внедрять на свой сайт. Как в свободном использовании, которые предоставляет Гугл, так и с лицензией.Типографика стала играть чуть ли не доминирующую роль на сайте. Из утилитарной вещи, она превращается в средство выражения идеи, бренда, маркетинга.
Итак, особенности тренда:1. Экстремальные размеры: как сверхогромные, так и сверхмалые и их сочетания.2. Креативное сочетание нескольких разных шрифтов, разных семейств.3. Художественные шрифты.
Dramatic Typography, эффектная типографика
http://www.beoplay.com/products/h6-rapha-edition#in-the-zone
Характерные яркие цветовые палитры в дизайне никогда не выйдут полностью из моды. Тем не менее, тенденция переходит к более строгой цветовой палитре с яркими цветами, используемыми только в качестве акцентов.
Акцент на яркие цвета,Акцентирование цветом
http://www.linequality.com/
Основанный после второй мировой войны как движение в искусстве, чьим манифестом был девиз:
FORMS FOLLOWS FUNCTIONОн стал мощным инструментом в веб-дизайне, одним из самых выразительных. В основу легла концепция: «Меньше значит больше»: отказ от декоративности, больше пространства, каждая деталь имеет значение. Навигация чаще всего скрыта, все внимание фокусируется на содержании, которое выражается по сути как можно меньшим количеством выразительных средств: простая типографика, мало цвета. Чем меньше элементов на экране, тем более важное значение они имеют. Одна концепция на странице в духе простоты. Экран должен сосредоточиться только на одной концепции, вокруг одного визуального образа.
Минимализм
Карты-плитки - контейнеры информации, представляющие свою особую мысль. Карта может содержать разнообразные данные - изображения, тексты, кнопки, ссылки, комментарии и т.д.Давайте рассмотрим некоторые из интересных стилей карт:
Карточный дизайн, плитка
Вы наверняка все слышали от гуру маркетинга насколько важен строителлинг в рекламе. Нет ничего круче, если вы можете рассказать о своем продукте в виде истории. На самом деле есть – это визуальный сторителлинг! Известная поговорка – одна картинка стоит тысячи слов. По этой причине визуальный рассказ будет работать гораздо лучше, чем просто текст, чтобы сделать ваш рассказ был истинным и живым.Некоторые данные (uxpin_web_design_book_of_trends_2015_2016):100 миллионов человек по всему миру смотрят, по крайней мере одно видео в день.Посетители сайта с 64% более вероятно сделают покупку на сайте после просмотра видео.80% зрителей могут вспомнить, что смотрели в видео -объявлении в течение 30 дней после его просмотра.92% тех, кто смотрит видео на мобильных устройствах делятся содержание с другими.Мозг человека обрабатывает визуальные элементы в 60 000 раз быстрее, чем чтение слов.
Визуальный сторителлинг (storytelling)
http://www.bingbangnyc.com/collections/bingbangbabe-julia http://www.itsmeandyou.com/bing-bang-nyc
Чем сторителлинг отличается от отзыва?Наличием истории!
1. Большие изображения – полноэкранные.
Тренды в работе с фотографиями/изображениями
Натуральная жизнь (лайф-стайл), показываем предметы в контектсе (найк)https://edwin-europe.com/http://www.bingbangnyc.com/
Тренды в работе с фотографиями/изображениями
Неубиваемый тренд уже многих лет.Самый наглядный способ рассказать историю или преподнести информацию. Очень многие пользователи любят инфографику и активно репостят её в соцсетях.
Инфографика
Инфографика
Микроанимация
Интеграция видео не просто фоном или во всплывающем окне, а управляемое.Видео как часть истории или взаимодействующее с пользователем.Использование 3д в полном объеме для демонстрации особенностей продукции.
http://trasmissione-energia.terna.it/produzione.aspx
Снова завоевывают мир.Скроллы-эффекты (лонг скрол, скролджакинг)ПаралаксВидео и гиф-анимацияМикроанимация3DПромо – игрыУправление с помощью вебкамерыВзаимодействие с мобильными устройствамиVR
Интерактив и анимация
Прием, когда контент изменяется по мере движения скрола мыши.
С помощью веб - анимации, статичную инфографику можно превратить в живуюисторию, в которой текст будет дополнен анимированной иллюстрациейпроисходящего.
Scrolljacking
Интерактивная анимацияВидео3DИнтеграция видео не просто фоном или во всплывающем окне, а управляемое.Видео как часть истории или взаимодействующее с пользователем.Использование 3д в полном объеме для демонстрации особенностей продукции.
Управление сайтом с мобильного
Интеграция телефона и компьютера: телефон как джойстик!
