CSS-анимация, инструменты для создания прототипов и источники вдохновения с Донованом Хатчинсоном

В этом эпизоде ​​Showing Version Show к Тиму и Дэвиду присоединяется Донован Хатчинсон, разработчик, преподаватель и владелец CSSanimation.rocks. Они обсуждают, как преподавание и разговорная речь могут помочь вам учиться, решать пользовательские проблемы, CSS-анимацию и доступность, соединять миры дизайна и разработки, инструменты для создания прототипов, совместимость с браузерами, источники вдохновения, создавать свистящие звуки и создавать пользовательские интерфейсы для кошек.

Не забудьте проверить курс анимирования Донована с помощью CSS здесь, на SitePoint!

Показать заметки

• Донован в Твиттере: @DonovanH
• CSSAnimation.rocks
• CSS Animation Rocks в Твиттере: @CSSanimation
• mp3.com
• Курс Донована SitePoint Анимация с помощью CSS
• Framer
• Принцип
• 12 основных принципов анимации
• Проектирование на кризис
• Скажи привет в Твиттере: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

Основные моменты разговора

Я помню, как проводил вечера, пытаясь смоделировать мою гитару или другие части моего дома в Amiga, а затем оставлял ее на ночь для рендеринга, конечно.

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

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

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

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

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

Основными двумя свойствами, которые очень хорошо opacity , являются transform и opacity , которые имеют дело с такими вещами, как положение, масштабирование, наклон объектов и их прозрачность или прозрачность.

Инструменты прототипирования действительно помогают людям обмениваться идеями.

расшифровка

Тим:

Привет! Как дела у всех? Это Тим Эвко …

Дэвид:

… а это М. Дэвид Грин …

Тим:

… и вы слушаете эпизод № 29 подкаста версий.

Дэвид:

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

Тим:

Итак, сегодня мы разговариваем с Донованом Хатчинсоном, который является разработчиком, учителем и владельцем CSSAnimation.rocks . Итак, мы поговорим с ним о разработке, обучении и CSS-анимации. Итак, давайте продолжим и начнем эту версию.

Дэвид:

Привет, Донован, как ты сегодня?

Донован:

Я замечательно, спасибо.

Дэвид:

Хорошо. Спасибо, что присоединились к нам на Showing Version.

Донован:

С удовольствием. Спасибо, что пригласили меня.

Дэвид:

Здорово. Итак, поскольку это шоу по версии, и мы говорим о философии веб-дизайна и разработки, мы всегда хотели бы задать нашим гостям философский вопрос. Ваш философский вопрос сегодня таков: в вашей нынешней карьере, какая у вас версия и почему?

Донован:

Вау. Ладно. Я бы сказал, черт возьми, на этом этапе это должна быть версия три или четыре. Я прошел несколько разных этапов в моей карьере, чтобы добраться до этой точки. Все началось в конце 90-х, когда я познакомился со своей первой Amiga, и начал использовать ее для создания музыкальной и 3D-графики того времени, и обнаружил, что использую компьютеры для создания чего-то… что очень быстро, когда Интернет взял выкл, стал работой в сети. В течение долгого времени я был тем, кого вы могли бы назвать вебмастером — что раньше было чем-то особенным, прежде чем он стал скорее разработчиком . Затем в эти дни я перешёл к большему дизайну. Я думаю, что мост между дизайном и бэкэндом, который люди называют фронт-эндом.

Дэвид:

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

Донован:

Я думаю, что видел что-то подобное, да.

Дэвид:

Таким образом, я могу понять переход от Amiga к выходу на передний план. У вас всегда был интерес к визуальной стороне? Вы сказали, что именно аудио привлекло вас к Amiga.

Донован:

Я думаю, это была смесь вещей. Когда я действительно начал заниматься этим, я обычно создавал — или, возможно, копировал — игры из журналов в свой спектр ZX и печатал их по одному слову за раз. Это была действительно способность что-то сделать, а затем увидеть результаты. Или, в случае аудио, сделать что-то и услышать результаты. Процесс был таким же интересным для меня, несмотря ни на что. Так что, когда дело дошло до аудио, я любил собирать сэмплы. Раньше я записывал часы на радио, разбивал их на маленькие сэмплы и использовал их для создания музыки. Но, в то же время, 3D-программное обеспечение становилось все более популярным в условиях массового использования. Вы могли получить бесплатные пробные версии довольно мощного программного обеспечения на обложке журнала в то время. Я помню, как проводил вечера, пытаясь смоделировать мою гитару или другие части моего дома в Amiga, а затем оставлял ее на ночь для рендеринга, конечно.

