Дизайнер интерфейсов с нуля: с чего начать

Чем занимается

Не рисует красиво. Делает так, чтобы человек смог сделать то, зачем пришёл, — быстро и без раздражения.

Две стороны профессии, которые часто путают:

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

Визуальное оформление — как это выглядит: типографика, цвет, отступы, состояния элементов.

Первое важнее. Красивый интерфейс, в котором непонятно, что делать, — плохой интерфейс. Обратное встречается реже, но терпимо.

Что учить по порядку

1. Основы визуального языка. Типографика, сетки, отступы, цвет, контраст. Не «чувство прекрасного», а конкретные правила, которые делают макет опрятным.

Самое частое отличие работы новичка от работы профессионала — не идеи, а отступы и выравнивание.

2. Инструмент. Один, современный, работающий в браузере. Освойте компоненты, автоматическую раскладку и стили: без этого вы будете рисовать каждый экран заново.

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

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

5. Работа с разработчиками. Как передавать макеты, что такое система компонентов, почему нельзя рисовать двадцать вариантов одной кнопки.

Что отличает дизайнера от рисовальщика

Умение объяснить решение. Почему кнопка здесь, а не там. Почему два шага, а не один. Ответ «мне кажется так красивее» на собеседовании закрывает разговор.

Работа с ограничениями. Настоящий проект — это чужие технические ограничения, сроки и мнение заказчика. Дизайн в вакууме никому не нужен.

Внимание к состояниям. Новички рисуют один экран — идеальный. Профессионал рисует ещё пять: загрузка, пусто, ошибка, много данных, длинный текст. Именно это спрашивают на собеседовании.

Как собрать портфолио

Не набор картинок, а разбор задач. По каждой работе: какая была задача, что выяснили, какие решения приняли и почему, что получилось.

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

Три работы достаточно. Лучше три с подробным разбором, чем пятнадцать картинок.

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

Что усиливает заявку

Работа с настоящим заказчиком. Даже маленькая: сделали интерфейс для знакомого мастера, помогли некоммерческой организации.

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

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