Веб-дизайн
Щоб зрозуміти, що створює веб-дизайнер, достатньо відкрити ноутбук чи телефон. Зовнішній вигляд сайтів та додатків – його робота.
А щоб побачити праці графічного дизайнера – пройдіться вулицею. Вивіска кав’ярні біля будинку, логотип відомого бренду на банері, зовнішня реклама, обкладинка журналу – це плоди роботи графічного дизайнера. Заради справедливості, ці ж речі ми бачимо в інтернеті. Але спочатку графдіз працював лише з фізичними носіями.
Простими словами: логотип та айдентику компанії Nike створив графічний дизайнер. А сайт того ж бренду – веб-дизайнер.
Беззаперечний лідер у сучасному веб-дизайні – Figma. Веб-дизайнери можуть малювати макети також у Sketch, InVision Studio, Adobe XD. Функціонал у програм схожий, а вибір залежить від звичок та смаку.
Веб-дизайнер найчастіше працює у команді розробників, де є ще проджект-менеджер, верстальник, фронтенд, бекенд тощо за списком. І найближчий колега дизайнера тут – верстальник. Щоб говорити з ним однією мовою, бажано хоча б поверхово познайомитися з HTML та CSS.
Веб дизайн та UX UI
Поряд із Web Design та Graphics Design часто говорять про UX/UI-дизайн. Не лякайтеся, це насправді частина веб-дизайну.
UX розшифровується як User eXperience. Завдання UX-дизайнера – розробити інтерфейс, який буде зрозумілим для користувача. Якщо ви заходите на сайт і не розумієте, куди тут натискати і як зробити замовлення – недоопрацьований UX. UI – це User Interface, візуальний вигляд продукту. UI має на увазі цілісний, гармонійний, привабливий інтерфейс.
UX – це про архітектуру програми чи сайту. UI – про зовнішній вигляд. На ринку США та ЄС можна зустріти дві окремі професії: UX-дизайнер та UI-дизайнер. А в Україні за обидві характеристики відповідає веб-дизайнер.
Figma
Figma — векторний онлайн-сервіс розробки інтерфейсів та прототипування з можливістю організації спільної роботи, що розробляється однойменною компанією. Працює у двох форматах: у браузері та як клієнтський додаток на десктопі користувача. Зберігає онлайн-версії файлів, з якими працював користувач.
Сервіс є безкоштовним для індивідуальних користувачів і платним для фахових команд. Даний редактор підходить як для створення простих прототипів і дизайн-систем, так і складних проєктів (мобільні додатки, портали).
Модель розвитку Figma, спростила співробітництво в усьому процесі створення цифрових продуктів для дизайнерів, розробників, менеджерів і маркетологів дозволила на початку 2018 року залучити додаткові 25 мільйонів доларів інвестицій від партнерів.
2019 року автори редактора залучили $40 млн інвестицій від венчурного фонду Sequoia Capital при оцінці компанії в $400 млн. Рішення про інвестиції було прийнято на основі факту, що близько половини портфельних компаній фонду використовують редактор в роботі. До початку 2019 року Figma вийшла на 1 мільйон зареєстрованих користувачів, ставши серйозним конкурентом для традиційних графічних редакторів і засобів прототипування.
Може імпортувати різні формати файлів залежно від підходу:
- Оглядач файлів (File Browser):
- файли Figma (.fig)
- файли Sketch (.sketch)
- PNG, JPG або GIF
- Редактор файлів (Editor):
- файли SVG
- файли зображень (PNG, JPG або GIF)
Підтримується також імпорт файлів TIFF та WEBP.
InVision Studio
InVision Studio - безкоштовна альтернатива Sketch. Функціонал InVision Studio дозволяє проектувати інтерфейси, створювати прототипи і залучати в проекти інтерактивні елементи. Компанія запевняє, що з їхньою програмою UX розробники зможуть оперативно перетворювати свої ідеї в потужний дизайн для будь-яких платформ.
У Studio є можливість швидко налаштовувати готові макети інтерфейсів під різні розміри екранів. Програма автоматично трансформує інтерфейс після декількох дій користувача.
Особливістю програми є можливість безпосередньо, прямо в редакторі, створювати анімацію для своїх проектів і дивитися прев’ю робіт, не перериваючи виробничий процес.