Окей, начнем с того, что сейчас есть очень много инструментов для создания дизайна, и споры вокруг разных дизайн-систем (дурацкое название) не утихают, поскольку это очень важная тема как для дизайнеров-фрилансеров, так и для компаний. Я работаю с большой командой дизайнеров, разработчиков и бизнесменов. Как дизайнер, я еще веду несколько фриланс-проектов. Все эти задачи создают разные требования, особенно когда дело доходит до инструментов и систем, поэтому жизненно необходимо знать, какой инструмент лучше подходит для той или иной задачи.
Я работаю как на ПК, так и на Mac, поэтому все инструменты в этом списке — либо мультиплатформенные, либо имеют хорошую альтернативу. Пожалуйста, помните, что я не подстрекаю к использованию альтернатив — я опробовал большинство из них, но ваш личный опыт может отличаться от моего.
Перед тем, как начать, позвольте подчеркнуть кое-что важное: я не представляю ни одну из этих компаний или продуктов, и не получаю от них никаких плюшек. Все это — мои личные любимчики среди программ, и все описания основаны на моем личном опыте использования этих продуктов в работе.
Итак, давайте же без дальнейших проволочек, взглянем на мои подборки дизайнерских систем для личного и профессионального использования.
Я знаю, знаю. Вы пришли сюда за крутыми новыми инструментами, а я вам первым делом советую взять Ручку и Бумагу. Уж извините. Но выслушайте до конца, потому что я считаю, что это лучший способ начать работать над новой идеей.
Преимущество работы на бумаге заключается в том, что вы можете быстро набросать и при необходимости изменить черновик, не зацикливаясь пока на деталях. Не бывает идей, которые сразу возникают продуманными с точностью до пикселя. Так что, избавляя себя от деталей, вы сразу исключаете вариант, что мотивация исчезнет на начальном этапе.
Кстати, я не просто так назвал именно Ручку. Не используйте карандаш, или что-то еще, что легко стирается. Если что-то не получилось, просто идите дальше. Мне этот совет дали в прошлом году — да, это заполнило мою записную книжку обрывками и лоскутами проектов, но и значительно повысило скорость работы и креативность.
Другим важным элементов дизайна взаимодействия с пользователем (User experience design, UX) является идея пути клиента, и за это я люблю Whimsical(браузер).
У Whimsical есть легкий в использовании и хорошо выглядящий инструмент для создания блок-схем. Предупреждаю, что при цене в 10 долларов в месяц, инструмент получится весьма дорогостоящим, но есть в нем что-то, делающее его интуитивно понятным и удобным в работе.
В Whimsical легко делать комплексные схемы. На блок-схему, которую вы видите, у меня ушло около 15 минут работы, и все благодаря продуманным дизайнерским решениям, понятному интерфейсу и горячим клавишам.
Я не хочу перехваливать этот инструмент, просто попробуйте сами. Эта программа останется с вами надолго. Схемы в этой статье сделаны в Whimsical, и мы вернемся к ним позже.
Если вам не подходит Whimsical, то такие схемы довольно легко создаются с помощью других инструментов или же ручки и бумаги. Чтобы почерпнуть вдохновение, я использую два сайта:DribbbleиMuzli.
Dribble прекрасно подходит для быстрого поиска новых идей, особенно если вам нужно просто визуальное вдохновение, а не планы для комплексных систем и продуктов. Отличной идеей будет добавить в избранное нескольких дизайнеров или проектов, к которым потом можно возвращаться и искать больше похожего. Сайт хорошо курируется, так что разгребать массу плохих идей не придется.
Приложение для Хрома Muzli — неплохое, но, я считаю, что там бывают как 100% попадания, так и полнейшие промахи. Что мне реально нравится в Muzli, так это их недельная подборка вдохновения (Weekly Inspiration) и подборкаUX Interaction на Medium. Обычно попадаются по-настоящему интересные и разнообразные дизайны, и почти в каждом выпуске находятся интересные новинки.
Также на Medium можно найти феноменальных дизайнеров, на которых стоит подписаться. Если вы работаете над проектом в любом командном формате, рано или поздно вам захочется поделиться работой. Выслать картинки электронной почтой это одно дело, но давайте же оптимизируем этот процесс.
Первым шагом будетZeplin(Mac, ПК, браузер). Zeplin имеет много крутых функций, но мы сконцентрируемся на нескольких ключевых. Во-первых, Zeplin прекрасно подходит для передачи работы или совместной работы над проектом. Вы можете добавить пользователей, можете скачать исходники и оставлять комментарии и отзывы о дизайне. Этот вариант идеально подойдет тем, у кого есть несколько ключевых членов команды, которых нужно подключить к работе над дизайном. Во-вторых, программа умеет генерировать гайды по стилю, пока вы работаете над дизайном. Это упрощает работу коллегам, позволяя улавливать цветовые схемы и стили. И последнее — Zeplin создан для экспорта дизайна в код. Мы к этому еще вернемся.
Zeplin идеально подходит для координации с другими участниками проекта, но как быть, если вы работаете с другими дизайнерами? Вам понадобитсяконтроль версий. Возможно, вы впервые слышите этот термин — он куда более распространен в программировании – но, по сути, речь идет о ведении истории изменений.
За это я очень, очень люблю Trunk(Mac App, браузер).
Trunk — это по сути Github для дизайнеров. Вам нужно сообщить Trunk, за какими файлами нужно следить, и программа будет мониторить изменения этого файла. После внесения изменений, Trunk записывает в журнал, кем были сделаны изменения и какие именно. Пользователь, внесший изменения, может оставить к ним комментарии с пояснениями. Trunk упрощает работу для дизайнеров, сотрудничающих с другими дизайнерами, поскольку не возникнет путаницы во внесенных изменениях. Можно даже откатить проект до предыдущей версии, или разобраться с конфликтующими изменениями, ничего не удаляя. А еще можно просмотреть полную историю изменений, что, кстати, обычно весьма занимательно.
Заметка: Trunk совместим только с файлами Sketch и Photoshop. Для пользователей Figma в Figma есть встроенная функция контроля версий.
Альтернативы:Abstract,Kactus(только для файлов Sketch).
Окей, итак, у вас появилась новая грандиозная идея, и вы поделились ею с командой. Команда готова посмотреть на парочку дизайнов. Что дальше?
Итак, начнем со схем с блоками и связями. Задача состоит в том, чтобы набросать вариант того, как возможно будет выглядеть ваше приложение, чтобы быстро получить отзывы уже на ранней стадии разработки. Вот тут-то на помощь снова приходит наш старый добрый друг Whimsical. Whimsical не только подходит для создания замечательных блок-схем, но и для каркасного моделирования. Стоит заметить, что с этой программой у меня меньше всего опыта, так что ваши впечатления могут отличаться. Так что, на самом деле нет необходимости в приложении специализирующемся исключительно на каркасном моделировании. Еще одна парочка старых добрых друзей — ручка и бумага — тоже справились бы с задачей. Дизайнерские инструменты вроде Sketch или Figma тоже. Так зачем же использовать именно Whimsical? Если кратко, потому что это быстро и весело. В Whimsical есть библиотека компонентов, с низкой точностью воспроизведения; все, начиная с кнопок, и заканчивая тумблерами, флажками, полями ввода, ползунками, полосами табуляции… Ну вы поняли.
Все работает с помощью гайдов, так что процесс похож на игру с конструктором лего. Берете парочку основным компонентов, лепите все в кучу, и вот приблизительный дизайн уже готов. Это отличный способ набросать дизайн приложения очень, очень быстро. Whimsical также позволяет делиться работой с другими, и комментировать, так что вы сможете получить отзывы сразу на месте.
Продолжение следует…
0 комментариев