Дэвид:

Как это привело вас к веб-разработке и дизайну, и, в частности, к этой внешней работе, которой вы занимались?

Донован:

Я предполагаю, что изначально это было место для того, чтобы делиться тем, что я создавал, а возможность создать свое присутствие в Интернете было частью обмена музыкой, которую я писал. Я создал несколько сайтов, которые делились музыкой, а затем открыл mp3.com и использовал это. Но процесс разделения отдельного интереса, с точки зрения создания музыки в сети, заинтересовал меня на самом деле механизмами создания самих сайтов. Тогда это переросло в создание веб-сайтов, а не просто использование Интернета в качестве средства обмена.

Дэвид:

Был ли Интернет первым способом, которым вы пытались поделиться, когда идея пришла вам в голову, или вы делились другими способами до этого?

Донован:

Мы ходили на вечеринки с кассетами. В общем, так вы и поделились в этот момент.

Дэвид:

Итак, аудио работа привела к обмену информацией, к сети, к вовлечению людей. Затем, в какой-то момент, вы также начали преподавать.

Донован:

Это более свежая вещь для меня, и определенно то, чем я сейчас очень увлекаюсь. Я думаю, это началось, может быть, четыре или пять лет назад, когда мне посчастливилось поработать с очень вдохновляющим техническим директором в небольшом стартапе, который убедил меня не просто опробовать новые технологии и охватить этот интересный материал, происходящий в сети. , но и написать об этом. Это помогло мне лучше узнать вещи, потому что для того, чтобы что-то писать, мне нужно было лучше понять это. Затем он фактически убедил меня выступить с темами. Например, я учил Angular в то время. Я только начал читать об Angular. Он предложил мне поговорить об этом в конце этого месяца на местном собрании. Я понятия не имел, что смогу выучить достаточно, чтобы за несколько недель выступить с докладом на эту тему, но это сработало, и это действительно показало мне, что потратить время на то, чтобы правильно понять что-то достаточно, чтобы вы могли кого-то научить этому, — это здорово. способ полностью понять что-то и оценить это — намного больше, чем просто использовать это на поверхности.

Давид [4:21] :

Да, я могу понять, как это учение стало важной частью вашего обучения. Мы поговорили с несколькими людьми, которые говорили о том, что учебный процесс заканчивается тем, чему они научились. Одна из вещей, которая привлекла мое внимание, когда вы сказали, что вы узнали достаточно много об Angular, чтобы вы могли научить его, но в данном случае вы представлялись не как эксперт по Angular.

Донован:

Да. Отнюдь не. Я представлял что-то, что, по моему мнению, было интересно людям, и я чувствовал, что ему будет приятно услышать об этом.

Дэвид:

Как ты попал в Angular в первую очередь? Я имею в виду, что JavaScript движется в разных направлениях.

Донован:

В то время, когда я изучал MVC-фреймворки и искал что-то, что могло бы иметь двустороннюю связь с данными, я создавал серверную часть для веб-приложения, и нам нужно было что-то достаточно быстрое, чтобы показать изменения в режиме реального времени через различные просмотры на странице. Он просто понравился мне с точки зрения того, как он был представлен, и того, как вы можете создавать с помощью директив довольно сложную функциональность в тегах. Тот факт, что это было поддержано, я думаю, Google, также помог. С тех пор я перешел, и, к счастью, экосистема вокруг сильно выросла. У вас есть фантастические опции, такие как React, и множество других, более быстрых. Но в то время это был отличный выбор для проблемы, с которой мы столкнулись, и это дало мне возможность улучшить и мой JavaScript, просто чтобы лучше понять, что я делал, когда создавал front- завершение приложения с использованием JavaScript.

Дэвид:

Когда я думаю о том, чему вы учите в последнее время, я думаю о CSS.

Донован:

Да, многое из того, что движет мной, немного ближе к уровню представления, с точки зрения того, как вещи взаимодействуют, и как вещи представлены в приложениях или на веб-сайтах. За последние несколько лет я больше занимался дизайном, чем изначально, и мне нравится думать о решении пользовательских проблем, думать об этом с этой точки зрения. Для меня все это объединяет интерес к тому, как вещи выглядят и чувствуются, как они построены. И, с этой точки зрения, CSS вроде хорошо сидит посередине. Иногда это может расстраивать, и, конечно, CSS — это то, чем он является, но это отличный способ выразить макеты и понять, с какой точки зрения люди фактически используют наше программное обеспечение. Тогда для меня есть так много способов, как вы можете войти в CSS, использовать его и учиться этому. В настоящее время меня интересует анимация как часть этого, но это небольшая ниша в очень большой теме CSS.

Дэвид:

Я знаю, что вы проделали большую работу с интересными CSS-анимациями. Можете ли вы рассказать нам немного о том, что вы публикуете?

Донован:

Конечно. Мне посчастливилось работать с вами, ребята, на SitePoint недавно на курсе, где я рассказал о том, как работают концепции CSS-анимации, ключевых кадров и переходов . Я представил эту теорию и рассказал о практических способах ее использования в проектах. Я также пишу и делюсь учебными пособиями по мере того, как узнаю больше о теме на моем веб-сайте, CSSAnimation.rocks . Это мой выход идей, так что если я решу, ну что произойдет, если я попытаюсь создать это в CSS? И если это сработает, если я что-то узнаю, тогда я захожу на сайт и делюсь этим.

Дэвид:

Как вы сталкиваетесь с этими проектами, чтобы поделиться? Мол, как вы решаете, что вы хотите поставить там?

Донован:

Это может прийти из всех видов мест. Один из примеров был, когда я смотрел трейлер к Звездным Войнам в прошлом году. Я был впечатлен кредитным списком в конце и подумал, интересно, это можно сделать в CSS? Похоже на то, что трансформаторы могут подойти. Я просто попробовал и увидел, что случилось.

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

Дэвид:

Материал, который вы пишете, вы нацелены на него на начальном уровне или более ориентированы на продвинутых людей CSS?

Донован [7:47] :

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

Пример был сегодня, когда я писал пример о том, как остановить анимацию перед загрузкой страницы, и я использовал псевдокласс :not . Это не то, чем я обычно пользуюсь, но когда это необходимо, это чрезвычайно полезно. Вот такой момент, я думаю, я бы остановился на секунду и сказал: « Подожди. Вот что это значит, если вы не видели этого раньше.

Дэвид:

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

Донован:

Вообще говоря, когда я начинаю, когда начинаю писать учебник, я бы не стал слишком сильно беспокоиться о том, чтобы все работало до конца. Но я всегда имею это в виду. И, когда я проектирую и создаю вещи, мне нравится, что сначала я пытаюсь достичь как можно большего с помощью CSS, но в то же время изящно деградировать до того, что все еще работает и доступно за кулисами. С точки зрения размышления о фактических номерах версий, я часто не слишком зацикливаюсь на этом, а думаю, что, если JavaScript здесь не работает, или, Что, если этот браузер не поддерживает анимацию? Затем мы должны использовать Modernizr , или какой-нибудь запасной вариант, который гарантирует, что контент действительно будет читабельным, что он будет отображаться на экране независимо от этого. Тогда, если проект способен делать причудливые анимационные вещи, тогда сделайте это. Делай как можно больше. Это здорово, но я, конечно, не позволяю старым браузерам диктовать, что можно сделать с помощью новых функций.

Дэвид:

Это имеет смысл. Одна из статей, которую вы написали, и которая меня больше всего заинтриговала, касалась вопросов доступности и анимации. Мне любопытно. Не могли бы вы поделиться с людьми некоторыми вещами, с которыми вы столкнулись?

Донован:

Конечно. Есть несколько основных проблем, которые возникают, когда люди используют анимацию, первая из которых — укачивание. У нас в голове есть эта встроенная система балансировки, которая говорит нам, что когда земля движется, мы чувствуем это определенным образом. Если мы представляем анимацию, особенно если это большая анимация, которая может охватывать весь экран, это заставляет мозг думать, что что-то должно двигаться, но наш мозг не чувствует этого движения, мы можем чувствовать себя плохо. Это то, к чему некоторые люди более восприимчивы, чем другие. В то же время, еще одна проблема, которая иногда возникает с доступностью, это когда на экране появляется движение, очень трудно не смотреть на движущуюся вещь. Часто даже тонкие анимации могут отвлекать людей до такой степени, что они буквально не могут даже больше использовать приложение, потому что движение мешает им пройти эту часть. Мы должны помнить об этом с точки зрения того, когда мы используем анимацию, а также когда мы запускаем, останавливаем и выключаем анимацию, когда мы хотим, чтобы люди сосредоточились на чем-то другом.

