Задаволены
Крэатыўны код - гэта весела, але пранікнуць у яго складана. Калі вы паглядзіце на шалёны эксперымент WebGL альбо на сайт са складанымі пераходамі CSS, лёгка адчуць, што толькі кодзір-джэдай можа зрабіць такія подзвігі інжынернага бляску.
Ёсць праўда, што, дасведчаныя ў тэхнічным плане, гэта вельмі далёка, але вам не трэба ведаць усё пра ўсё, каб зрабіць нешта прыгожае. Трэба проста мець метадалогію.
Я стварыў сваю кампанію на гэтай практыцы. Адвольны знаходзіцца на стыку мастацтва, дызайну і тэхналогій. Я люблю выкарыстоўваць код, каб быць выразным і мастацкім, але я таксама люблю дапамагаць людзям вырашаць праблемы. Гэта звычайна азначае вынаходніцтва новых парадыгм карыстацкага інтэрфейсу, выкарыстанне руху і пераходаў як спосаб стварыць прывабны кантэнт і працаваць у цесным супрацоўніцтве з аднадумцамі, каб пераадолець межы.
Але мяне таксама не цікавяць тэхналогіі дзеля тэхналогіі - нішто не прымушае мяне адчуваць сябе горш, чым па-сапраўднаму працаваць над нейкім шалёным праектам WebGL, каб толькі не выканаць асноўныя мэты карыстальнікаў. Я лічу, што існуе баланс паміж прагматычным і мастацкім: гэты творчы код можа быць не толькі мастацтвам і эксперыментамі, а гэты прадукт - чымсьці найноўшай парадыгмай дызайну, якую прыдумала буйная тэхналагічная кампанія. Я паспрабаваў прадэманстраваць усё гэта, стварыўшы унікальны лагатып, які пастаянна змяняецца.
Зразумела, гэта азначала пакласці грошы там, дзе ёсць мой рот. У рэшце рэшт я атрымаў драматычны лагатып, якім я вельмі ганаруся, і ўсё яшчэ ганарлівей расказаць вам, як ён быў зроблены.
Унутраная праца
Лагатып заключаецца ў тым, што гэта не проста адно палатно HTML, а на самай справе некалькі палотнаў, кожнае з якіх выконвае пэўную працу:
- Калонтытул, які намаляваў трыкутнік / каляровую вар'яцтва ўнізе старонкі.
- Лагатып, які намаляваў ніжні калантытул ўнутры маскі лагатыпа.
- Фавікон, які паменшыў лагатып да 16x16.
Каб атрымаць арыгінальную адзнаку патрэбным спосабам, я пачаў з вектарнай версіі і правёў яе праз інструмент Draw Script, які пераўтварыў вектарныя фігуры ў JavaScript для выкарыстання ў тэгу canvas>.
Колеры - вынік убудовы пад назвай Flat Surface Shader, зробленага Мэцью Вагерфілдам і Тобіасам Шнайдэрам. Тут няма магіі ў маёй тэхніцы: я выкарыстаў "View Source" на іх сайце для капіравання і ўстаўкі іх эфекту, а потым пачаў мяняць лічбы, пакуль не атрымаў нешта, што спадабалася.
Убудова Shader не падтрымлівае дынамічнае змяненне колераў, таму я выявіў іншую бібліятэку Tinycolor і выкарыстаў яе ў спалучэнні з Tween для перамяшчэння паміж колерамі. У якасці дадатковага бонуса я мог бы змяніць колер на любы, які хацеў! У наступных версіях партфеля лагатып будзе аўтаматычна мяняцца з улікам колеру кліентаў або праектаў.
Пастаноўкі праблем
Чытанне ўсяго гэтага можа падацца вам страшным - проста перачытванне самога мяне трохі палохае! Для мяне творчы код - гэта больш працэс, чым ноу-хау. Я не ішоў у працэс, ведаючы, што буду выкарыстоўваць якую-небудзь з гэтых бібліятэк альбо метадаў - я нават не меў прыблізнага ўяўлення пра тое, што хацеў!
Я працую ў супрацоўніцтве з мноствам бліскучых людзей, і ў гэтым выпадку мой сябар Джарод Рэдл дапамагаў у брэндынгу. Джарад прыслаў мне тэкставае паведамленне з аніміраваным GIF-ідэяй, над якой ён думаў - у асноўным каляровыя фігуры плавалі вакол і ўрэзаліся адна ў адну.
Адтуль я рабіў крок за крокам. Я разбіў яго ў галаве як такі:
- Мне патрэбны спосаб маляваць рэчы дынамічна. Гэта азначае, што мне трэба выкарыстоўваць палатно> тэг.
- Дакладней, мне трэба намаляваць унутры майго лагатыпа, як маску. Мне трэба навучыцца маскіравацца на палатне.
- Мне трэба разабрацца, як зрабіць так, каб гэта выглядала крута.
Іншымі словамі, калі я пачаў, у мяне было тры сцвярджэнні праблемы, а трэцяе было далёка-далёка. Першыя два былі значна больш дасягальныя, таму я пачаў невялікія прататыпы, выкарыстоўваючы Google у якасці кіраўніцтва. Я спрабаваў такія бібліятэкі, як CreateJS і KineticJS, малюючы зялёны квадрат, які круціцца, як "Прывітанне, свет". Я таксама паспрабаваў маляваць на палатне без якой-небудзь бібліятэкі толькі для параўнання.
Кожны з гэтых прататыпаў быў створаны як невялікая, ізаляваная дэманстрацыя, а не праца над вялікім. Мае прататыпы прызначаліся толькі для адказу на адно пастаноўку праблемы; больш нічога.
Пасля таго, як я прайшоў першыя дзве праблемы (з вялікай дапамогай Google!), Трэцяе сцвярджэнне праблемы пайшло далей:
- Мне трэба зразумець, як мець мноства фігур, якія рэагуюць адна на адну.
- Мне трэба мець магчымасць мяняць колеры фігур.
А потым, калі я пачаў набліжацца да гатовага эфекту:
- Ці не было б крута бачыць абнаўленне значка? Цікава ...
Калі вы хочаце ўбачыць некаторыя прататыпы, якія я зрабіў, я напісаў значна больш падрабязную тэхнічную інфармацыю ў адвольным блогу.
Інструментальнае будаўніцтва
Лагатып на сайце выглядае даволі рэзка, але як наконт абразкоў у сацыяльных сетках альбо іншых маркетынгавых матэрыялаў? Для гэтага я стварыў адвольны генератар лагатыпаў, інструмент, які дазваляе мне ствараць аніміраваныя варыяцыі GIF і PNG.
Самае прыемнае ў генератары лагатыпаў - гэта тое, што ён дазваляе мне скрабаць наперад і назад. Гэтая функцыя дазваляе мне выбраць менавіта той кадр, які, на маю думку, лепш падыходзіць для дадзенага моманту. Я ўзяў выходны файл GIF і зрабіў лінзавыя адбіткі з дапамогай Gifpop! - выдатны маленькі падарунак для кліентаў і партнёраў. Для шпалер і прэзентацый я стварыў большы варыянт - "Генератар адвольнага фону". Гэтая версія выдаляе лагатып і проста факусуюць на эфекце.
Высновы
Я бачыў шмат праграмшчыкаў і дызайнераў, якія ўпадаюць у адчай з-за таго, што адчуваюць сябе недастаткова добра - таму, што яны ніколі не зробяць тое, што робіць тое, што робіць хтосьці іншы, гэта тое, што яны неяк "лепшыя" альбо больш дасведчаныя ў гэтым навыку. У глыбіні душы мы ведаем, што гэта няпраўда ... ці, па меншай меры, гэта толькі частка гэтага.
Сінтаксіс не робіць выдатнага распрацоўшчыка - гэта робіць працэс. Адзін фокус - запомніць, што ў Інтэрнэце так прыемна - перакрыжаванне дызайну і інтэрактыву.
Супрацоўнічаць з іншымі. Разбіце праблему на рэчы, якія вам трэба даведацца. Стварыце мільён маленькіх прататыпаў. Рабіце рэчы з душой. Кожны раз, калі вы адчуваеце страх перад тэхнікай ці тэхналогіяй, знайдзіце час, каб падскочыць і навучыцца. Горшае, што здараецца, - гэта тое, што ты вучышся і расцеш.
Словы: Джэймі Косой
Джэймі Косой - заснавальнік @ArbitraryCo і былы дырэктар па тэхналогіях у Big Spaceship.
