Колись вебдизайн був про те, щоб робити сайти. Зараз вебдизайн — про те, щоб робити сайти з сенсами. Аби концепти були дієвими та відповідали запитам клієнтів, треба знати must-софти й розкладати ідеї на 360°.
Як це робити, знає вебдизайнерка Оля Варченко. Вона вже 7 років у сфері: працювала у графдизайні, 3D, моушені та вебі. Останні 5 років Оля створює нову реальність через сайти: має в портфоліо кейси Cavli Wireless, HARD STOP подкаст і BasharaCare.
Оля Варченко провела лекцію для SKVOT, яку ми законспектували. Про те, який скілсет потрібен, аби дизайнити сайти з нуля, та як робити продукти зі зручним інтерфейсом і глибоким сенсом — усе тут.
Must-knowns для вебдизайнера
Шлях вебдизайнера від нуля до wow-кейсів лежить через знання, скіли, тайм-менеджмент, практику, ком’юніті та портфоліо. Ці складові допомагають отримати клієнтів, які повертаються, і джоб-офер туди, куди хочеш, а не куди візьмуть. Аби все вийшло, дизайнеру у вебі потрібні такі знання:
#1. Design tools (software). Сюди відносимо фотошоп, ілюстратор і фігму. Без цих hard skills вебдизайнер не зможе реалізувати жоден сайт і отримувати нових клієнтів.
#2. Графічний дизайн. Дизайнер сайтів має розуміти, як побудувати композицію та працювати з типографією. Як для графдизайнера, так і для вебдизайнера важливі теорія кольору та історія візуального мистецтва.
#3. Дизайн у діджиталі. Це про те, як дизайн адаптується під різні екрани. Тут потрібно працювати з сітками, знати, що таке HTML/CSS і responsive design. Вебдизайнер має розумітися на тому, що таке вебаналітика та метрики, які патерни є загальноприйнятими та як працює прототипування.
#4. Стратегія. Сайт має допомагати клієнту досягати бізнес-цілей. Для цього треба розуміти цільову авдиторію, розбиратися в ринку та вміти відокремити бренд від конкурентів.
#5. Психологія. Це про те, як юзер поводиться на сторінці. Що він читає та як, скільки тексту і в якому tone of voice йому комфортно сприймати.
Soft skills для вебдизайнера
Вебдизайнер досліджує продукт, з яким працює, аналізує конкурентів і спілкується з замовником. Для цього потрібні софт-скіли. Серед найнеобхідніших навичок для дизайнера у вебі:
#1. Критично-аналітичне мислення. Звучить страшніше, ніж є насправді. Цей скіл знадобиться на етапі діскавері, коли збираєш дані про продукт. Іноді замовник може давати нечіткі ТЗ або не до кінця розуміти свого споживача. Тоді доведеться збирати, інтерпретувати й ставити під сумнів дані про бізнес, ринок і юзерів.
#2. Дизайн-мислення. Цей скіл допомагає знайти кілька нестандартних і креативних рішень для сухих робочих завдань, а потім — вибрати одне, яке найефективніше розв’яже проблему клієнта.
#3. Комунікативні навички. Вебдизайнер має емпатувати авдиторії та бути її адвокатом. Для цього потрібно знати, як ефективно працювати з командою, розуміти клієнта і надавати релевантне рішення для проблеми.
#4. Проактивність. Дизайнер має пропонувати більше, ніж від нього очікують. Це впливає на відгуки клієнтів та робить замовників постійними.
Як визначити, чи буде метч із вебдизайном
На початку шляху можна сумніватися в тому, чи з вебдизайном дійсно станеться метч. Аби впевнитися, що саме ця сфера тобі сподобається, перевір себе за цим чек-листом. Ти будеш потужним вебдизайнером, якщо:
#1. Маєш тягу до нестандартного. Сюди можна віднести артхаусне кіно, непопулярні напрями мистецтва та утилітаризм.
#2. Легко генеруєш нові ідеї. Коли постійно бачиш незвичні образи в буденному: хмарах, деревах, предметах побуту. Такі творчі ідеї приносять задоволення, і складно обрати лише одну з багатьох.
#3. Бачиш потенціал у повсякденних речах. Коли розумієш, як покращити паковання, хочеш десь змінити колір і відзначаєш для себе, що, здається, однакові речі по-різному зручні.
#4. Маєш візуальне мислення. Малюєш під час розмови, аби краще концентруватися. Можеш орієнтуватися в умовному 3D-просторі. Коли думаєш: «Краще б я собі нічого не уявляв» — це теж прояв потужного візуального мислення.
#5. Ти допитливий. Від твоїх запитань часто втомлюються інші. Іноді від своїх запитань втомлюєшся ти сам. Думаєш, чому літак не падає та як ми бачимо кольори.
Як вебдизайнеру розподілити час
Є міф: чим більше часу витратиш на те, щоби покращити скіли, тим краще. Але це не так. Така стратегія — короткострокова і не приводить до фінальної мети. Чим більше працюєш, тим більше втомлюєшся, так недалеко і до вигорання.
Якщо працюєш — приділяй вебдизайну 2–3 години на день. Можна і 1,5, головне — практикуватися регулярно. Якщо не працюєш — буде ок займатися вебдизайном 5–8 годин на добу, навіть якщо хочеться більше.
Де вебдизайнеру практикуватися
Коли збираєш перше портфоліо, цілком ок класти туди вигадані кейси. Це означає, що потрібно самому придумати задачу та проблему. Потім, поки працюєш, описуй, як розв’яжеш цю проблему. Здається, такий кейс відірваний від реальності. Але це не так — подібні вправи дають простір для фантазії та допомагають зрозуміти, які інтерфейси подобаються самому дизайнеру.
Можеш брати й реальні кейси для практики. Візьми наявний бренд, у якого вже тексти, візуал та сайт або інший онлайн-майданчик — але все це не відповідає потужності бренду. Зроби редизайн сайту (або створи з нуля, якщо у бренду є лише сторінка в інстаграмі). Після цього є два шляхи. Перший — додати концепт собі в портфоліо. Обов’язково підпиши, що цей кейс вигаданий, а вся інформація — з відкритих джерел. Другий шлях — надіслати дизайн засновнику бізнесу, щоб він залишив відгук.
Навіщо вебдизайнеру ком’юніті
Це про обмін досвідом і знаннями, бо круто, коли можеш у когось попросити про допомогу. Також спільнота дає зворотний зв’язок, у ком’юніті можна знайти ментора. Важливо мати поруч людей, які шарять у сфері, в якій ти працюєш, і можуть дати пораду. Роботи колег та їхні портфоліо додають мотивації, а соціальна взаємодія залишає на хвилі останніх новин і допомагає зрозуміти, що актуально саме зараз.
Про що не піклується посередній вебдизайнер
Посередній дизайнер — це той, хто робить посередній дизайн. Він не виділяється серед конкурентів ані оригінальністю, ані якістю виконання, не проявляє ідентичність бренду і не залишає враження у користувача. Щоб не стати посереднім дизайнером, завжди думай про кінцевого споживача та клієнта. Щоб дизайн піклувався про авдиторію та сподобався замовнику, звертай увагу на такі речі:
Ідентичність бренду. Робота вебдизайнера має відображати ідентичність бренду, мати ідею/сенс/думку/філософію, яку автор (дизайнер) хоче донести до авдиторії. Без ідеї дизайн стає посереднім та шаблонним.
Структурованість. Всі елементи сайту мусять мати сенс і працювати на те, щоб дизайн якісно доносив головну думку бренду. Якісний дизайн не містить нічого зайвого, там немає краси заради краси й технологій заради технологій. Кожен елемент на сайті має закривати потребу авдиторії. Якщо сумніваєшся, чи додати щось на сайт, став два запитання: «Яка потреба авдиторії?» та «Яка мета бізнесу?». Якщо елемент допомагає закрити потребу споживача і виконує цілі бізнесу — він має бути на сайті.
Що таке референси та нащо їх шукати
Референси — це зображення та ідеї, які вебдизайнер використовує як джерело натхнення та орієнтир.
Референси потрібні, щоб надихатися роботами інших. З одного рефу можна взяти колір, з другого — композицію, з третього — типографію. Це також економить час. Коли показуєш клієнтам або колегам референси, можеш пояснити ідею ще до того, як вона буде реалізована. Рефи для вебсайтів можна шукати на awwards.com, wow-web.co.uk, httpster.net, uijar.com, ilovecreatives.com та dribbble.com.
Як формувати портфоліо
Портфоліо показує потенціал вебдизайнера. За ним оцінюють досвід, креативність і стиль креатора.В портфоліо мають бути:
#1. Лише найкращі роботи. Хай їх буде три, але потужних. Не варто зберігати всю історію та показувати весь свій прогрес клієнту. Замовник хоче побачити якісні роботи.
#2. Різноманітні проєкти. Можуть приходити різні клієнти з різними замовленнями. Додай у портфоліо роботи для e-commerce, landing page і корпоративний сайт, щоб замовник розумів, що ти впораєшся з його задачею.
#3. Добра навігація. Вона має бути зрозумілою, тому використовуй біханс, ноушн або зроби власний вебсайт. Головне — не надсилай файли, які потрібно завантажувати, і лінки на хмарні сховища.
#4. Рекомендації та зворотний зв’язок. Додай відгуки клієнтів, посилання на лінкедін і свої контакти в соцмережах, щоби потенційний клієнт міг легко з тобою сконтактувати.
Як фрилансеру у вебі поставити цінник на свої роботи
Ціна за роботу формується за схемою «дизайнер + проєкт + клієнт + модель ціноутворення = рейт»:
#1. Дизайнер. Це про те, які знання та скілсет має людина, скільки в неї досвіду, який рівень професіоналізму. Також важливо, чи авторитетна ця людина в ком’юніті: більш авторитетний дизайнер отримає вищий цінник. Щоби підвищувати авторитет, варто розвивати свої соцмережі та не боятися заявити про себе у спільноті.
#2. Проєкт. Тут на ціну впливає, чи об’ємна робота і наскільки багато правок. Якщо проєкт складний та займає багато часу — цінник має бути вищим. Рейт підвищиться, якщо клієнт просить виконати роботу ASAP. Також можна брати більше грошей, якщо над сайтом працювати нудно і він не викликає задоволення.
#3. Клієнт. Зі складного клієнта можна взяти більше грошей, бо на нього витрачаєш більше часу та зусиль. Також впливає те, наскільки швидко та якісно замовник реагує на комунікацію: клієнти, які просто зникають, мають заплатити більше. Також підвищуй рейт для більшої компанії: стартап або маленький бізнес заплатять менше, ніж велика корпорація.
#4. Моделі ціноутворення. Їх є декілька. Наприклад, погодинна робота — коли маєш фіксовану ціну за годину і множиш її на кількість годин, які відпрацював. Є фікс-прайс: коли дизайнеру платять за фактом виконаної роботи. Можна заробляти й на тому, скільки юзерів перейшло на СТА (Call to action — заклик до дії). Чим більше людей клікнуло на посилання — тим вищий цінник. Також є підписка, яка підійде більш досвідченим дизайнерам. Тут клієнт оплачує послуги дизайнера на рік і може звернутися до нього в будь-який час.