Дэвид:

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

Донован:

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

Дэвид:

Это так. Когда вы создаете анимацию с помощью CSS, вы сталкиваетесь с множеством проблем, связанных с сохранением плавного движения, например с 60-кадровыми в секунду проблемами?

Донован:

Безусловно, но в большинстве случаев все зависит от того, какие свойства мы выбираем для анимации. Основными двумя свойствами, которые очень хорошо opacity , являются transform и opacity , которые имеют дело с такими вещами, как положение, масштабирование, наклон объектов и их прозрачность или прозрачность. Если вы используете их — если вы, скажем, масштабируете вещи и перемещаете их, используя преобразования и переводы — тогда это, как правило, замечательно, потому что браузер не перерисовывает каждый раз, когда что-то движется. Это не пересчитывает расположение всего остального на странице. Эти вещи, как правило, движутся в изоляции. Но, если вы анимируете что-то вроде высоты … Скажем, у вас есть div который имеет фиксированную высоту, и вы хотите, чтобы он стал больше, чтобы показывать больше контента, он должен подтолкнуть все остальное с пути. Если у вас большая страница, это часто может вызвать заикание, потому что она пересчитывает до 60 раз в секунду весь макет страницы. Это не то, что вы хотите.

То же самое касается размера шрифта, и другие аспекты, возможно, не ускоряются аппаратно — например, если вы пытались анимировать цвет фона большой области, может быть, всей страницы или экрана. Это, опять-таки, может показаться очень очевидным и неправильным, потому что он пытается перерисовывать много раз в секунду, очень сложную сцену. Так что, иногда это решение суда. Вы можете посмотреть на это и сказать: « Ну, может, в этой анимации происходит слишком много». Если мы обрежем это обратно или попытаемся придерживаться преобразований и непрозрачности, то обычно это приводит к лучшей производительности.

Давид [12:28] :

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

Донован:

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

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

Дэвид:

Есть ли какие-то инструменты, которые вы считаете особенно полезными?

Донован:

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

Я нарисовал каждую доску на экране, на доске, сфотографировал каждую, поместил каждый экран в Принцип и сделал сенсорные области. Это было как можно более непринужденно, но оно дало представление о том, что произойдет, когда люди коснутся этой части, и куда пойдет экран.

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

Дэвид:

Считаете ли вы, что есть какие-то трудности в общении с инженерами о тонкостях анимации? Мол, почему определенные вещи имеют значение, а некоторые нет?

Донован:

Может быть. Как я уже сказал, хорошее использование прототипов может действительно помочь прояснить, что происходит. Например, при разработке для iOS есть некоторые инструменты, которые могут на самом деле не просто помочь, показывая, как все выглядит, они могут на самом деле выводить код, необходимый для iOS, чтобы фактически обрабатывать упругость или упругость движений.

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

Дэвид:

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

Донован:

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

Дэвид:

[Хихикает] Но когда люди видят что-то в своем пользовательском интерфейсе, и меню немного подпрыгивает, люди начинают знакомиться с этим как с сообщением определенного понятия о том, что происходит с контентом.

Донован:

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

Давид [16:13] :

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

Донован:

Я думаю, что принципы анимации остаются в силе. На самом деле есть 12 очень хорошо продуманных моментов с точки зрения того, как помочь нам соединиться с тем, что на экране. Если мы применим это к нашему пользовательскому интерфейсу, то помогать людям подключаться к тому, что мы создаем, — это хорошо.

Дэвид:

Получали ли вы какие-либо отзывы от пользователей о типах размещаемой там информации?

Донован:

За последние два года в моем курсе на CSSanimation.rocks приняли участие более 2000 человек. Для меня это было неоценимо с точки зрения изучения того, о чем действительно любят узнавать люди, а также того, для чего они используют эти навыки. Видя разные точки зрения и разные идеи, а затем видя, как на таких сайтах, как CodePen, всплывают вещи, просто замечательно видеть, как растет экосистема вокруг сети и анимации.

Дэвид:

Как вы думаете, где вы будете брать это дальше?

