Фрэнк Чимеро опубликовал. “Все что было легко снова становится трудным”. Описывая путешествие обратно в веб-дизайн после трехлетнего перерыва. Он отмечает, что веб-дизайн ветеранов и новичков в значительной степени сегодня в одной и той же лодке:

“У меня было пятнадцать лет опыта проектирования для веб-клиентов. У нее был один год. И все же каким-то образом, мы были в той же ситуации. Мы наслаждались работой, но были совершенно смущены и перегружены быстро растущей сложности всего этого. Что, черт возьми, случилось?”

Все эссе стоит прочитать, но я суммирую некоторые из больших тем, которые упомянул Фрэнк:

  • Много новых рабочих процессов разработки, инструментов и методов появились в последние несколько лет
  • Даже простые вещи, как загрузка изображений и шрифтов имеют сложные комплексы инструментариев и книг, написанные о них
  • Уже не возможно “Просмотреть источник”. Чтобы узнать о различных методах на многих сайтах из-за Минификации и запутывания различными инструментами сборки
  • Много вещей изучаемых годами становятся устаревшими. И методы, о которых отзывались неодобрительно годы назад становятся лучшими в практике

Когда я читал эссе, я кивнул в согласии так агрессивно, что я почти разработал излом в моей шее. “Мы – длинный путь от CSS Zen Garden” на яву.

Это не только Фрэнк – перегружены все

Фрэнк утверждает, что его 3-летнее отсутствие в промышленности было основным источником его путаницы. Когда он вновь вошел в отрасль, но откровенно (ха!). Я убежден, что это лишь небольшой фактор в более сложном уравнении. Я говорю это, потому что борьбу Фрэнка разделяют многие ветераны промышленности. У большинства из которых не было каких-либо продолжительных перерывов для следования за последним и величайшим.

Например, Джен Симмонс. Один из пионеров и чемпионов CSS Flexbox и CSS Grid. Поделился в эпизоде 113 подкаста “Вперед Веб”, что многие люди, которые изобрели нашу индустрию чувствуют себя полностью подавлеными.

“Люди, которые изобрели нашу индустрию чувствуют что на этом пути они закончили или подавлены “.

Даже Лайза “Опасность” Гарднер. 20-летний ветеран в интернете, и опытный оратор и автор. Поделилась в интервью, что CSS может вырасти за пределы ее понимания.

“Он становится настолько мощным. Что быть экспертом в CSS, это как целое поле для одного себя. А иногда и чувствуешь что это выходит далеко за ваши пределы”.

И Брэд Фрост. Еще один ветеран промышленности. Который написал книгу Атомный Дизайн. Написал глубокий эссе под названием “Я понятия не имею, что, черт возьми, я делаю”. В котором он повторяет вызовы, с которыми столкнулся Фрэнк Чимеро, несмотря на то что не совершал длительных перерывов в отрасли.

“А потом, пока время бежало, вы понимаете, что есть чертовски много чего вы не знаете. Так что я ничего не знаю. Я понятия не имею, что, черт возьми, я делаю “.

Так что, если эти лидеры отрасли, и многие другие-люди. Которые выросли с веб – до CSS. Когда он только начал существовать – чувствуют себя растерянными. Тогда есть ли надежда для остальных из нас простых смертных? А как насчет людей, которые начали с веб-дизайна 5 лет назад. Когда, вероятно, было в 10 раз больше инструментов разработки, нежели есть сегодня?

Во-первых, давайте поразмышляем о том, как мы попали сюда…

Веб-платформа значительно расширилась

Мы, простые смертные имеем веские основания бояться. Веб взорвался во всей сложности, особенно за последние 10 лет. Для доказательства, посмотрите не дальше, чем на список функций, которые теперь доступны в браузерах! Это увеличение возможностей привело к взрыву инструментария разработчика. Чтобы попытаться использовать все это. Важно, однако, рассмотреть, почему эти средства разработки были обрезаны, и, что более важно, что они делают возможным.

Например, давайте перемотаем пленку назад на 20 лет. Во времена, когда мы только должны были узнать один аромат HTML – один с едва горсткой тегов. Стилизация была встроенной и о таких вещах как CSS-стили еще не было и речи. Теперь вернемся к настоящему. У нас есть значительно расширенная спецификация HTML. Сотни новых свойств CSS, и очень интенсивное использование JavaScript для достижения сложных требований.

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

