Тенденции web-дизайна

Текстовые браузеры 1991-1993

август 1991 года

Первый графический браузер Mosaic (1993)

Начало 90-х
(низкая скорость подключений, текстовые сайты)
Табличная вёрстка, Gif элементы

Середина 90-х, вторая половина 90-х

Середина 90-х
(1996)

Вторая половина 90-х
Появление Flash:
Интерактивные элементы, анимация, меню

Вторая половина 90-х
1998

Рубеж веков

2002-2008 Карамельный дизайн
(Технический web-дизайн)
примитивная структура сайтов;
гламурные «карамельные» цвета;
яркие светящиеся картинки и иконки на неброском фоне;
крупные блоки с текстом, навязчивые бейджи;
закругленные уголки элементов;
градиенты на каждом сайте;
злоупотребление тенями и отражениями.

2002-2008 Карамельный дизайн
Технологии Web 2.0
социальные сети
мультимедийный контент
дизайна в стиле глянцевого пластика современных hi-end устройств
(объемные кнопки и т.д).

2006

Скевоморфизм (2011)
skeuomorph
реалистичность, «аутентичность» фонов и предметов и функциональность элементов.
имитация, перенос физических и декоративных свойств реальных предметов на иные объекты.
Активно распространяется после появления iPhone и особенно после iPhone 4.

Скевоморфизм в Вебе
естественные цвета, свойственные натуральным предметам и материалам;
элементы, выглядящие как ткань, кожа или другой физический материал, с реалистичными швами и текстурой;
объемные объекты с использованием буквальных образов вещей и предметов, стикеры с интуитивно понятными функциями;
«занавесочки», ленточки, печати, реалистичные кнопки, бейджи, тумблеры;
оформление текста по принципам печатного дизайна, «тисненые» надписи.

Скевоморфизм

Скевоморфизм

Скевоморфизм

Плоский Flat дизайн (2010-2012/13)
(Швейцарский стиль, наследие Баухауз )
По-настоящему цифровой;
Популярность объясняется техническими аспектами: широкое внедрение в массы мобильных устройств;
Новые сайты и приложения должны корректно выглядеть на настольных декстопах и дисплеях смартфонов;
Минималистичный Responsive web design плохо совмещался со скевоморфными атрибутами, но органично выглядел с плоскими компонентами;
2011 — Twitter Bootstrap
Адаптивный дизайн

Плоский Flat дизайн
Microsoft Metro
(2010)

Плоский Flat дизайн
Apple iOS7 (2013)

Плоский Flat дизайн
Flat Design отличается следующими визуальными характеристиками:
максимальной простотой, минимализмом;
абсолютным отсутствием любых элементов, придающих изображениям глубину (не допускаются никакие «псевдовыпуклостей»: даже кнопки, для которых приподнятая форма была бы естественной, стали плоскими без исключений);
главенство контента в дизайне;
минимальный набор ярких цветов без градиента;
В то же время развивались тренды, возникшие в период популярности скевоморфизма: креативная типографика, широкоформатные фотографии, используемые в фоне, видео в роли бэкграунда.

Плоский Flat дизайн

Плоский Flat дизайн

Материальный дизайн.
2014 г. Material Design
Возвращение к реальному миру, в чем-то схожее с принципами скевоморфизма;
добавление «материальности» интерфейсу;
создание у пользователей ощущения взаимодействия с реальным физическим объектом в цифровой среде.
http://www.google.com/design/spec/material-design/introduction.html#
http://www.jqueryscript.net/tags.php?/Material%20Design/

Материальный дизайн.
2014 г. Material Design

2013-2014 г. Material Design
Метафора интерфейса - бумага: она не имеет ни объема, ни четкой текстуры;
Экран - лист, на котором текст напечатан чернилами;
Появились естественные тени при расположении одного цифрового «листа» над другим;
Кнопка вновь «осязаема», но теперь она не нажимается, а меняет оттенок (свойство), как растекающиеся чернила;
Бумага имеет и нереалистичные свойства: плоские листы могут разделяться на части, перестраиваться, растягиваться, вновь сливаться;
Сохранение минимализма, яркости цветов, изящной типографики.
– в плоском дизайне вновь появились проявления объема;
– глубина приобрела смысл, фокусируя внимание на важных моментах;
– анимация стала функциональной, информативной, «осмысленной».
Angular.js

Материальный дизайн

Материальный дизайн

IBM Design Language
IBM предложила не конкретный дизайн, а «новую» (общую) концепцию:
https://www.ibm.com/design/language/
Http://www.ibm.com/design/language/resources.shtml
…

Тенденции web-дизайна 2014-2015
минимализм, адаптивный дизайн (http://frontender.info/adaptive-vs-responsive-terminology/), фоновое видео (http://www.shiner.com/), большое фоновое изображение (не стоковое, а под конкретный проект), https://modsquad.com/
Страницы с «длинным» вертикальным скроллом.
Скроллинг часто удобнее поиска разделов в меню и требует меньше действий при потреблении контента (особенно на мобильных устройствах).
Интерактивные элементы. Широкое использование анимации. (http://www.webdesignerdepot.com/, http://www.habib-fadel.com/en/)
Отказ от фиксированной ширины: http://michelemazzucco.it/
Меню как в приложениях http://www.rawnet.com/
Скроллинг http://www.rawnet.com/
Крупные шрифты заголовков

Тенденции web-дизайна 2014-2015
Морфинг. Один из главных трендов, изменение формы/цвета/размера кнопок, инпутов в зависимости от изменения их назначения/состояния.
Сторителлинг (сайты-истории). *
Горизонтальный скроллинг:
http://themeforest.net/item/crea-wp/full_screen_preview/424783,
http://www.lorenzobocchi.com/en/
SVG-графика.
Мобильная версия сайта. Адаптивный, отзывчивый дизайн.
«Карточный»/плиточный дизайн (Pinterest)…
Гамбургер-меню (в проектах 2016 года начинают уходить)

Плоский дизайн 2 (flat 2.0)
Длинные тени
Динамичные цвета (чистые, яркие цвета … без переходов и градиентов)
Простая типографика
Прозрачные кнопки
Минимализм, отсутствие «лишних» эффектов

Плоский дизайн 2 (flat 2.0)

Плоский дизайн 2 (flat 2.0)

Плоский дизайн 2 (flat 2.0)

Плоский дизайн 2 (flat 2.0)

Тенденции web-дизайна 2014-2015
Призрачные кнопки, длинная тень.
Параллакс эффект при прокрутке http://en.muffi.pl/. http://www.iutopi.com/
Прилипающий хедер 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/
Персонализация…

Слепые кнопки

Длинные тени

Нестандартная геометрия

Web 1.0 – Web 2.0 – Web 3.0 – …
Web 1.0 – это информация для пользователей, циркулируют данные, созданные владельцами сайтов.
Web 2.0 – «социальное» общение, наполнена данными, которые создают пользователи сайтов, появление сайтов как сервисов.
Web 3.0 – Web с персональным выбором контента, семантическая паутина,это «мобильное» общение:
постоянное присутствие человека в онлайне,
возможность оперативно создавать медиа-контент (фото, видеоролики, аудиозаписи) для выгрузки в Web,
Информация о географических координатах объектов и пользователей.