Веб дизайнер + розробник: як досягти ідеального тандему

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

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

Для розробника:

— Надто складний макет — не обов’язково примха дизайнера і політ фантазії.
Звісно, кожен дизайнер мріє опинитися на Awwwards, але здебільшого надто кастомізовані блоки сайту чи додатку це необхідність в першу чергу для клієнта і його бізнесу. Тут можна порадити лише терпіння і розуміння.

— Як терміново відкрити файл .sketch для редагування без Mac?
Якщо виникає потреба щось швидко змінити у скетч файлі, а всі дизайнери сплять на іншому боці планети або просто зникли в нірвані, можна завантажити скетч файл у Figma. Звідти можна і проінспектувати макет, і експортувати іконки.

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

— Якщо потрібно змінити колір svg-іконки, або згрупувати 2 зображення без Adobe і дизайнера, на допомогу знову приходить Figma, яка до речі працює через браузер і є абсолютно безкоштовною. Для будь яких екзекуцій потрібно просто зареєструватись. За допомогою Frame можна об’єднати зображення і експортувати як одне ціле, а з fill і border можна змінити колір іконки.

— Як терміново експортувати шматок фону/іконки/зображення в Figma якщо у вас є доступ до файлу View only?
Якщо виникає потреба щось швидко змінити у файлі Figma, а всі дизайнери сплять на іншому боці планети або просто зникли в нірвані, можна зробити копію файлу собі в drafts і редагувати будь що в своїй копії.

Для дизайнера:

— Розробники не читають ваші думки.
Якщо у вас відсутній екран з тим, як виглядатиме повідомлення при помилці відправлення форми, або ви задумали геніальний скрол у стилі рококо, який не додали на всі необхідні вам екрани, то не дивуйтеся фінальному результату. Частини інтерфейсу, які ви не демонструєте, будуть виглядати стандартно.

Ну.. майже так

— Подбайте про те, щоб усі зображення у макетах можна було експортувати.
Іконки в .svg, растрові зображення у розмірі як мінімум 2Х для retina-дисплеїв.
— Краще називати блоки, сторінки, зображення та ін. адекватно.
Copy 01, Copy 100500 — це пекло. Для всіх.

— Якщо ви працюєте над україномовним сайтом/додатком, краще обирати шрифти, які підтримують і кирилицю, і латиницю. Деякі частини сайту все-таки можуть мати текст латиницею. Перевіряйте шрифт на жирному накресленні: може статися, що той самий варіант латиницею і кирилицею буде відрізнятися по вазі у межах одного шрифту того самого накреслення.

Для команди:

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

— Думайте, як PM. Навіть якщо у вас в команді є ватага крутих проджект менеджерів, все одно корисно мати представлення про процес в цілому, осмислити як працює інша команда. Усвідомлення найбільш енергозатратних процесів роботи іншої команди може дати цікаві ідеї, як прискорити час усім і оптимізувати робочі процеси.