Найти тему

Эволюция стилей в веб-дизайне

Оглавление

Я приблизительно помню каждый участок временной шкалы, когда в тренды выходил тот или иной стиль и как менялись работы дизайнеров год от года. Ниже я расписала хронологию 9 стилей, которые, на мой взгляд, сделали историю и были ключевыми. Но также отмечу, что всего стилей куда больше, чем 9, просто остальные уже слишком малозначительно различимы, поэтому их я не беру в расчет

Примерно так выглядел почти каждый сайт в 90-е
Примерно так выглядел почти каждый сайт в 90-е

В 1991 году был сделан первый сайт. Он выглядел как просто полотно текста. До момента нашего времени веб-дизайн серьезно эволюционировал. Давайте вспомним, как это было:

1. Скевоморфизм — 2011

Подразумевает использование элементов, которые повторяют форму объекта или материала, но изготовлены иным методом или из других материалов. Если говорить о дизайне "реального мира", то часто можно встретить декоративные элементы из пластика, выглядящие "под древесину" — это и есть скевоморфизм. В веб-дизайне это означает использование максимально реалистично отрисованых объемных элементов, сохранение реалистичности падения света на предметы, текстур, материалов и тд. "Продвигатором" этого стиля была Apple

2. Metro (или Windows 8) — 2012

Основными принципами Metro являются акцент на продуманной типографике. Microsoft (основатель этого стиля) называет Metro «простым, чистым, современным». Большую роль играет анимация. Microsoft рекомендует плавные переходы и взаимодействие с пользователем на основе реальных движений (таких, как нажатие или перемещение). Это создаёт у пользователя впечатление «живого» и отзывчивого интерфейса. Начав выпускать свою продукцию в стиле Metro, Microsoft противопоставила себя Apple, заложив тенденцию ухода в плоский дизайн

3. Flat Design — 2012

Flat (или плоский стиль) пришел на смену и явился противоположностью скевоморфизму. Шажком для его появления и закрепления послужил Metro-стиль. Если скевоморфизм про объем и реалистичность, то флет-дизайн — про плоскость (двухмерность) и минималистичность. Flat-стилю свойственны графические элементы без теней и текстур, придающих глубину, а вот использование реальных фото сводится к минимуму, скорее в этом стиле они будут замещены плоскими иллюстрациями. В 2013 году Apple сдалась и перешла с объема на плоский стиль дизайна

4. Google Material Design — 2014

Попытка Google стандартизировать свои продукты. Стиль гула стал неким компромиссом между минималистичностью и скевоморфизмом. С одной стороны, ему свойственна «материальность», которая создает впечатление взаимодействия с реальными физическими объектами, а с другой – простота и лаконичность графики и композиции

5. Рисованный стиль — 2015

Отличительной чертой является эффект набросков от руки. Так как этот стиль имитирует ручное рисование, то ему характерна некая доля неопрятности (не строгие 100% одинаковые прямоугольники для товаров, а немного в одном "рука чтоб дрогнула"). Тематика подкрепляется и использованием рукописных шрифтов

6. Гранж — 2016

Характерны нечеткие линии, формы блоков (особенно фонов блоков), неряшливые шероховатости, затертые текстуры. Присутствуют и реалистичные детали: разводы, кляксы, текстуры металла, дерева. Цветовая гамма обычно приглушенная, изображения "туманные". Часто используются декоративные шрифты

7. Винтаж — 2017

Стиль "высшего общества". Излучает изящество, строгость, аристократизм. Ему свойственны декоративные украшения, типа вензелей, рамок и прочего. Для типографики чаще используется антиква (т.к. антиква помогает передать те же ощущения аристократичности и изящества)

8. Минимализм — 2018

«Less is more»

Простота и ничего лишнего. Минимум графических элементов. Короткие текстовые блоки. Сайт должен выглядеть легким, воздушным, чистым. Много свободного пространства, воздуха между элементами и блоками сайта. Чаще всего светлые цветовые гаммы, при чем как таковой акцентный цвет может отсутствовать в принципе. Акцент на типографике, тренд на крупные тексты

9. Футуризм — 2019

Элементы должны ассоциироваться с будущим, космосом, технологиями, молодежностью. Чаще всего здесь, наоборот, используется темная цветовая палитра с яркими, возможно даже ядовитыми акцентными цветами. Фоны блоков преимущественно темные, зачастую накладывается фото на весь фон и затемняется. Этому стилю свойственны светящиеся, бликующие элементы, нестандартные формы, абстрактные предметы, ликвидные градиенты. Могут использоваться реалистичные объемные элементы (модели небесных тел, самолетов, ракет, искры огня и прочее). Свойственен хаос, абстрактные элементы разбросаны по макету, могут применяться эффекты глитча, нарочно вырезаться части изображений

Помните эти этапы эволюции?) А помните ли себя в эти годы? Эволюционировали ли вы как личность?