Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

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

Успехов!

, , , , ,

Веду аудиодневник с наблюдениями на темы дизайна, саморазвития и в целом, отношения к жизни.

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

2 комментария

  1. Alexei Minaev

    Вот это круто! А помимо калькулятора еще чему-нибудь учат? Я помню как давно-давно, когда учился в школе и только начал изучать программирование, то одной из поделок был примитивный графический редактор под MS-DOS.

    • Саша Бизиков

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

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

Написать комментарий

Ещё заметки

2019 — год тяжёлый и насыщенный

2019 год оказался насыщенным на события и самым тяжёлым. В заметке подвожу итоги года.

Лайфлист дизайнера презентаций

За последние два года я сверстал 91 презентацию. Все они сделаны в рамках ФанБокса и по понятным причинам показать их не могу. Зато могу поделиться списком материалов, которые стоит изучить, чтобы научиться делать презентации.

2018 — год руководства, дизайна презентаций и личных хобби

В 2018 году стал руководителем команды дизайнеров, занялся дизайном презентаций, пленочной фотографией, велопутешествиями и впервые увидел море.

Точка контакта: презентация

Занялся изучанием дизайна презентаций. Хочу разобраться в том, как передавать смысл в красивой форме. Для начала решил прочитать книгу «Точка контакта: презентация».

Сплав на байдарках по Селигеру

В июле отправился в сплав на байдарках по Селигеру.

Иконка для канала Федора Борщева

Сделал иконку для канала Федора Борщева. Пообщались, в итоге убедил его изменить не только иконку, но и название канала.

Иконка для канала Сергея Капличного

Сделал иконку для канала Сергея Капличного. Раньше канал так и назывался, но Сергей решил развить его в небольшое СМИ с интересными форматами и назвал его «РАЗВИВЕЙШН».

2017 — год практики в дизайне

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

Иконка для канала «Инструменты редактора»

Сделал иконку для канала «Инструменты редактора», который ведет Саша Марфицин. В нём он рассказывает о приложениях и сервисах, которые помогают в работе над текстом.

Иконка для канала «UX Notes»

Сделал иконку для канала «UX Notes», который ведёт Антон Григорьев. Антон делится ссылками на материалы для дизайнеров и проектировщиков.

Иконка для канала Родиона Скрябина

Сделал иконку для канала Родиона Скрябина, где он пишет про контент-маркетинг, медиа, управление и контент.

Иконка канала МИФ в Телеграме

Однажды ребята из «Манн, Иванов и Фербер» обновили иконку в своём телеграм-канале и она мне не понравилась. В иконке была надпись «Издательство МИФ», которую сложно прочитать из-за небольшого размера. Сделал свой вариант иконки и предложил им ей воспользоваться.

Тезисы о науке касания

На картинке, как вы уже догадались, зона нажатий. До левого верхнего угла сложнее всего дотянуться. Стив Хубер говорит, что эта картинка больше не работает. Держат ли люди свои телефоны двумя руками? Нет. Люди по-разному обращаются со своими мобильными, часто меняют их положение в руке. Это не должно удивлять, потому что из исследований различных контекстов использования

Какой шрифт используется в навигации московского метро?

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

Тайпетербург, 2017

5 и 6 августа я был в Санкт-Петербурге на конференции шрифтового дизайна Тайпетербург. В этой заметке поделюсь впечатлениями и выводами.

Как поставить обучение на поток при небольшом количестве времени

Отвечаю на вопрос читательницы о том, как у меня устроен процесс обучения.

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

Смонтировал видео с форума «Дизайн-просмотр», который прошёл 29 и 30 апреля в Москве.

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

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

Настройка шаблонов экспорта в Sketch

Раньше нарезанную графику для андроида сохранял с помощью специального плагина для Скетча. Даже хотел написать свой, чтобы сделать процесс ещё проще. Начиная с 42 версии, у Скетча появилась возможность задавать шаблоны экспорта. С их помощью можно экспортировать иконки в нужных разрешениях без использования сторонних плагинов. Шаблоны находятся в Sketch → Preferences → Presets: Добавил четыре шаблона: Экраны для айфона рисуем в

План

Третья часть из серии заметок про составление плана развития на год. Описываю как составить план развития дизайнера.

Инструмент

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

Цель

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

Модульные системы в графическом дизайне

Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Первые 90 дней в компании

