Продолжение, начало здесь: «Веб-дизайн — это не ЧТО сделано, а КАК это сделано» — часть 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/.
Так что, ребята, ждите какого-то реально крутого нового тренда, а не просто систематизацию существующего. Потому что настоящий дизайн — это не симпатичное размещение элементиков на странице. Дизайн горит на эмоциях, требует огромной страсти и храброго сердца. Это создание ЧЕГО-ТО из НИЧЕГО.
Поэтому мы и зовемся креаторами (создателями) — мы создаем вещи, которых раньше не существовало.
Когда ты делаешь дизайн, ты не можешь предсказать реакцию публики. Каждый раз существует риск грандиозного провала, не только потому что вкусы разнятся, но еще и потому, что ты, как дизайнер, опережаешь остальных в своем развитии. Слишком прогрессивная мода выглядит также, как устаревшая на вкус обывателя.
Но в случае своего успеха ты можешь изменить мир.
Открыть еще одно окно в другую реальность.
«Но ведь дизайн толкают технологии!»
Да. Но сравните, как один и тот же эффект делает программист,
а как использует потом дизайнер:
Программирование и дизайн — всего лишь две стороны одной медали
Когда кто-либо с умным видом утверждает, что гуманитарные науки — и не науки вовсе, что писателям, музыкантам, художникам и дизайнерам нечего делать рядом с инженерами, врачами и юристами, это просто фэйспалм.
Да, конечно, вы купите ужасающе дорогой макбук, даже если он будет выглядеть как гроб. И конечно же вы обожаете свой мерседес исключительно за его двигатель, пусть он будет похож на нефтяной бак.
А если я скажу вам, что величайшие умы планеты никогда не достигли бы своих высот, если бы не их воображение? Иначе как еще Эйнштейн написал бы свою теорию относительности, а также замечательные слова о «музыке сфер»?
Настоящие гении потому и гении, что у них развиты оба полушария мозга.
И все талантливые люди, независимо от профессии, уважают труд друг друга, так как они могут ПРЕДСТАВИТЬ себе его сложность.
Чего и вам желаю.
You must be logged in to post a comment.