Создание дизайна без рутины

Сейчас все больше и больше мы думаем о том как сделать дизайн максимально быстро без рутины и минимум тратя своих ресурсов на бесполезную и никому не заметную работу. Раньше мы использовали для создания прототипов связку Axure – Photoshop, потом мы заменили Photoshop на Sketch. И уже сразу почувствовали что наши процессы пошли быстрее и удобнее, а качество результата только выросло.

Мы на протяжении долгого времени использовали Axure в создании прототипов и в ручную потом переносили все блоки уже Sketch. Работа мягко говоря довольно рутинная и как часто бывало мы могли упустить какие-то детали и какая-то форма или всплывающее окно могли быть упущены. Мы начали думать, как мы можем изменить ситуацию и больше не перетаскивать блоки в ручную из Axure в Sketch. Мы всегда стремились к тому чтобы наши прототипы полностью отражали конечный продукт. Чтобы все экраны и окна были спроектированы и продуманы. Каждая кнопочка работала и наводилась. Мы начали понимать, что очень много времени тратим на переносы блоков. С каждым проектом нам это становилось все делать труднее и труднее. Проекты стали становиться все больше и больше.

Тогда мы решили попробовать делать прототипы прям в Sketch и переносить их в InVision. По началу было не понятно как это будет работать. Мы уже привыкли что в Axure можем создать полностью все что задумали, а такая связка как Sketch – InVision связывала немного руки. Спустя время мы привыкли и смирились с тем что теперь наши прототипы не такие гениальные, а чуть попроще. Но у нас получилось сэкономить время и избавиться от рутинной работы. Таким образом мы стали тратить время на создание гипотез больше, а время на рутинную работу меньше.

Спустя время мы решили все изменить и перейти на Figma нас не устраивало что макеты из Sketch нужно было переносить в Zeplin, чтобы передать их на верстку. Если какие-то изменения происходили в дизайне на этапе верстки и какие-то корректировки, то передача файлов дико раздражала. И мы решились оставить Sketch позади и перейти на Figma и не прогадали.

Сейчас мы почти избавили дизайнеров от возможности играться со шрифтами, кнопками и отступами. Тем самым дали им возможность больше для решения творческий задач, а высчитывание отступов и переноса блоков туда-сюда. Сейчас в возможность Auto Layout мы можем связывать элементы и задавать им выравнивание, отступы. Менять содержимое объекта — все заданные параметры сохраняются. Разные объекты можно объединить между собой в блок, к которому также применяется Auto Layout. Это для нас какая-то магия и порой мы чувствуем себя немного волшебниками. Потому что оглядываясь назад и вспоминая Photoshop мы наши процессы сейчас воспринимаем как волшебство.

Что очень здорово у нас получилось применить Auto Layout на уровне страниц. Теперь мы один раз задаем базовые отступы у всех устройств и собираем остальные страницы на уровне конструктора. Теперь не нужно вручную двигать и проверять не поехать ли какой-то отступ случайно в каком-то блоке или в страницы. Мы очень рады тому что Figma работает над своим продуктом и думает как сделать жизнь дизайнерам и разработчикам чуть проще и комфортнее.

Теперь нам все проще прогнозировать ресурсы на разработку, и оценивать время своей работы. Проекты мы стали прорабатывать глубже и запускать быстрее. Клиент при этом получает намного больше возможностей для тестирования гипотез. Мы продолжаем двигаться в сторону автоматизации процессов разработки.