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

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

 

100 книг для дизайнера

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

Список составил по рекомендациям Артемия Лебедева, Людвига Быстроновского раз и два, Тимура Бурбаева, Андрея Дьякова и школы Стажёров. Также использовал разделы магазина Студии Лебедева: теория дизайна, типографика, графический дизайнпромышленный дизайн, и подборки с сайта «Манн Иванов и Фербер»: «Лучшие книги для творчества», «13 книг, которые должен прочитать каждый дизайнер».

Если читать по 20 книг в год, то все книги из списка можно прочитать за пять лет.

Книги

  1. ✓ «Моя жизнь, мои достижения», Генри Форд
    МИФМагазинус
  2. ✓ «Стив Джобс», Уолтер Айзексон
    Озон, Магазинус
  3. ✓ «Реворк. Бизнес без предрассудков», Джейсон Фрайд и Дэвид Хайнемайер Хенссон
    МИФ, Магазинус
  4. ✓ «Дизайн для реального мира», Виктор Папанек
    ОзонД. Аронов
  5. ✓ «Дизайн — это работа», Майк Монтейро
    МИФ
  6. ✓ «Культура дизайна», Владислав Головач
    Онлайн
  7. ✓«Законы простоты. Дизайн. Технологии. Бизнес. Жизнь», Джон Маэда
    ОзонМагазинус
  8. ✓ «Джони Айв. Легендарный дизайнер Эпл», Линдер Кани
    МИФ
  9. ✓ «Сначала скажите «НЕТ»», Джим Кемп
    Озон
  10. ✓ «Дизайн привычных вещей», Дональд Норман
    Озон
  11. ✓ «Модульные системы в графическом дизайне», Йозеф Мюллер-Брокман
    Озон, Магазинус
  12. ✓ «Ководство», Артемий Лебедев
    ОнлайнМагазинус
  13. ✓ «Пиши, сокращай», Максим Ильяхов и Людмила Сарычева
    Озон, Альпина
  14. ✓ «Типографика и вёрстка», Артём Горбунов
    Онлайн
  15. «Новая типографика. Руководство для современного дизайнера», Ян Чихольд
    ОзонМагазинус
  16. «О шрифте», Эрик Шпикерманн
    МИФ
  17. «Дизайн: форма и хаос», Пол Ренд
    ОзонМагазинус
  18. «Оргуправленческое мышление: идеология, методология, технология», Георгий Щедровицкий
    ОзонМагазинус
  19. «Цель: процесс непрерывного улучшения», Элия Голдратт и Джефф Кокс
    ОзонМагазинус
  20. «Дилемма инноватора», Клейтон М. Кристенсен
    Озон, Магазинус
  21. «Малый бизнес: от иллюзий к успеху», Майкл Э. Гербер
    Магазинус
  22. «Чему вас не научат в дизайн-школе», Фил Кливер
    ОзонМагазинус
  23. «Как стать дизайнером, не продав душу дьяволу», Адриан Шонесси
    ОзонМагазинус
  24. «Сожги свое портфолио! То, чему не учат в дизайнерских школах», Майкл Джанда
    ОзонМагазинус
  25. «Пинбол-эффект», Джеймс Бёрк
    ОзонМагазинус
  26. «Русская модель управления», Александр Прохоров
    Магазинус
  27. «Облик книги», Ян Чихольд
    ОзонМагазинус
  28. «Типографика», Эмиль Рудер
    Озон
  29. «Интерфейс: новые направления в проектировании компьютерных систем», Джеф Раскин
    Озон
  30. «Философия дизайна», Герман Цапф
    ОзонМагазинус
  31. «Экономист под прикрытием», Тим Харфорд
    Озон
  32. «Антихрупкость», Нассим Николас Талеб
    ОзонМагазинус
  33. «Черный лебедь», Нассим Николас Талеб
    ОзонМагазинус
  34. «Дизайн в культуре XX века 1945–1990», Владимир Аронов
    ОзонМагазинус, Д. Аронов
  35. «Гейзер в голове», Марио Прикен
    ОзонМагазинус
  36. «Мысли о дизайне», Пол Ренд
    ОзонМагазинус
  37. «История дизайна», Шарлотта Филл и Питер Филл
    ОзонМагазинус
  38. «Невидимый дизайнер», Джон Сибрук
    ОзонМагазинус
  39. «Графический дизайн. Базовые концепции», Эллен Луптон
    ОзонМагазинус
  40. «Искусство рассуждать о книгах, которых вы не читали», Пьер Байяр
    ОзонМагазинус
  41. «Почему мы покупаем, или как заставить покупать», Пако Андерхилл
    ОзонМагазинус
  42. «Договориться можно обо всем!», Гэвин Кеннеди
    ОзонМагазинус
  43. «Нет. Лучшая стратегия ведения переговоров», Джим Кэмп
    ОзонМагазинус
  44. «Как завоевывать друзей и оказывать влияние на людей», Дейл Карнеги
    ОзонМагазинус
  45. «Представление информации», Эдвард Тафти
    Онлайн
  46. «Настольная книга газетного дизайнера», Тим Харровер
    Амазон
  47. «Сила привычки. Почему мы живем и работаем именно так, а не иначе», Чарлз Дахигг
    Озон
  48. «Объекты желания», Адриан Форти
    ОзонМагазинус
  49. «Огилви о рекламе», Дэвид Огилви
    Озон
  50. «Профессия — иллюстратор», Натали Ратковски
    Магазинус, МИФ
  51. «Антрополог на Марсе», Оливер Сакс
    ОзонМагазинус
  52. «Мигрень», Оливер Сакс
    ОзонМагазинус
  53. «Найти идею», Генрих Альтшуллер
    Озон, Альпина
  54. «Нога как точка опоры», Оливер Сакс
    Озон
  55. «Человек, который принял жену за шляпу, и другие истории из врачебной практики», Оливер Сакс
    Озон
  56. «Лестница жизни. Десять великих изобретений эволюции», Ник Лэйн
    ОзонМагазинус
  57. «Мозг и душа. Как нервная деятельность формирует наш внутренний мир», Крис Фрит
    ОзонМагазинус
  58. «Микробы хорошие и плохие», Джессика Снайдер Сакс
    ОзонМагазинус
  59. «Пуговицы Наполеона. Семнадцать молекул, которые изменили мир», Пенни Лекутер и Джей Берресон
    ОзонМагазинус
  60. «Мозг рассказывает. Что делает нас людьми», Вилейанур Рамачандран
    ОзонМагазинус
  61. «Карта Птолемея. Записки кинодокументалиста», Герц Франк
    Магазинус
  62. «Думай медленно… Решай быстро», Дэниел Канеман
    ОзонМагазинус
  63. «Невидимая горилла, или история о том, как обманчива наша интуиция», Кристофер Шабри и Даниэл Саймонс
    ОзонМагазинус
  64. «Остаться в живых. Психология поведения в экстремальных ситуациях», Лоуренс Гонсалес
    ОзонМагазинус, МИФ
  65. «100 новых главных принципов дизайна», Сьюзан Уэйншенк
    ОзонМагазинус
  66. «Новые направления в проектировании компьютерных систем», Джеф Раскин
    Озон
  67. «Книга на книжной полке», Генри Петроски
    ОзонМагазинус
  68. «Синтаксис современного русского языка», Нина Валгина
    Озон
  69. «С помощью дизайна», Ральф Каплан
    ОзонМагазинус
  70. «Судите сами. Как отличить хороший дизайн от плохого», Чип Кидд
    ОзонМагазинус
  71. «Вы сможете рисовать через 30 дней», Марк Кистлер
    МИФ, Озон
  72. «Покажи свою работу!», Остин Клеон
    МИФ, Озон
  73. «Воплощение идей», Скотт Белски
    МИФ
  74. «Рисовый штурм и еще 21 способ мыслить нестандартно»
    МИФ, Озон
  75. «Психология влияния», Роберт Чалдини
    Озон, Питер
  76. «Агрессия», Конрад Лоренц
    Озон
  77. «Внутренняя рыба. История человеческого тела с древнейших времен до наших дней», Нил Шубин
    Озон
  78. «Правила мозга. Что стоит знать о мозге вам и вашим детям», Джон Медина
    Магазинус, МИФ
  79. «Вовремя и в рамках бюджета. Управление проектами по методу критической цепи», Лоуренс Лич
    Магазинус, Альпина
  80. «Штрих. Теория письма», Геррит Ноордзей
    МагазинусД. Аронов
  81. «Типографика. Порядок и хаос», Владимир Лаптев
    ОзонМагазинус
  82. Справочник издателя и автора, Аркадий Мильчин и Людмила Чельцова
    ОзонМагазинус
  83. «Универсальные принципы дизайна», Уильям Лидвелл, Критина Холден и Джилл Батлер
    ОзонМагазинус
  84. «Тайные знания коммерческих иллюстраторов», Яна Франк
    Магазинус
  85. «Карандаш. История создания и другие подробности», Генри Петроски
    Магазинус
  86. «Эволюция графических стилей. От викторианской эпохи до нового века», Стивен Хеллер и Сеймур Чваст
    ОзонМагазинус
  87. «Живая типографика», Александра Королькова
    Озон
  88. «Не заставляйте меня думать!», Стив Круг
    Озон
  89. «Дизайн и время. Стили и направления в современном искусстве и архитектуре», Лакшми Бхаскаран
    Озон
  90. «Искусство видеть», Джон Бергер
    Литрес
  91. «Основы стиля в типографике», Роберт Брингхерст
    ОзонД. Аронов
  92. «Искусство цвета», Иоханнес Иттен
    ОзонД. Аронов
  93. «Искусство формы», Иоханнес Иттен
    ОзонД. Аронов
  94. «Искусство как рeмесло», Бруно Мунари
    ОзонД. Аронов
  95. «Фантазия», Бруно Мунари
    ОзонД. Аронов
  96. «Рисуем дерево», Бруно Мунари
    ОзонД. Аронов
  97. «Психбольница в руках пациентов», Алан Купер
    Озон
  98. «Об интерфейсе», Алан Купер
    Озон
  99. «Ружья, микробы и сталь», Джаред Даймонд
    Озон

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

