Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Дизайн-просмотр за три минуты

Смонтировал видео с форума «Дизайн-просмотр», который прошёл 29 и 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. Если владеете достаточным знанием Английского языка, почитайте.

Успехов!

Совет: c чего начать изучение вёрстки

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Аркадий, привет!

Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom. Попробуй:

Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.

Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

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

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

Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.

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

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.

Прочитай книгу про системы контроля версий: Pro Git.

Заведи аккаут на GitHub и установи их приложение на компьютер. Научись работать с репозиториями и ветками. Этот навык будет полезен в командной разработке.

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

Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.

Σ

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

Краткий чеклист:

  1. Придумать проект для вёрстки
  2. Начать верстать
  3. В процессе вёрстки читать книги, статьи и смотреть видео уроки
  4. Повторять до уровня, который тебя начнет устраивать

°°°

Задать вопрос

Характер и эмоции в штрихе, итоговое занятие

Последнее занятие курса «Характер и эмоции в штрихе». В качестве итоговой работы взял фразу «Автостопом по галактике».

Дома подготовил пару вариантов, на фото слева.

Они не подошли. Перебор с элементами вместо букв: колесо, комета и луна. Начал сначала.

Нащупал стиль. Для лучшего эффекта взял чёрный лист и по линейке начертил фразу.

Взял палочку для суши и обратной стороной начал выводить буквы. Линии получились ровными и уверенными благодаря твёрдости дерева. Если бы рисовал кисточкой — получился бы не так классно.

Начерченная карандашом сетка придает классный эффект всему плакату. Моя итоговая работа выглядит так:

Все работы студентов курса.

Сфотографировались на память со своими работами.

Σ

Курс «Характер и эмоции в штрихе» пройден. Время подвести итоги.

°°°

Все занятия: первое, второе, третье, четвёртое и пятое, шестое.

СохранитьСохранить

Характер и эмоции в штрихе, четвёртое и пятое занятия

На четвёртом и пятом занятиях курса «Характер и эмоции в штрихе» занимались композицией фразы.

Влада показала на примерах какие композиции могут быть. Какие эмоции и смысл они передают. Разобрали плакаты, вот некоторые из них:
Больше примеров композиции можно посмотреть в Пинтересте

Перед тем как рисовать композицию, хорошо было бы составить её карандашом на листочке. Можно составить её в Фотошопе, а потом перерисовать на бумагу.

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

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

Выбрал название фильма «Автостопом по галактике» и попробовал составить композицию:



Пятое занятие

Выбрал фразу из Звездных Войн: «Да пребудет с тобой Сила».

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



Σ

Найти композицию — одно из самых сложных занятий.

°°°

Все занятия: первое, второе, третье, четвёртое и пятое, шестое.