Введение

“Сейчас мы находимся в процессе перехода от объектно-ориентированной культуры к системно-ориентированной. В этой культуре изменения обусловлены не вещами, а процессом того, как они были сделаны ”

Джек Бернхэм (1968), Системная эстетика

Если бы я попросил вас определить роль графического дизайнера, какой бы она была? Ответы на этот вопрос могут варьироваться в широких пределах, но мое определение будет примерно таким: Графический дизайнер - это тот, кто передает содержание, контент, в форме и цвете. Эта работа может принимать различные формы, но до недавнего времени она в основном состояла из печатной продукции в виде плакатов, визиток, обложек книг и т. д.

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

Для области, основанной на изобразительном искусстве, это трудный переход. Многие школы графического дизайна, обучая студентов, основываются на философии водопада, где дизайнеры воспринимаются как генераторы идей, которые воплощать должны другие. Конечно это проще, чем осваивать совершенно новый набор процессов. Однако основная проблема такого подхода в том, что статические инструменты дизайна, такие как Illustrator или Sketch, не способны создавать прототипы цифровых систем. Даже в веб-дизайне, где метафора страницы все еще преобладает, кажется, что дизайн ограничивается только стилями страницы. Разве google.com является хорошим сайтом из-за внешнего вида поля поиска? Традиции изобразительного искусства - великая вещь, и эта книга опирается на эти традиции. Тем не менее, существует вековая связь между дизайном и новыми технологическими достижениями, и если графические дизайнеры не станут свободно владеть этой новой цифровой реальностью, они станут неактуальными. Сегодня мы можем писать код, который создает красивый дизайн, и дизайнеру завтрашнего дня придется понять, как использовать эти возможности.

Эта книга - результат простого вопроса: "Что произойдет, если составляя учебную программу графического дизайна, в качестве инструмента дизайна мы будем использовать язык программирования?". Есть несколько причин важности использования такой концепции. Во-первых, дизайнеры уже используют системы в своей работе. Мы используем сетки в наших макетах для выравнивания, цветовые круги для создания гармоничных сочетаний цветов, определяя нужное расстояние между цветами. История показала, что система может помочь победить страх чистого листа, и это сильная предпосылка к тому, чтобы реализовать эти идеи в программном виде. Во-вторых, код позволяет дизайнерам делать то, чего раньше они не могли. Варианты дизайна могут быть проверены намного быстрее на этапе создания прототипа, а рандомизация может использоваться для выявления решений, которые дизайнер никогда бы не создал карандашом. В-третьих, это позволяет дизайнерам создавать динамические системы, которые могут менять свой дизайн в зависимости от времени, места или типа использования. «Перекидывать» дизайн через «стену», на этап производства – плохое наследие печатных страниц, и сегодня нет никаких причин придерживаться таких процессов дизайна, результатом которых обязательно должно стать рождение продукта.

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

Для всех примеров книги я решил использовать JavaScript-библиотеку P5.js. Она предлагает отличные возможности для начинающих, но при этом является достаточно мощной и для опытных пользователей. Я знаю, что невозможно выбрать один язык программирования, который подойдет для всех, и читателям, вероятно, нужно будет перенести идеи из этой книги на другие языки и структуры в зависимости от конкретных проектов. Поэтому я попытался написать текст как можно более общим. Также важно отметить, что эта книга не о веб-дизайне. Хотя примеры могут быть встроены в любую веб-страницу, предлагаемые методы могут применяться как к цифровым, так и к печатным проектам. За эти годы я видел, как мои ученики создавали разнообразные проекты в области скульптуры, живописи, моды, фотографии, игрового дизайна, веб-дизайна и печатной продукции.

Книга написана для читателей, уже обладающих начальными знаниями программирования на JavaScript, поэтому объяснению таких понятий, как переменные, функции и циклы будет уделено мало времени. Для той части читателей, которые не обладают такими знаниями я очень рекомендую канал Coding Rainbow Даниэля Шиффмана, где Дэн объясняет эти концепции гораздо лучше, чем это смог бы я. Эти видео также познакомят вас с основами программирования в P5.js.

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

Я решил опубликовать эту книгу бесплатно в Интернете без издателя. Основной причиной этого является свобода. Это позволяет мне писать такую книгу, которую я бы сам хотел прочитать. Это отражено в содержании книги,  состоящем из множества коротких глав, которые легче читать в Интернете и которые учителя могут легко использовать при обучении в классе (что совершенно законно по лицензии Creative Commons). Я буду писать эти главы непоследовательно, работая над теми темами, которые мне кажутся наиболее интересными в данный момент. Конкретного срока выхода готовой книги не существует, хотя я и стремлюсь к этому как в полноценной работе. Исходный код книги доступен на GitHub, и я призываю всех читателей отправлять вопросы или запрашивать изменения. Чтобы быть в курсе развития книги, вы можете подписаться на рассылку.

Я хотел бы поблагодарить группу людей, без которых эта книга никогда бы не существовала. Когда в 2009 году я переехал в Нью-Йорк, чтобы учиться в Нью-Йоркском университете по программе Interactive Telecommunications, у меня было только смутное представление о том, хочу ли я работать на стыке искусства и кода. Два года в ITP полностью изменили мое мышление Flash-разработчика, который в основном создавал рекламные баннеры. Я хотел бы поблагодарить Дэна О'Салливана за его огромную поддержку этого проекта, который начался как учебный проект ITP и в настоящее время превращается в книгу, пока я там учусь. Эта книга не существовала бы без помощи и наставничества Дэниела Шиффмана, чья работа вдохновила тысячи студентов на изучение кода. Я хочу поблагодарить Стюарта Смита, преподававшего класс по визуализиации данных, на котором и зародились первые идеи для этой книги. Я благодарю всех преподавателей и выпускников ITP, которые помогли сформулировать эти идеи, включая Патрика Хеврона, Грега Боренштейна, Клея Ширки, Дэнни Розина, Тома Айго, Дэвида Нолена, Гейба Барсиа-Коломбо и Джорджа Агудова. Особая благодарность Лорен МакКарти, автору P5.js, и Кейси Реасу и Бену Фраю за их работу над Processing. Я хочу поблагодарить Чендлера Абрахама за его подробные правки в главе о цветовых пространствах, Клэр Кирни-Вольпе за ответы на мои многочисленные вопросы о доступности и Марию Маркварда Дженсена за ее неустанные усилия по редактированию. Давайте начнем!