Продолжение, начало здесь: «Веб-дизайн — это не ЧТО сделано, а КАК это сделано» — часть I

…Вот именно поэтому дизайн — это не ЧТО сделано, а КАК это сделано.

Как веб-дизайнер и одновременно программист я действительно понимаю сложность борьбы за спецэффекты.

Ну раз веб-дизайн — следствие веб-технологий, то мы можем теперь отследить, откуда берутся какие тренды.

Почему Флэт?

Флэт, как вы знаете, означает «плоский». Это тренд, когда все элементы дизайна стали плоскими — без отражений, объема, теней, бликов и натуралистичности. Помню, как было до слез жаль ушедшие иконки в айфоне.

Так почему вдруг в одночасье весь веб и приложения перешли на флэт?

Веб стал mobile-first, то есть не только перешел на мобильные телефоны, но мобильные устройства стали первостепенными для создателей веб-сайтов. То есть вся индустрия переориентировалась с десктопов на планшеты и смартфоны, так как открывала доступ к бОльшему количеству пользователей.

Все эти объемные, графически перегруженные элементы стали слишком тяжелыми для загрузки через мобильный интернет. Нужно было заменить их на более легкие кнопки, рамки и иконки. К тому же мы, разработчики, тратили на создание натуралистичных иконок слишком много времени, которое больше не окупалось — элементов становилось все больше, нужна была максимальная автоматизация процесса. Так что — прощайте cамодельные иконки, да здравствует Font Awesome и прочие шрифтовые элементы!

Появление HTML5 и CSS3 также сильно повлияло на индустрию

Юные разработчики, вы даже не представляете, насколько трудно было раньше вывести блок со скругленными углами. Необходимо было сделать минимум 9-ячеечную таблицу, каждая угловая ячейка которой содержала в себе картинку (!) скругленного угла. Это был ночной кошмар любого верстальщика.

HTML и CSS — опен-сорсные проекты. Это значит, что код открыт не только для использования, но и для создания. То есть каждый желающий может поучаствовать в разработке следующей версии языков в то время, как объявлен сбор идей.

Когда писался третий CSS, девелоперы всего мира предлагали свои мысли. И теперь, слава богу, мы получили программный способ делать эти чертовы круглые углы.

И, как я подозреваю, один любопытный разработчик задался вопросом — а что будет, если на углы дать слишком большой радиус? Та-дам! И у нас появились КРУГИ.

В этот момент все как помешались. Круги кругом. Аватарки, фотографии, кнопки, члены «команды», «сервисы»… Вот так и получается тренд.

CSS3-анимация

С помощью HTML5 и CSS3 анимировать веб-элементы стало гораздо проще. Кстати, это еще одна из причин, почему мы отказались от бликующих и отбрасывающих тень элементов. Градиенты и переливы было легко реализовать через Flash, но Стив Джобс похоронил его своими айфонами.  Так что нам срочно понадобились какие-то другие источники вдохновения. И мы нашли их в РЕТРО — плоский дизайн, узоры, пастельные тона, оформление деревянных вывесок и газетных объявлений 70-х.

Откуда взялся параллакс и фоновые видео?

Хоть мы и перешли на плоский дизайн, наш разум по-прежнему требует пространства, «воздуха». Мы хотим «нырять» в интернет, также, как мы хотим нырнуть в картину или фотографию.

Видео привносят как раз такого типа жизнь и движение.

А что такое параллакс?

Насколько я помню, параллакс был изобретен для промосайта Nike. Это произвело эффект разорвавшейся бомбы. Все интернет-сми писали о новом сайте Найк.

Параллакс — это имитация 3D-движения на скролл, когда элементы движутся с разной скоростью в зависимости от воображаемой удаленности от зрителя. Вы же, например, замечали, когда ехали в машине, что солнце, горы, облака почти стоят на месте, в то время, как ближайшие к дороге деревья буквально проносятся мимо вашего взгляда?

Того же самого эффекта добиваются в двухмерном веб-пространстве благодаря параллаксу. Дополнительно усиливают зрелище через размытие элементов, которые «не в фокусе».

Вы можете посмотреть параллакс в движении здесь http://hotdot.pro.

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

Материальный дизайн (Material Design)

Честно говоря, я не в восторге от анонсированного Google материального дизайна. Меня даже этот анонс и суета вокруг него разозлили.

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

Вкратце — суть «нового» тренда — более яркая, хотя все еще пастельная палитра (чтобы цвета легче сочетались друг с другом, их нужно разбелить), длинные косые тени, имитация 3D через «слои» (почти как в фотошопе), немного более детализированные иконки.

И все это активно пользовалось дизайнерами последние пять лет. Под косые тени, например, был даже создан мокап — http://graphicburger.com/long-shadow-generator/ и онлайн-генератор http://lab.rayps.com/lsg/.

Так что, ребята, ждите какого-то реально крутого нового тренда, а не просто систематизацию существующего. Потому что настоящий дизайн — это не симпатичное размещение элементиков на странице. Дизайн горит на эмоциях, требует огромной страсти и храброго сердца. Это создание ЧЕГО-ТО из НИЧЕГО.

Поэтому мы и зовемся креаторами (создателями) — мы создаем вещи, которых раньше не существовало.

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

Но в случае своего успеха ты можешь изменить мир.

Открыть еще одно окно в другую реальность.

«Но ведь дизайн толкают технологии!»

Да. Но сравните, как один и тот же эффект делает программист,

а как использует потом дизайнер:

Программирование и дизайн — всего лишь две стороны одной медали

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

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

А если я скажу вам, что величайшие умы планеты никогда не достигли бы своих высот, если бы не их воображение? Иначе как еще Эйнштейн написал бы свою теорию относительности, а также замечательные слова о «музыке сфер»?

Настоящие гении потому и гении, что у них развиты оба полушария мозга.

И все талантливые люди, независимо от профессии, уважают труд друг друга, так как они могут ПРЕДСТАВИТЬ себе его сложность.

Чего и вам желаю.

(автор — Виктория Шидловская)