Донован:

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

Дэвид:

Это потрясающе. Для слушателей, которые интересуются вашим курсом и вашей информацией, как люди могут найти вас в Интернете?

Донован:

Меня можно найти в Твиттере @DonovanH , а в Интернете я запускаю веб-сайт под названием CSSanimation.rocks. Это также в Твиттере, но ручка @CSSanimation .

Дэвид:

Круто, и я думаю, что у вас есть курс в SitePoint.

Донован:

Я действительно делаю. Я рекомендую вам проверить это.

Дэвид:

Фантастический. Что ж, спасибо, что присоединились к нам сегодня. Это было действительно увлекательно.

Донован:

Большое спасибо. Это было приятно.

[Музыкальная интерлюдия]

Дэвид:

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

Тим:

Да. Я был там по духу и отключен в Google Hangouts.

Дэвид:

К счастью, приглушенный, но у всех нас это получилось очень хорошо. Это был отличный эпизод, и Донован действительно вернул меня в мое прошлое. Речь шла об Amiga и Sinclair ZX81, а также о 3D-рендеринге. Человек, это возвращает меня к старым временам.

Тим:

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

Дэвид:

Это вдохновляет, потому что так легко думать о том, чтобы просто пойти, сделать свою работу, а потом идти домой, выполнять задания по мере их поступления, а не думать о более широкой картине. Но это люди, которые берут на себя инициативу в своей карьере и говорят: это то, что меня интересует. Это то, что меня очаровывает. Они идут по этим забавным маленьким каналам и исследуют странные закоулки, такие как, например, CSS-анимация — области, которые люди могут не воспринимать как хардкорное проектирование или серьезное развитие карьеры. Но они заканчивают тем, что строили репутацию для себя. И они делают это таким образом, что они делают из тех людей, которых мы хотели бы видеть в шоу, о том, как они строили свою карьеру.

Тим:

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

Дэвид [20:07] :

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

Тим:

Да. Ситуационная осведомленность — это часто то, о чем мы не думаем, когда строим вещи. Вы знаете, мы не часто спрашиваем себя: что находится в ментальном пространстве человека, который использует эту услугу или продукт? На самом деле, я полагаю, что Эрику Мейеру есть что сказать по этому поводу. Он много говорит о дизайне для кризиса . Например, если вы создаете заставку для больницы, какой тип информации важнее, и в каком состоянии находится пользователь, когда он ищет эту информацию?

Дэвид:

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

Тим:

Легко забыть о чем-то. Я сейчас работаю над созданием некоторых функций поиска на работе. Мы очень мало ожидаем от таких продуктов, даже не задумываясь об этом. Например, когда пользователь выполняет поиск, мы с самого начала предполагаем, что знаем, что он ищет. Это не обязательно … Допустим, я строю поиск для поиска, я не знаю, разных типов картонных коробок, верно? Вы можете предположить, что мне нужно купить картонную коробку, или вы можете предположить, что я поклонник картонной коробки.

Дэвид:

Или вы можете предположить, что вы кот.

Тим:

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

Дэвид:

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

Тим:

Да. Я на 100% виноват в этом.

Дэвид:

Одной из вещей, о которых говорил Донован, особенно по вопросам CSS-анимации, были инструменты, которые люди используют, чтобы рассказать, как должна работать анимация. Мы говорили об этом раньше, я думаю, с некоторыми другими людьми — о том, что дизайнеры не являются инженерами, не обязательно зная, какие возможности у технологий. В то же время инженеры, а не дизайнеры, не понимают, что ожидают пользователи от анимации. Он воспитал некоторые инструменты. На самом деле я не работал ни с одним из этих инструментов. Я думаю, что это был принцип и Framer.JS.

Тим:

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

Дэвид:

Тим-управляемый дизайн, это было бы.

Тим:

Тим-управляемый дизайн, вероятно, —

Дэвид:

Хэштег!

Тим:

… не так хорошо, как FramerJS, но это делает —

Дэвид:

Хотя, наверное, веселее смотреть.

Тим:

О да. Здорово. Это замечательно, особенно если вы не слышите, что кто-то говорит, а затем вы попадаете в режим рекламы.

Дэвид:

Как это на самом деле работает на практике?

Тим:

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

Дэвид [24:02] :

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

Тим:

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

Дэвид:

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

Тим:

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

Дэвид:

