====== Веб-дизайн ====== Щоб зрозуміти, що створює веб-дизайнер, достатньо відкрити ноутбук чи телефон. Зовнішній вигляд сайтів та додатків – його робота. А щоб побачити праці графічного дизайнера – пройдіться вулицею. Вивіска кав’ярні біля будинку, логотип відомого бренду на банері, зовнішня реклама, обкладинка журналу – це плоди роботи графічного дизайнера. Заради справедливості, ці ж речі ми бачимо в інтернеті. Але спочатку графдіз працював лише з фізичними носіями. Простими словами: логотип та айдентику компанії Nike створив графічний дизайнер. А сайт того ж бренду – веб-дизайнер. Беззаперечний лідер у сучасному веб-дизайні – [[https://www.figma.com|Figma]]. Веб-дизайнери можуть малювати макети також у [[https://www.sketch.com|Sketch]], [[https://www.invisionapp.com/studio/learn/welcome-to-invision-studio|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 ===== {{https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Figma-logo.svg/128px-Figma-logo.svg.png?nolink&75 }} 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 є можливість швидко налаштовувати готові макети інтерфейсів під різні розміри екранів. Програма автоматично трансформує інтерфейс після декількох дій користувача. Особливістю програми є можливість безпосередньо, прямо в редакторі, створювати анімацію для своїх проектів і дивитися прев’ю робіт, не перериваючи виробничий процес. ===== Джерела ===== * [[https://kiev.lemon.school/uk/itblog/chym-vidriznyayetsya-grafichnyj-dyzajn-vid-veb-dyzajnu|Чим відрізняється графічний дизайнер від веб-дизайнера?]] * [[wp>Figma]] * [[http://yellowarrow.design/index.php/ua/blog-article/77-invision-studio-sketch|InVision Studio - безкоштовна альтернатива Sketch]]