Для кого будет полезна эта статья?
Для начинающих дизайнеров и для людей интересующихся данной тематикой, что бы понять как и в каких программах происходит разработка дизайна интерфейсов. Сразу оговорюсь что под интерфейсами я подразумеваю как мобильные так и десктоп интерфейсы да и вообще все что подпадает под категорию UI/UX.
И так — вы человек желающий освоить нелегкую но интересную профессию дизайнера.
Для начала вам необходимо разобраться с инструментарием. Хотя работа UI/UX дизайнера ближе к работе инженера-изобретателя и большинство того что вам нужно находится у вас внутри черепной коробки, все же вам конадобится определенный набор программ. Сразу замечу что это не догма и могут быть варианты, но приведенный список софта — это то чем пользуюсь я и большинство дизайнеров в нашей компании.
Первый и основной инструмент это Sketch.
Есть альтернативы в виде Figma и Adobe XD, но Sketch гораздо удобнее, шустрее работает и дает отличную возможность синхронизации с другими необходимыми в работе программами.
Sketch — платный, но у него есть пробный период. Стоимость программы 99$ в год по окончанию пробного периода. Это не дорого и быстро окупается (на самом деле с первого вашего заказа). Хочу обратить ваше внимание на то что стоит покупать лицензионный софт. Чем чище и правильней все устроено у вас в голове — тем чище и правильней будет результат вашего труда. Тем более что стоимость софта компенсируется сотрудникам в большинстве серьезных IT компаний.
Второе что вам понадобится — это старый добрый Adobe Photoshop.
Поскольку Sketch работает исключительно с векторной графикой, а в ходе прокта вам может потребоваться обработать растровую картинку (скажем для какого-то фотографического фона или отретушировать фото которое вы собираетесь использовать в дизайне сайта или приложения) то что может быть лучше чем Adobe Photoshop?
Номер три — Principle. Инструмент для прототипирования и простой анимации.
Результат работы дизайнера заключается не только в том как выглядит программный продукт но и в том как он должен работать и взаимодействовать с пользователем. Как раз для этих целей и служит Principle. Софт тоже платный, стоимость составляет 129$. Аналогично с прошлыми — советую покупать! Будете пользоваться часто и с удовольствием. Как и Sketch подходит только для систем на macOS. В Principle вы будете делать анимации переходов между экранами, кликабельные прототипы и анимированные шоты на Dribbble.
Четыре — Invision app, инструмент публикации результатов вашей работы с возможностью комментирования.
Invision это онлайн платформа с помощью которой вы сможете легко показывать результаты своих трудов вашему заказчику. Присутствует возможность комментирования (с постановкой пина на комментируемом экране, что значительно упрощает коммуникацию с заказчиком). Инстумент можно использовать в бесплатной его версии (присутствует ограничение на количество одновременно загруженных проектов).
Пять — инструмент Overflow, для презентации вашего UX и UI заказчику.
Очень удобное и совершенно бесплатное приложение. Позволяет подобно Invision делиться результатами ваших трудов. Основное отличие заключается в том что тут нельзя оставлять комментарии, НО можно показывать стрелочками связи между экранами и элементами, что в разы облегчает обьяснение заказчику ваших UX идей и взаимодействий между экранами сайта или приложения.
Номер шесть — инструмент доставки ваших исходников разработчикам — Zeplin.
С пощью Zeplin вы передаете все ваши Sketch исходники разработчикам. В Zeplin они увидят все стили текста, цвета, размеры элементов а так же смогут скачать векторные изображения, иконки итд. Все что понадобится им в разарботке вашего проекта. Так же присутствует возможность комментирования экранов. Можно использовать бесплатную версию но есть ограничение на колличество проектов.
Почему именно эти шесть?
Все просто — это самые быстрые, самые удобные и полностью синхронизирующиеся между собой приложения. Можно много рассказывать почему это удобно но проще один раз попробовать. Вы разрабатываете дизайн в Sketch, нажимаете ctrl+cmd+e и вуаля — все исходники уже ждоступны разработчикам через Zeplin. Достаточно только добавить их адреса электронной почты в текущий проект. Нажимаете Sync to Overflow, и о чудо, все ваши дизайны уже доступны по ссылке в интернет, нужно только проставить взаимосвязи между элементами с помощью настраиваемых стрелочек если это необходимо для лучшей визуализации.
С этим набором софта процесс процесс разработки дизайна будет происходить максимально быстро, максимально удобно и как результат — максимально качественно!
Надеюсь данная статься была вам полезна. Желаю успехов на этом тернистом, но однозначно стоящем потраченного времени и сил пути — пути UI/UX дизайнера.
Автор: рыцарь со стволом