С 5 декабря работаю младшим дизайнером в ФанБоксе. Пришло время составить список для развития навыков в рамках компании, разобраться во внутренних процессах и пройти испытательный период. Для этого посмотрел пару лекций и составил конспект.

Советы Сергея Чикина

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

Тестовое задание для RedMadRobot

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

Культура дизайна

Прочитал книгу Влада Головача — «Культура дизайна». В заметке делаюсь цитатами с интерсными идеями о дизайне.

Сайт для Сергея Сичкар

Задизайнил и сверстал блог для Сергея Сичкара. В заметке описываю процесс работы.

Кристал — просмотр дизайна на Андроиде

Нашёл для Андроида приложение, которое позволяет просматривать макеты из Скетча.

Концепт главной страницы сервиса Туту.ру

Выполнил тестовое задание для Туту.ру. В заметке расскажу о задаче, что сделал для её решения и покажу результат.

Мобилизация, итог обучения

10 августа презентовал проект организаторам Школы. В начале недели стали известны результаты.

Конспект: Дизайн + 1

Посмотрел все части «Дизайн + 1». Половину лекции Людвиг рассказывает, как стать хорошим дизайнером, вторую половину отвечает на вопросы. Упорядочил информацию и составил конспект.

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс. Главный вопрос, который задал себе: зачем это делать? Точно необходимо? Бизиков.ру — личный блог, куда пишу заметки о прочитанных книгах, советы по разработке и наблюдения. Стараюсь постоянно развиваться, и сейчас самое время завести главную страницу, которая сможет рассказать обо мне посетителю: что умею делать и как со мной

Школа мобильного дизайна: процесс выполнения тестового задания

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

Поэтому решил выполнить тестовое задание и в заметке описал процесс выполнения задания.

Конспект курса «Школа дизайна Яндекса 2015»

Закончился смотреть курс лекций школы дизайна Яндекса. В этой заметке будет конспект основных идей, а в конце — впечатления от курса.

Процесс создания фавикона

Блог существует с 2009 года. За это время он успел побывать обычной ХТМЛ-страницей, блогом на генераторе статических сайтов и сейчас — на системе управления сайтами Вордпрес.

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

Правила работы с клиентом

Составил конспект по семинару Андрея Дьякова о правилах общения с клиентами.

Правильный перенос сайта Вордпрес на новый домен

Рассказываю как правильно перенести сайт на WordPress на новый домен с помощью Search Replace DB.

Лайфлист дизайнера, первый год

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

Перенос записей в WordPress

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Велосезон, 2015

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

Двухфакторная аутентификация в WordPress

Если у вас есть сайт или блог на WordPress, то его можно обезопасить от взлома. Один из таких способов повышения безопасности сайта — настройка двухфакторной аутентификации.

Что выбрать: Jekyll или WordPress?

Целый год мой блог работал на Jekyll и размещался на GitHub. Месяц назад вернулся обратно к WordPress и в заметке расскажу почему.

Диплом

Привет. Я тут диплом получил год назад. Руки не доходили написать об этом заметку.

IBM Process Designer 8.5: чтение и запись данных в Coach View

В Coach View среды IBM Process Designer 8.5 взаимодействие с переменными происходит через JavaScript, который разделён на блоки. Есть основной блок и блоки, код в которых выполняется по соответствующему действию: В данной заметке опишу работу с входящим бизнес объектом (далее БО) и входящими параметрами. Подключение происходит во вкладке «Переменные», в которых можно указать только один

Дизайн привычных вещей

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

Показать скрытые файлы в Mac OS X

Системные файлы в Mac OS X скрыты от пользователей в целях безопасности. Это правильно, но иногда бывают ситуации, когда система принимает пользовательские файлы за системные и тоже скрывает их. Например, файл .htaccess, необходимый для настройки локального сервера, будет скрыт. Для того, чтобы показать системные файлы, необходимо выполнить в Терминале команду: defaults write com.apple.finder AppleShowAllFiles -bool

Дизайн для реального мира

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

Как перевести тему WordPress на русский язык

В большинстве тем для WordPress присутствует папка languages, которая позволяет перевести на необходимый язык весь её интерфейс. Перевод заключается в редактировании .po-файла. В заметке рассказываю как перевести тему WordPress на русский язык.

Джони Айв — легендарный дизайнер Apple

Советую к прочтению всем, кто интересуется историей великих компаний и историей Apple в частности.

Оптимизация сайта: включаем gzip-сжатие

