https://blogengine.ru/blogs/tags/kursy/ Автоматически собираемая лента заметок, написанных в блогах на Эгее ru Aegea 11.0 (v4079e) Автоматически собираемая лента заметок, написанных в блогах на Эгее no 136830 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-175/ Mon, 21 Jul 2025 19:21:32 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-175/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те годы, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">почти две сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Разобрал 175 фрагментов.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> <li>№ 89. <a href="https://www.youtube.com/watch?v=eLOGLY3_h7U">Прямоугольнизация дизайна и свобода, которую даёт фотошоп</a></li> <li>№ 119. <a href="https://www.youtube.com/watch?v=Hwi6ddaRZ38">О дизайне переключателя (segmented control) и положении кнопки</a></li> <li>№ 138. <a href="https://www.youtube.com/watch?v=GNxf6DAZR-Q">Разное про кассу в магазине</a></li> <li>№ 146. <a href="https://www.youtube.com/watch?v=CSvgFqJ8p1Q">Разбор конфигуратора окон и как классифицировать сообщения об ошибках</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> <li>№ 167. <a href="https://www.youtube.com/watch?v=V5StnSF_7sc">Опрятность прячет проблемы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> <li>№ 126. <a href="https://www.youtube.com/watch?v=ro4EBiCJ1iE">Решение существует</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> <li>№ 84. <a href="https://www.youtube.com/watch?v=phraobT9Ufk">Разбираем мелочи в форме регистрации</a></li> <li>№ 85. <a href="https://www.youtube.com/watch?v=DnTeUK1OqLQ">Исправляем форму формы, ну и немножко содержание</a></li> <li>№ 103.<a href="https://www.youtube.com/watch?v=b4NPKYiT9n4">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню</a></li> <li>№ 104. <a href="https://www.youtube.com/watch?v=dqnYrhXSMms">Подробный разбор сложной формы</a></li> <li>№ 108. <a href="https://www.youtube.com/watch?v=9RUUtqehkyU">Кирпичная кладка и другие недостатки формы</a></li> <li>№ 118. <a href="https://www.youtube.com/watch?v=9kB6CfCE0aM">Обозначение обязательных и необязательных полей</a></li> <li>№ 130. <a href="https://www.youtube.com/watch?v=ublwi2BmrH0">Как сделать сетку в форме</a></li> <li>№ 143. <a href="https://www.youtube.com/watch?v=VlEbVJGgGXw">Не надо ставить элементы формы под главную кнопку</a></li> <li>№ 145. <a href="https://www.youtube.com/watch?v=WjX759lGaHI">У Гугля плохой дизайн</a></li> <li>№ 154. <a href="https://www.youtube.com/watch?v=YIwCjtdp5Y4">Форма слишком сложная</a></li> <li>№ 156. <a href="https://www.youtube.com/watch?v=5gxBJOV4yzA">Размеры и кнопка в форме</a></li> <li>№ 159. <a href="https://www.youtube.com/watch?v=rMnnM3o_JXo">Поле поиска — это не часть полей формы</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Элементы интерфейса:</p> <ul> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 76. <a href="https://www.youtube.com/watch?v=wihXJHHK3yo">Так это кнопка или ссылка? Оказывается, это радиокнопка!</a></li> <li>№ 114. <a href="https://www.youtube.com/watch?v=n4Cb774L2_U">Что не так с аккордеоном</a></li> <li>№ 116. <a href="https://www.youtube.com/watch?v=9tewBcFm-1M">Как назвать чупа-чупс</a></li> <li>№ 144. <a href="https://www.youtube.com/watch?v=ZFLMkM02lp8">Три вида серенького текста в поле</a></li> <li>№ 147. <a href="https://www.youtube.com/watch?v=FusPcntg-oI">Показываю старинные радиокнопку и чекбокс</a></li> <li>№ 151. <a href="https://www.youtube.com/watch?v=mMTivJldcAQ">Про хоум-индикатор</a></li> <li>№ 169. <a href="https://www.youtube.com/watch?v=hpnt4JyiU2o">У прямоугольника недостаточно признаков поля</a></li> </ul> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> <li>№ 77. <a href="https://www.youtube.com/watch?v=U_9t3-mJXp0">Жму синюю кнопку на автомате, не читая</a></li> <li>№ 83. <a href="https://www.youtube.com/watch?v=D0zKnGG10tY">Уважать ли интерфейсные традиции разных платформ?</a></li> <li>№ 86. <a href="https://www.youtube.com/watch?v=wq4MQNpFrbg">Не надо ничего активировать</a></li> <li>№ 97. <a href="https://www.youtube.com/watch?v=jwbEj5v3bu8">Ширина и прокрутка на десктопе</a></li> <li>№ 101. <a href="https://www.youtube.com/watch?v=pn_X2x_8XPo">Елена Семёновна и валидация ввода</a></li> <li>№ 105. <a href="https://www.youtube.com/watch?v=Ew75feYtGMs">Как именно работает взаимодействие?</a></li> <li>№ 107. <a href="https://www.youtube.com/watch?v=GBj17b4l10s">Как делать, чтобы программа не тормозила</a></li> <li>№ 109. <a href="https://www.youtube.com/watch?v=-8neywtnhT8">Двухпанельный интерфейс</a></li> <li>№ 115. <a href="https://www.youtube.com/watch?v=Tq8Rh7GPqhM">Мир пользователя</a></li> <li>№ 121. <a href="https://www.youtube.com/watch?v=xKPaH3XiW-4">О связях сущностей в сложных системах</a></li> <li>№ 122. <a href="https://www.youtube.com/watch?v=XvPjm7mQ0n8">Думать из мира пользователя</a> (продолжение из 115)</li> <li>№ 149. <a href="https://www.youtube.com/watch?v=UENZW1gNjpU">Двойная обратная связь</a></li> <li>№ 150. <a href="https://www.youtube.com/watch?v=crgZi_CW6xU">Зелёный значит «всё хорошо»</a></li> <li>№ 153. <a href="https://www.youtube.com/watch?v=9E-iYfjEqg0">В играх всё иначе</a></li> <li>№ 155. <a href="https://www.youtube.com/watch?v=cG6jewXdWL4">Кнопка «Сохранить» — плохой знак</a></li> <li>№ 168. <a href="https://www.youtube.com/watch?v=ax1BrxWlcOw">Что делать, пока ЭВМ думает медленно?</a></li> </ul> <p>Таблицы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> <li>№ 102. <a href="https://www.youtube.com/watch?v=QyHEWiMR_0A">Как выравнивать цифры в таблицах</a></li> <li>№ 112. <a href="https://www.youtube.com/watch?v=zSJijCINU58">Собираем табличку с диапазоном и разной точностью</a></li> <li>№ 113. <a href="https://www.youtube.com/watch?v=ZDvDnJ1HSP0">Рекомендую жирную, а не бледную шапку в таблице</a></li> <li>№ 117. <a href="https://www.youtube.com/watch?v=PBzl0pIUqk0">Горизонтальная прокрутка в таблицах</a></li> <li>№ 142. <a href="https://www.youtube.com/watch?v=tOiNW_F_PH4">Про динамические таблицы</a></li> <li>№ 157. <a href="https://www.youtube.com/watch?v=36V12nuC0kY">Иерархия в таблице</a></li> <li>№ 171. <a href="https://www.youtube.com/watch?v=0F-zmFtcWwI">Повышаем плотность таблиц</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Графики, диаграммы, инфографика:</p> <ul> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 94. <a href="https://www.youtube.com/watch?v=8986vOikHRk">Если данных мало, то и график не нужен</a></li> <li>№ 95. <a href="https://www.youtube.com/watch?v=WSXYgIwdziI">Рассуждения про инфографику и её задачи</a></li> <li>№ 98. <a href="https://www.youtube.com/watch?v=9pf94f8Mz7Q">Когда визуализация потрачена впустую</a></li> <li>№ 110. <a href="https://www.youtube.com/watch?v=qsDWBf-xcVs">В чём проблема интерактивных графиков</a></li> <li>№ 111. <a href="https://www.youtube.com/watch?v=wJJdSn4Vk-Q">Нужны не круговые диаграммы, а таблица</a></li> <li>№ 132. <a href="https://www.youtube.com/watch?v=Urn9TDalPg4">Дискуссия о задачах инфографики</a></li> <li>№ 134. <a href="https://www.youtube.com/watch?v=zMmO0bWqELQ">Музыкальная нотация и чтение с листа</a></li> <li>№ 172. <a href="https://www.youtube.com/watch?v=Oz3A44Em8ms">Толщина — носитель цвета</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> <li>№ 80. <a href="https://www.youtube.com/watch?v=AmuCRWsSdpA">Редактируем интерфейс конфигуратора окон</a></li> <li>№ 92. <a href="https://www.youtube.com/watch?v=bYk0_q6tWLA">Поле «Комментарий для курьера»</a></li> <li>№ 96. <a href="https://www.youtube.com/watch?v=1l35NtOBogE">Жирный против курсива</a></li> <li>№ 120. <a href="https://www.youtube.com/watch?v=H-tk4IhJWnA">Непонятный выбор и названия кнопок</a></li> <li>№ 127. <a href="https://www.youtube.com/watch?v=oJkMBxIeLE0">Редактируем регистрацию на вымышленном сайте</a></li> <li>№ 129. <a href="https://www.youtube.com/watch?v=5e2pwuF8raQ">Формулировки ошибок в форме</a></li> <li>№ 135. <a href="https://www.youtube.com/watch?v=ERNjOfUbXZY">Сокращаем текст про почту</a></li> </ul> <p>Вёрстка:</p> <ul> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> <li>№ 78. <a href="https://www.youtube.com/watch?v=JFKJHdQJvNQ">Неудачные выравнивательные связи</a></li> <li>№ 99. <a href="https://www.youtube.com/watch?v=yj5dFy9HQ-Y">Комментирую вёрстку окна</a></li> <li>№ 160. <a href="https://www.youtube.com/watch?v=UeSCu7MFeAw">Двигаем иконки в виджете</a></li> <li>№ 161. <a href="https://www.youtube.com/watch?v=a0HYHigmUx8">Вписываем кусок карты в виджет</a></li> <li>№ 162. <a href="https://www.youtube.com/watch?v=cbpDb3k_t5k">Чистим виджет от шума</a></li> <li>№ 164. <a href="https://www.youtube.com/watch?v=AebU9xyd-QI">Виджет умного дома с иконками</a></li> <li>№ 173. <a href="https://www.youtube.com/watch?v=EaSKacTWobU">Срисовываем большой круг для виджета</a></li> <li>№ 174. <a href="https://www.youtube.com/watch?v=aV65V1H4w3I">Срисовываем виджет погоды</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 79. <a href="https://www.youtube.com/watch?v=58GldX-JZig">Улучшаем дизайн кнопки</a></li> <li>№ 81. <a href="https://www.youtube.com/watch?v=rlCxhBCxJww">Классические признаки поля ввода и кнопки</a></li> <li>№ 87. <a href="https://www.youtube.com/watch?v=ox38_G9lQuo">Вспомогательные линии — тоньше и скромнее</a></li> <li>№ 91. <a href="https://www.youtube.com/watch?v=hieOe3wu-7E">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые</a></li> <li>№ 93. <a href="https://www.youtube.com/watch?v=hh1oSLA0XaE">Задисейбленность кнопки</a></li> <li>№ 140. <a href="https://www.youtube.com/watch?v=Z8C1RMcR2fk">Выбор цветов для интерфейса</a></li> <li>№ 141. <a href="https://www.youtube.com/watch?v=E40xHhr73Ig">Шрифты с засечками в интерфейсе</a></li> <li>№ 148. <a href="https://www.youtube.com/watch?v=X7mBhTG08xA">Настраиваем толщины линий</a></li> <li>№ 152. <a href="https://www.youtube.com/watch?v=hvv_ohLK1xU">Много стилей и плохие тени</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> <li>№ 82. <a href="https://www.youtube.com/watch?v=2qV6CCRT6lA">Заранее спросить у клиента про сео и персональные данные</a></li> <li>№ 88. <a href="https://www.youtube.com/watch?v=Mt45AuwOnvA">Убрал шум — добавь сигнал!</a></li> <li>№ 90. <a href="https://www.youtube.com/watch?v=-GHjDFHWrBA">Классно упростить себе задачу</a></li> <li>№ 100. <a href="https://www.youtube.com/watch?v=yTIrl1jnEHU">Программисты могли бы подумать о пользе для бизнеса</a></li> <li>№ 106. <a href="https://www.youtube.com/watch?v=3fzeLHVhvy0">Оговорка, что интерфейс — это не всё</a></li> <li>№ 136. <a href="https://www.youtube.com/watch?v=qh5BmDJ48yI">Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?</a></li> <li>№ 175. <a href="https://www.youtube.com/watch?v=NqKDGROn8AQ">Работа дизайнера — разобраться в теме</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> <li>№ 128. <a href="https://www.youtube.com/watch?v=zCldGigmk04">Что не так с ваерфреймами</a></li> <li>№ 139. <a href="https://www.youtube.com/watch?v=tqfe5-w0VPo">Сначала презентуйте линейно, а потом уже рисуйте диаграммы</a></li> <li>№ 158. <a href="https://www.youtube.com/watch?v=WjHJhh6K7dk">Важность подачи дизайна</a></li> <li>№ 165. <a href="https://www.youtube.com/watch?v=uCssgVrDCqM">Крутой интерфейс кассы и крутая его презентация</a></li> <li>№ 170. <a href="https://www.youtube.com/watch?v=mlqnrYCBqr0">Дизайн дизайна, или как расположить макеты на холсте</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> <li>№ 123. <a href="https://www.youtube.com/watch?v=zoN15-R2gQ8">Благодарности</a></li> <li>№ 124. <a href="https://www.youtube.com/watch?v=gCTCA_dQOp4">Мастрид ли Тафти?</a></li> <li>№ 125. <a href="https://www.youtube.com/watch?v=35uwvF6SZb8">Как я отношусь к войсикам и кружочкам</a></li> <li>№ 131. <a href="https://www.youtube.com/watch?v=2PC5L3tv6fA">Когда нужны моноширинные цифры</a></li> <li>№ 133. <a href="https://www.youtube.com/watch?v=o2DjvI6nVts">Плакаты и бумага, которая горит</a></li> <li>№ 137. <a href="https://www.youtube.com/watch?v=dfe9kO0a054">Почему я не могу дать список дизайнеров, за которыми надо следить</a></li> <li>№ 163. <a href="https://www.youtube.com/watch?v=K98thEFlCng">Про компасную стрелку, стороны света и смелость</a></li> <li>№ 166. <a href="https://www.youtube.com/watch?v=GLfjVm4Douk">Как быть с пустой лепёшкой</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 30 августа — 28 сентября.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 135213 https://ilyabirman.ru/meanwhile/all/nevoshedshee-v-lekciyu-klikabelnost/ Wed, 12 Mar 2025 11:45:49 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/nevoshedshee-v-lekciyu-klikabelnost/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>В 2025 году в мой курс «Пользовательский интерфейс и представление информации» добавилась новая лекция «Кликабельность». Некоторые вещи я вырезал из неё при монтаже, чтобы она не была безумно длинной. В этом видео — нарезка такого невошедшнего:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/PYWO8PMPamk?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Подробнее об обновлении лекций — <a href="https://bureau.ru/news/2025/lecture-ui-updates-clickability/">на сайте бюро</a>.</p> 131870 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-150/ Fri, 11 Oct 2024 11:21:14 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-150/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те три года, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">полторы сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Разобрал 150 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-175/">потом разберу ещё</a>.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> <li>№ 89. <a href="https://www.youtube.com/watch?v=eLOGLY3_h7U">Прямоугольнизация дизайна и свобода, которую даёт фотошоп</a></li> <li>№ 119. <a href="https://www.youtube.com/watch?v=Hwi6ddaRZ38">О дизайне переключателя (segmented control) и положении кнопки</a></li> <li>№ 138. <a href="https://www.youtube.com/watch?v=GNxf6DAZR-Q">Разное про кассу в магазине</a></li> <li>№ 146. <a href="https://www.youtube.com/watch?v=CSvgFqJ8p1Q">Разбор конфигуратора окон и как классифицировать сообщения об ошибках</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> <li>№ 126. <a href="https://www.youtube.com/watch?v=ro4EBiCJ1iE">Решение существует</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> <li>№ 84. <a href="https://www.youtube.com/watch?v=phraobT9Ufk">Разбираем мелочи в форме регистрации</a></li> <li>№ 85. <a href="https://www.youtube.com/watch?v=DnTeUK1OqLQ">Исправляем форму формы, ну и немножко содержание</a></li> <li>№ 103.<a href="https://www.youtube.com/watch?v=b4NPKYiT9n4">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню</a></li> <li>№ 104. <a href="https://www.youtube.com/watch?v=dqnYrhXSMms">Подробный разбор сложной формы</a></li> <li>№ 108. <a href="https://www.youtube.com/watch?v=9RUUtqehkyU">Кирпичная кладка и другие недостатки формы</a></li> <li>№ 118. <a href="https://www.youtube.com/watch?v=9kB6CfCE0aM">Обозначение обязательных и необязательных полей</a></li> <li>№ 130. <a href="https://www.youtube.com/watch?v=ublwi2BmrH0">Как сделать сетку в форме</a></li> <li>№ 143. <a href="https://www.youtube.com/watch?v=VlEbVJGgGXw">Не надо ставить элементы формы под главную кнопку</a></li> <li>№ 145. <a href="https://www.youtube.com/watch?v=WjX759lGaHI">У Гугля плохой дизайн</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Элементы интерфейса:</p> <ul> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 76. <a href="https://www.youtube.com/watch?v=wihXJHHK3yo">Так это кнопка или ссылка? Оказывается, это радиокнопка!</a></li> <li>№ 114. <a href="https://www.youtube.com/watch?v=n4Cb774L2_U">Что не так с аккордеоном</a></li> <li>№ 116. <a href="https://www.youtube.com/watch?v=9tewBcFm-1M">Как назвать чупа-чупс</a></li> <li>№ 144. <a href="https://www.youtube.com/watch?v=ZFLMkM02lp8">Три вида серенького текста в поле</a></li> <li>№ 147. <a href="https://www.youtube.com/watch?v=FusPcntg-oI">Показываю старинные радиокнопку и чекбокс</a></li> </ul> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> <li>№ 77. <a href="https://www.youtube.com/watch?v=U_9t3-mJXp0">Жму синюю кнопку на автомате, не читая</a></li> <li>№ 83. <a href="https://www.youtube.com/watch?v=D0zKnGG10tY">Уважать ли интерфейсные традиции разных платформ?</a></li> <li>№ 86. <a href="https://www.youtube.com/watch?v=wq4MQNpFrbg">Не надо ничего активировать</a></li> <li>№ 97. <a href="https://www.youtube.com/watch?v=jwbEj5v3bu8">Ширина и прокрутка на десктопе</a></li> <li>№ 101. <a href="https://www.youtube.com/watch?v=pn_X2x_8XPo">Елена Семёновна и валидация ввода</a></li> <li>№ 105. <a href="https://www.youtube.com/watch?v=Ew75feYtGMs">Как именно работает взаимодействие?</a></li> <li>№ 107. <a href="https://www.youtube.com/watch?v=GBj17b4l10s">Как делать, чтобы программа не тормозила</a></li> <li>№ 109. <a href="https://www.youtube.com/watch?v=-8neywtnhT8">Двухпанельный интерфейс</a></li> <li>№ 115. <a href="https://www.youtube.com/watch?v=Tq8Rh7GPqhM">Мир пользователя</a></li> <li>№ 121. <a href="https://www.youtube.com/watch?v=xKPaH3XiW-4">О связях сущностей в сложных системах</a></li> <li>№ 122. <a href="https://www.youtube.com/watch?v=XvPjm7mQ0n8">Думать из мира пользователя</a> (продолжение из 115)</li> <li>№ 149. <a href="https://www.youtube.com/watch?v=UENZW1gNjpU">Двойная обратная связь</a></li> <li>№ 150. <a href="https://www.youtube.com/watch?v=crgZi_CW6xU">Зелёный значит «всё хорошо»</a></li> </ul> <p>Таблицы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> <li>№ 102. <a href="https://www.youtube.com/watch?v=QyHEWiMR_0A">Как выравнивать цифры в таблицах</a></li> <li>№ 112. <a href="https://www.youtube.com/watch?v=zSJijCINU58">Собираем табличку с диапазоном и разной точностью</a></li> <li>№ 113. <a href="https://www.youtube.com/watch?v=ZDvDnJ1HSP0">Рекомендую жирную, а не бледную шапку в таблице</a></li> <li>№ 117. <a href="https://www.youtube.com/watch?v=PBzl0pIUqk0">Горизонтальная прокрутка в таблицах</a></li> <li>№ 142. <a href="https://www.youtube.com/watch?v=tOiNW_F_PH4">Про динамические таблицы</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Графики, диаграммы, инфографика:</p> <ul> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 94. <a href="https://www.youtube.com/watch?v=8986vOikHRk">Если данных мало, то и график не нужен</a></li> <li>№ 95. <a href="https://www.youtube.com/watch?v=WSXYgIwdziI">Рассуждения про инфографику и её задачи</a></li> <li>№ 98. <a href="https://www.youtube.com/watch?v=9pf94f8Mz7Q">Когда визуализация потрачена впустую</a></li> <li>№ 110. <a href="https://www.youtube.com/watch?v=qsDWBf-xcVs">В чём проблема интерактивных графиков</a></li> <li>№ 111. <a href="https://www.youtube.com/watch?v=wJJdSn4Vk-Q">Нужны не круговые диаграммы, а таблица</a></li> <li>№ 132. <a href="https://www.youtube.com/watch?v=Urn9TDalPg4">Дискуссия о задачах инфографики</a></li> <li>№ 134. <a href="https://www.youtube.com/watch?v=zMmO0bWqELQ">Музыкальная нотация и чтение с листа</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> <li>№ 80. <a href="https://www.youtube.com/watch?v=AmuCRWsSdpA">Редактируем интерфейс конфигуратора окон</a></li> <li>№ 92. <a href="https://www.youtube.com/watch?v=bYk0_q6tWLA">Поле «Комментарий для курьера»</a></li> <li>№ 96. <a href="https://www.youtube.com/watch?v=1l35NtOBogE">Жирный против курсива</a></li> <li>№ 120. <a href="https://www.youtube.com/watch?v=H-tk4IhJWnA">Непонятный выбор и названия кнопок</a></li> <li>№ 127. <a href="https://www.youtube.com/watch?v=oJkMBxIeLE0">Редактируем регистрацию на вымышленном сайте</a></li> <li>№ 129. <a href="https://www.youtube.com/watch?v=5e2pwuF8raQ">Формулировки ошибок в форме</a></li> <li>№ 135. <a href="https://www.youtube.com/watch?v=ERNjOfUbXZY">Сокращаем текст про почту</a></li> </ul> <p>Вёрстка:</p> <ul> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> <li>№ 78. <a href="https://www.youtube.com/watch?v=JFKJHdQJvNQ">Неудачные выравнивательные связи</a></li> <li>№ 99. <a href="https://www.youtube.com/watch?v=yj5dFy9HQ-Y">Комментирую вёрстку окна</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 79. <a href="https://www.youtube.com/watch?v=58GldX-JZig">Улучшаем дизайн кнопки</a></li> <li>№ 81. <a href="https://www.youtube.com/watch?v=rlCxhBCxJww">Классические признаки поля ввода и кнопки</a></li> <li>№ 87. <a href="https://www.youtube.com/watch?v=ox38_G9lQuo">Вспомогательные линии — тоньше и скромнее</a></li> <li>№ 91. <a href="https://www.youtube.com/watch?v=hieOe3wu-7E">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые</a></li> <li>№ 93. <a href="https://www.youtube.com/watch?v=hh1oSLA0XaE">Задисейбленность кнопки</a></li> <li>№ 140. <a href="https://www.youtube.com/watch?v=Z8C1RMcR2fk">Выбор цветов для интерфейса</a></li> <li>№ 141. <a href="https://www.youtube.com/watch?v=E40xHhr73Ig">Шрифты с засечками в интерфейсе</a></li> <li>№ 148. <a href="https://www.youtube.com/watch?v=X7mBhTG08xA">Настраиваем толщины линий</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> <li>№ 82. <a href="https://www.youtube.com/watch?v=2qV6CCRT6lA">Заранее спросить у клиента про сео и персональные данные</a></li> <li>№ 88. <a href="https://www.youtube.com/watch?v=Mt45AuwOnvA">Убрал шум — добавь сигнал!</a></li> <li>№ 90. <a href="https://www.youtube.com/watch?v=-GHjDFHWrBA">Классно упростить себе задачу</a></li> <li>№ 100. <a href="https://www.youtube.com/watch?v=yTIrl1jnEHU">Программисты могли бы подумать о пользе для бизнеса</a></li> <li>№ 106. <a href="https://www.youtube.com/watch?v=3fzeLHVhvy0">Оговорка, что интерфейс — это не всё</a></li> <li>№ 136. <a href="https://www.youtube.com/watch?v=qh5BmDJ48yI">Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> <li>№ 128. <a href="https://www.youtube.com/watch?v=zCldGigmk04">Что не так с ваерфреймами</a></li> <li>№ 139. <a href="https://www.youtube.com/watch?v=tqfe5-w0VPo">Сначала презентуйте линейно, а потом уже рисуйте диаграммы</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> <li>№ 123. <a href="https://www.youtube.com/watch?v=zoN15-R2gQ8">Благодарности</a></li> <li>№ 124. <a href="https://www.youtube.com/watch?v=gCTCA_dQOp4">Мастрид ли Тафти?</a></li> <li>№ 125. <a href="https://www.youtube.com/watch?v=35uwvF6SZb8">Как я отношусь к войсикам и кружочкам</a></li> <li>№ 131. <a href="https://www.youtube.com/watch?v=2PC5L3tv6fA">Когда нужны моноширинные цифры</a></li> <li>№ 133. <a href="https://www.youtube.com/watch?v=o2DjvI6nVts">Плакаты и бумага, которая горит</a></li> <li>№ 137. <a href="https://www.youtube.com/watch?v=dfe9kO0a054">Почему я не могу дать список дизайнеров, за которыми надо следить</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 12 октября — 10 ноября.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 131412 https://ilyabirman.ru/meanwhile/all/presentation-course-frag-7/ Tue, 01 Oct 2024 23:34:13 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/presentation-course-frag-7/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участник курса презентаций Роман Туров презентует коллегам-дизайнерам инструмент для подбора цветов на основе правильного расчёта контраста. Первая попытка — <a href="https://ilyabirman.ru/meanwhile/all/presentation-course-frag-6/">в предыдущем видео</a>. 14 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/83bt2V_KRz0?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> <p> 00:00 Роман презентует<br /> 07:53 Илья комментирует<br /> 11:57 Миша комментирует<br /> </p> </div> <p>Это фрагмент № 7 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 25 марта 2024 года.</p> <p>До 6 октября идёт запись на курс, который пройдёт 7⁠—27 октября.</p> <p><a href="https://bureau.ru/courses/presentation-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа и запись</p> 128045 https://ilyabirman.ru/meanwhile/all/presentation-course-frag-6/ Fri, 24 May 2024 13:21:47 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/presentation-course-frag-6/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участник курса презентаций Роман Туров презентует коллегам-дизайнерам инструмент для подбора цветов на основе правильного расчёта контраста. Это его первая попытка и наши комментарии: можно сократить вступление, конкретизировать примеры, показать было—стало, пригласить попробовать. 18 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/Qug7ZKK1-9I?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> <p> 00:00 Предварительное обсуждение<br /> 01:15 Роман презентует<br /> 07:02 Миша комментирует про соответствие слайда речи и долгое вступление<br /> 10:20 Илья комментирует про конкретику, слайды для вводных слов и призыв попробовать<br /> 15:55 Миша дополняет с идеей «было—стало»<br /> </p> </div> <p>Это фрагмент № 6 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 18 марта 2024 года.</p> <p>До 7 июля идёт запись на курс, который пройдёт с 8 по 28 июля. Сэкономьте 30%, записавшись заранее.</p> <p><a href="https://bureau.ru/courses/presentation-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа и запись</p> 127795 https://ilyabirman.ru/meanwhile/all/presentation-course-frag-5/ Sat, 04 May 2024 11:30:49 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/presentation-course-frag-5/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участница курса презентаций Дарья Камышная презентует руководству новый подход к обучению сотрудников, который она предлагает. Первая попытка — <a href="https://ilyabirman.ru/meanwhile/all/presentation-course-frag-4/">в предыдущем видео</a>. Здесь рассказ намного бодрее! Часть рассказа мы вырезали по просьбе Дарьи, так как там были закрытые штуки с её работы. Теперь Миша показывает, как улучшить слайды. 15 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/zyy3Te5sOck?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> <p> 00:00 Дарья презентует<br /> 03:23 Миша показывает, как улучшить слайды<br /> </p> </div> <p>Это фрагмент № 5 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 25 марта 2024 года.</p> <p>Редко выкладываем кусочки оттуда, зацените.</p> <p>До 19 мая идёт запись на курс, который пройдёт с 20 мая по 9 июня. Сэкономьте 10%, записавшись заранее.</p> <p><a href="https://bureau.ru/courses/presentation-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа и запись</p> 127423 https://ilyabirman.ru/meanwhile/all/presentation-course-frag-4/ Fri, 26 Apr 2024 23:18:56 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/presentation-course-frag-4/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участница курса презентаций Дарья Камышная презентует руководству новый подход к обучению сотрудников, который она предлагает. Это её первая попытка и наши комментарии. 23 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/OckxuoURm6k?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> <p> 00:00 Уточняем контекст<br /> 01:40 Дарья презентует<br /> 06:09 Обсуждаем, почему презентовать страшно<br /> 09:14 Илья комментирует<br /> 16:51 Миша комментирует<br /> 21:47 Участница Валентина комментирует<br /> </p> </div> <p>Это фрагмент № 4 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 18 марта 2024 года.</p> <p>Редко выкладываем кусочки оттуда, зацените.</p> <p>До 19 мая идёт запись на курс, который пройдёт с 20 мая по 9 июня. Сэкономьте 20%, записавшись заранее.</p> <p><a href="https://bureau.ru/courses/presentation-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа и запись</p> 126570 https://ilyabirman.ru/meanwhile/all/horoscope/ Mon, 01 Apr 2024 14:35:12 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/horoscope/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p><b>Овнам</b> сегодня стоит быть внимательными и заботливыми не столько к потребностям компьютера, сколько к устремлениям пользователя. Следует найти общий язык с техникой и мягко настроить её на сотрудничество, уважение<br /> к несовершенству человека и его слабостям.</p> <p><b>Тельцы</b> могут столкнуться с некоторыми трудностями в объяснении своих смелых идей. Проявите осторожность в дизайне и избегайте рискованных решений. При выборе своего сценария на этот день, звёзды рекомендуют без острой необходимости не выходить за рамки привычного. Попытайтесь избегать ситуаций, которые могут вызвать разногласия.</p> <p><b>Близнецы</b> успешно справятся со всеми рабочими задачами. То, что раньше удавалось сделать, лишь постоянно переключаясь между разными режимами, сегодня, наконец-то, удастся реализовать в одном. Звёзды советуют направить силы на выбор удачных жестов, но для этого понадобится проявить изобретательность.</p> <p><b>Ракам</b> придётся потратить немало сил, чтобы окружающие не устали от их непредсказуемости. Постарайтесь уделить больше внимания последовательности в поведении — это поможет пользователям положиться на вас, чтобы осуществить долгожданный прогресс в своих целях и планах.</p> <p><b>Львов</b> ждёт переизбыток энергии, который приведёт к стремлению постоянно прыгать между задачами. Будьте открыты к смелым экспериментам, но помните, что новичкам будет нелегко увидеть смысл в ваших действиях. Взгляните на ситуацию их глазами. Ваши терпеливые объяснения и подсказки помогут делам сдвинуться с места.</p> <p><b>Дев</b> ждёт благоприятный день, если они смогут давать адекватную обратную связь. Ваша реакция на действия пользователей сильно повлияет на впечатление о вас. Не бойтесь осуществлять долгосрочные планы и цели, постепенно и последовательно двигаясь к своим достижениям. Но не молчите и не игнорируйте людей, даже когда очень заняты — покажите, что услышали, и держите в курсе прогресса.</p> <p><b>Весам</b> в этот день будут важны отношения с близкими, причём важно избегать путаницы в том, кто входит в этот круг. Убедитесь, что рядом находятся те элементы, которые действительно связаны по смыслу, а остальные стоят подальше. Не бойтесь брать на себя инициативу в том, чтобы прояснить эти отношения — это может быть некомфортно, но результат принесёт вам удовлетворение.</p> <p><b>Скорпионам</b> предстоит ощутить лёгкость, исключив из своих интерфейсов всё лишнее и позволив себе нарушать правило семи элементов. Чтобы достичь результата, подключите свою возможность анализировать: тщательно отделяйте сигнал от шума и примите осознанное решение добавлять первое и удалять второе.</p> <p><b>Стрельцы</b>, этот день наполнен стремлением к краям экрана! Постарайтесь наполнить их полезными функциями, а если это не получается, то уделите внимание тому, чтобы снизить количество физической активности, связанной с прицеливанием. Сегодня подходящее время для творческих изменений, особенно если это размеры кнопок.</p> <p><b>Козероги,</b> сегодня звёзды советуют вам привести в порядок все аспекты вашей жизни. Это идеальное время для создания системы во всем, что вас окружает! Направьте свои аналитические способности на поиск закономерностей и поддержание структур, и результатом станет заслуженное уважение и разработчиков, и пользователей.</p> <p><b>Водолеям</b> сегодня стоит проявить ясность в выражении своих мыслей и идей. Обращаясь к людям, делайте акцент на самом важном, пишите без воды и выбирайте точные слова. Помните, что простота и понятность — залог успешного интерфейса.</p> <p><b>Рыбы,</b> в этот период звёзды рекомендуют вам обратить внимание на ограничения других людей. Пусть ваш день станет ярким, а интерфейс — контрастным для пользователей! Помните, что каждый человек имеет свои особенности, будь то зрение, слух или какие-то другие ограничения. Внимание к потребностям окружающих станет ключом к преодолению любых препятствия на пути к успеху.</p> <p>Независимо от знака зодиака сегодня хороший день, чтобы <a href="http://bureau.ru/courses/ui-online/">записаться на курс</a>.</p> 126141 https://ilyabirman.ru/meanwhile/all/ui-course-frag-139/ Mon, 04 Mar 2024 11:32:39 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-139/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>На курсе о пользовательском интерфейсе комментирую то, как участница показала свой интерфейс то есть, фактически, презентацию. Вообще, о презентации у нас есть отдельный курс, так что это видео можно считать относящимся и туда, и туда. 6 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/tqfe5-w0VPo?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 139 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 сентября 2023 года.</p> <p>До 15 марта идёт запись на курс, который пройдёт с 16 марта по 14 апреля. Сейчас дешевле на 10% из-за ранней записи.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> <p>Кстати, одновременно идёт и запись <a href="https://bureau.ru/courses/presentation-online/">на мартовский курс презентаций</a> (11⁠—31 марта).</p> 125549 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-125/ Fri, 19 Jan 2024 12:00:00 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-125/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те три года, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">больше сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Разобрал 125 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-150/">потом разберу ещё</a>.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> <li>№ 89. <a href="https://www.youtube.com/watch?v=eLOGLY3_h7U">Прямоугольнизация дизайна и свобода, которую даёт фотошоп</a></li> <li>№ 119. <a href="https://www.youtube.com/watch?v=Hwi6ddaRZ38">О дизайне переключателя (segmented control) и положении кнопки</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> <li>№ 84. <a href="https://www.youtube.com/watch?v=phraobT9Ufk">Разбираем мелочи в форме регистрации</a></li> <li>№ 85. <a href="https://www.youtube.com/watch?v=DnTeUK1OqLQ">Исправляем форму формы, ну и немножко содержание</a></li> <li>№ 103.<a href="https://www.youtube.com/watch?v=b4NPKYiT9n4">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню</a></li> <li>№ 104. <a href="https://www.youtube.com/watch?v=dqnYrhXSMms">Подробный разбор сложной формы</a></li> <li>№ 108. <a href="https://www.youtube.com/watch?v=9RUUtqehkyU">Кирпичная кладка и другие недостатки формы</a></li> <li>№ 118. <a href="https://www.youtube.com/watch?v=9kB6CfCE0aM">Обозначение обязательных и необязательных полей</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Элементы интерфейса:</p> <ul> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 76. <a href="https://www.youtube.com/watch?v=wihXJHHK3yo">Так это кнопка или ссылка? Оказывается, это радиокнопка!</a></li> <li>№ 114. <a href="https://www.youtube.com/watch?v=n4Cb774L2_U">Что не так с аккордеоном</a></li> <li>№ 116. <a href="https://www.youtube.com/watch?v=9tewBcFm-1M">Как назвать чупа-чупс</a></li> </ul> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> <li>№ 77. <a href="https://www.youtube.com/watch?v=U_9t3-mJXp0">Жму синюю кнопку на автомате, не читая</a></li> <li>№ 83. <a href="https://www.youtube.com/watch?v=D0zKnGG10tY">Уважать ли интерфейсные традиции разных платформ?</a></li> <li>№ 86. <a href="https://www.youtube.com/watch?v=wq4MQNpFrbg">Не надо ничего активировать</a></li> <li>№ 97. <a href="https://www.youtube.com/watch?v=jwbEj5v3bu8">Ширина и прокрутка на десктопе</a></li> <li>№ 101. <a href="https://www.youtube.com/watch?v=pn_X2x_8XPo">Елена Семёновна и валидация ввода</a></li> <li>№ 105. <a href="https://www.youtube.com/watch?v=Ew75feYtGMs">Как именно работает взаимодействие?</a></li> <li>№ 107. <a href="https://www.youtube.com/watch?v=GBj17b4l10s">Как делать, чтобы программа не тормозила</a></li> <li>№ 109. <a href="https://www.youtube.com/watch?v=-8neywtnhT8">Двухпанельный интерфейс</a></li> <li>№ 115. <a href="https://www.youtube.com/watch?v=Tq8Rh7GPqhM">Мир пользователя</a></li> <li>№ 121. <a href="https://www.youtube.com/watch?v=xKPaH3XiW-4">О связях сущностей в сложных системах</a></li> <li>№ 122. <a href="https://www.youtube.com/watch?v=XvPjm7mQ0n8">Думать из мира пользователя</a> (продолжение из 115)</li> </ul> <p>Таблицы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> <li>№ 102. <a href="https://www.youtube.com/watch?v=QyHEWiMR_0A">Как выравнивать цифры в таблицах</a></li> <li>№ 112. <a href="https://www.youtube.com/watch?v=zSJijCINU58">Собираем табличку с диапазоном и разной точностью</a></li> <li>№ 113. <a href="https://www.youtube.com/watch?v=ZDvDnJ1HSP0">Рекомендую жирную, а не бледную шапку в таблице</a></li> <li>№ 117. <a href="https://www.youtube.com/watch?v=PBzl0pIUqk0">Горизонтальная прокрутка в таблицах</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Графики и диаграммы:</p> <ul> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 94. <a href="https://www.youtube.com/watch?v=8986vOikHRk">Если данных мало, то и график не нужен</a></li> <li>№ 95. <a href="https://www.youtube.com/watch?v=WSXYgIwdziI">Рассуждения про инфографику и её задачи</a></li> <li>№ 98. <a href="https://www.youtube.com/watch?v=9pf94f8Mz7Q">Когда визуализация потрачена впустую</a></li> <li>№ 110. <a href="https://www.youtube.com/watch?v=qsDWBf-xcVs">В чём проблема интерактивных графиков</a></li> <li>№ 111. <a href="https://www.youtube.com/watch?v=wJJdSn4Vk-Q">Нужны не круговые диаграммы, а таблица</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> <li>№ 80. <a href="https://www.youtube.com/watch?v=AmuCRWsSdpA">Редактируем интерфейс конфигуратора окон</a></li> <li>№ 92. <a href="https://www.youtube.com/watch?v=bYk0_q6tWLA">Поле «Комментарий для курьера»</a></li> <li>№ 96. <a href="https://www.youtube.com/watch?v=1l35NtOBogE">Жирный против курсива</a></li> <li>№ 120. <a href="https://www.youtube.com/watch?v=H-tk4IhJWnA">Непонятный выбор и названия кнопок</a></li> </ul> <p>Вёрстка:</p> <ul> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> <li>№ 78. <a href="https://www.youtube.com/watch?v=JFKJHdQJvNQ">Неудачные выравнивательные связи</a></li> <li>№ 99. <a href="https://www.youtube.com/watch?v=yj5dFy9HQ-Y">Комментирую вёрстку окна</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 79. <a href="https://www.youtube.com/watch?v=58GldX-JZig">Улучшаем дизайн кнопки</a></li> <li>№ 81. <a href="https://www.youtube.com/watch?v=rlCxhBCxJww">Классические признаки поля ввода и кнопки</a></li> <li>№ 87. <a href="https://www.youtube.com/watch?v=ox38_G9lQuo">Вспомогательные линии — тоньше и скромнее</a></li> <li>№ 91. <a href="https://www.youtube.com/watch?v=hieOe3wu-7E">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые</a></li> <li>№ 93. <a href="https://www.youtube.com/watch?v=hh1oSLA0XaE">Задисейбленность кнопки</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> <li>№ 82. <a href="https://www.youtube.com/watch?v=2qV6CCRT6lA">Заранее спросить у клиента про сео и персональные данные</a></li> <li>№ 88. <a href="https://www.youtube.com/watch?v=Mt45AuwOnvA">Убрал шум — добавь сигнал!</a></li> <li>№ 90. <a href="https://www.youtube.com/watch?v=-GHjDFHWrBA">Классно упростить себе задачу</a></li> <li>№ 100. <a href="https://www.youtube.com/watch?v=yTIrl1jnEHU">Программисты могли бы подумать о пользе для бизнеса</a></li> <li>№ 106. <a href="https://www.youtube.com/watch?v=3fzeLHVhvy0">Оговорка, что интерфейс — это не всё</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> <li>№ 123. <a href="https://www.youtube.com/watch?v=zoN15-R2gQ8">Благодарности</a></li> <li>№ 124. <a href="https://www.youtube.com/watch?v=gCTCA_dQOp4">Мастрид ли Тафти?</a></li> <li>№ 125. <a href="https://www.youtube.com/watch?v=35uwvF6SZb8">Как я отношусь к войсикам и кружочкам</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 125538 https://ilyabirman.ru/meanwhile/all/lecture-newcomer-2024-trailer/ Thu, 18 Jan 2024 20:05:15 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/lecture-newcomer-2024-trailer/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Вторая лекция о пользовательском интерфейсе, которую я обновил — о взгляде новичка.</p> <p>Актёры играют по сценарию. А пользователи отвлекаются, переключаются между делами и нажимают кнопки не в том порядке, как придумал дизайнер. Нельзя полагаться на то, что человек помнит, что было на предыдущем экране. Каждый экран должен иметь смысл сам по себе.</p> <p>В этой лекции учу смотреть на экран свежим взглядом: как будто в первый раз или как будто вам полностью стёрли память. В лекцию добавились хорошие примеры из Телеграма, разные из Айфона, а также конкретные признаки того, что с интерфейсом проблема.</p> <p>Вчера писал вам про принцип полезных трейлеров. В трейлере «Взгляда новичка» — пример из Телеграма и разбор проблемы окна подтверждения из редактора «ВС Код»:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/Pyb7vhfxjMY?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Сейчас экономия 10% <a href="https://bureau.ru/courses/ui-online/">при записи на мой февральский курс</a>.</p> 125502 https://ilyabirman.ru/meanwhile/all/lecture-magic-2024-trailer/ Wed, 17 Jan 2024 12:37:43 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/lecture-magic-2024-trailer/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Я обновил очередные лекции о пользовательском интерфейсе. Сегодня — о последовательном волшебстве.</p> <p>В интерфейсе происходят вещи, невозможные в реальности, скажем, окно можно растянуть за уголок. Но мы видим в подобном «волшебном» поведении последовательность и логику. Если в физическом мире есть законы физики, то в интерфейсе мы можем придумать любые законы. Когда они хорошо продуманы, человек не просто заучивает определённые последовательности действий, а может осмысленно придумывать новые для решения своих задач.</p> <p>Эта лекция о том, как видеть и придумывать хорошие законы в интерфейсе. Она существенно дополнилась: появились идеи об управляемости, замкнутости и обратимости, о связи внешнего вида интерфейса и ожиданий от него. Ну и добавились новые примеры.</p> <p>В трейлерах у меня, в основном, обрезки для заманухи. Но также я придумал принцип, что трейлер сам по себе должен быть полезен. То есть кроме заманухи в нём должна содержаться хотя бы одна самостоятельная мысль или хотя бы один пример должен быть разобран содержательно.</p> <p>В трейлере «Последовательного волшебства» — домашний экран Айфона как пример «сильного» закона в интерфейсе и Эйрдроп как пример набора заплаток:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/_EOTBVLCvfk?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Сейчас экономия 10% <a href="https://bureau.ru/courses/ui-online/">при записи на мой февральский курс</a>.</p> 125470 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-100/ Mon, 15 Jan 2024 11:25:34 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-100/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те три года, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">больше сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Разобрал 100 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-125/">потом разберу ещё</a>.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> <li>№ 89. <a href="https://www.youtube.com/watch?v=eLOGLY3_h7U">Прямоугольнизация дизайна и свобода, которую даёт фотошоп</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> <li>№ 84. <a href="https://www.youtube.com/watch?v=phraobT9Ufk">Разбираем мелочи в форме регистрации</a></li> <li>№ 85. <a href="https://www.youtube.com/watch?v=DnTeUK1OqLQ">Исправляем форму формы, ну и немножко содержание</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Таблицы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Графики и диаграммы:</p> <ul> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 94. <a href="https://www.youtube.com/watch?v=8986vOikHRk">Если данных мало, то и график не нужен</a></li> <li>№ 95. <a href="https://www.youtube.com/watch?v=WSXYgIwdziI">Рассуждения про инфографику и её задачи</a></li> <li>№ 98. <a href="https://www.youtube.com/watch?v=9pf94f8Mz7Q">Когда визуализация потрачена впустую</a></li> </ul> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> <li>№ 76. <a href="https://www.youtube.com/watch?v=wihXJHHK3yo">Так это кнопка или ссылка? Оказывается, это радиокнопка!</a></li> <li>№ 77. <a href="https://www.youtube.com/watch?v=U_9t3-mJXp0">Жму синюю кнопку на автомате, не читая</a></li> <li>№ 83. <a href="https://www.youtube.com/watch?v=D0zKnGG10tY">Уважать ли интерфейсные традиции разных платформ?</a></li> <li>№ 86. <a href="https://www.youtube.com/watch?v=wq4MQNpFrbg">Не надо ничего активировать</a></li> <li>№ 97. <a href="https://www.youtube.com/watch?v=jwbEj5v3bu8">Ширина и прокрутка на десктопе</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> <li>№ 80. <a href="https://www.youtube.com/watch?v=AmuCRWsSdpA">Редактируем интерфейс конфигуратора окон</a></li> <li>№ 92. <a href="https://www.youtube.com/watch?v=bYk0_q6tWLA">Поле «Комментарий для курьера»</a></li> <li>№ 96. <a href="https://www.youtube.com/watch?v=1l35NtOBogE">Жирный против курсива</a></li> </ul> <p>Вёрстка:</p> <ul> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> <li>№ 78. <a href="https://www.youtube.com/watch?v=JFKJHdQJvNQ">Неудачные выравнивательные связи</a></li> <li>№ 99. <a href="https://www.youtube.com/watch?v=yj5dFy9HQ-Y">Комментирую вёрстку окна</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 79. <a href="https://www.youtube.com/watch?v=58GldX-JZig">Улучшаем дизайн кнопки</a></li> <li>№ 81. <a href="https://www.youtube.com/watch?v=rlCxhBCxJww">Классические признаки поля ввода и кнопки</a></li> <li>№ 87. <a href="https://www.youtube.com/watch?v=ox38_G9lQuo">Вспомогательные линии — тоньше и скромнее</a></li> <li>№ 91. <a href="https://www.youtube.com/watch?v=hieOe3wu-7E">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые</a></li> <li>№ 93. <a href="https://www.youtube.com/watch?v=hh1oSLA0XaE">Задисейбленность кнопки</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> <li>№ 82. <a href="https://www.youtube.com/watch?v=2qV6CCRT6lA">Заранее спросить у клиента про сео и персональные данные</a></li> <li>№ 88. <a href="https://www.youtube.com/watch?v=Mt45AuwOnvA">Убрал шум — добавь сигнал!</a></li> <li>№ 90. <a href="https://www.youtube.com/watch?v=-GHjDFHWrBA">Классно упростить себе задачу</a></li> <li>№ 100. <a href="https://www.youtube.com/watch?v=yTIrl1jnEHU">Программисты могли бы подумать о пользе для бизнеса</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 125471 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-75/ Tue, 09 Jan 2024 12:28:12 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-75/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те три года, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">больше сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Пока разобрал первые 75 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-100/">потом разберу ещё</a>.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Таблицы, графики и диаграммы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 125106 https://ilyabirman.ru/meanwhile/all/prezentuyte-prostymi-slovami/ Mon, 25 Dec 2023 15:25:37 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/prezentuyte-prostymi-slovami/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>На нашем с Мишей <a href="http://bureau.ru/courses/presentation-online/">курсе презентаций и выступлений</a> замечаю такую штуку. Мы призываем участников говорить более простыми словами, не грузить терминологией без необходимости. У участников это иногда вызывает сопротивление, мол, это вы просто не в курсе, а топы в нашей компании, которым я буду презентовать, всё это знают. Зачем, говорят, я буду им объяснять очевидные для них вещи, это только раздражение вызовет.</p> <p>Объяснять-то может и не надо, но просто старайтесь выбирать точные и простые слова. Вот человек презентует дизайн и говорит: «Мы спроектировали новый флоу, чтобы улучшить пользовательский опыт». Допустим, у вас в компании все так говорят. Но кому станет хуже, если вы скажете по-русски: «Мы уменьшили число шагов, чтобы было проще купить цветы»? Не бывает, чтобы после такого слушатели испытали раздражение от того, что им слишком понятно объяснили. Тут речь не о том, что вы объясняете топам, что такое «флоу» (а они и так знают), а о том, что вы вообще не используете подобных слов.</p> <p>Обратите внимание, что проблема не в том, что я как-то субъективно не люблю слова «флоу» и «пользовательский опыт». Я их, конечно, не люблю, и сам в жизни так не скажу, но дело тут в том, что эти слова размывают суть. Бывает много профессиональных терминов, без которых непонятно, о чём именно вы говорите, и в подготовленной аудитории резонно их и использовать, а не упрощать. Но тут простыми словами получается не просто проще, но точнее и однозначнее, чем с заумными.</p> <p>Спроектировали вы «новый флоу», а начальство вам такое: «Так а почему вы говорите, что это новый флоу? Тут ведь то же самое: выбираешь букет, указываешь адрес, оплачиваешь». Что вы на это ответите? «Да, но мы уменьшили число шагов»? Ну так а фигли сразу так и не сказали, зачем этот обмен репликами вам?</p> 124825 https://ilyabirman.ru/meanwhile/all/ui-online-practice-boost-results/ Sun, 10 Dec 2023 17:14:38 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-online-practice-boost-results/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>В начале ноября я <a href="https://ilyabirman.ru/meanwhile/all/ui-online-practice-boost/">анонсировал усиление практики на своём интерфейсном курсе</a>. Сейчас закончился первый курс с этими нововведениями. Получилось классно!</p> <p>Курс идёт четыре недели. Каждую неделю вы получаете порцию лекций, которые смотрите самостоятельно, и делаете набор заданий, которые мы разбираем на общем семинаре в Зуме. Каждый семинар проходит в конце очередной недели. Ну и плюс есть чатик.</p> <p>Что я изменил:</p> <ol start="1"> <li>Теперь тем, кто сделал очередное задание не к семинару, а за первые три дня, я выдаю шпаргалки для самопроверки. Можно сделать ещё одну итерацию работы, и тогда на семинаре обсуждение будет интереснее.</li> <li>Добавились задания для самостоятельной работы — к ним после сдачи тоже выдаются шпаргалки для самопроверки. Вопросы по ним можно задавать и на семинаре, и в чате, просто мы специально не выделяем время, чтобы все их разбирать.</li> <li>Тем, кто сделал все задания, включая самостоятельная, а также получил и применил все шпаргалки, выдаются сертификаты с отличием.</li> </ol> <p>Это фрагмент шпаргалки к одному из заданий третьей недели:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/cheat-sheet@2x.png" width="626" height="330" alt="" /> </div> <p>Там есть ещё общие соображения и наводящие вопросы, относящиеся ко всем заданиям сразу.</p> <p>Я не знал, как сработают изменения. Много ли людей захочет делать и переделывать столько заданий? На предыдущих курсах иногда бывало, что кто-то даже предыдущий набор заданий не делал в полном объёме. А будут ли полезны шпаргалки?</p> <p>Всё сработало отлично! В конце третьего дня каждой недели ко мне приходили друг за другом участники курса за шпаргалками, а на семинарах ссылались на них: «В шпаргалке было то-то, и я подумала сделать вот так...» Ну и в итоге — как минимум трое претендентов на сертификаты с отличием.</p> <p>Если вы были на курсе больше пяти лет назад, теперь даже есть смысл прийти ещё раз. С тех пор не только все лекции обновились и дополнились, но и вот практика тоже существенно обновилась.</p> <p>До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января. Сейчас экономия 10% из-за ранней записи.</p> <p>Дед Мороз принесёт вам мешок новых знаний!</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 124182 https://ilyabirman.ru/meanwhile/all/course-ui-practice-cover/ Wed, 08 Nov 2023 23:08:22 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/course-ui-practice-cover/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>К недавней новости про <a href="http://bureau.ru/news/2023/ui-online-practice-boost/">усиление практики на курсе</a> я нарисовал нехитрую обложку:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-final@2x.png" width="480" height="240" alt="" /> </div> <p>Обложка нужна просто чтобы была хоть какая-то картинка для соцсетей, но при этом нет смысла тратить силы на дизайн кастомной графики. Надо сделать чё-то нормальное по-быстрому.</p> <p>Кажется, что у меня просто написано слово «практика» с переносом.</p> <p>На самом деле, если просто написать слово, получится так:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-initial@2x.png" width="457" height="408" alt="" /> </div> <p>Строки встают так далеко друг от друга, потому что шрифт обычно изначально проектируют для набора полноценного текста. Вот смотрите, как будет выглядеть набор полноценного текста:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-font-example@2x.png" width="460" height="348" alt="" /> </div> <p>То есть со шрифтом всё нормально, но для моей задачи такой отступ выглядит нелепо. Подтягиваем строки друг к другу. Я подтянул так, чтобы расстояние между строками было такое, как толщина горизонтального штриха в этом шрифте:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-tight-explanation@2x.png" width="457" height="260" alt="" /> </div> <p>Получилось так:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-tight@2x.png" width="457" height="260" alt="" /> </div> <p>Дальше мне захотелось упереть букву П левым верхним углом в угол самой плашки. Но при таком крупном наборе видно, что крыша буквы Т торчит левее буквы П в предыдущей строке. В шрифте специально делают так — это называется оптическими компенсациями. Если бы их не было, при взгляде издалека наоборот казалось бы, что Т уехала правее. Но мы-то тут не издалека смотрим, а под микроскопом. Поэтому поставим ровно, ну и упрём в левый край:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-left-aligned@2x.png" width="457" height="260" alt="" /> </div> <p>Сверху, справа и снизу тоже хочется упереть:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-cropped@2x.png" width="439" height="241" alt="" /> </div> <p>Теперь напрягает, что крыша буквы Т <a href="https://ilyabirman.ru/meanwhile/all/almost/">почти, но не совсем</a> совпадает по ширине с П, а вертикальный штрих от И проходит мимо Р, хотя мог бы и попадать:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-misalignments-explanation@2x.png" width="439" height="241" alt="" /> </div> <p>Букве Т надо крышу нарисовать правильной длины, ну и букву И подвинуть правее. Диагонали от И и А могли бы плавнее друг в друга переходить, а потом от К и А. Вообще, заметно, что чем дальше от начала строки, тем сильнее расхождение, поэтому хочется просто нижнюю строку разредить до более плавного попадания:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-almost-aligned@2x.png" width="439" height="241" alt="" /> </div> <p>Теперь замечаю, что левый штрих от К почти, но не совсем проходит через середину А:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-ak-explanation@2x.png" width="439" height="241" alt="" /> </div> <p>Двигаю К чуток левее, чтобы попадало чётко:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-aligned-explanation@2x.png" width="439" height="241" alt="" /> </div> <p>Получается так:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-aligned@2x.png" width="439" height="241" alt="" /> </div> <p>Замечаю, что картинка получилась размера 439×241. Как минимум надо сделать 440×240, чтобы совесть была чиста, но я решаю сделать 480×240 — тогда получится прямоугольник пропорций 2:1. Мелочь, а приятно. Для этого нужно увеличить разрядку в обеих строках, но это и так <a href="https://www.artlebedev.ru/kovodstvo/sections/142/">неплохая идея</a>. Аккуратно делаю, следя за тем, чтобы все выстроенные вертикали сохранились:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-wider@2x.png" width="480" height="240" alt="" /> </div> <p>Перетекание И в А немного нарушилось — ну, значит не судьба. Отступ между строками пришлось на 1 пиксель уменьшить, сломав исходную затею с тем, чтобы это был ровно размер горизонтального штриха. Но кто ж это заметит?</p> <p>Теперь буквы стоят нормально, но всё вместе выглядит дырявенько, да и непонятно, что практика-то? Добавляю надписи «×2» и «и сертификаты с отличием», а заодно ставлю сердечко из обложки курса на фон. Выравниваю надписи на глазок по среднему штриху К:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-decorated@2x.png" width="480" height="240" alt="" /> </div> <p>Готово:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice-final@2x.png" width="480" height="240" alt="" /> </div> <p>Если вы работаете дизайнером, такие вещи вы должны делать просто на автопилоте и даже не считать, что вы что-то задизайнили. Это типа как уборщице поставить ровно стулья в кафе после ухода гостя. Любое конкретное решение на каждом из шагов может быть другим, но важно, чтобы вам было не всё равно.</p> <p>А на курс <a href="https://bureau.ru/courses/ui-online/" class="nu">«<u>Пользовательский интерфейс и представление информации</u>»</a> с усиленной практикой и сертификатами с отличием не забудьте прийти!</p> 124084 https://ilyabirman.ru/meanwhile/all/ui-online-practice-boost/ Sat, 04 Nov 2023 12:04:38 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-online-practice-boost/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Рассказываю, что там с усилением практики <a href="https://bureau.ru/courses/ui-online/">на моём курсе</a>.</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/practice@2x.png" width="960" height="480" alt="" /> </div> <p>Курс четырёхнедельный. На каждой были лекции и задание, и результаты заданий мы разбирали на семинаре. Для кого-то нагрузка была в самый раз, а кто-то мог бы успеть и больше. Я хотел дать больше заданий, но меня ограничивал семинар с разбором — он и так у нас всё время растягивается. Не хотелось, чтобы разбор стал поверхностным.</p> <p>Но я придумал решение: теперь ко всем заданиям будут выдаваться шпаргалки для самопроверки. Часть комментариев я повторяю из раза в раз, потому что люди ошибаются на одном и том же. Теперь если сдать задание на середине недели, можно получить шпаргалку и улучшить свою работу к семинару.</p> <p>Только за счёт этого можно сделать вдвое больше. Но на самом деле я добавил ещё и новых заданий, например на анализ существующего интерфейса и на вёрстку виджета. Будем отдельно прицельно прокачивать и логику, и эстетику.</p> <p>В общем, приходите тренироваться.</p> <p><a href="https://bureau.ru/news/2023/ui-online-practice-boost/">Новость в Бюро</a></p> 121156 https://ilyabirman.ru/meanwhile/all/presentation-course-frag-3/ Sun, 02 Jul 2023 23:27:25 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/presentation-course-frag-3/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участница курса презентаций Ольга Богачёва презентует дизайн стенда для выставки Яндекс.Клауда. Это третья неделя курса, поэтому тут всякие подставы. В данном случае один из клиентов опаздывает, а второй — в полном восторге от всего. Как быть в таких ситуациях? Разбираем, что Ольга сделала классно, а что — рискованно. 23 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/3ldvcnhojj8?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> <p> 00:00 Интро и раздача ролей<br /> 00:37 Презентация<br /> 09:30 «Вопросы аудитории»<br /> 13:57 Разбор<br /> </p> </div> <p>Это фрагмент № 3 онлайн-курса «Презентация клиенту и публичные выступления». Записано на курсе 12 июня 2023 года.</p> <p>До 2 июля идёт запись на курс, который пройдёт с 3 по 23 июля.</p> <p><a href="https://bureau.ru/courses/presentation-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа и запись</p> 120780 https://ilyabirman.ru/meanwhile/all/ui-course-frag-106/ Tue, 20 Jun 2023 19:43:53 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-106/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Небольшой спич про то, почему вообще интерфейс не обязательно должен быть хорошим, но на курсе по интерфейсу — обязательно. Две минуточки:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/3fzeLHVhvy0?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 106 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 17 марта 2023 года.</p> <p>До 30 июня идёт запись на курс, который пройдёт с 1 по 30 июля.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p>