Саша Бизиков

Тег: Обучение

Итоги по годовому курсу графического дизайна Bang Bang Education

Год назад записался на курс графического дизайна от Bang Bang Education, 18 сентября у нас прошёл выпускной и самое время подвести итоги, поделиться процессом обучения, впечатлениями и конечно результатами.

Чтобы проще было подводить итоги я в начале обучения зафиксировал для себя текущее состояние и цели, которых хочу достичь в рамках курса:

Другими словами я не собирался сменить профессию на графического дизайнера, а скорее добрать навыки.

Ретроспектива

В 2016 году перешёл из веб-разработки в дизайн. Прошел первую ступень школы дизайна в Яндексе. Через три месяца нашел работу младшим дизайнером в FunBox и переехал из Оренбурга в Москву.

После перехода в дизайн написал серию заметок, которые нашли отклик у многих начинающих дизайнеров. Посмотрите, если переходите в новую профессию, они могут оказаться полезными для вас:

Либо, можете прочитать статью на Тильде Эдюкейшн «Как разработчику стать дизайнером», где совмещены все три заметки и сопровождаются комментариями Никиты Обухова, Вова Аюева, Лолы Кристаллинской и многих других известных дизайнеров.

Фото с первого рабочего дня в ФанБоксе

Через семь месяцев повысили до дизайнера, а ещё через два — предложили попробовать себя в роли руководителя отдела дизайна. Таким образом я перешёл от дизайна к руководству и дизайн-менеджменту.

Следующие три года на лету учился быть дизайн-менеджером и руководителем: управление проектами, поиск и найм дизайнеров, выстраивание процессов дизайна в отделе, параллельно учился делать презентации и заодно собрал сильную команду дизайнеров коммуникаций.

Развитие на примере осьминожек, подробнее в итогах 2019 года

В 2021 году появилась уверенность в себе, как в руководителе и ощущение, что вышел на плато. Процессы в отделе встали на рельсы и появилось время на то, чем давно хотел заняться — получить более глубокие, фундаментальные так сказать, знания в области дизайна.

О том, как и почему я выбрал годовую программу графического курса Bang Bang подробно останавливаться не буду. Если интересно, то послушайте выпуск подкаста, где рассказываю о поиске курсов и первых впечатлениях:

Как выглядел процесс обучения

Годовой курс графического дизайна — это первая годовая программа у Bang Bang. Программа состоит из четырёх модулей: введение, типографика, брендинг/айдентика и веб-дизайн. В процессе обучения были организационные косяки, которые исправлялись по ходу учёбы.

Под конец первого модуля ребята запустили LMS, в которую у нас перешло обучение. Там было так много много багов, что в какой-то момент я почувствовал себя не студентом, а тестировщиком. Студентам следующих потоков будет значительно удобнее, хе-хе.

Так выглядела в LMS наша обычная неделя с лекциями и домашками:

На странице с лекцией находится сама лекция и ссылки по теме:

Раз в неделю, иногда раз в две недели у нас проходили вебинары с разбором домашних заданий и долгими сессиями вопросов и ответов.

Вова Аюев отвечает на вопросы после очередного разбора домашек

Наша доска в Миро с каждой неделей становилась всё больше и больше. Невероятно, сколько всего мы понаделали! На скриншоте — это маленький кусочек одной из домашек:

Как выглядел процесс обучения с моей стороны?

В начале каждого модуля проводил декомпозицию модуля, а в начале каждой недели — декомпозицию недели. «Сань, ты чё щас сказал?», наверное подумаете вы. Сейчас объясню.

Декомпозиция — это процесс при котором большая и сложная штука дробится на более мелкие, вот и всё.

Например, декомпозиция модуля заключается в том, чтобы взять расписание модуля по неделям и забить его в Things 3, чтобы в целом понимать длительность модуля и было проще проводить декомпозицию каждой отдельно взятой недели.

Выглядит это вот так:

Декомпозиция третьего модуля обучения

Декомпозиция недели заключается в том, чтобы все лекции, домашние задания и вебинары на предстоящую неделю превратить в список задач:

Каждому типу задачи выставляю соответствующую иконку, чтобы в общем списке было легко отличить что есть что. В случае с лекциями так же указываю длительность лекции и ссылку на видео в LMS.

