Веб-дизайн 2016: Chrome атакує!

2

Від автора: 2016 рік закінчився, завжди цікаво повернутися назад і подивитися, як сильно покращав робочий процес за попередні 12 місяців. Дивно, як багато всього змінилося за рік: ваші інструменти, техніки.

Особисто мені в 2016 році дизайну та UX запам’яталося те, що додатки Chrome стали повноцінним варіантом веб-дизайну. Я писав в 2016 році про трьох з них.

Веб-дизайн 2016: Chrome атакует!

У квітні ми обговорювали BoxySVG Ярека Фокса, крутий і невеликий SVG редактор. Додаток працює в Chrome, але краще завантажити його у вигляді програми для ос chrome.

У вересні я розповів вам про Pingendo, інструменті прототипування, за допомогою якого можна створювати прототипи під управлінням Bootstrap, а також про ще одному додатку Chrome. З вересня я створив за допомогою цього додатка два прототипу.

Знайомство з Figma

Однак, можливо, найбільший вплив на мій робочий процес в 2016 році надала листопадова стаття Адама Рашида Варто Sketch дизайнерам розглядати Figma?, яку я редагував. Figma – ще один додаток для ос chrome.

Зараз Адам скаже вам без стесненья, що він фанат Sketch, він випускає навчальні курси по Sketch. І він весь збуджений вирішив написати про конкурента Sketch і дав мені статтю на перевірку. На той момент я нічого не знав про Figma, але як тільки я прочитав першу чернетку, відразу ж зацікавився.

Веб-дизайн 2016: Chrome атакует!

Через шість місяців я щодня користуюся Figma. Я не збирався, просто так вийшло. У мене є Sketch, Adobe XD, Photoshop і навіть Fireworks, але на даний момент більше часу я проводжу в безкоштовному веб-додатку.

Так чому Figma?

Це не UI. Sketch став втіленням того, як має виглядати сучасний додаток для створення дизайнів UI, Figma не пішов далеко в сторону. Шари зліва – властивості праворуч. Якщо ви працювали в Sketch, розберетеся і з Figma (або XD, раз на те пішло).

Крім того, Sketch файли зазвичай без проблем імпортуються в Figma. Звісно, цього не досить, щоб перейти на Figma.

Ти перейшов на Figma, тому що воно безкоштовне? Ні, не думайте. Мені подобаються безкоштовні програми, але я вже заплатив за інші. Фактично я втрачаю свої гроші, не працюючи в них.

Є більш дивна причина (принаймні для мене).

Багатокористувацький редагування в Figma – революція в дизайні

Багатокористувацький редагування – особлива фішка Figma, яка значно відрізняє додаток від Sketch, Photoshop і навіть Adobe XD.

Веб-дизайн 2016: Chrome атакует!

Figma дозволяє відкривати доступ до дизайну через URL ім’я користувача прямо з програми. Жодних завантажень і синхронізацій з проміжними хмарними сервісами. Дизайни в Figma живуть в онлайні, майже як Google Docs.

Коли два і більше користувачів переглядають один дизайну в Figma, ви бачите курсори користувачів, як в Google Docs.

Коли я перший раз побачив це, подумав «емм… мило». Але з часом я зрозумів, наскільки корисна ця функція. Ось чому.

1) Документи Figma – це живі стильові гіди

Коли ви ділитеся документом Figma з іншими розробниками (тільки перегляд), вони можуть натискати на БУДЬ-який елемент на сторінці і переглядати його властивості в правій панелі. Властивості, які можна переглядати:

шрифти, розмір, насиченість

ширина і висота

висота рядка і зовнішні відступи

колір

тіні і ефекти

Веб-дизайн 2016: Chrome атакует!

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

Як-то раз я дивився, як наші розробники з Маніли клікали по моєму дизайну в Figma, поки я пояснював їм все по Skype. У Figma також є хороша вбудована система коментарів.

2) Розробникам не потрібно звертатися до вас для дрібних правок у графіку

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

Веб-дизайн 2016: Chrome атакует!

Більш того, повний контроль версій дозволяє відкотитися до оригіналу в будь-який час.

3) Не потрібно робити звіти про зміни для менеджерів проекту

Як дизайнери, ми часто витрачаємо час на пояснення зацікавленим людям, на якій стадії знаходиться проект. У Figma вони самі бачать, на якому етапі знаходиться проект, і більше не потрібно постійно просити вас про це.

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

Висновок

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

Всім програмам даний підхід принесе користь? Швидше за все, немає. Ніколи не бачив чогось подібного в Google Docs. Схоже, веб-дизайн і дизайн додатків особливо добре підходять для цього.

Тим не менш, дивлячись на потужність і різноманітність Chrome додатків в 2016 році, я з нетерпінням чекаю, що люди придумають в 2017.