Тренды в веб-дизайне 2016 и их практическое применение.

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

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

3. Где все эти тренды
применимы?
Интернет-
магазины,
витрины
Промо-сайты
продукта
или услуги
Акционные
сайты, лендинги
Корпоративные
сайты

4. В чем особенности «флэта»? Причины малого распространения иконок
до 2010 года: слишком сложные, детальные, на них уходило много
времени, они не всегда были интуитивно понятными.
Флэт 2,0
1. Альтернатива «сквеоморфизму»
2. Стиль моментально набрал популярность: понятный,
легкий, хорошо считывается.
3. В чем суть: отсутствие плавных градиентов и плоские тени,
хорошо подобранные цвета.
4. Мобильность, адптивность

5. Флэт 2,0
Источник: uxpin_web_design_book_of_trends_2015_2016.pdf, depositfotos.com

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

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

8. С другой стороны происходит стандартизация, унификация символов.
Флэт 2,0
Источник: https://historyoficons.com/

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

10. Было:
Флэт 2,0

11. http://www.forestapp.cc/

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

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

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

15. http://junduffy.co.nz/

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

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

18. http://hotelmoscow.info/

19. Характерные яркие цветовые палитры в дизайне никогда не выйдут
полностью из моды. Тем не менее, тенденция переходит
к более строгой цветовой палитре с яркими цветами, используемыми
только в качестве акцентов.
Акцент на яркие цвета,
Акцентирование цветом
http://www.linequality.com/

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

21. http://melaxen.afisha.ru/

22. http://www.primeit.pt/en

23. https://www.epicurrence.com/

24. http://www.helbak.com/

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

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

27. http://www.wheelytrikes.ru/

28. http://leenheyne.nl/

29. http://booneselections.com/

30. http://www.keecker.com/

31. http://huncwot.com/

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

33. http://www.erikjohanssonphoto.com/work

34. http://www.howarkitekter.se/

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

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

37. http://andychef.ru/

38. http://www.beautyofbrewing.com/

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

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

41. 1. Большие изображения – полноэкранные.
Тренды в работе
с фотографиями/изображениями

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

43. https://edwin-europe.com/journal

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

45. Инфографика

46. http://mcdonalds.ru/chiken_info

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

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

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

50. http://avenirclinic.com/

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

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

53. http://mixpl.us/makemagic

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

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

56. http://my.deejo.fr/

57. http://nissancreativestudio.ru/

58. http://www.iamsacha.nl/

59. http://nike.lidyana.com/

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

61. https://spacelamb.12wave.com/

62. https://lightsaber.withgoogle.com/

63. http://norilskfilm.com/