Якщо хочете робити сайти, але писати код для вас на кшталт походу на Еверест або стрибка з парашутом — придивіться до професії веб-дизайнера. Він докладає руку до створення сайтів: без програмування і прийомів малювання.
Що робить веб-дизайнер
Веб-дизайнер — це фахівець в IT, який у команді робить сайти та мобільні додатки. Він малює лендінги, багатосторінкові сайти, макети інтернет-магазинів і веб-додатків. Оформлення Netflix або сайту Rozetka — робота веб-дизайнера.
Уявімо, що сайт — це вітрина. Завдання веб-дизайнера — зробити так, щоб ця вітрина була зручною, цікавою і корисною. Розглянемо на прикладах.
Припустимо, ми продаємо велосипед на OLX. Щоб знайти дошку оголошень, заходимо в браузер і вводимо в пошуковому рядку «інтернет-маркетплейс» або «OLX».
Для нас важливо знайти сайт OLX у пошуковій системі. Краще — якщо це буде перший рядок списку.
Тиснемо Enter, відкривається панель Google-пошуку за запитом — пошукова видача. У ній список посилань — перше OLX. Крім посилання пошуковик показує тематичні категорії: авто, ручна робота, спорт і туризм. Можна одразу клікнути і перейти на обрану категорію.
Праворуч — інформація про компанію, логотип. Додаткове підтвердження, що ми не помилилися і йдемо на OLX, а не на «Нову Пошту».
Швидко, зручно і без нав'язливих деталей — так працює веб-дизайн у пошуковій системі.
Клікаємо і переходимо на сайт компанії. Тут — абсолютно новий дизайн: меню на чорному тлі, великий рядок пошуку по центру, а внизу — готові категорії товарів. Зручно натиснути на пошук і ввести «велосипед». Припустимо, щоб купити дитині або дізнатися середню ціну на схожий із нашим.
Це — дизайнерське рішення OLX. Компанія зробила сайт простим та інтуїтивно зрозумілим. Людина, далека від інтернету та дизайну, продає ключі, свердла або велосипеди — без перешкод і листів у технічну підтримку. Так працює веб-дизайн на дошці оголошень — для зручності клієнта та економії часу OLX.
Приклад роботи в портфоліо веб-дизайнера на майданчику Dribbble
Припустимо, ми продали велосипед. На прибуток купуємо місце в онлайн-сховищі. Наприклад, щоб зберегти меми з котиками.
Нам попався один із таких сайтів. Фото вгорі — веб-дизайн рекламної сторінки онлайн-сховища. Бачимо різні кольори, розташування кнопок, картинки та графіку. Виглядає просто і зрозуміло. Це приклад продуктового веб-дизайну.
Завдання веб-дизайнера в Інтернеті — зробити читачеві привабливий вигляд сайту з графічними елементами. А також інтуїтивно простий і зрозумілий. На такому сайті читач розуміє призначення кнопок, чому тут така картинка або за що відповідає текст.
Часто архітектура сайту починається з макета — чорно-білого начерку. Потім на макет веб-дизайнер накине колір, картинки і текст. Без макетів сайти не роблять.
Веб-дизайнер — архітектор для сайтів. Він придумує розташування елементів і кольору, картинки — так, щоб це було зручно відвідувачам сайту. А власник сайту отримував вигоду від продукту: клієнти знаходять потрібний товар, сторінку блогу або можуть прочитати важливий текст на кшталт вигод покупки.
Він не програмує, а створює архітектуру. Якщо говорити простіше — малює картинку сайту. Далі програміст за допомогою коду переносить картинку на робочий сайт. Додатково налаштовує товари, кнопки, посилання та інші інтерактивні елементи.
Коли звертаються до веб-дизайнера
До веб-дизайнера приходять, коли клієнту потрібен унікальний, корисний і чуйний дизайн сайту.
Унікальний — для сайтів придумали багато готових шаблонів. У них є блоки для тексту, картинки і візуальні елементи — лінії, стрілки, кружечки або собака, що стрибає, на головному екрані. До веб-дизайнера приходять, щоб змінити елементи шаблону або намалювати свій. Завдання унікального веб-дизайну — відрізнятися від конкурентів.
Одне з правил складання сайтів — будувати макети за спеціальною сіткою і в колонках
Корисний. Якщо розмістити кнопку в неправильному місці, відвідувач її не знайде. Товар не куплять, статтю не прочитають — клієнт втратить читача. Веб-дизайнер робить усе за правилами розміщення елементів на сайті. Завдання — зробити комфортний для читача сайт: у кілька кліків оформити замовлення або очима знайти потрібну кнопку.
Чуйний — веб-дизайн роблять зручним для різних екранів: телефону, планшета або комп'ютера. Складність у різній роздільній здатності екрана: якщо намалювати версію тільки для ПК, користувачам мобільних буде незручно. Вони підуть туди, де зручно.
Ось як виглядає робочий процес веб-дизайнера:
-
Зустрітися із замовником і отримати Технічне завдання. У компанії його видасть менеджер або арт-директор. У ТЗ, як правило, є опис продукту, приклади (референси), маркетингове дослідження, терміни і ціна проекту.
-
Вклинитися в завдання. Наприклад, вивчити референси і сайти конкурентів. Знайти найкращі у сфері рішення і взяти для завдання.
-
Створити ескізи. Це не готовий сайт, а начерк — із застосуванням фішок конкурентів, референсів, стилів, кольорів і картинок. На кшталт чернетки для автора.
-
Створити прототип. Пам'ятаєте про чорно-білу розстановку елементів? Це тут. Прототип — це передостанній крок перед оформленням сайту в кольорі та картинках.
-
Розробити готовий макет. Зробити картинки сайту або платформи під вимоги клієнта. Підготувати макети в потрібних форматах для роботи програміста: ПК, планшет, мобільний телефон. Якщо проект великий — написати ТЗ для розробника, щоб той не заблукав.
Візуально процес роботи веб-дизайнера виглядає так.
Що має вміти веб-дизайнер
Головне для фахівця — дизайн у веб-середовищі: робота з сайтами, сервісами, додатками.
Решту потрібно знати в основах. Не потрібно писати рекламні тексти або досконально верстати сайти. Досить пройти вступні курси, щоб розібратися у сфері та правилах. Копірайтеру підкажете, де тексту багато і він не поміститься. А недосвідченому верстальнику — як перенести блок або кнопку, якщо не виходить.
Професійні навички можна освоїти під час навчання і практики:
-
Редактори для дизайну. Найкращий — Figma. На то є дві причини: у ньому показує готовий код стилів для верстальника, і редактор робили для вебпроектів: налаштування для макетів, перенесення картинок у два кліки, робота на одній сторінці в команді. Додатково дизайнери вчать графічні та фоторедактори, наприклад Adobe Illustrator або Photoshop.
-
Основи дизайну: композиції, перспективи, типографіки та кольорова палітра.
-
Основи дизайну інтерфейсів (UX і UI-дизайн) — розуміти, куди на сайтах розміщувати елементи і чому це правильно, зручно і корисно для відвідувачів.
-
Основи анімації — зараз популярні сайти з ефектами, на кшталт мерехтливих кнопок, спливаючого тексту або рухомих картинок. Їх може зробити і веб-дизайнер.
Гнучкі навички:
-
Уміння працювати в команді. Сайт — це не робота одного: маркетолог придумує стратегію сайту, копірайтер пише рекламний текст, аналітики підключають лічильники переглядів сайту, верстальники переносять сайт. Щоб сайт вийшов — з ними потрібно спілкуватися.
Іноді програміста може замінити і веб-дизайнер. Для цього користуються візуальними редакторами сайтів. У ньому можна перенести картинку в чуйний сайт без знання коду. Редагуєш, як у Фотошопі, а виходить готовий продукт. Швидко і зручно.
-
Уміння спілкуватися з клієнтами. Найчастіше клієнти можуть не розбираються в дизайні та інтернеті. Їм потрібно дохідливо розповісти і знайти правильне рішення: за бюджетом, часом і потребами клієнта.
-
Увага до робіт в ніші — досвідчений дизайнер на око може визначити, коли картинки або шрифти не підходять і потрібно пошукати інші варіанти. Для цього він багато дивиться на інших — збирає вдалі приклади. А в невдалих прокачується шукає недоліки, щоб не потрапляти у своїх проектах.
-
Посидючість — робота над макетом може розтягнутися на п'ять-шість годин. А ще час на зв'язок із командою або клієнтом. Залишається перерва на перекуси та вечірній відпочинок. На початку шляху доведеться працювати побільше — паралельно з навчанням робити портфоліо. Усе це вимагає терпіння і вміння довго сидіти за комп'ютером, швидко варити каву і чекати відповіді колег і клієнта.
Без портфоліо в дизайні перспектив мало. Хіба що працювати стажером у студії.
Скільки за це платять
У середньому зарплата за вакансією «Веб-дизайнер» в Україні — 900 доларів. Стажери отримують близько 300-350 доларів.
Якщо багато часу — можна працювати на компанію і на фріланс-біржі. Наприклад, піти стажером у місцеву студію і брати замовлення на Upwork. Тоді до 12 тисяч додають ще 150-700 доларів. Вилка цін відрізняється швидкістю пошуку замовлення та платоспроможністю клієнта.
У місцевих дизайн-студіях не засиджуються, а переходять на фул-тайм фріланс або роботу в міжнародній компанії. Тут платять від 1000 доларів і вище. Усе залежить від самопрезентації, портфоліо та вимог вакансії веб-дизайнера: одним потрібні фахівці на шаблони сайтів — це дешевше. Іншим — дизайнери на багатосторінкові сайти та веб-сервіси.
Куди росте веб-дизайнер
Прокачуватися можна у двох напрямках: горизонтально і вертикально.
Горизонтальне зростання — продуктовий або проектний менеджер, дизайнер продуктів або розробник. Щоб рухатися горизонтально, потрібно вчитися в нових сферах, на кшталт управління командою або Front-end розробки. Веб-дизайн послужить відправною точкою: навчитеся працювати з сайтами, зрозумієте принципи дизайну в Інтернеті, ознайомитесь із командною роботою і сферою обслуговування.
Можна рости вертикально — стати арт-директором у компанії, відкрити свою дизайн-студію або очолити віддалену студію, якщо працюєте в різних містах. Для цього потрібно розвивати навички управління командою і проєктами, активно долучатися до бізнес-процесів і стежити за трендами ринку.
Як стати веб-дизайнером
Книги — дають базу для дизайну, композиції або розміщення елементів у вебі (UX-дизайну):
-
Познайомитися з основами та сучасною культурою веб-дизайну — «Безкоштовний посібник з Основ Web-дизайну» Рафаля Томаля.
-
Прокачати мислення через графіку — «Візуальне мислення. Як продавати свої ідеї за допомогою візуальних образів», Ден Роем.
-
Шукати ідеї для веб-дизайну — «Емоційний веб-дизайн» Аарона Волтера.
- Для кар'єрного зростання в студії або продуктовій компанії — «Дизайн-мислення в бізнесі» Тім Браун.
На Dribbble є окрема категорія — Web Design. Вводимо в пошуку нішу сайту і дивимося рішення колег.
Де дивитися приклади колег:
-
Pinterest — за запитом Web Design прикладів більше, ніж на схожих сайтах.
-
Design Awards — щорічна премія у веб-дизайні. Дивимося круті роботи колег, збираємо вишеньки на торті та надихаємося.
Тут веб-дизайнери розміщують портфоліо з проектами: від односторінкових сайтів до повноцінних продуктових багатосторінкових сайтів та інтернет-магазинів. Можна підглянути вдале рішення, знайти у своїх роботах помилки. Або вчитися на чужих.
Професійне навчання отримують на онлайн-курсах. Не потрібно ходити до школи, шукати наставника - все під рукою: від записаних уроків до перевірки домашніх завдань. На навчальній програмі «Комп'ютерна графіка та дизайн» IT STEP навчаємо веб-дизайнерів працювати з проектами в діджитал, командою та клієнтами.
Студенти отримують найкращі домашки у вигляді проектних робіт. А ще сертифікат про випуск IT STEP Academy. Приєднуйтесь!
Резюме: хто такий веб-дизайнер
Веб-дизайнер — це фахівець в IT, який малює сайти, веб-додатки та мобільні додатки. Він працює з графікою та інтерфейсом. Не малює, як графічний дизайнер. І не програмує — це завдання верстальника.
Хороший веб-дизайнер може розібрати ТЗ, зробити первинний аналіз конкурентів і відвідувачів. Збере макет і переведе в готову роботу.
Найчастіше веб-дизайнери збирають макети в Figma. Після верстальник сам або за допомогою дизайнера переносить малюнки на рушій - сайт або застосунок.