Содержание
Креативный код - это весело, но сложно взломать. Если вы посмотрите на сумасшедший эксперимент WebGL или сайт со сложными переходами CSS, легко почувствовать, что только джедай-программист может совершить такие инженерные подвиги.
Истина в том, что техническая подготовка имеет большое значение, но вам не нужно знать все обо всем, чтобы достичь чего-то прекрасного. Вам просто нужна методика.
Я построил свою компанию на этой практике. Произвольное находится на пересечении искусства, дизайна и технологий. Мне нравится использовать код, чтобы быть выразительным и артистичным, но я также люблю помогать людям решать проблемы. Обычно это означает изобретение новых парадигм пользовательского интерфейса, использование движения и переходов как способа создания привлекательного контента и работу в тесном сотрудничестве с единомышленниками, чтобы раздвинуть границы.
Но меня также не интересуют технологии ради технологий - ничто не заставляет меня чувствовать себя хуже, чем очень много работать над каким-то сумасшедшим проектом WebGL только для того, чтобы не достичь основных целей пользователя. Я считаю, что существует баланс между прагматическим и художественным: этот творческий код может быть больше, чем искусство и эксперименты, и этот продукт может быть больше, чем последняя парадигма дизайна, которую придумала крупная технологическая компания. Я решил продемонстрировать все это, создав уникальный, постоянно меняющийся логотип.
Конечно, это означало вкладывать деньги туда, где я говорю. В итоге у меня появился эффектный логотип, которым я очень горжусь похвастаться, и еще более горжусь тем, что расскажу вам, как он был создан.
Внутренняя работа
Логотип заключается в том, что это не просто один холст HTML, а на самом деле несколько холстов, каждое из которых выполняет определенную работу:
- Нижний колонтитул, который нарисовал треугольник / безумное цветовое решение внизу страницы.
- Логотип, нижний колонтитул которого заключался в маску логотипа.
- Значок, увеличивающий размер логотипа до 16x16.
Чтобы получить оригинальную метку так, как мне было нужно, я начал с векторной версии и запустил ее с помощью инструмента Draw Script, который преобразовал векторные фигуры в JavaScript для использования в теге canvas>.
Цвета являются результатом плагина Flat Surface Shader, созданного Мэтью Вагерфилдом и Тобиасом Шнайдером. В моей технике нет никакого волшебства: я использовал «Просмотр исходного кода» на их сайте, чтобы скопировать и вставить их эффект, а затем начал менять числа, пока не получил то, что мне понравилось.
Плагин Shader не поддерживал динамическое изменение цветов, поэтому я обнаружил другую библиотеку, Tinycolor, и использовал ее в сочетании с Tween, чтобы переключаться между цветами. В качестве дополнительного бонуса я мог менять цвета на все, что хотел! В будущих версиях портфолио логотип будет автоматически меняться, отражая цвета клиентов или проектов.
Формулировки проблемы
Чтение всего этого может показаться вам пугающим - просто перечитать это меня немного пугает! Креативный код для меня - это больше процесс, чем ноу-хау. Я не входил в процесс, зная, что собираюсь использовать любую из этих библиотек или техник - у меня даже не было приблизительного представления о том, что я хочу!
Я работаю в сотрудничестве с множеством блестящих людей, и в этом случае мой друг Джаррод Риддл помогал в создании бренда. Джаррод прислал мне текстовое сообщение с анимированным GIF-изображением идеи, о которой он думал - в основном цветные фигуры, плавающие вокруг и врезающиеся друг в друга.
Оттуда я делал это шаг за шагом. Разбил в голове вот так:
- Мне нужен способ рисовать динамически. Это означает, что мне нужно использовать тег canvas>.
- Точнее, мне нужно нарисовать внутри моего логотипа, как маску. Мне нужно научиться маскировать на холсте.
- Мне нужно придумать, как сделать так, чтобы это выглядело круто.
Другими словами, когда я начинал, у меня было три постановки задачи, и третья была очень-очень далекая. Первые два были намного более достижимыми, поэтому я начал создавать небольшие прототипы, используя Google в качестве руководства. Я попробовал библиотеки, такие как CreateJS и KineticJS, нарисовав вращающийся зеленый квадрат как своего рода «Hello World». Я также пробовал рисовать на холсте без какой-либо библиотеки, просто для сравнения.
Каждый из этих прототипов создавался как небольшая изолированная демонстрация, а не работал над чем-то большим. Мои прототипы предназначались только для ответа на одну постановку задачи; ничего больше.
Как только я справился с первыми двумя проблемами (с большой помощью Google!), Третья постановка проблемы распалась дальше:
- Мне нужно выяснить, как создать множество форм, которые взаимодействуют друг с другом.
- Мне нужно иметь возможность менять цвета фигур.
А потом, когда я начал приближаться к законченному эффекту:
- Было бы здорово увидеть обновление значка? Я думаю...
Если вы хотите увидеть в действии некоторые из созданных мной прототипов, я написал гораздо более подробную техническую статью в Arbitrary Blog.
Инструментальное строительство
Логотип на сайте выглядит довольно четко, но как насчет значков социальных сетей или других маркетинговых материалов? Для этого я создал Генератор произвольных логотипов, инструмент, который позволяет мне создавать анимированные варианты GIF и PNG.
Самое приятное в генераторе логотипов - это то, что он позволяет мне перемещаться вперед и назад во времени. Эта функция позволяет мне выбрать именно тот кадр, который, по моему мнению, лучше всего подходит для данного момента. Я взял выходной файл GIF и сделал лентикулярные отпечатки с помощью Gifpop! - отличный маленький подарок для клиентов и партнеров. Для обоев и презентаций я создал более крупный вариант - Генератор произвольного фона. Эта версия удаляет логотип и просто фокусируется на эффекте.
Выводы
Я видел множество программистов и дизайнеров, отчаявшихся из-за того, что они не чувствовали себя достаточно хорошими - причина, по которой они никогда не будут делать то, что делает другой человек, заключается в том, что они каким-то образом «лучше» или более осведомлены в своих навыках. В глубине души мы знаем, что это неправда ... или, по крайней мере, это только часть.
Синтаксис не делает хорошего разработчика - делает процесс. Один из приемов состоит в том, чтобы запомнить, что в первую очередь такого крутого в Интернете, - это пересечение дизайна и интерактивности.
Сотрудничайте с другими. Разбейте проблему на вещи, которые вам нужно изучить. Постройте миллион маленьких прототипов. Создавайте вещи с какой-то душой. Каждый раз, когда вы чувствуете страх перед техникой или технологией, найдите время, чтобы научиться чему-то самому. Худшее, что случается, - это то, что вы учитесь и растете.
Слова: Джейми Косой
Джейми Косой - основатель @ArbitraryCo и бывший директор по технологиям в Big Spaceship.