Итак, что же имеют все эти сложности производства? Ну, как Брэд Фрост подает это, как общий случай среди людей: “я понятия не имею, что, черт возьми, я делаю”. Которые раньше знали чертовски много о том, что они делали.

Разработчики направляют этот новый, сложный и чуждый пейзаж с новыми инструментами. Которые еще больше усложняют. Чувствуете подавленность? Добро пожаловать в клуб. Мне, например, пришлось научиться использовать следующие инструменты (среди других). Только для того, чтобы делать в основном стандартные проекты веб-дизайна за последние 15 лет:

Анимация с множеством веб-технологий, появляющихся с течением времени.

Это, вероятно, станет хуже, прежде чем оно станет лучше

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

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

“За исключением веб-сайтов. Они отделяют себя от других, потому что я не чувствую себя намного лучше, делая их после 20 лет. Мои знания и навыки развиваются немного, потом все меняется. И половина того, что я знаю, становится мертвым грузом. Это вряд ли происходит с любой другой работой, которую я делаю.”

Это отстой. Тратить много лет на освоения ремесла и познать что все меняется прямо у тебя под носом. Не заставляет чувствовать себя прекрасно, вообще. Творческие навыки, вечнозеленые в природе, не должны оказыватся устаревшими из-за сдвига, лежащего в основе технологий. Итак, как мы можем их сохранить? Учить больше людей, как стать программистами? Как-то стандартизировать на меньшее количество инструментов на основе кода. Так что бы было проще для начинающих? Заставить дизайнеров полагаться на разработчиков?

Во-первых, мы должны изменить то как мы думаем о веб-дизайне

Эта задача требует, чтобы мы думали за пределами этой темы. Фрэнк подвел очень красивый итог в конце своего эссе:

“Так много о том, как мы строим веб-сайты и программном обеспечении сводится к тому, как мы думаем. Ообработка инструментов, методов и абстракций также означают замену идеологии. Человек должен обычно думать по образу, похожему на людей, которые создали инструменты для успешного их использования. Это не так просто, как отложить отвертку и подобрать гаечный ключ. Человеку необходимо пересмотреть все свои рамки мышления. Они должны изменить свой разум.
С одной стороны, легче быть неопытным: вы не должны учить то что больше не имеет значения. Опыт, с другой стороны, создает две различные борьбы. Во-первых, чтобы выявить и избавиться от того, что больше не важно (это тоже работает). Вторая заключается в том, чтобы оставить открытым свой разум, терпеливым, и готовым действовать с тем, что новое. Даже если это напоминает заново взять то, от чего вы решили отказаться уже давно.”

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

Это предположение спрашивает людей, которые хотят получить свои творческие идеи непосредственно на среду. Освоить техническую работу, которая, возможно, никогда не была их коньком, чтобы начинать с нее. Мы просим веб-дизайнеров, стать веб-программистами – это как просить Пабло Пикассо освоить новейшие методы в области холста, краски, или производства кистей. “Ни у кого нет времени на это.” — у Пикассо, предположительно.

Итак, давайте оспаривать это предположение!

“Самая разрушительная фраза на языке: “Мы всегда делали это так!” — Грейс Хоппер

WYSIWYGs мертвы, пусть живут WYSIWYGs!

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

Коллаж из 12 популярных интерфейсов творческих инструментов по профессиях. Вы можете обнаружить выбивающийся из всех?

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

Трейлер для “графических средств”- документальный фильм, который показывает, как прямое манипуливативное программное обеспечение революционировало то, как работает промышленность печатного дизайна.

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

  • “Но такие инструменты, как Dreamweaver, причина дрянного, раздутого кода!”
  • “Отзывчивый дизайн является слишком сложным для визуальных инструментов!”
  • “Нет никакого способа получить высокий уровень контроля без кода!”
  • “Вы не можете строить сложные системы проектирования посредством визуальных инструментов!”
  • “Никакой реальный веб-дизайнер не будет строить без кода!”

Даже если у меня есть лошадь в гонке (я работаю на Webflow, где мы создаем визуальные инструменты веб-дизайна). Я бы поспорил на пари, что это неизбежно, что индустрия веб-дизайна будет преобразована мощными инструментами прямого манипулирования. Так же, как и каждая другая творческая индустрия в прошлом.

Люди больше не должны создавать векторы вручную, ни понимать, как матиматика Безье работает, чтобы нарисовать кривую. Так почему веб-дизайнеры должны точно знать, как писать конкретные HMTL/CSS/JavaScript вручную, чтобы создать красивую, функциональную и профессиональную работу?

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

