Фрагменты интерфейсного курса (1—100)
За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.
Разобрал 100 фрагментов, потом разберу ещё.
Сборная солянка:
- № 1. Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму
- № 2. Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа
- № 19. Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе
- № 26. ФИО как в паспорте и эффект японской квартиры
- № 89. Прямоугольнизация дизайна и свобода, которую даёт фотошоп
Почти самостоятельные лекции:
- № 3. Папочка comparisons, листаю и комментирую после лекций об информационном дизайне (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)
- № 33. Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм
- № 37. Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс
- № 46. Про сложное цветовое кодирование и триаду Мейксенара
- № 55. Соответствие между логической структурой и выразительными средствами и дизайн-системы
Метод:
- № 30. Метод «Например»
- № 40. Сценка со звонком в пиццерию
Формы:
- № 4. Двигаем простенькую форму регистрации, чтобы стало поаккуратнее
- № 5. Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки
- № 11. Первое впечатление, синтаксис и язык формы заказа с доставкой
- № 15. Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму
- № 28. Улучшаем форму обратной связи Букинг.кома
- № 35. Первое впечатление от формы
- № 50. Упорядочиваем вёрстку формы
- № 52. Расстояние между полями и сокращение подписей
- № 53. Редизайним форму настройки сложной логики
- № 63. Добавление нескольких телефонов в форме
- № 84. Разбираем мелочи в форме регистрации
- № 85. Исправляем форму формы, ну и немножко содержание
См. также тег: веб-формы
Таблицы:
- № 8. Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря
- № 10. Что не позволено базе данных, то позволено обычной таблице
- № 29. Круговая диаграмма для красоты, табличка для пользы дела
- № 39. Дизайн универсальных таблиц с непредсказуемым содержимым
- № 65. Живые спарклайны в таблице
См. также тег: таблицы
Графики и диаграммы:
- № 34. Визуализация помогает увидеть закономерности
- № 43. Объясняю про тафтианские 45 градусов на графике
- № 94. Если данных мало, то и график не нужен
- № 95. Рассуждения про инфографику и её задачи
- № 98. Когда визуализация потрачена впустую
Интерфейс:
- № 9. Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование
- № 16. О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки
- № 44. Упрощаем экран успешного заказа пиццы
- № 60. Рассуждения о текстовых кнопках
- № 61. Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»
- № 67. Меняем табы на переключалку и настраиваем вёрстку
- № 72. Представляем выбор внятно радиокнопками
- № 74. Так это форма или мастер?
- № 75. Точно описываем поведение интерфейса для разработчиков
- № 76. Так это кнопка или ссылка? Оказывается, это радиокнопка!
- № 77. Жму синюю кнопку на автомате, не читая
- № 83. Уважать ли интерфейсные традиции разных платформ?
- № 86. Не надо ничего активировать
- № 97. Ширина и прокрутка на десктопе
Редактура в дизайне:
- № 7. Механически редактируем примечание к таблице
- № 24. Отступления от синтаксиса интерфейса и линейки в таблицах
- № 49. Редактура привела к радиокнопке
- № 66. Исследование о тексте в интерфейсе Эпла (1980-е)
- № 70. Показать примечание в контексте и заодно сократить
- № 80. Редактируем интерфейс конфигуратора окон
- № 92. Поле «Комментарий для курьера»
- № 96. Жирный против курсива
Вёрстка:
- № 17. Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально
- № 42. Улучшаем эстетику с помощью контраста и прямоугольности
- № 73. Верстаем интерфейс конструктора окон
- № 78. Неудачные выравнивательные связи
- № 99. Комментирую вёрстку окна
Эстетика:
- № 12. Как делать градиенты в инфографике
- № 13. Упаковка таблицы, симультанный контраст и борьба за красоту цветов
- № 27. Cкруглённое поле поиска и ужасный шрифт Мирьяд-про
- № 79. Улучшаем дизайн кнопки
- № 81. Классические признаки поля ввода и кнопки
- № 87. Вспомогательные линии — тоньше и скромнее
- № 91. Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые
- № 93. Задисейбленность кнопки
Ход:
- № 6. Ставим красную блямбу рядом с таблицей
- № 20. Изображаем нестандартную конструкцию окна символом
- № 25. Чтобы пользователь нажал, можно написать «Жми!»
- № 71. Запрещаю выравнивание по центру
Бизнесовое и продуктовое:
- № 23. Как продать подписку на «Афишу»
- № 32. Закоулки интерфейса можно просто не делать
- № 38. Продаём окна, объясняя разницу профилей
- № 47. Аккуратное внедрение нового дизайна без ущерба привычкам
- № 48. Что, если на реализацию хорошего интерфейса нет времени
- № 56. Разделяем сценарии оплаты частично, ровно по счёту и впрок
- № 57. Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»
- № 59. Постоянные напоминания о цене могут мешать покупать
- № 64. Вопросы клиента к интерфейсу кассы самообслуживания
- № 82. Заранее спросить у клиента про сео и персональные данные
- № 88. Убрал шум — добавь сигнал!
- № 90. Классно упростить себе задачу
- № 100. Программисты могли бы подумать о пользе для бизнеса
Инструмент:
- № 18. Последовательное волшебство в интерфейсе Фотошопа
- № 41. Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов
- № 45. Режимы наложения слоёв с овощами и фруктами
- № 54. Секреты встроенной скриншотилки на Маке
Работа над дизайном и подача:
- № 36. Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру
- № 58. Не описывайте макеты и не делайте «невозможные» макеты
Разное интересное:
- № 14. Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10
- № 21. Что бы я поменял в дизайне Бёрдвью спустя девять лет
- № 22. Технические ограничения и дизайн для будущего
- № 31. Двусмысленная иконка и проверка венгерским языком
- № 51. Глючная обработка ввода пользователя в интерфейсе Сафари
- № 62. Что делать, если клиент хочет фигню?
- № 68. Благодарности и в чём польза теории
- № 69. Что делать дизайнеру, если разработчики напрограммили всю магию?
Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.
Программа, отзывы, запись
