Що таке вебдизайн

Вебдизайн — це створення вебсторінок та вебсайтів, проєктування інтерфейсів онлайн-сервісів та додатків. Його основні компоненти: технічна розробка, створення зручної структури вебсторінки, графічне оформлення та верстка сайту.

Хто такий вебдизайнер

Вебдизайнер – людина, що займається створенням стрінок та вебсайтів. Попри поширену думку, дизайнер це не тільки про креатив та візуальну складову. Мало заверстати гарний лендінг, сайт-візитку чи онлайн-магазин. Потрібно розуміти для чого і навіщо цей створюється, яких елементів інтерфейсу він потребує, де саме та чому ці елементи мають розташовуватися.

Спробуємо виділити основні етапи роботи та на їх прикладі розібратися, шо саме входить до обов'язків вебдизайнера.

1. Робота з технічним завданням. До початку роботи над створенням сайту вебдизайнер виділяє ключові моменти, що стануть фундаментом для зовнішнього вигляду майбутньої сторінки. Спочатку треба зрозуміти ціль сайту та його аудиторію, спираючись на ці дані – визначити функціонал та структуру. Для цього вебдизайнер брифує клієнта.

2. Юзабіліті. На цьому етапі вебдизайнер створює загальну модульну сітку та формує майбутню структуру подачі контенту таким чином, щоб спростити користувачеві пошук потрібної інформації. Створює прототип, який обговорюється із замовником. Оскільки внести правки в прототип простіше та швидше, ніж в готовий макет.

3. Дизайн. Той самий етап, який багатьох найбільше приваблює в професії через можливість креативити. Базуючись на інформації зібраній та продуманій на попередніх етапах, вебдизайнер втілює в макеті візуальне бачення майбутнього проєкту. Зокрема продумує наповненість простору, розмір та розташування елементів, їх баланс та пропорційність, кольорову гаму, типографіку. У деяких випадках вебдизайнер відповідає також за наповнення сайту.

4. Верстка. На цьому етапі вебдизайнер ділить графічне зображення сторінки на окремі елементи та трансформує їх у код завдяки HTML і CSS. Це потрібно, аби браузери могли точно відобразити створений сайт. Не всі дизайнери самі верстають сайти, це більше стосується тих, хто працює на фрілансі. Проте базові знання все одно необхідні, щоб правильно заповнити документацію та передати макети на верстку.

Навички необхідні вебдизайнеру

Вимоги до вебдизайнерів, як і до інших професій змінювалися з часом. Спочатку нормально були вміти всього потроху. Якщо говорити грубо, то дизайнер мав вміти базово робити все — від логотипів та банерів до дизайну інтерфейсів. Але в такому випадку дизайнер не міг впоратися із завданнями вищої складності.

Пізніше акцент змістився і став кардинально протилежним — почала цінуватися вузькопрофільність. Кожен з яких ідеально знає конкретно сферу: UI, UX, моушн, графічний дизайн. Але тут виникла інша проблема. Тепер, якщо окрім інтерфейсів потрібен ще й, умовно, моушн, то потрібно звертатися до двох різних дизайнерів.

А що сьогодні? Сьогодні у вебдизайнерах цінується мультипрофільність. Тобто дизайнер має 1-2 основних напрямки, в яких розвивається, але при тому має базові хард-скіли у суміжних сферах, які йому можуть знадобитися.

Тепер поговоримо детальніше про конкретні скіли. Серед хард-скілів варто виділити:

• Вміння працювати в одному з графічних редакторів. Наразі найпопулярнішими є Figma та Sketch.
  
• Робота з типографікою.
  
• Робота з кольорами.
  
• Робота з сітками та розуміння принципів верстки. Про передачу на верстку
  
• Хоча б базове знання HTML/CSS.
  
• Робота з інтернет маркетингом та аналітикою.
  
• Основи копірайтингу.
  
• Базова анімація, ілюстрація, графічний дизайн.
  
  

Якщо ж говорити про софт-скіли, то тут серед основних виділимо:

З ким співпрацює вебдизайнер

Кількість людей, з якими співпрацює вебдизайнер, часто залежить від того, як саме він працює. На фрілансі – це пряме спілкування із замовником. У дизайн-студії, скоріш за все, комунікацією із клієнтом займатиметься проджект-менеджер. І саме він доноситиме побажання замовника до вас.

Якщо ж йдеться про роботу на конкретний продукт, то окрім проджект-менеджера до людей, з якими доведеться тісно співпрацювати ще можуть додатися копірайтери та контент-менеджери.