У Google есть хороший сервис: PageSpeed Insights, который подскажет, что необходимо оптимизировать у вас на сайте. Одним из советов является включение gzip сжатия на хостинге (или сервере), где размещается ваш сайт. Описывать, зачем нужно ускорять загрузку своего сайта, думаю, нет необходимости. Для включения gzip сжатия необходимо иметь работающий сайт на php и хостинг или сервер,

Краткая история числа Пи

В заметке приводится краткая версия истории числа Пи, в ней вы увидите становление науки на земле на примере вычисления трансцендентной константы.

Меняем фон верхней панели браузера

С выходом Android 5.0 мобильный браузер Chrome начал поддерживать метатег theme-color. Для примера сделаем верхнюю панель красной: <meta name=»theme-color» content=»red»> Мобильный браузер Firefox в Firefox OS, начиная с версии 2.1, тоже поддерживает этот метатег. С выходом альфа-версии Яндекс.Браузера появились новые возможности для манипулирования внешним видом браузера. Можно задавать свои стили для верхней и нижней панелей браузера

Создание сферической панорамы, с помощью приложения «360 Panorama»

Рассказываю как делаю сферические фотографии с помощью приложения 360 Panorama.

Кувандык, 2014

Сегодня расскажу немного про свою любимую долину счастья — Кувандык. Говоря «долина счастья», я не преувеличиваю. С башкирского Кувандык именно так и переводится.

Страница в Sharepoint 2013 c областями для веб-частей

Мне тут по работе довелось верстать под Sharepoint 2013. Многие вещи оказались для меня далеко не тривиальными. Поэтому свой опыт хочу задокументировать в виде статьи, где опишу процесс создания .aspx-страницы с зонами для вставки веб-частей.

Дизайн – это работа

Прочитал «Дизайн — это работа» и делаюсь интересными мыслями и цитатами из книги.

Разблокировка компьютера стуком по айфону, с помощью приложения Кнук

Купил приложение в App Store за 129 рублей. Потом скачал с официального сайта Knock Software программу для мака и установил ее. Процесс настройки достаточно простой, поэтому описывать не буду. После запуска в панели задач появилась иконка приложения Knock, по клику на которую доступно немного опций: Приложение для айфона недалеко ушло от своего собрата — оно тоже

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin.

Система сеток с использованием LESS

В этой заметке пойдет речь о примере использования LESS с целью упрощения верстки проектов.

Полезные ресурсы по Sharepoint

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

Примеры персональных сайтов для вдохновения

Решил время от времени выкладывать подборки интересных сайтов для вдохновения. Для первого раза составил список красивых и интересных персональных сайтов и блогов. Приятного аппетита!

2013 год

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

Работаем с куками через JavaScript

Рассказываю как записывать и считывать значения из куки.

Что такое LESS и как его использовать

Коротко рассказываю о том, что такое LESS и как его использовать.

Бесплатный хостинг на Гитхаб

Тема давно не новая, но все все равно не могу обойти стороной такую замечательную функцию GitHub.com, как генератор статических страниц. Суть заключается в том, что создавая репозиторий на GitHub, можно разместить исходники статического сайта и показывать их как сайт. Эта функция будет полезна для тех, кому нужно где то разместить простенький сайт или сайт-визитку и

2012 год

Вот мне и 22.

Перенос Вордпрес на новый домен

Описываю как правильно выполнить перенос сайта на WordPress.

Установка и настройка Git

Описываю по шагам как установить Git к себе на компьютер.

Отключить топик-ссылки и фотосеты в LiveStreet

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

Настройка виртуального сервера для работы с LiveStreet

Мне необходимо было перейти на выделенный сервер, где будет работать сайт на LiveStreet. Настраивал сервер впервые, узнал много нового. В заметке опишу основные этапы настройки.

Настройка файла .htaccess после установки LiveStreet

Решение ошибки когда главная страница работает, а при переходе на любую другую — получаю 404 ошибку.

2011 год

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

2010 год

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

Панель пуск в Windows 7

Сама панель пуск меня не очень удивила, так как у меня на Windows XP SP2 Zver стояла тома оформления Висты, так что я уже привык к этому.

Дизайн приложения Paint в Windows 7

Paint в Семерке значительно отличается от Paint’а в обычной XP. Значительные изменения произошли в дизайн стороне. Он стал намного красивее! Полее похожим на Офис 2007.