Такой подход помогает оценить предстоящую нагрузку по лекциям, не забыть про вебинар, отследить прогресс просмотренного и выполненного. В LMS нет возможности отслеживать, что ты уже посмотрел, а что нет — там только список лекций и домашек. Так что, пришлось выкручиваться.

Что самое сложное?

Выдерживать нагрузку на протяжении всего года. Несмотря на всю системность моего подхода, который позволил упорядочить и сделать процесс обучения предсказуемым — на долгосрочной дистанции в любом случае сложно сохранять темп.

Самым насыщенным и сложным оказался второй модуль по типографике от Свята Вишнякова. Он же был и самым полезным для меня. Часовые лекции вместо десяти минут и вебинары с разбором домашних заданий по четыре часа. После такого сложно не подвыгореть, хе-хе.

Что я с успехом и сделал. Поэтому в третьем модуле только смотрел лекции. Подробнее об учебном выгорании рассказал в выпуске подкаста:

Мои работы

Хватит болтать. Пора показать, что у меня получилось. Обучение началось с разминочных заданий на сборку мудборда и повторение стиля:

Мудборд
Пример журнала и компакт-диска, если бы их решил сделать Дитер Рамс

Задание «формальный кадр» на поиск ритма и контраста в окружающем мире оказалось классным упражнением на развитие насмотренности:

Ритм
Контраст

Продолжаю практиковать насмотренность по сей день в своём инстаграме. Каждое фото — это образ из эмодзи, либо набор образов:

В первом модульном задании разрабатывали серию мечра: нужно было придумать идею, собрать мудборд с референсами, определиться со стилем и разработать мерч, показав несколько вариантов носителей.

Я решил выбрать мерч для своего «вымышленного» курса по вёрстке презентаций и вот что из этого получилось:

Получились вот такие сертификат, блокнот и значок:

Сертификат о прохождении курса
Фирменный блокнот
Значок на память

Во втором модуле Свят Вишняков много и подробно рассказывал про стили, сетки, правила, показывал мастер-классы по вёрстке плакатов и особенно запомнились четырёх часовые вебинары с разбором домашек 🖤

Начинаем верстать плакаты:

Получил огромное удовольствие от выполнения следующего задания: нужно было сверстать 12 плакатов. Можно использовать только один формат, один шрифт и одно начертание. В рамках каждого плаката только один кегль. Цвет только черный и белый. Половина плакатов белые с черными буквами, половина — наоборот.

Плакат со смыслом

В свободное время сверстал плакат, вдохновившись работами Another Poster. Если по-честноку, то не «вдохновился», а скопировал. Разобрал структуру и попробовал воспроизвести, но с уже другим контентом.

Плакат «Дизайн спасет мир»

От плакатов плавно перешли к обложкам книг:

Война миров, Герберт Уэлс
Затерянный мир, Артур Конан Дойл
Остров дальтоников, Оливер Сакс

Во втором модуле нужно было сверстать лифлет, либо книгу. Я выбрал вёрстку книги в InDesign. В прошлой заметке уже публиковал коллекцию фотографий журналов и книг, которыми вдохновлялся в процессе.

Вот, что из этого получилось:

Заморочился с макетом: настроил не только модульную сетку, но и интерлиньяжную — так, чтобы сноски максимально попадали на базовую линию с основным текстом. На скриншоте пример вёрстки одной из страниц с настроенными сетками:

Получил массу удовольствия от изучения вёрстки в InDesing.
Получил массу удовольствия от изучения вёрстки в InDesign.

Третий модуль с бренд-стратегией и айдентикой у меня провалился. После модуля по типографике остался без сил. Ушёл в отпуск, а когда вернулся, то пропустил начало модуля и как-то всё не задалось. Поэтому по айдентике мне нечего показать.

Четвертый модуль назывался «Веб-дизайн», хотя правильнее было бы назвать его «Веб-разработка для дизайнеров». Изучали Тильду и Редимаг, верстали на них лендинги. На мой взгляд, к веб-дизайну всё это не имеет никакого отношения.

Сверстал десктопную и мобильную версию лонгрида про байкпакинг, взяв за основу статью, которую невозможно читать. Вот, что из этого вышло:

Чему научился за год?

Если коротко, то:

Что дальше?

