Ілля Кульбачний – український творчий директор та засновник Cosmos Studio, де команда дизайнерів і розробників створює сайти. Разом вони отримали Site Of The Day, 3 Honorable Mention & Mobile Excellence на Awwwards та Site Of The Day на CSS Winner, а також Special Kudos, UI/UX & Innovation Awards на CSS Design Awards. Telegraf.Design поговорив із дизайнером і попросив його розповісти про свої п’ять проєктів.
Шлях у дизайн
Колись я працював копірайтером-SMMником у одній великій діджитал-агенції. Там у свої 17 років я вчився писати пости для відомих брендів. Але замість вивчення аналітики та інструментів із просування у соцмережах, я спілкувався та тусив із дизайнерами.
Приблизно тоді стався Майдан, масові скорочення та фріланс. Я почав робити презентації для замовників із різних бірж фрілансу, вивчав графічний дизайн, вів соцмережі декількох компаній та розроблював логотипи за 300 гривень.
Одного разу я побачив у ВК Данила Фімушкіна, який проводив безкоштовні вебінари зі створення сайтів на Adobe Muse. Основною фішкою було те, що це було щось на кшталт конструктора (жахливого конструктора), де можна було зробити сайт без програміста!
Я почав писати в усі можливі групи та компанії, що зроблю лендінг за 200 доларів упродовж п’ятьох днів. Хтось відповідав, але багато ігнорували (чесно кажучи, зараз я би теж проігнорував таке повідомлення). Роботи у футері потрібно було якось підписувати, тож я придумав назву «Студія Космос».
Перший власний сайт – 2014 рік
Згодом я почав відмовлятися від нерелевантних замовлень на дизайн логотипів, презентацій та банерів і сконцентрувався на веб-дизайні та розробці. Я вирішив, що краще не розпилюватися й робити щось одне, але добре. Так я вирішив робити тільки сайти.
Я ніде не вчився дизайну, і шкодую про це. Я дивився багато роликів на ютубі, вебінарів, які продавали курси, читав дизайн-літературу та проходив різноманітні безкоштовні онлайн-курси. Шкода, що тоді ще не було Projector – я би зекономив собі кілька років, якби пішов на курс на кшталт Web Design Junior.
Хоча дизайну й не вчився, я пройшов найкрутіший курс у своєму житті – Управління дизайн-студією від Жені Кудрявченко – засновника й директора Vintage Web Production та мого тодішнього кумира.
Створення Cosmos Studio та добір команди
Космос я вирішив створити ще у 15 років – так хотів назвати свій рок-гурт. Але з музикою не склалося, тому, почавши робити сайти у 18, я зробив сайт «Студії Космос» і лінкував ним свої роботи.
Наші візитівки у 2015 році
Відтоді я продовжую створювати Cosmos Studio кожного дня, роблячи свою роботу, розповідаючи про компанію людям, розвиваючи її зсередини та набираючи талановитих людей. Сподіваюся, я ніколи не перестану її створювати або бути до неї причетним.
Людей ми набираємо рідко – тільки тоді, коли є реальна потреба. Ми не намагаємося зростати лише заради росту. Найкраще – «вирощувати» спеціалістів усередині команди. Тоді вони відчувають філософію та цінності компанії, оскільки ми формуємо їх разом. А коли приходить людина «з досвідом», потрібно довго «притиратися» одне до одного та шукати різні способи продуктивно працювати разом.
Улюблений етап у розробці сайту
Думаю, це його реліз у фейсбуці – тоді відбувається те, що я називаю «народне тестування» – люди безкоштовно тестують сайт із різних девайсів і браузерів.
Чоботар з чоботамиЯкось ми зі студентами у Проджекторі проводили заняття «Сайт з куратором», де я розповідав, як би я…
Опубліковано Ilya Kulbachny Понеділок, 9 грудня 2019 р.
Приклад посту у фейсбуці і «народного тестування» під ним
Ти бачиш чесні враження твоїх друзів: колег і професіоналів зі сфери, а також інші думки людей не з діджиталу. Це дає відносно об’єктивне враження про продукт, і ми бачимо, що потрібно змінювати й удосконалювати.
Звісно, найкраще – це визнання сайту міжнародними нагородами. Тоді ти ще раз переконуєшся, що все робиш добре, і ти на своєму місці.
У 2018 році ми розробили сайт для мого друга – Кирила Притули. На той час, у нас вийшов класний проєкт, який розійшовся у Фейсбуці, набрав багато лайків і позитивних відгуків. Я цим дуже пишався.
Я тоді мріяв про Site Of The Day на Awwwards, але тоді ми його не отримали. Проте взяли Honorable Mention, SOTD від CSS Winner, а мене запросили до складу Young Jury. Тоді я зрозумів, куди треба рухатися, і почав йти до своєї мети – Site Of The Day на Awwwards.
Під час розробки дизайну ми довго шукали стиль, концепт, а потім ретельно його опрацьовували. Тут у нас фреймворк GSAP, секвенція на головній сторінці, canvas-анімації та багато чого іншого, що ускладнювало процес розробки. Але воно того варте.
У 2019 році ми розробили сайт для моєї партнерки – Наді Перевізник та її агенції Hope&Partners. У нас був обмежений бюджет, але не було обмежень у стилістиці, ідеях та часі виконання.
Ми тоді довго шукали стиль та концепції. Й урешті-решт знайшли. Як завжди, ми дового його «полірували», тестували та відточували деталі. Зрештою, ми отримали за цей сайт нагороду Mobile Excellence на Awwwards.
Umami Ware – це компанія з Мюнхену (Німеччина), що займається розробкою додатків та програмного забезпечення. Головною метою цього сайту було представити Umami Ware як нову компанію, що займається data science, штучним інтелектом та програмною інженерією – це люди нового покоління. Ми хотіли змусити потенційних клієнтів компанії залишити свій запит за допомогою «Умамі-бота».
Над цим проєктом ми почали працювати влітку 2019 року та розроблювали його декілька місяців. Як і в кожному нашому проєкті, було багато скетчів, напрацювань та сотні артбордів. У один момент я побачив готову дизайн-концепцію, яку запропонувала наша старша дизайнерка Сніжана Лебедюк, й одразу зрозумів – це воно!
Розкадрування десктоп-версії сайту
Особливість цього сайту – його стиль, який відображається у навігації, переходах, скролі розділів та анімації. Наприклад, прелоадер (о боже, скільки ж у нас із цим було проблем!) виглядає інноваційно та захопливо.
Головним викликом була тривала реалізація цього сайту. Він має працювати коректно не тільки на десктопі, але й на інших девайсах та в різних браузерах. Багато часу зайняла оптимізація всього сайту для гугла.
Через незвичну структуру сайту було багато проблем із версткою, адаптивним дизайном для мобільних та планшетів. А також ми запарилися та зробили брейпоінт для надшироких екранів.
Робота з ядром цього сайту тривала декілька місяців, а потім нам довелося проводити оптимізацію, робити додаткові розділи та вдосконалювати багато речей. Із технологій ми використовували на фронтенді TweenMax, PixiJS, jQuery, SmoothScroll та TouchSwipe, а бекенд у нас стандартний – WordPress та Gutenberg.
Після публікації сайту, він отримав Website Of The Day на CSS Design Awards.
Із цим проєктом ми подавалися й на Awwwards та The FWA, але не пройшли. Проте де він тільки не був: і на One Page Love, і на CSS Winner, і на багатьох інших сайтах, про які ми раніше не чули. У мене навіть взяли інтерв’ю Avocode й журнал Communication Arts.
Ми часто співпрацюємо зі замовниками з різних країн. І нещодавно до нас звернувся спеціаліст із Франції – експерт із лідогенерації Джессі Ґроссі. Для нього ми розроблювали сайт, який мав розповісти про послуги, вартість та активність Джессі у професійних колах через публікації подкастів.
Сайт має багато прихованих можливостей, які цікаво знаходити. Наприклад, натиснувши на емоджі мікрофону у другій секції, можна почути привітання від самого Джессі англійською та французькою; а коли наводиш на анімоджі у секції послуг – воно оживає. Цей проєкт ми ще ніде не анонсували, тому можна назвати це презентацією наших останніх напрацювань.
У Projector, де я веду курс із вебдизайну, є майстер-клас, на якому куратор упродовж двох годин створює сайт. Так я швидко створив персональний сайт: на занятті накидав структуру, розташував основну інформацію про себе, показав роботи та компетенції. Було весело: ми жартували, додавали мені смішні брови, а я розповідав, як шукаю ходи, вигадую ідеї та працюю у Figma.
Дизайн мого сайту
У дизайні я найбільше люблю типографіку, тому вирішив, що треба спробувати дещо нове – варіативні шрифти. Вони набирали популярності з 2016 року, але в інтернеті все ж зустрічалися рідко. Я знайшов крутий Grtsk Varible від Black[Foundry].
Коли мій сайт вже був готовий, я вирішив подаватися на Awwwards і CSS Design Awards.
Якось наприкінці робочого дня, я гортав пошту й натрапив на лист від Awwwards. Подумав, що це Honorable Mention/Mobile Excellence і відзначив його як непрочитане. Але зупинився, вчитався і не повірив своїм очам! Вони мене привітали і повідомили, що сайт буде опублікований на головній сторінці 22 грудня 2019 року.
Читайте також: Що дають перемоги на конкурсах Awwwards і CSS Design Awards
Цінність нагород
Для мене особисто нагороди – це підтвердження, що ми робимо нашу справу на високому міжнародному рівні. Також це дозволяє підвищувати ціну та перебирати замовленнями й працювати тільки над тими, що до вподоби.
Нагороди – це наш маркетинг. Із сайтів премій до нас приходить багато теплих лідів. Такі люди вже бачили твою роботу, ціну на твоєму сайті й хочуть за ці гроші отримати щось круте для себе.
У Cosmos Studio є принцип – стрибай вище голови. Ти мусиш зробити кожен наступний проєкт на голову краще, аніж попередній. Це важко, але це дозволяє нам рухатися та зростати як професіоналам.
У нашій сфері є декілька премій:
- Webby Awards – як Оскар в інтернеті. В Україні лише декілька компаній отримали її. Це наша ціль на наступні декілька років.
- The FWA – одна з перших і найстаріших премій із інтерактивного дизайну.
- Red Dot Award – мені здається, в останні роки ця нагорода дещо знецінилася, тому що її дають майже всім. У фейсбуці часто жартують: «Знову накупили собі реддотів».
- Awwwards – наразі найпопулярніша премія з веб-дизайну та розробки.
- CSS Design Awards – популярний конкурент Awwwards.
Є думка, що Awwwards та CSS Design Awards, як Coca-Cola та Pepsi – майже не відрізняються. Якщо отримуєш Сайт Дня на одному майданчику, автоматично відзначать і на іншому. Це правда лише частково. Так, на Awwwards і CSS Design Awards аудиторії перетинаються, світяться однакові сайти, а журі повторюються. І навіть ціна подання практично ідентична: Awwwards – 50 євро, CSS Design Awards – 48 доларів. Сервіси досить схожі, але в моєму випадку це не спрацювало. Я отримав на Awwwards Honorable Mention та Mobile Excellence, а на CSS Design Awards – Innovation, Special Kudos і нагороди за UI/UX.
Викладання
Озираючися назад, мені здається, прихід до викладання стався послідовно. Після перших перемог моє життя почало стрімко змінюватися: з’являлися цікавіші проєкти, запрошення провести лекції, виступи на конференціях тощо. Спочатку я провів одну лекцію у Проджі, потім виступив на конференції в Сумах, а за певний час мене запросили провести воркшоп із вебдизайну в Черкасах. А вже потім Саша Трегуб запропонував мені вести курс вебдизайну у школі Projector.
Фото з воркшопу в Черкасах
Які навички необхідні людині, щоби стати хорошим вебдизайнером?
Найголовнішою навичкою для дизайну інтерфейсів є надивленність. Про те, як тренувати і розвивати надивленніть, я докладно розповідав у блозі для «Дизайн-кабак». На мою думку, найважливішою відмінністю джуніор-дизайнера від мідла або синьйора – це набір бібліотек у голові, які він може використовувати у своїй роботі. Що більше таких дизайн-рішень у людині, то ширший його світогляд і то краще, оперативніше й цікавіше рішення він може запропонувати.
Читайте також: Конспект дизайнера: еволюція в кар’єрі
Надивленність – це важлива навичка, яку кожен дизайнер повинен розвивати в собі, щоби рости й робити класні проєкти. Із розвитку цієї навички є лекція Саші Трегуба, яку я рекомендую всім своїм друзям-дизайнерам – «Метод котелка».
Серед технічних навичок я би виділив такі:
- Типографіка
- Композиція та сітка
- Колористика
- Анімація
- Користувацький досвід (UX)
- 3D-графіка
- Базове знання коду (HTML/CSS/Java Script)
- Копірайтинг
- Емпатія
- Продажі
Якої найстрашнішої помилки може припуститися вебдизайнер?
Я часто жартую, що найстрашніша помилка дизайнера – це надіслати потенційному клієнту бриф у ворді. Так, це гріх, але не такий смертельний, як утрата репутації.
Ніколи в житті не можна залишити замовника незадоволеним вашою роботою або зі враженням, що ви шахрай. Цього не варті ніякі гроші. Репутація – це все, що у вас є. Це найцінніше, чим може володіти дизайнер та будь-яка людина взагалі.
У моїй кар’єрі були різні випадки та кейси. Але я ніколи не «кидав» клієнтів. Були ситуації, коли я повертав гроші посеред проєкту та мав виплачувати кошти колегам із власних збережень, хоча це виняток із правил. Краще зробити проєкт собі в мінус, аніж отримати незадоволеного клієнта.
Ми, дизайнери, на відміну від художників, робимо переважну частину роботи на замовлення клієнта або нашого працедавця. Художники частіше працюють для себе, і якщо їхня творчість резонує з ринком – художник стає комерційно успішним. Це те, що нас відрізняє. Ми без клієнтів не можемо працювати. Тож найстрашніша помилка дизайнера – незадоволений клієнт.
Telegraf.Design працює за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.