Символом «✓» отмечены книги, которые уже прочитал, а ссылка в названии книги ведёт на мою рецензию.

Σ

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

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

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

Автор Йозеф Мюллер-Брокманн (1914–1996) — графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.


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

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

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

На каждую тему представлены примеры макетов. Так как по размерам книга чуть больше листа А4, иллюстрации большие и подробные.

Текст и иллюстрации в модульной сеткеПримеры страниц с использованием модульной сетки

Дизайнеру на заметку

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

Про сетки

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

Когда выполнял тестовое задание для Туту.ру, то попался в эту ловушку. Перед тем как определиться с элементами на странице, решил, что буду использовать сетку на 4 колонки. Только после этого начал добавлять и выстраивать элементы относительно колонок.

В результате получилась скучная страница с большими отступами между элементами:

Сетка для макета главной страницы Туту.руСетка для макета главной страницы Туту.ру

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

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

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

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

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

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

Про типографику

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

Правильно подобранный кегль шрифта делает текст удобным для чтения. Слишком маленький, как и слишком большой шрифт, читать утомительно. Для комфортного чтения длинного текста, в строке должно быть примерно 7-10 слов.

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

Шрифт Таймс Нью Роман разработан в 1932 году для газеты «Таймс»Шрифт Таймс Нью Роман разработан в 1932 году для газеты «Таймс»

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

Интерлиньяж — это расстояние между строками. К длине строки и выбору расстояния между строками относиться надо внимательно. Они влияют на удобочитаемость текста. Слишком длинная строка или слишком узкое пространство между строками ухудшат восприятие текста.

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

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

Примеры текста, набранные с разным кеглем шрифта и инерлиньяжемПримеры текста, набранные с разным кеглем шрифта и инерлиньяжем

Σ

«Модульные системы в графическом дизайне» — это то, что нужно начинающему дизайнеру. Примеры, которые приведены в книге достаточно просты и понятны для восприятия.

Если коротко, то дизайнеру важно помнить:

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

°°°

Книгу хорошо дополняет интерактивный учебник от бюро Горбунова «Типографика и вёрстка».