В первую очередь отдохнуть от учёбы, книг, статей и лекций. Посвятить целый год учёбе, параллельно работая и не забывая жить — тяжело.

Понял, что хочу ещё больше узнать о типографике и вёрстке различных форматов. В большей степени двигаться не в сторону красивой картинки, как мне хотелось до курса, а в сторону работы со смыслом — это область редактуры и визуального повествования.

За прошедший год заметил за собой, что хочется расти не только в рамках дизайна. Да, дизайн — это интересно. Руководство и менеджмент тоже интересные направления, в которых я хочу продолжать развиваться. А ещё есть редактура, маркетинг, продукт и куча других сфер и всё это тоже выглядит интересным.

Хочу попробовать себя в сфере образования. По этому поводу уже есть наработки. Немного отдохну, уеду из Москвы и сяду за реализацию.

Время благодарить

Мне понравилось. Несмотря на все косяки, программа Бенгов сейчас лучшая по ценовой доступности и набору преподавателей.

Отдельная благодарность Вове Аюеву за мудрые советы по развитию в дизайне, Святу Вишнякову за программу «сдохни или умри, но типографику изучи» и всем организаторам и кураторам за то, что такая программа состоялась — это невероятный труд многих-многих людей. Вы супер!

При этом жаль, что от Игоря Киселева, Стаса Хрусталева, Серёжи Томилова и Саши Ермоленко было так мало лекций. Уверен, что им есть куда больше рассказать, чем вышло на самом деле.

Всем бенг-бенг!
Всем бенг-бенг! Фото: Женя Филатова
,

Как руководить дизайнерами

Прошёл небольшой курс на Bang Bang Education от Кости Горского «Как руководить дизайнерами». Курс находится в дизайн-библиотеке, которая доступа по подписке. По этой же причине я не буду делать дословный конспект, но поделюсь впечатлениями от курса.

Курс «Как руководить дизайнерами», Костя Горский

Несмотря на то, что курс короткий — в сумме 85 минут видео, которые разбиты на 7 частей в среднем по 10-15 минут, — я проходил его с декабря прошлого года. Сначала посмотрел первые две лекции и ушёл думать. Через пару месяцев начал пересматривать, дошёл до пятой лекции и снова ушёл думать. Сейчас вернулся и наконец-то досмотрел все части!

В длительных перерывах между просмотром лекций я учился искать и собеседовать дизайнеров, выстраивал процесс онбординга и разбирался с тем, как устроено ревью дизайнеров в Intercom, других IT-компаниях и у нас самих, но в других отделах.

Раньше поиск и найм нового дизайнера выглядел хаотично. Теперь это больше напоминает процесс, хотя все равно ещё есть что улучшить. Я начал готовиться к интервью заранее составляя список вопросов, которые хочу задать. Понял на что стоит обращать внимание во время разговора. От интервью к интервью сложилось понимание того, в каких случаях кто должен участвовать в созвоне и кто что рассказывает.

С начала года к нам в отдел дизайна ФанБокса пришло семь человек. В поиске, собеседовании и найме каждого из них я принимал участие. Сейчас нас 17 человек. Получается, что за это время мы выросли почти в два раза.

Скорее всего, без советов Кости я всё равно смог бы прособеседовать всех кандидатов на наши вакансии, но подозреваю, что качество было бы хуже. Но у меня заранее получилось разложить всё по полочкам, узнать как оно работает в больших компаниях и перенять часть опыта к себе.

После собеседования, когда обе стороны сказали «Да» передо мной каждый раз возникала новая задача — ввести в курс дела нового сотрудника. Раньше это тоже было ± хаотично, а учитывая, что в последнее время мы быстро росли, то вопрос выстраивания процесса онбординга был весьма актуальным.

Онбординг — это процедура принятия нового сотрудника и его введение в процессы новой компании

В онбординге, как и с ревью разбирался с разных сторон: посмотрел лекцию Кости, провёл небольшое исследование, пообщавшись с дизайнерами из разных IT-компаний и изучил опыт других отделов в рамках нашей компании. Исходя из этого я принимал решение, что можно внедрить.

Например, на время испытательного периода мы начали создавать чат powwow_name на троих, где name — это ник сотрудника в Slack. В этом чате наш дизайн-директор, я и новый сотрудник, который может задавать любые вопросы, возникающие во время работы. А мы помогаем ему во всём разобраться. Человек знает, куда в случае чего обратиться и что не нужно ждать какой-то встречи или окончания испытательного, а просто спрашивает в чате и получает ответ.

