Слайд 2Текстовые браузеры 1991-1993
![Текстовые браузеры 1991-1993](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-1.jpg)
Слайд 4Первый графический браузер Mosaic (1993)
![Первый графический браузер Mosaic (1993)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-3.jpg)
Слайд 5Начало 90-х
(низкая скорость подключений, текстовые сайты)
Табличная вёрстка, Gif элементы
![Начало 90-х (низкая скорость подключений, текстовые сайты) Табличная вёрстка, Gif элементы](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-4.jpg)
Слайд 6Середина 90-х, вторая половина 90-х
![Середина 90-х, вторая половина 90-х](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-5.jpg)
Слайд 8Вторая половина 90-х
Появление Flash:
Интерактивные элементы, анимация, меню
![Вторая половина 90-х Появление Flash: Интерактивные элементы, анимация, меню](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-7.jpg)
Слайд 112002-2008 Карамельный дизайн
(Технический web-дизайн)
примитивная структура сайтов;
гламурные «карамельные» цвета;
яркие светящиеся картинки и иконки
![2002-2008 Карамельный дизайн (Технический web-дизайн) примитивная структура сайтов; гламурные «карамельные» цвета; яркие](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-10.jpg)
на неброском фоне;
крупные блоки с текстом, навязчивые бейджи;
закругленные уголки элементов;
градиенты на каждом сайте;
злоупотребление тенями и отражениями.
Слайд 122002-2008 Карамельный дизайн
Технологии Web 2.0
социальные сети
мультимедийный контент
дизайна в стиле глянцевого
![2002-2008 Карамельный дизайн Технологии Web 2.0 социальные сети мультимедийный контент дизайна в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-11.jpg)
пластика современных hi-end устройств
(объемные кнопки и т.д).
Слайд 14Скевоморфизм (2011)
skeuomorph
реалистичность, «аутентичность» фонов и предметов и функциональность элементов.
имитация, перенос физических и
![Скевоморфизм (2011) skeuomorph реалистичность, «аутентичность» фонов и предметов и функциональность элементов. имитация,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-13.jpg)
декоративных свойств реальных предметов на иные объекты.
Активно распространяется после появления iPhone и особенно после iPhone 4.
Слайд 15Скевоморфизм в Вебе
естественные цвета, свойственные натуральным предметам и материалам;
элементы, выглядящие как ткань,
![Скевоморфизм в Вебе естественные цвета, свойственные натуральным предметам и материалам; элементы, выглядящие](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-14.jpg)
кожа или другой физический материал, с реалистичными швами и текстурой;
объемные объекты с использованием буквальных образов вещей и предметов, стикеры с интуитивно понятными функциями;
«занавесочки», ленточки, печати, реалистичные кнопки, бейджи, тумблеры;
оформление текста по принципам печатного дизайна, «тисненые» надписи.
Слайд 19Плоский Flat дизайн (2010-2012/13)
(Швейцарский стиль, наследие Баухауз )
По-настоящему цифровой;
Популярность объясняется техническими аспектами:
![Плоский Flat дизайн (2010-2012/13) (Швейцарский стиль, наследие Баухауз ) По-настоящему цифровой; Популярность](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-18.jpg)
широкое внедрение в массы мобильных устройств;
Новые сайты и приложения должны корректно выглядеть на настольных декстопах и дисплеях смартфонов;
Минималистичный Responsive web design плохо совмещался со скевоморфными атрибутами, но органично выглядел с плоскими компонентами;
2011 — Twitter Bootstrap
Адаптивный дизайн
Слайд 20Плоский Flat дизайн
Microsoft Metro
(2010)
![Плоский Flat дизайн Microsoft Metro (2010)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-19.jpg)
Слайд 21Плоский Flat дизайн
Apple iOS7 (2013)
![Плоский Flat дизайн Apple iOS7 (2013)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-20.jpg)
Слайд 22Плоский Flat дизайн
Flat Design отличается следующими визуальными характеристиками:
максимальной простотой, минимализмом;
абсолютным отсутствием любых
![Плоский Flat дизайн Flat Design отличается следующими визуальными характеристиками: максимальной простотой, минимализмом;](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-21.jpg)
элементов, придающих изображениям глубину (не допускаются никакие «псевдовыпуклостей»: даже кнопки, для которых приподнятая форма была бы естественной, стали плоскими без исключений);
главенство контента в дизайне;
минимальный набор ярких цветов без градиента;
В то же время развивались тренды, возникшие в период популярности скевоморфизма: креативная типографика, широкоформатные фотографии, используемые в фоне, видео в роли бэкграунда.
Слайд 25Материальный дизайн.
2014 г. Material Design
Возвращение к реальному миру, в чем-то схожее с
![Материальный дизайн. 2014 г. Material Design Возвращение к реальному миру, в чем-то](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-24.jpg)
принципами скевоморфизма;
добавление «материальности» интерфейсу;
создание у пользователей ощущения взаимодействия с реальным физическим объектом в цифровой среде.
http://www.google.com/design/spec/material-design/introduction.html#
http://www.jqueryscript.net/tags.php?/Material%20Design/
Слайд 26Материальный дизайн.
2014 г. Material Design
![Материальный дизайн. 2014 г. Material Design](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-25.jpg)
Слайд 272013-2014 г. Material Design
Метафора интерфейса - бумага: она не имеет ни объема,
![2013-2014 г. Material Design Метафора интерфейса - бумага: она не имеет ни](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-26.jpg)
ни четкой текстуры;
Экран - лист, на котором текст напечатан чернилами;
Появились естественные тени при расположении одного цифрового «листа» над другим;
Кнопка вновь «осязаема», но теперь она не нажимается, а меняет оттенок (свойство), как растекающиеся чернила;
Бумага имеет и нереалистичные свойства: плоские листы могут разделяться на части, перестраиваться, растягиваться, вновь сливаться;
Сохранение минимализма, яркости цветов, изящной типографики.
– в плоском дизайне вновь появились проявления объема;
– глубина приобрела смысл, фокусируя внимание на важных моментах;
– анимация стала функциональной, информативной, «осмысленной».
Angular.js
Слайд 30IBM Design Language
IBM предложила не конкретный дизайн, а «новую» (общую) концепцию:
https://www.ibm.com/design/language/
Http://www.ibm.com/design/language/resources.shtml
…
![IBM Design Language IBM предложила не конкретный дизайн, а «новую» (общую) концепцию: https://www.ibm.com/design/language/ Http://www.ibm.com/design/language/resources.shtml …](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-29.jpg)
Слайд 31Тенденции web-дизайна 2014-2015
минимализм, адаптивный дизайн (http://frontender.info/adaptive-vs-responsive-terminology/), фоновое видео (http://www.shiner.com/), большое фоновое изображение
![Тенденции web-дизайна 2014-2015 минимализм, адаптивный дизайн (http://frontender.info/adaptive-vs-responsive-terminology/), фоновое видео (http://www.shiner.com/), большое фоновое](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-30.jpg)
(не стоковое, а под конкретный проект), https://modsquad.com/
Страницы с «длинным» вертикальным скроллом.
Скроллинг часто удобнее поиска разделов в меню и требует меньше действий при потреблении контента (особенно на мобильных устройствах).
Интерактивные элементы. Широкое использование анимации. (http://www.webdesignerdepot.com/, http://www.habib-fadel.com/en/)
Отказ от фиксированной ширины: http://michelemazzucco.it/
Меню как в приложениях http://www.rawnet.com/
Скроллинг http://www.rawnet.com/
Крупные шрифты заголовков
Слайд 32Тенденции web-дизайна 2014-2015
Морфинг. Один из главных трендов, изменение формы/цвета/размера кнопок, инпутов в
![Тенденции web-дизайна 2014-2015 Морфинг. Один из главных трендов, изменение формы/цвета/размера кнопок, инпутов](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-31.jpg)
зависимости от изменения их назначения/состояния.
Сторителлинг (сайты-истории). *
Горизонтальный скроллинг:
http://themeforest.net/item/crea-wp/full_screen_preview/424783,
http://www.lorenzobocchi.com/en/
SVG-графика.
Мобильная версия сайта. Адаптивный, отзывчивый дизайн.
«Карточный»/плиточный дизайн (Pinterest)…
Гамбургер-меню (в проектах 2016 года начинают уходить)
Слайд 33Плоский дизайн 2 (flat 2.0)
Длинные тени
Динамичные цвета (чистые, яркие цвета … без
![Плоский дизайн 2 (flat 2.0) Длинные тени Динамичные цвета (чистые, яркие цвета](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-32.jpg)
переходов и градиентов)
Простая типографика
Прозрачные кнопки
Минимализм, отсутствие «лишних» эффектов
Слайд 38Тенденции web-дизайна 2014-2015
Призрачные кнопки, длинная тень.
Параллакс эффект при прокрутке http://en.muffi.pl/. http://www.iutopi.com/
Прилипающий хедер
![Тенденции web-дизайна 2014-2015 Призрачные кнопки, длинная тень. Параллакс эффект при прокрутке http://en.muffi.pl/.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-37.jpg)
http://mashable.com/, анимация HTML5/CSS3.
Активное внедрение HTML5/CSS3. CSS, SVG blending: https://dev.opera.com/articles/getting-to-know-css-blend-modes/demo_blendmodes_mixblend.html
CSS-фоны: http://24ways.org/2011/css3-patterns-explained/
http://lea.verou.me/css3patterns/
CSS-маски: http://bennettfeely.com/clippy/
Персонализация…
Слайд 42Web 1.0 – Web 2.0 – Web 3.0 – …
Web 1.0 –
![Web 1.0 – Web 2.0 – Web 3.0 – … Web 1.0](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/999105/slide-41.jpg)
это информация для пользователей, циркулируют данные, созданные владельцами сайтов.
Web 2.0 – «социальное» общение, наполнена данными, которые создают пользователи сайтов, появление сайтов как сервисов.
Web 3.0 – Web с персональным выбором контента, семантическая паутина,это «мобильное» общение:
постоянное присутствие человека в онлайне,
возможность оперативно создавать медиа-контент (фото, видеоролики, аудиозаписи) для выгрузки в Web,
Информация о географических координатах объектов и пользователей.