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

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

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

Это интересно, но только в виде статьи c множеством скриншотов. Скриншоты можно долго сидеть и разглядывать, искать интересные идеи. А слайды показываются на большом полотне и быстро листаются. Сложно рассмотреть что-то интересное.

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

Круглый столФилипп, Стас и Женя отвечают на вопросы

Зачем поехал

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

Про шрифты знаю мало, поэтому решил съездить на Тайпетербург. Поставил перед собой простую задачу: узнать о шрифтах что-то новое, что можно будет в дальнейшем самостоятельно изучить.

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

Что понравилось

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

Одним ухом слушал докладчика, а вторым переводчика.

Устройство для синхронного перевода

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

Онлайн-трансляция и записи в открытом доступе. Для тех, кто не смог лично приехать на фестиваль, была организована онлайн-трансляция. Видео докладов с двух дней конференции с синхронным переводом доступны для просмотра: первый день и второй.

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

Что узнал

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

Евгений Юкевич рассказывает про шрифты Адриана Фрутигера

Вариативные шрифты. Интересная технология в мире шрифтового дизайна. Шрифт может подстраиваться под окружающую обстановку так, как захочет дизайнер. Делать это можно с помощью Plumin.js. Посмотрите выступление от Батисты Генона, чтобы вдохновиться вариативными шрифтами.

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

Какая разница каким шрифтом это донести? Буквы, они и в Африке буквы. Но нет, это не так. Каждый шрифт имеет свою уникальную черту. Главное – найти время и выбрать тот шрифт, который подходит тебе и твоей задаче.

В следующих своих проектах постараюсь внимательнее отнестись к выбору используемых шрифтов.

Σ

Конференция получилась отличной, спасибо Сергею Рассказову за организацию и всем, кто помогал ему. Санкт-Петербург можно считать столицей шрифтового дизайна России.

Что дальше?

  1. Разобраться в истории дизайна. Записался на курс «История дизайна» в Открытом образовании, начало 11 сентября
  2. Попробовать вариативные шрифты. Разобраться с Plumin.js, поиграть со шрифтами
  3. Прочитать «О шрифте» от Эрика Шпикермана и «О шрифте» от Владимира Фаворского

°°°

Огромное спасибо ФанБоксу за то, что помогли с поездкой на Тайпетербург и отдельное спасибо Альберту Алиеву и Кириллу Михальченко!

Тайпетербург за три минуты

Подготовил видео с шрифтового фестиваля «Тайпетербург», который прошёл 5 и 6 августа в Санкт-Петербурге.

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

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

Успехов!

Эволюция дизайнера, Андрей Зубрилов

Записал на видео доклад с Дизайн-просмотра про развитие дизайнера.

Андрей Зубрилов — арт-директор и основатель 365 detox. Дизайном начал заниматься в 1998 году. Порефлексировал, разбил свой профессиональный опыт на этапы и поделился советами: