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