После того, как человек уже прошёл испытательный период и какое-то время работает в компании, может быть полезно ревью — это такая штука, которая проводится преимущественно в больших компаниях, где в отделах больше 30 человек. Раз в полгода сотрудник встречается со своим руководителем, они обсуждают как ему работалось в последние полгода, что нравилось, что не нравилось, обсуждают обратную связь от тех людей с кем он работал и намечают новые точки роста.

До того как начал разбираться с тем, что такое ревью и как оно устроено в разных компаниях, мне очень хотелось внедрить такую практику к нам в отдел. Но когда во всём разобрался, то понял что ревью нам не нужно, ха-ха! Во всяком случае пока что. Зато когда придёт время, я уже буду знать что делать.

Σ

Курс хорошо отозвался с тем, в чём мне необходимо было разобраться. Если вы недавно стали руководителем хотя бы пары дизайнеров, то советы от Кости вам пригодятся. И да, не бойтесь пересматривать лекции. Каждый раз я смотрел с новым взглядом, примеряя их на новую ситуацию.

, ,

Прошёл курс «iOS-программирование для дизайнеров»

ЗадачаНаучиться работать в Xcode: узнать основы разработки мобильных приложений для iOS, научиться делать прототипы и разобраться с анимацией.

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона.

Автор курса Антон Ловчиков — дизайнер из Злых Марсиан. Было четыре занятия, каждое по два с половиной часа. Ещё была домашка: сделать калькулятор.

В этой заметке расскажу, чему научился.

К концу курса у меня получилось написать калькулятор, который умеет выполнять простые арифметические действия:

В нём много недочётов. Калькулятор не умеет выполнять многие функции, которые есть в стандартном приложении, но это не главное. Главное — благодаря работе над калькулятором я разобрался, как работать с Xcode и усвоил материалы занятий.

Процесс создания приложения:

История изменений калькулятора
  1. Накидал кнопки и текстовое поле
  2. Задал названия для кнопок и действий
  3. Настроил стили и констрейнты
  4. Начал работать с кодом: задал границы кнопок, добавил обработку нажатий и логику вычисления значений
  5. Добавил градиенты для областей клавиатуры, настроил правильные отступы для кнопки «0» и текстового поля при разных размерах экранов
  6. Добавил историю вычислений

Теперь подробнее.

Констрейнты

Для смартфонов на iOS есть три размера экранов:

  1. 640×1136
    iPhone 5, 5c, 5s, SE
  2. 750×1134
    iPhone 6, 7
  3. 1220×2208
    iPhone 6 Plus, 7 Plus

Под каждый размер экрана необходимо настроить правильное поведение элементов, чтобы было красиво как на SE, так и на 7 Plus. Для этого нужны констрейнты. С их помощью можно сказать компилятору, каким образом должны задаваться размеры элементов и их положение на экране.

Например, все квадратные кнопки калькулятора имеют ширину 25% от ширины экрана и соотношение сторон 1:1.

Так выглядит мой калькулятор на разных экранах:

Настройка адаптивности элементов на экране

Констрейнты для калькулятора начинал делать три раза. Первый раз накидал все кнопки. Получилось быстро и красиво. Добавил сразу все констрейнты, появилась куча ошибок, запутался и начал сначала.

Во второй раз добавлял кнопки по очереди. Получилось долго, кропотливо, но результат получился нормальный. На разборе домашки Антон дал пару советов как можно ещё лучше настроить адаптивность приложения.

Для закрепления материала создал новый проект и ещё раз добавил кнопки и констрейнты. На этот раз до меня наконец-то дошла вся магия. И это классно!

Выглядит немного страшно, но если разобраться — всё просто.

Программирование

В 2014 году компания Apple выпустила язык программирования Swift. Раньше приложения писали на Objective-C. Он сложный и запутанный.

Swift — это легкий и понятный язык программирования. Удивился, насколько быстро вник в него. Кроме языка программирования необходимо уметь работать со стандартными библиотеками, которые используются для написания приложений под iOS, watchOS, macOS и tvOS.

Пример кода приложения:

