https://blogengine.ru/blogs/tags/predstavlenie-informacii/ Автоматически собираемая лента заметок, написанных в блогах на Эгее ru Aegea 11.0 (v4079e) Автоматически собираемая лента заметок, написанных в блогах на Эгее no 137681 https://ilyabirman.ru/meanwhile/all/ui-course-frag-183/ Tue, 07 Oct 2025 15:09:07 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-183/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>В интерфейсе участницы курса я заметил, что список выбранных окон встречается в двух местах в разной роли. Сразу же приходит в голову использовать его в одном месте в обоих смыслах. Ну и это вообще рабочий ход мысли на все случаи жизни. 4 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/laiarbyW__Y?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 183 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 5 апреля 2024 года.</p> <p>Открыта запись на курс, который пройдёт 8 ноября — 7 декабря. Сейчас −30% из-за ранней записи, а в рассрочку вообще получается 5530 ₽ / мес.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 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> 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> 130408 https://ilyabirman.ru/meanwhile/all/ui-course-frag-148/ Fri, 30 Aug 2024 11:21:26 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-148/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Осмысленно выбранные толщины линий делают иллюстрацию понятнее и красивее. Исправляем на примере окна. 3 минуты с семинара курса:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/X7mBhTG08xA?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Также есть <a href="https://vk.com/video286049442_456239413">на ВК-видео</a>.</p> <p>Это фрагмент № 148 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 27 октября 2023 года.</p> <p>Сегодня — последний день записи на курс, который пройдёт с 31 августа по 29 сентября.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 126161 https://ilyabirman.ru/meanwhile/all/two-positions-in-longform/ Tue, 05 Mar 2024 21:59:50 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/two-positions-in-longform/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Бывает, читаешь электронную книгу, перешёл куда-то по ссылке внутри неё, и потом случайно теряешь, где читал. Или смотришь длинное видео, по ошибке куда-то ткнул не туда, и потом уже фиг найдёшь, где же ты смотрел на самом деле. Хочется, чтобы таких проблем не возникало: хороший интерфейс должен прощать ошибки пользователю.</p> <p>При чтении документа есть текущая позиция прокрутки, при просмотре видеоролика — текущая позиция воспроизведения. В длинных документах и видеороликах, таких как книги и кино, текущая позиция — это не просто «куда сейчас смотрим», а нечто более весомое: это докуда я дочитал или досмотрел. Эта позиция не должна теряться из-за того, что я ткнул куда-то из любопытства.</p> <p>Компьютер должен отличать для себя две позиции в длинном содержимом: прогресс и положение прокрутки. Но как это должно работать? Пользователя этим обременять не стоит — компьютер должен сам всё понимать.</p> <p>На первый взгляд, имеет значение непрерывность и длительность. Если я смотрю на страницы по очереди друг за другом и провожу на каждой более нескольких секунд, можно предположить, что я читаю книгу. Если непрерывно-длительную последовательность составляют страницы до 58-й, но кроме этого я ещё бывал на 158-й, а сейчас на 258-й, то можно считать, что дочитал я лишь до 58-й, и давать мне способ туда вернуться. Если я непрерывно смотрел видео от начала и до 58-й минуты, а сейчас на 25-й, то можно полагать, что я просто отмотал что-то пересмотреть, но глобально я всё ещё на 58-й минуте, и давать мне способ туда вернуться.</p> <p>Однако и непрерывность, и длительность — вещи условные. В книге я могу пропустить предисловие, потом пролистать где-то несколько скучных страниц или даже целую главу, и продолжать читать, сдвигая свою «весомую» позицию. В видео я могу промотать неприятные сцены или рекламу, также продолжая внимательно смотреть. Кроме того, я мог решить перечитать книгу или отдельную главу с начала; аналогично с видео. В общем случае сложно угадать, что я мог бы иметь в виду. Хочется учесть всю эту недискретность, визуализировать её для пользователя.</p> <p>Лет десять назад Артём Горбунов придумал идею «термоскроллера». Типа лифт в полосе прокрутки «греет» шахту. Чем дольше мы находимся в какой-то месте, тем горячее она становится. Применим идею к визуализации положения в книге или видеоролике:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/two-positions-in-longform@2x.jpg" width="1000" height="20" alt="" /> </div> <p>Отлично видно, что мы прочитали больше половины книги, пропустив предисловие, ну и много чего ещё полистали из любопытства, а сейчас увлеклись разглядыванием чего-то там ближе к концу. Дальше уже можно придумать какую-то эвристику, чтобы определить место, докуда я дочитал, и дать способ к нему быстро прыгнуть. Но главное, что если даже не угадали, то пользователь и сам сориентируется.</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> 125686 https://ilyabirman.ru/meanwhile/all/ui-course-frag-134/ Mon, 29 Jan 2024 22:28:32 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-134/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участник курса играл в духовом оркестре и против того, чтобы делать линии нотного стана тоньше линий нот. Обсуждаем разницу между тетрадью в клетку и нотным станом и общий подход к экспериментам с профессиональными нотациями. 8 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/zMmO0bWqELQ?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 134 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 15 сентября 2023 года.</p> <p>До 2 февраля идёт запись на курс, который пройдёт с 3 февраля по 3 марта.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</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> 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> 125288 https://ilyabirman.ru/meanwhile/all/ui-course-frag-132/ Mon, 01 Jan 2024 20:15:21 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-132/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>С участником курса обсуждаем представление данных в виде круговой диаграммы или таблицы. Я жалуюсь, что сложно понять, как данные взаимосвязаны, а участник говорит, что ему наоборот легко понять. В итоге получается дискуссия о задачах инфографики, и я рассказываю о том, чему мы в этом смысле учим на курсе. 10 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/Urn9TDalPg4?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 132 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 8 сентября 2023 года.</p> <p>До 2 февраля идёт запись на курс, который пройдёт с 3 февраля по 3 марта.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 125215 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-50/ Thu, 28 Dec 2023 18:38:27 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-50/ <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>Пока разобрал первые 50 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-75/">потом разберу ещё</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>№ 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>№ 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> </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> </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> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <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> </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> </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> </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> </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> </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>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</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> 125177 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-25/ Tue, 26 Dec 2023 15:46:10 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-25/ <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>Пока разобрал первые 25 фрагментов, <a href="https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-50/">потом разберу ещё</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>№ 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>№ 19 <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> </ul> <p>Это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</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> </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> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a>.</p> <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> </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> </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> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</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>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</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> 125044 https://ilyabirman.ru/meanwhile/all/ui-course-frag-131/ Thu, 21 Dec 2023 13:47:59 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-131/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Рассказываю на курсе, что моноширинные цифры нужны в таблицах и в случае динамических данных, показываю примеры. 3 минутки:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/2PC5L3tv6fA?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 131 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 8 сентября 2023 года.</p> <p>До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.</p> <p>Дед Мороз принесёт вам мешок новых знаний!</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 123957 https://ilyabirman.ru/meanwhile/all/solar-system-model-melbourne-video/ Tue, 31 Oct 2023 11:47:35 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/solar-system-model-melbourne-video/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Модель Солнечной системы в масштабе 1 к миллиарду в Мельбурне:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/ry122Jqpxu4?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Захотелось слетать в Мельбурн и посмотреть своими глазами. Очень мощное сравнение.</p> 123251 https://ilyabirman.ru/meanwhile/all/ui-course-frag-117/ Fri, 29 Sep 2023 19:46:40 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-117/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Что делать, если без горизонтальной прокрутки таблица не влезает? Может быть, всё-таки упихнуть. Может быть, дать частичную прокрутку, чтобы нужные вещи оставались в поле зрения. 4 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/PBzl0pIUqk0?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 117 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 4 мая 2023 года.</p> <p>До 6 октября идёт запись на курс, который пройдёт с 7 октября по 5 ноября.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 122302 https://ilyabirman.ru/meanwhile/all/ui-course-frag-111/ Sat, 12 Aug 2023 11:35:57 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-111/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Небольшой кусочек, где я говорю, почему круговые диаграммы мешают въехать в данные, и почему тут нужна обычная таблица. 3 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/wJJdSn4Vk-Q?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 111 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.</p> <p>До 25 августа идёт запись на курс, который пройдёт с 26 августа по 24 сентября. Сейчас действует скидка 10% из-за ранней записи.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 122201 https://ilyabirman.ru/meanwhile/all/ui-course-frag-110/ Tue, 08 Aug 2023 11:27:55 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-110/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участник курса нарисовал график, но он оказался интерактивным — разные данные на нём появляются в зависимости от того, куда кликнул пользователь. Рассказываю, почему это проблема даже на уровне подхода, но ещё разбираем и конкретные проблемы в самом интерфейсе. 6 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/qsDWBf-xcVs?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 110 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.</p> <p>До 25 августа идёт запись на курс, который пройдёт с 26 августа по 24 сентября. Сейчас действует скидка 10% из-за ранней записи.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 119459 https://ilyabirman.ru/meanwhile/all/ui-course-frag-102/ Sat, 20 May 2023 12:17:06 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-102/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Снова борюсь с заблуждением, что цифры надо выравнивать по правому краю. Цифры надо выравнивать по разрядам! Если у них в результате этого сравняются правые края — ну хорошо, но это побочный эффект, а не самоцель. А то, что все любят выравнивать по правому — так это потому что так быстрее напрограммировать. 3 минутки:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/QyHEWiMR_0A?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 102 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 16 декабря 2022 года.</p> <p>До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 118848 https://ilyabirman.ru/meanwhile/all/ui-course-frag-98/ Fri, 28 Apr 2023 20:06:48 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-98/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Ещё один спич про то, когда нужна, а когда не нужна визуализация. Например, визуализация иногда помогает выявить манипуляции с данными. 4 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/9pf94f8Mz7Q?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 98 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 ноября 2022 года.</p> <p>До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p>