Как я провел свой первый курс по дизайну интерфейсов
Вкратце: мало людей, но много фана
Когда я работал в Interfaced — небольшой сибирской компании —бывали времена с маленькой загрузкой по работе. Обычно в такие моменты я докапывался до коллег и пытался замутить внутренние субботние доклады, чтобы ребята рассказали над чем работают или просто сделали полезную лекцию.
В ноябре 2018 у Артема, тимлида в компании, получилось договориться с преподавателем из вуза, что он проведет факультативный курс по фронтенду. А я скромно спросил у Артема, не хотят ли его студенты послушать еще и про дизайн интерфейсов?
Мы договорились, что занятия будут идти параллельно: по фронтенду и дизайну, один раз в неделю на одну пару. Ну что же, начало положено, осталось запилить сам курс!
Планирование курса
Любой курс по дизайну нужно начать с понимания:
- На какую аудиторию рассчитан курс?
- Чему должны научиться студенты?
- Сколько он будет длится?
- Какие форматы занятий будут?
- Какими инструментами будут пользоваться студенты?
Аудитория. Мои студенты были недизайнерами, без айтишного бэкграунда.
Навыки. Я хотел, чтобы они узнали что такое дизайн интерфейсов, научились решать простые задачи и смогли работать в типовом дизайн-процессе. А, ну еще Фигму освоили.
Длительность. Особых ограничений не было, но мы договорились, что при одном занятии в неделю месяцев двух-трех хватит. (В итоге получилось 14 занятий.)
Формат. Занятия предполагались классические: лекции и практики. Но в процессе проведения курса мне оказалось геморно читать полтора часа теорию, а студентам слушать такой большой объем. Поэтому я перешел к а-ля воркшопу, когда я полпары рассказываю конкретную тему, а на второй половине мы со студентами пробуем это на практике. В конце занятия выдаю практическую домашнюю работу, которую нужно прислать на почту. Еще с форматом связано место проведения: у меня была аудитория в вузе с проектором и компами для студентов.
Инструменты. В аудиториях компьютеры были на винде, поэтому Скетч сразу отпал, а Фигма сразу появилась. К графическому редактору еще понадобились Гуглдоки чтобы читать ТЗ и вести заметки о курсовом проекте.
Структура
Все, на главные вопросы ответил, понимание задачи появилось. Теперь нужно собрать скелет курса — ну или распланировать занятия на верхнем уровне, кому как нравится.
Так как студенты нулевые, обязательно нужно было погрузить их в самые основы дизайна. Спросить что они знают, рассказать про суть, направления, описать дизайн-процесс. Такая лекция помогла бы и мне узнать чего хотят ребята, и им ответить на вопрос «а оно мне надо?».
Какой основной инструмент дизайнера интерфейсов? Типографика и верстка! Это были следующие занятия, которые я поставил в план. Возможно это неочевидно, но ребятам придется создавать что-то визуальное, работать с текстом, собирать макеты, а без типографики и верстки процесс превратится в боль для ребят и моих глаз.
В конце курса я планировал запилить со студентами веб-интерфейс, а значит нужно было научить их сначала вебу в целом. Так появилась лекция «дизайн сайтов»: сначала история интернета и браузеров, потом немного про навигацию и типовые элементы.
Самое главное в этом курсе — понимание принципов дизайна интерфейсов. Так как ориентироваться и принимать сильные решения можно на принципах и результатах исследований, тема получилось важной. Основные принципы я взял из «Дизайна привычных вещей» Дона Нормана, «Законов робототехники в интерфейсе» Антона Жиянова и принципов Бюро.
Чтобы собрать все знания в систему, нужно было погрузиться в настоящий дизайн-процесс: задача → исследование → сценарии → прототипы → визуальный стиль → подготовка к разработке → презентация. Все этапы присутствуют в ежедневной работе дизайнера в той или иной степени, поэтому ребята близко познакомились с будущей работой.
Для курсового проекта я накидал несколько тем, студенты выбрали две: интерфейс заказа уборки в клининговой фирме и интерфейс бронирования тура в турагентстве.
В итоге получилась такая структура:
- Введение в дизайн (лекция)
- Трогаем Фигму (практика)
- Типографика и верстка (лекция)
- Верстка объявления (воркшоп)
- Верстка статьи (воркшоп)
- Дизайн сайтов (воркшоп)
- Принципы дизайна интерфейсов (воркшоп)
- Дизайн-процесс (воркшоп)
- Задача и исследование (воркшоп)
- Сценарии (воркшоп)
- Прототипы (воркшоп)
- Визуальный стиль (воркшоп)
- Подготовка к разработке (воркшоп)
- Презентация (воркшоп)
Процесс
Я не смог подготовить весь курс заранее. Во-первых, не было времени, а во-вторых, я не знал, как все пойдет. В процессе пришлось немного корректировать сложность и количество заданий, чтобы студенты успели нормально погрузиться в очередную тему.
Процесс проведения очередного занятия выглядел так:
- Распланировать задачи для занятия в карточке Трелло
- Расписать структуру в Плане
- Написать план лекции и подготовить задания
- Собрать слайды в презентации по занятию
- Провести занятие
- Выписать в карточку Трелло с «хотелками» мои наблюдения по занятию: что сложно далось студентам, что понравилось, что можно улучшить
- Запостить в телеграм-канал конспект лекции, домашнее задание и ссылки для дальнейшего изучения
- Проверить домашку, которую прислали в почте
- Закинуть домашки в карточку Трелло для последующей ностальгии :-)
Главный документ по всему курсу — План. Это удобная входная точка: легко расписать структуру для очередного занятия, а потом в свободное время накинуть текст лекции или приложить полезную ссылку.
Для презентаций я выбрал Slides — онлайн-инструмент, в котором легком можно собирать удобные презы. Есть полноэкранный режим, управления слайдами через телефон, можно пошарить ссылку на всегда актуальную презентацию студентам.
Еще один плюс (и минус) — инструмент дает меньше контроля над пикселями и поэтому почти нет соблазна сделать слайды идеальными. Скорость подготовки презы растет, но «дизайнеровость» немного падает. Для себя я решил, что преза лучше будет подробная и хорошо дополняющая рассказ, нежели красивая и затратная.
Все планирование, фидбек по занятиям и решения домашек я хранил на доске в Трелло. Можно достаточно удобно расписать все задачи по занятию и пройтись по ним, когда дойдут руки.
Всю практическую работу мы вели в Фигме. Самый кайф — можно смотреть со своего компьютера, как ребята пилят задания. А потом сразу же проводить дизайн-ревью, попутно записывая комменты на макет!
Озарения
Курс можно рассматривать как продукт: у него есть цель, аудитория, какой-то процесс взаимодействия. Чтобы сделать этот или следующий курс лучше, я собрал обратную связь.
Чат вместо телеграм-канала. Для курса я сделал телеграм-канал: постил туда конспект лекций, ссылки и домашку после каждого занятия, чтобы студенты могли перечитать тему и еще раз понять, что от них хотят. Это модненько, но неудобненько: читать большие лекции в телеге некомфортно. Часто для курсов делают чаты: преподаватель отвечает там на вопросы, а студенты присылают домашки в чат. По-моему, это намного удобнее.
Еще была проблема с отправкой ссылок студентам, Например, нужно показать им ТЗ, это значит:
- Сократить ссылку
- Вставить ее в презу
- Попросить студентов перепечатать себе ссылку
Ну совсем не юзер-френдли! А в чате с этим легче: на занятии отправил ссылку в чат и все открыли.
Конспекты лекций в ПДФ. Читать лекции в телеге жутко неудобно, да. Но можно было сделать одну пдфку и просто ссылаться на нее! Но я почему-то этого не сделал и оставил как есть. Думаю, что с plain-text лекциями еще можно справиться, но в следующий раз я бы собрал либо одну пдфку, либо прикреплял ссылки на Teletype в чат после каждой лекции.
Один файл Фигмы для всех домашек. Достаточно геморно выискивать несколько файлов в Фигме по одному человеку, так как мы использовали бесплатные аккаунты. Было бы круто держать все домашки от одного человека в одном файле. Тогда и ревью проходило бы быстрее, сразу по всем домашкам в очереди, и прогресс был бы виден.
Мини-тесты в конце лекции. Ну не прям тесты, а скорее простые вопросы по теме лекции. Не для проверки, а для того, чтобы студенты еще раз пробежали в голове по лекции и запомнили главные вещи.
Презентация по курсу в Фигме. Slides удобный: быстро создаются слайды, удобно презентовать откуда угодно. Но некоторые слайды получались кривенькими, совсем «недизайнерскими».
Воркшопы с участием преподавателя. У нас был одно такое занятие: я попросил студентов нарисовать форму заказа товаров в интернет-магазине. После нескольких итераций осталось время, и я сам накидал черновик формы, дополнительных состояний и показал полный сценарий. Ребятам понравилось, а мне показалось, что такое стоит устраивать чаще.
Чтобы проектировать интерфейсы, нужно знать модели данных. Когда проходили сценарии, нужно было перейти от задачи и гипотез к проектированию интерфейсу. Но чтобы спроектировать интерфейс, нужно знать что такое сущности, как они могут относиться друг к другу, как они могут храниться и все такое. Я ребятам про это не рассказывал, но у них все равно все получилось.
Нужно ограничивать количество сценариев для курсового проекта. Курс когда-то должен был закончиться. Но некоторые ребята взяли несколько слишком обширных сценариев и не успели их полностью проработать. В целом, для курсового проекта необязательно прорабатывать все кейсы, но было бы правильнее ограничить объем, чтобы успеть пройти через несколько итераций ревью до конца курса.
Вести занятие с чужого компьютера жутко неудобно. А особенно с виндой, если сидишь на работе и дома под маком. Из-за этого нужно выбирать инструменты, которые будут доступны на винде или в вебе. Но бо́льшая проблема — не иметь возможность показать что-то из своих проектов или быстро найти в своих источниках.
Итоги
На первое занятие пришли 7 студентов, на последнее — 2. Мы провели 14 занятий, познакомились с дизайном, типографикой, версткой, попробовали сверстать объявление и статью, посмотрели на историю сайтов, узнали основные принципы интерфейсов и прошли через настоящий дизайн-процесс.
Настя и Алина, у вас все получится! Спасибо, что поучаствовали в таком интересном мероприятии. Мне было сложно и весело. Надеюсь, что вам понравилось и вы вынесли для себя что-то полезное.
Курс помог мне самому систематизировать знания: в каком порядке выдавать, какой навык нужен для какого навыка. А еще это офигенный опыт публичных выступлений :-)
Скоро я выпущу статью для новичков о том, как погрузиться в профессию: что почитать и сделать, чтобы сначала познакомиться с дизайном интерфейсов, а затем научиться приносить пользу бизнесу.
Мой телеграм-канал, где я делюсь мыслями про работу, дизайн, и продуктивность: Task → Solution.