Куди рости

Вертикальний ріст:

Team Lead. Керівник команди дизайнерів. Окрім власне своїх завдань займається також менеджментом роботі в команді та спілкується із замовником.

Артдиректор.
Head of Design
Chief Design Officer

Горизонтальний ріст:
UX
Product

Де працює

Плюси і мінуси фрилансу, студії та продукту

Де навчатися

У Проджекторі є два базових курси для тих, хто хоче стати вебдизайнером.

Web Design Beginning — для людей абсолютно без досвіду. Упродовж навчання студенти отримують теоретичну та практичну базу: принципи роботи з сітками та типографікою, відправні точки в композиції та динаміці макетів, пошук та адаптація ідей, основи адаптивного дизайну.

Web Design Junior — для тих, хто вміє працювати з одним з редакторів (Figma/Sketch) та може показати приклади своїх робіт. Не обов'язково для реальних клієнтів, це можуть бути й навчальні проєкти. На цьому курсі основний акцент — на шліфуванні практичних навичок необхідних для старту кар'єри у сфері вебдизайну.

Студенти освоюють техніки, принципи та методології вебдизайну — від створення іконок до проєктування складних сайтів. Окрема увага приділяється роботі з сайтами для e-commerce, базовим принципам верстки та порадам для пошуку роботи.

UX/UI Animation

На цьому курсі можна прокачати роботу з анімацією. Протягом трьох місяців студенти вивчають всю основну теорію та одразу ж використовують її на практиці. Серед тем: основи анімації інтерфейсів, анімування ілюстрацій, робота з кнопками, лоадерами та іконками.

Студенти навчаються працювати з 3D в програмах After Effects та Cinema 4D, а також дивитися на анімацію очима розробника й створювати грамотне завдання на розробку анімації будь-якої складності.

Отримані скіли можна застосовувати для створення анімованих дизайн-систем, просунутих та експериментальних анімацій, а також нових видів взаємодії.

Це все допоможе спростити шлях користувача та підвищити його залученість. Недарма ж топові компанії (на кшталт Uklon, Monobank, Uber, Google, Netflix) впроваджують анімацію у своїх додатках

Smart Interface Design Patterns

Smart Interface Design Patterns — курс для тих, хто хоче аби його дизайн вирізнявся на тлі інших.

Що потрібно? Бути готовим експериментувати та забути про звичні патерни. Що отримаєте? Знайдете стратегію і набір конкретних рішень для створення інновативних, корисних і зручних інтерфейсів.

Упродовж двох місяців студенти розглядатимуть велику кількість вже реалізованих рішень, зокрема й дуже складних. Звернуть увагу на всі варіанти компонентів на сайті: фільтри, акордеони, кнопки, каруселі, календарі, таймлайни тощо.

Робота відбуватиметься в командах, завданням кожної з яких буде знайти незвичне, але зручне вирішення конкретних проблем.

Куруватимуть весь процес Віталій Фрідман, головний редактор Smashing Magazine і дизайнер інтерфейсів, та Олександр Кім, Product Designer в Arxel.

Інклюзивний вебдизайн (основи)

Курс «Інклюзивний вебдизайн (основи)» — для тих, хто хоче зробити свій дизайн максимально універсальним та доступним.

Упродовж навчання будете навчатися розрізняти й дизайнити функції, що допомагають сайтам і додаткам нікого не дискримінувати: ні людей з інвалідністю, ні тих, у кого слабкий інтернет, старий девайс чи кого засліплює сонце з вікна.

Ви дізнаєтеся про особливості зору людини та дизайн-стандарти у сфері доступності. Вивчите вимоги до колірного контрасту, форматування текстових блоків, розміру інтерактивних елементів та відстані між ними.

Усі дев'ять лекцій доступні абсолютно безкоштовно. Якщо ж ви хочете отримати фідбек від кураторів та одразу ж спробувати все на практиці — стежте за розкладом відповідного воркшопу на нашому сайті чи в соцмережах.

Сподіваємося, цей текст допоміг розібратися, який напрямок вам найбільш цікавий та відповідає наявним навичкам. На всіх курсах у нас багато практики та постійний фідбек від кураторів.

Якщо все ж залишилися питання чи уточнення, наші менеджери завжди готові допомогти та проконсультувати. Зв'язатися можна за телефоном (+380 97 015-92-72) або ж надіслати лист на пошту – hello@prjctr.com.ua.