Вы поднимаете верную точку зрения о том, что анимация приходит в качестве запоздалой мысли. Я думаю, что несколько лет назад многие из нас испытывали недовольство идеей, являюсь ли я разработчиком или дизайнером? Как разработчик, кто-то скажет : вы веб-дизайнер? Вы бы расстроились из-за того, что вас называют дизайнером, когда вы на самом деле разработчик. Я думаю, что в наши дни люди смотрят на анимацию так же, как на дизайн 10, 15 лет назад. Это было то, что вы добавили в качестве украшения в конце проекта. Но на самом деле анимация имеет решающее значение для взаимодействия людей со всеми этими интерфейсами в наши дни. Мы узнаем все больше и больше о том, насколько важной может быть анимация.

Тим:

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

Дэвид:

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

Тим:

Правильно, потому что на самом деле никто не любит использовать интерфейсы.На самом деле, похоже, что чем больше прогрессирует технологий, тем меньше интерфейсов вы на самом деле хотите иметь, верно? Существует концепция приложения без пользовательского интерфейса, в котором вы получаете push-уведомление и отвечаете на него одним нажатием кнопки. Это может быть все взаимодействие с приложением, которое вы делаете, потому что каждый новый пользовательский интерфейс требует вложений. Вы должны инвестировать время в изучение того, как использовать его, чтобы узнать его причуды, его недостатки, что в этом хорошего. Но сами пользователи не хотят вкладывать эти начальные инвестиции в подобные вещи. Они просто хотят выполнить поставленную задачу.

Дэвид:

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

Тим:

Хотелось бы, чтобы и между дизайнерами и разработчиками это было так.

[Посмеивается]

Потому что я очень часто получаю компы, которые просят переделать, как работает выпадающий список, или переключатель, или тип ввода файла.

Дэвид [27:56] :

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

Тим:

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

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

Дэвид:

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

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

Тим:

Да.Он также упомянул кое-что о том, что CSS труден для всех, потому что это не обязательно программный язык, как JavaScript, PHP или Ruby. Это очень декларативно. Это сбивает с толку многих людей. Принимая совет от того, как Донован начал, заинтересовавшись, изучая, а затем обучая тому, чему он научился, кажется, что это хороший совет для тех, кто считает CSS невероятно трудным, верно? Если вы боретесь с этим, может быть, это хорошая идея — создать свой собственный курс по CSS 101 и посмотреть, насколько это поможет вам лучше понять основы.

Дэвид:

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

Тим:

И дело не только в наличии информации, которой нет у кого-то другого. В большинстве случаев они также служат отличным напоминанием. Я, вероятно, могу пройти этот курс CSS анимации 101, который выпустил Донван. Я, наверное, слышал о каждой вещи в этом курсе, но я могу гарантировать вам, что есть больше, чем одна вещь, которую я пойду, о. Я полностью забыл об этом. Позвольте мне записать это.

Дэвид:

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

Тим [31:48] :

Правильно.Например, тем, кто начинает работать с CSS прямо сейчас, возможно, не придется беспокоиться о префиксах поставщиков браузеров так же, как раньше, верно? Мне больше не нужно писать префикс браузера для радиуса границы. Мне не о чем беспокоиться. Для всего, что мне действительно нужно беспокоиться о них, я могу просто подключить постпроцессор, который добавит эти префиксы браузера через « Могу ли я использовать данные», и об этом просто забыли.

Дэвид:

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

Тим:

Да, эти люди должны знать об этом.

Дэвид:

Я так благодарен за это, потому что были дни назад, когда я привык мечтать о префиксах и взломах браузеров CSS, например, ставить звездочки перед вещами, чтобы IE6 распознавал или не распознавал разные селекторы. Так рад, что эти дни позади.

Тим:

zoomСобственности. Это было просто — ничего не работает, я попробую это.

Дэвид:

Удивительно, как часто это тоже работает.

---

Тим:

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

Дэвид:

Мы также хотели бы поблагодарить SitePoint.com и наших продюсеров, Адама Робертса и Офели Лехат, за помощь в производстве от Ральфа Мейсона. Пожалуйста, не стесняйтесь, присылайте нам свои комментарии в Twitter — @versioningshow — и дайте нам оценку на iTunes, чтобы сообщить нам, как мы делаем.

Тим:

Увидимся в следующий раз и надеемся, что вам понравилась эта версия.