Можно увидеть, как сделал отступы для кнопки «0» и текстового поля, в зависимости от размера устройства. Выглядит понятно и просто, особенно если знакомы с JavaScript.

Пример по сложнее. Задаю градиент для правой панели калькулятора.

Пример кода

Быстрый прототип

В Xcode можно делать не только полноценные приложения, но быстрые прототипы. Нарезаем дизайн экрана на картинки и вставляем их в Image View. Настраиваем анимацию и переходы.

Прототипирование в Xcode похоже на смесь Principle и Framer Studio.

В Principle можно быстро накидать кликабельный прототип и настроить анимацию появления элементов на экране. Если необходимо сделать что-то по сложнее, например, с вводом данных, Principle не подойдёт. А вот Framer Studio справится с этой задачей.

Проблема в том, что придется изучать два инструмента.

В Xcode можно сделать как простой прототип, так сложный. Большим плюсом прототипов в Xcode является то, что исходники проекта можно передать разработчикам и им не нужно устанавливать новый для них инструмент и разбираться в нём.

Они просто открывают привычный для них проект в Xcode и вытаскивают оттуда необходимые значения анимации, элементы и внедряют их в своё приложение.

Σ

Какую пользу вынес для себя:

  1. Понял, как происходит настройка адаптивности в мобильном приложении на стадии разработки. Буду стараться заранее продумывать дизайн элементов таким образом, чтобы разработчикам было проще адаптировать дизайн на все разрешения экранов.
  2. Узнал основы программирования на Swift: классы, наследование, прототипы и делегирование.
  3. Увидел, как можно делать быстрые прототипы в Xcode. Это не так уж и сложно. В следующих своих задачах попробую сделать прототип в Xcode. Посмотрим, что на это скажут разработчики.

Что дальше?

  1. Сделать своё небольшое мобильное приложение: нарисовать дизайн, запрограммировать и выложить в AppStore.
  2. Найти похожий курс, но про Java и Android Studio, чтобы понимать, как разрабатываются мобильные приложения под Android.

°°°

Спасибо Антону за полезный курс и спасибо за то, что отвечал на вопросы в нашем учебном чате, даже в полпервого ночи.

Если вам стало интересно разобраться, как делают мобильные приложения для iOS, подпишитесь на почтовую рассылку на странице курса.

Когда Антон определится с датой второго набора, вам придёт письмо.

°°°

Курс непростой. В начале нас было десять человек. К третьему занятию добралось только пятеро. На последнем было только двое.

Если хотите записаться на следующий набор — подготовьтесь.

  1. Выделите время на лекции и домашку. Занятия начинались в 19:00 по московскому времени. Как раз после окончания рабочего дня. Некоторые учащиеся пропускали занятия из за того, что в это время ехали домой в метро. Во время занятий я закрывался в переговорке на работе. Домой уходил только в 23 часа, но это того стоило. Поэтому спланируйте свой день так, чтобы на время лекции вы были в комнате и вас никто не отвлекал. Многие не успевали делать домашку, так как на работе аврал. Постарайтесь договориться, что во время учебы не сможете работать сверхурочно. Постарайтесь эффективней выполнять задачи во время рабочего дня. Используйте помидорки. Отложите второстепенные занятия: твитер, общение в фэйсбуке, удалите инстаграм. Занятия шли по вторникам и четвергам. В среду вечером занимаешься домашкой, которую показываешь в четверг. На курсе между занятиями только одни выходные и лучше всего посвятить их работе над домашкой. Другого времени разобраться в новом материале не будет. Отговорки «сделаю потом» — не работают.
  2. Заранее подучите Swift. Если у вас есть небольшой опыт в программировании хоть на каком-то языке, то всё нормально. У меня есть опыт работы с JavaScript, этого хватило, чтобы понять основы Swift. Если опыта нет, заранее разберитесь с основами языка. Так проще будет воспринимать материал на занятиях. Советую посмотреть:
    • «Язык программирования Swift» от Hexlet
      Рахим Давлеткалиев в коротких видео рассказывает о возможностях языка. На примерах объясняет как работают операторы, массивы, классы и т.д.
    • The Swift Programming Language от Apple
      Официальная книга про Swift от Apple. Если владеете достаточным знанием Английского языка, почитайте.

Успехов!

,
Ранее