Продуктивность – это не про скорость работы, а про скорость достижения цели. Целью дизайнера может быть закрытие проекта, создание макета или какой-то его части. От скорости выполнения этой работы зависит доход дизайнера, профессиональный рост и интерес к работе, ведь выполнять рутинные задачи долго сложнее всего.

В этой статье мы рассмотрим методы, которые помогают дизайнеру повысить скорость своей работы без потери качества, а в большинстве случаев и с его повышением. Приступим.

Создавать и поддерживать компоненты самому – очень долго. Для полноценной базы компонентов нужно создать, как минимум, кнопки, поля, чекбоксы, радиокнопки, табы, текстовые стили, цвета и многое другое, причем, в нескольких состояниях (активен, при наведении, заблокирован). В большинстве случаев это пустая трата времени.

В большинстве проектов, над которыми я работал, мы выбирали готовую дизайн-систему, что ускоряло не только дизайн, но и разработку. Выбор дизайн-системы зависит от технологий, используемых в данном проекте. В последних проектах я использовал дизайн-системы PrimeNG и MUI.

Если с разработкой вы не взаимодействуете, то достаточно взять готовый UI Kit. В одном из проектов я использовал Untitled UI, но вы можете выбрать тот, который вам больше нравится. В интернете достаточно бесплатных и платных альтернатив.

Если я вижу, что часто повторяю одну и ту же рутинную задачу, я ищу на ее замену плагин. Например, я использовал плагины для генерации аватарок, текстовых стилей, имен пользователей и ряда других рутинных задач.

Несколько плагинов: Typescales, Text Styles Generator, Mockup Plugin. Как видите, плагины в основном называются просто, поэтому их легко найти прямо в Figma, введя нужный запрос.

Только не придавайте большое внимание плагинам. Они ускоряют работу, а не делают ее за вас. Так же как и искусственный интеллект.

В работе начинающих дизайнеров часто присутствует вкусовщина, которая выражается в переделывании одного экрана по много раз. Это выдает неопытность и отсутствие понимание сути работы дизайнера.

Опытный дизайнер понимает, что элементы в интерфейсе располагаются на основе логики, поэтому он не двигает их местами в поисках лучшей композиции. Самая важная информация и ключевые действия размещаются выше и более заметно, а остальная информация уходит на второй план.

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

Не все этапы дизайн-процесса нужно совершать в каждом проекте. Например, нет смысла собирать мудборд, когда визуальное направление понятно, а структура страниц строится на основе заранее описанной логики. Вы попросту потратите время.

Еще одна частая ошибка – долгий подбор шрифтов. В большинстве случаев будет достаточно взять привычный и удобный для пользователя шрифт, как Inter или Roboto. Пользователь ничего не заметит и вы не потратите уйму времени на бесполезную работу.

В некоторых проектах можно обойтись без вайрфреймов, когда структура экранов хорошо описана и достаточно лишь воплотить ее с помощью компонентов.

Если вы работаете с готовой дизайн-системой, то обычно в ней содержатся готовые шаблоны, которые могут сильно ускорить работу. Например, в большинстве библиотек есть шаблон регистрации пользователя, верхнего и бокового меню, отображения данных и много чего еще.

Вы можете спокойно брать готовые шаблоны, если они подходят под вашу задачу. Это не только упростит работу, но и ускорит ее, так как эти шаблоны будут также разработаны в коде, за что вам будут благодарны разработчики.

Если вы не работаете с дизайн-системой, тогда можете брать шаблоны из своих других проектов, заменяя нужную информацию. Ведь многие элементы будут повторяться от проекта к проекту (сетки, модальные окна, навигация), поэтому глупо их не использовать снова.

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

Подумайте, какие действия в Figma (и не только) вы совершаете чаще всего и найдите под них комбинацию клавиш. Например, я часто использую комбинацию command + L, чтобы выделить текст в поисковой строке браузера. Очень ускоряет поиск нужной информации.

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

Первым делом беритесь за структуру всего экрана, после структуру каждого блока и только после этого занимайтесь расположением элементов внутри них. Нет смысла копаться в деталях, когда не выбрана общая структура, которая может повлиять и на эти самые детали.

Не так давно мне удалось заработать 50 тысяч рублей за час работы. Во многом как раз благодаря описанным выше принципам. Используйте их, друзья.