Натали Лесникова
Arsenal fan

Опыт дизайнера: полезные инструменты для проектирования интерфейса

Опыт дизайнера: полезные инструменты для проектирования интерфейса
© Mesosphere

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

Дизайнер проекта Mesosphere Ли Манроу делится своим опытом об инструментах, которые его команда использует для разработки дизайна операционной системы Mesosphere DC/OS для датацентров.


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

О чем вообще думали дизайнеры этого софта? Какие инструменты они использовали?

Возможно вся проблема в том, что команда разработки использовала устаревшее ПО или, что еще хуже, абсолютно не стремилась к развитию и поиску чего-то нового.

В последние годы ситуация значительно изменилась. Компании стали серьезнее относится к пользовательскому интерфейсу. Сейчас намного легче убедить своего начальника уделять внимание и вкладываться в дизайн и качественный пользовательский интерфейс. По всему миру проходят конференции, где дизайнеры делятся опытом и обмениваются знаниями. Такие компании, как IBM и Salesforce, инвестируют в дизайн и позиционируют это, как конкурентное преимущество своих продуктов. Инструменты для разработки дизайна все больше фокусируются на крупные предприятия и внедряют больше корпоративных функций.

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

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

Дизайн в Mesosphere

Компании Mesosphere 5 лет, и в ней относительно небольшая команда дизайнеров. Их основной проект — разработка открытой операционной системы для датацентров. Именно эту ОС используют крупнейшие мировые компании для управления рабочими нагрузками, контейнерами и работы с большими данными. На ее основе работают крупные банки, автономные автомобили и технологии искусственного интеллекта.

© Mesosphere

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

Конечно же, у каждого дизайнера есть ручка, бумага и стикеры. Также у них есть ручки Micron, Pilot Razor Point, маркеры Prismacolor и большие блокноты для эскизов.

© Mesosphere

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

Sketch

Для разработки интерфейса используется приложение Sketch от компании Bohemian. Команда Mesosphere использует библиотеки UI Kit для дизайна операционной системы и сайта, что значительно ускоряет работу с макетами и помогает сохранить согласованность и идентичность дизайна.

© Mesosphere

Abstract

Abstract — инструмент для управления контролем версий файлов в Sketch. Для новых проектов или операций создаются отдельные ветки, а затем они сливаются в основную ветку. Это помогает иметь стабильное хранилище актуальных версий файлов.

© Mesosphere

Lingo

Хотя дизайнеры используют Sketch и Abstract для поддержки библиотек UI Kit, приложение Lingo помогает им управлять типами, стилями слоев и цветами.

© Mesosphere

InVision

InVision — платформа для совместной разработки макетов интерфейсов. Сначала макет создается в Sketch, затем загружается в InVision и открывается для совместного доступа. Набор плагинов Craft помогает облегчить взаимосвязь между Sketch и InVision.

© Mesosphere

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

© Mesosphere

VS Code

Дизайнеры не занимаются написанием кода, но если дело касается стилей компонентов или проблем в интерфейсе, то они всегда используют редактор VS Code. Все репозитории хранятся в GitHub, причем большинство из них с открытым исходным кодом.

© Mesosphere

Adobe CC

Хотя основная часть дизайна выполняется в Sketch, у всех дизайнеров есть лицензия для Adobe CC, т.к. для редактирования фотографий, больших изображений используется Photoshop, для редактирования иллюстраций, иконок и дизайна для печати — Illustrator, а также InDesign для цифровых и печатных документов.

© Mesosphere

Slack

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

© Mesosphere

JIRA

JIRA — это инструмент для управления проектами. Для каждого проекта создается тема с задачами. Темы обычно привязаны к функциям продукта в бэклоге и к темам разработчиков. Хотя каждый член команды отвечает за управление своими собственными задачами, канбан-доска дает наглядное представление о работе команды в целом.

© Mesosphere

Confluence

Confluence — это удобный инструмент для ведения Wiki. Дизайнеры Mesosphere используют его для документирования рабочего процесса, процедуры найма новых работников и многого другого. Для каждого проекта создается страница Wiki, где документируется вся новая и важная информация, а также фиксируется финальная цель и пожелания пользователей.

© Mesosphere

G Suite

Для совместной работы над идеями и контентом используется инструмент Документы, который входит в пакет G Suite. Инструмент для создания презентаций помогает представить дизайнерские идеи и решения. Google Диск используется для совместного доступа к файлам и исходникам. Используя набор инструментов Google, можно организовать совместную работу над проектом и открыть доступ к файлам для любого сотрудника. Это намного проще, чем постоянно пересылать файлы друг другу.

© Mesosphere

Dropmark

Сервис Dropmark можно использовать как копилку идей и для постепенного создания базы знаний. Для Dropmark есть удобное расширение для браузера, которое помогает быстро добавлять веб-сайты и изображения. Именно этот сервис используется при еженедельном обсуждении новых идей.

© Mesosphere

CloudApp

Отличное приложение для быстрого создания и выгрузки снимков экрана, gif-файлов или видео. Его очень легко использовать — можно оперативно снять скриншот, отправить его в Slack и уже делиться комментариями с помощью CloudApp.

© Mesosphere

Screenflow

Для записи качественного видео с экрана команда Mesosphere использует сервис Screenflow. С его помощью удобно записывать видео в процессе тестирования и выгружать его на Google Диск. Обычно это используется для записи отчетов о тестировании.

© Mesosphere

Dribbble

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

© Mesosphere

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

  • Principle для работы с анимацией;
  • Figma для разработки пользовательского интерфейса;
  • InVision Studio для дизайна интерфейса;
  • Framer и UXPin для создания прототипов.

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

Один хлопок? Или же бурные овации? Хлопая больше или меньше, вы показываете, какой пост действительно чего-то стоит.
Комментарии