Чтобы доказать свою точку зрения, вот несколько примеров из Webflow. Где прямое манипулирование четко обеспечивает очень детализированный уровень управления в рамках ограничений среды в интернете (box model, медиа-запросы и т.д.) – без необходимости в текстовом редакторе.

Вот я настраиваю радиальный градиент, который, несмотря на мои 15 лет опыта кодирования. Я до сих пор не могу вспомнить синтаксис для:

Визуальное манипулирование CSS радиального градиента через 3 элемента, которые используют один и тот же класс CSS

Flexbox становится гораздо легче. По причине того, что нет необходимости держать код-шпаргалку (или даже шпаргалку для шпаргалки) открытой рядом с вашим текстовым редактором. Использование более привычного визуального пользовательского интерфейса личностно позволяет ускорить рабочий процесс. И при этом создавая готовый к производству код.

Визуальные манипуляции свойств CSS Flexbox, из игры Webflow Flexbox

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

Визуальное манипулирование CSS “формы вне” значения в Webflow (Примечание: эта функция еще не доступна публично)

☝ Оу, и изображение Луны было загружено в гораздо более высоком разрешении, чем необходимо. И появляется, гораздо меньшим на мобильных устройствах. Но в фоновом режиме, Webflow автоматически изменяет размер холста с шагом в 1px.

И поставляется с наилучшей возможной комбинацией атрибутов srcset и размеров для изображения во всех точках. Это означает, что нет необходимости дизайнеру беспокоиться о проблемах компиляции и доставки. Тем не менее, он по-прежнему генерирует код, который разработчик будет понимать.

Адаптивные проекты также могут быть созданы путем прямого манипулирования содержимым через различные точки останова. С тем же поведением наследования/каскада, которого может ожидать программист, если они писали запросы носителя вручную:

Визуальное манипулирование CSS в нисходящих медиа-запросах

И визуальная функциональность может выйти далеко за рамки статическиго дизайна. Теперь мы можем извлечь данные из хорошо структурированной базы данных, или, возможно, пользовательской конечной точки GraphQL или CSV-файла, или любой другой. А затем интуитивно “привязать” части UI к этим живым данным. Статические дизайны могут стать явью в считанные минуты, и быстро превратиться в динамические приложения.

Визуальная привязка к динамическим данным вместо обновления шаблона кода в электронной коммерции Webflow

Эта концепция может пойти еще дальше, и применить к сложным JavaScript-driven взаимодействиям. Здесь приведен пример визуального создания анимации, активируемой мышью, без необходимости понимания событий JavaScript, событий jQuery с привязкой семантики, изменений атрибутов стиля и т. д.

Визуальное создание сложных событий на основе JavaScript-driven эффектов

И все эти вещи могут быть опубликованы в один клик, будь то промежуточные или производственные среды – эмуляции того же процесса, какому разработчики будут следовать. Минификация, gzip, отзывчивых изображений, оптимизация CDN, HTTP/2 — в значительной степени все, что вам нужно, чтобы узнать, как подключить вручную это обеспечить прозрачность.

При таком подходе, можно также увидеть, как именно каждый сайт был построен. Открыв основной исходный проект — без бремени, пытаясь проверить скомпилированные и уменьшенные HTML/CSS в браузере. Это похоже на доступ к исходному файлу Photoshop или скетч-файлу со всеми слоями/символами/и т.д. Вместо того, чтобы проверять JPG или SVG в скомпилированной форме.

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

Будущее веб-дизайна не код

Веб с нами уже 25 лет, но мы все еще новаторы. Мы все еще пытаемся выяснить, как мы будем строить для этой новой среды. Это новый рубеж, и до сих пор, только относительно немногие вышли наружу, чтобы начать изучать его.

Это исследование в первую очередь было ограничено теми, которые могли бы научиться писать код. Который является ничтожным 0,25% населения мира – только 1 из каждых 400 человек! Неудивительно, что Фрэнк Чимеро, вместе со многими другими, боролся со сложностью всего этого.

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

Представьте себе, насколько разительно мир изменится сегодня. Если ПК избавятся от интуитивно понятных графических интерфейсов. И мы будем ограничены только теми, кто освоил командную строку. Это был бы в корне другой мир. Почему бы нам не хотеть демократизации доступа к веб-дизайну таким же образом? Это может привести к огромным переменам творческих инноваций в интернете.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

шестнадцать − 10 =