Photoshop, Sketch инструментарий UI/UX-дизайнеров: что выбрать для разработки интерфейсов?

    В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
    Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.




    Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался Adobe Photoshop. Однако, недавно первенство компании Adobe на рынке инструментария для digital дизайнеров пошатнулось, в 2012 году компания Bohemian Coding выпустила Sketch. Sketch – это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих. На данный момент актуальной версией является Sketch 3. За эти 3,5 года компания Bohemian Coding проделала огромную работу по улучшению своего продукта, зафиксило множество багов, наростило функциональность и собственно выростила серъезного конкурента Photoshop. Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop. Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком. Поэтому правильно было бы сделать не сравнительный обзор, как это делают многие, а осветить основные преимущества и свойства каждого из редакторов для конкретного кейса.


    Назначение




    Именно поэтому считаю корректным первым пунктом показать назначение каждой из программ.
    Photoshop в основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Он незаменим для ретуши фото, обработки изображений. Но функционал предназначенный для работы с векторной графикой в нем достаточно условный. Многие поклонники Adobe возразят мне, но тогда возникает логичный вопрос: зачем в арсенале Adobe есть отдельный векторный редактор Illustrator, если Photoshop умеет все? Именно наличие двух интерфейсов усложняет работу и требует дополнительного времени при решении задач по работе с векторной графикой.
    Sketch же изначально заточен на работу с вектором, поскольку разработка интерфейсов подразумевает создание прототипов, фреймворков, иконок, UI-элементов, а зачастую эти элементы должны быть векторными.
    Таким образом, чтобы выбрать каким из редакторов пользоваться, нужно понять, какие задачи придется решать с помощью данного инструментария.

    Стоимость




    Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$, и для разных регионов эта цифра может изменяться. Но суть остается та же. В отличии от Adobe компания Bohemian Coding пошла по обратному пути: Sketch продается за 99$, это единоразовый платеж и все обновления пользователь получает бесплатно. Возможно в дальнейшем финансовая стратегия компании изменится, но пока они завоевывают рынок таким образом. Именно этот фактор, наверняка, сыграет роль в масштабах компании. Хотя и для фрилансеров немалозначимым является финансовое планирование своих ресурсов.

    Мультиплатформенность




    Еще одним значимым аргументом в выборе инструментария для дизайнеров станет платформа, на которой работает тот или иной софт. В нашей компании дизайнеры работают исключительно на Mac устройствах и большинство front-end разработчиков тоже. Поэтому тот факт, что Sketch существует исключительно для OS X, не стал для нас проблемой. А вот для дизайнеров, в распоряжении которых Windows устройства, это явно не решабельный вопрос. Конечно, можно заморочиться и поставить эмулятор OS X на винде, однако ничего путнего из этого может не получиться, максимум вы загрузите свой процессор и операционную систему обработкой ненужных процессов. В отличии от Sketch, Photoshop имеет отдельные версии для Windows и OS X. Поэтому в вопросе мультиплатформенности неизменным лидером остается Adobe Photoshop. Но, опять-таки, то, что на первый взгляд кажется недостатком, является сильным преимуществом в конкретных условиях. Поскольку Sketch существует только под Mac, в нем весь создаваемый контент отрисовывается с помощью средств маковской оси, используется стандартный графический движок от Apple. Именно этим разработчики добились максимальной продуктивности и быстроты работы.

    Быстродействие и объем загрузочного файла




    Являясь нативным Cocoa приложением, Sketch по минимуму использует нестандартные интерфейсные элементы, поэтому он имеет маленький объем. Загрузочный файл весит всего около 22 Мб. Он достаточно хорошо оптимизирован, в отличии от Photoshop, объем установочного файла которого составляет около 1 Гб.

    Интеграция




    Важным моментом для любого инструментария является его способность интеграции с другим софтом. Например, после того, как макет сайта полностью проработан и готов к передаче в отдел front-end разработки, становится вопрос непосредственно самой передачи исходников для дальнейшего развития проекта. На сегодняшний день и Sketch, и Photoshop имеют серьезные средства интеграции. Оба редактора могут экспортировать материалы в софт для коммуникации между разработчиками и дизайнерами, такие как Avocode, Zeplin и прочие. Если рассматривать этот кейс для компании, то данное решение крайне важно, оно помогает сэкономить деньги на дополнительные экземпляры графических редакторов для front-end разработчиков.

    Обучение




    Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников. Существуют обучающие ресурсы как платные, так и бесплатные. Качество материалов также очень сильно разнится: от примитивных статей неавторитетных авторов до идеально структурированных последовательных видеоуроков квалифицированных профессиональных тренеров. В силу того, что Sketch относительно молодой софт, то и количество обучающих ресурсов не сравнимо меньше, чем у Photoshop. И, как правило, это платные материалы. Например, на известном образовательном ресурсе Udemi менее 40 курсов по Sketch. Однако, уже существуют и обзор от практиков Sketch. Надеюсь, со временем количество обучающих метриалов в сети будет увеличиваться прапорционально с ростом популярности графического редактора Sketch.

    Конкуренция – двигатель прогресса


    Существует масса других параметров и характеристик Photoshop и Sketch, охватить их все достаточно сложно, но вывод однозначен: каждый из рассмотренных мною графических редакторов хорош для решения конкретной задачи. Если рассматривать разработку интерфейсов, то мы в компании для себя сделали однозначный выбор в пользу Sketch. Этому способствовал комплекс факторов, перечисленных в данной статье. Photoshop по прежнему является лидером в работе с растровой графикой, но нельзя игнорировать тот факт, что появление Sketch дало сильный толчок в развитии Photoshop. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Что выбираете вы для разработки интерфейсов?

    Поделиться публикацией

    Комментарии 36

      +5
      Как по мне, не совсем корректно сравнивать приложения, одно из которых доступно только для OS X, а второе кроссплатформенно.
      Scetch крут, был бы под винды, пользовался бы.
        –1
        Для быстрого проектирования пользуемся Axure RP. Очень удобный софт при обсуждении проекта с заказчиком. После того как концепция утверждена, то все компануем в Photoshop, а для вектора используем Illustrator
          +1
          Как насчёт сравнения попроще:
          Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов.

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

            Что касается фирменного стиля, то можно обойтись одним Photoshop. А если говорить про разработку интерфейса e-commerce например, то Sketch на пару с Axure может решить эту задачу.
            +1
            крайне странно не увидеть сравнение на тему того, насколько оба софта вообще подходят для разработки интерфейсов. Ребята из адоби твердолобики, и никак не могут понять, что smart object — это галимый костыль, а невозможность расшарить стиль на несколько слоев/групп с возможностью обновления — это, по сути, приговор быстрой работе.

            с другой стороны, авторы скетча тоже те еще упертыши. Причина, по которой скетча нет на винде — это лицензирование и «невозможность» защиты. Только вот почему-то Balsamiq нормально себе живут подо всеми платформами.
              +1
              Легко назвать упёртостью нежелание переписывать вообще всё полностью с нуля. Sketch очень завязан на Core Graphics, во многом благодаря которому ему и удаётся весить 20Мб против 1Гб, выглядеть легковесно и нативно. Выпуск версии под Windows — это такая головная боль, которую они, всего скорей, не потянут.
                0
                Я не до конца верно выразился. Я могу понять в условиях отсутствия на вине аналогов Core Graphic нежелание начинать с win-версии или сразу с кроссплатформенной разработки. Но сейчас есть вполне реальный риск потерять свой сегмент рынка, не имея версии под win. Прошло уже несколько лет, и за это время можно решить любые проблемы по разработке под винду, учитывая, что есть полное понимание, какой функционал требуется.
              +1
              А чем Axure не подошел?

              Photoshop для этих целей то еще извращение…
                0
                Axure очень хорошо для детализированных прототипов, если нужно просто накидать структуру то есть намного проще инструменты.
                0
                Перешел на Justinmind и очень доволен.
                  +4
                  Со дня на день зарелизят Comet и разработку Sketch можно будет сворачивать.
                  Заодно начать применять Photoshop по прямому назначению (для ретуши).

                  image
                  Мне кажется, причина того что Комета взлетит — в кроссплатформенности и авторитете Adobe.
                    +3
                    Сперва отнесся к вашему комментарию негативно, но после того как посмотрел промо-материалы к Comet, стало грустно за Sketch.
                    Спасибо за наводку.
                      0
                      Но без Скетча Адоб бы не и чесался делать новый продукт. Конкуренция это гуд.
                        0
                        100%
                        0
                        Есть еще ребята из Serif с их Affinty Designer (вполне конкурент иллюстратора и недавних пор и скетча тоже) и Affinty Photo (конкурент фотошопа в фоторетуши).
                          0
                          Пробовал пару раз рисовать в AD, продукт пока сырой и иллюстратору не конкурент.
                        0
                        Заодно начать применять Photoshop по прямому назначению (для ретуши).
                        Не зря же в Photoshop'е пилят Design Space.
                        IMHO, рабочий процесс вполне может быть таким:
                        Comet (прототипирование) => Photoshop (доработка напильником и экспорт asset'ов).
                          0
                          Спасибо за наводку! Подписался.
                          Выглядит реально как надо
                            0
                            Может я и ошибаюсь, да и рано еще говорить до релиза, но мне кажется (по просмотренным материалам), что приложение в основном пригодно для модного плоского и простого дизайна. Если мода повернется обратно, либо просто надо нарисовать чего-то нестандартное (интерфейс игры со сложно текстурированными кнопками, например), то будет всё уже не так круто, как на презентациях.
                              0
                              Два месяца наблюдаю за движением кометы, и пока выводы крайне неутешительные. прогресс нулевой, функциональность нулевая. радует пока лишь скорость работы.
                                0
                                Пощупал "Комету" (Adobe Experience Design CC) – сделали упор на интерактив и "оживление" прототипа и полностью проигнорировали верстальщиков — нет возможности смотреть/копировать css объектов. Переходить со скетча пока желание не возникло.

                                Интересно какой шаг будет следующим? Или скетч добавит интерактив, или Adobe Experience Design CC добавит инструменты для верстальщиков.
                                  0
                                  Там пока и для дизайнеров все очень сыро
                                +2
                                Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$, и для разных регионов эта цифра может изменяться.

                                Я покупал в конце декабря годовую подписку на именно Photoshop. Обошлось в 3588 рублей за весь год. План назывался «План Creative Cloud для фотографов (на один год, с предварительной оплатой, продление вручную)». Там доступен только фотошоп. Если поделить, получается 299 рублей в месяц. В долларах это, по текущему курсу, составляет $3,91. То есть, далеко не 20 долларов в месяц — в 5 раз меньше.
                                  0
                                  Речь идет о «Плане на отдельное приложение» непосредственно для Украины.
                                    0
                                    Обратите внимание на план слева от того, что вы обводили. Это как раз план, ограниченный фотошопом. Это во первых. Во вторых, у меня показывались такие же суммы в долларах, пока я не перешёл к оплате. Теоретически, у меня должно было получиться 120 долларов за год за «План для фотографов». Когда я перешёл к оплате, мне написали, что я должен заплатить 3588 рублей (иенно в рублях уже была написана сумма), и с карты у меня в итоге списалось после покупки $52.69 именно в долларах.

                                    Опять же, про план: вы сами видите на картинке, что есть план конкретно для фотошопа, который стоит в два раза дешевле. Зачем нужно выбирать «План на отдельное приложение», если этим отдельным приложением у вас будет фотошоп? Ладно, если бы вы покупали Premiere или After Effects — для них нет отдельных планов. Но с фотошопом нет смысла переплачивать в два раза.
                                      0
                                      Хотя, вру. Списывалось с карты в рублях. Это у меня просто банк в отчёте показал сумму в долларах в $52.69. В детялях платежа всё-таки было написано, что снималось рублями.
                                      0
                                      По поводу цен, по моим наблюдениям, Adobe старается не сильно привязываться к скачкам курса в странах, где есть их представительство. В Украине, например, представительство Adobe есть. В ситуации с рублём, они заморозили внутренний курс на, примерно, 30-ти рублях за доллар. Вполне может быть, что при при оплате с территории Украины гривнами, они посчитают курс $1 = 8грн. И, в итоге, вы вместо 20 долларов (для того плана, который вы обводили рамкой) фактически будете платить эквивалент 7-ми долларов, если я правильно понимаю текущий курс гривны.
                                    –2
                                    Я сейчас, возможно, кого-то шокирую, но для дизайна интерфейсов лучше всего использовать HTML + CSS + JS + SVG + Polymer (веб-компоненты). Когда вы постигнете дзен создания макетов и прототипов сразу в коде, все эти споры по поводу фотошопов, скетчей, экшуров и бальзамиков будут вас только умилять.
                                      +1
                                      Не соглашусь с Вам. Когда Вы работаете со своим проектом — пожалуйста, Вы тут царь. Но когда Вы(студия) работаете по заказу, то зачастую только прототип созданный в редакторе(photoshop, sketch, axure RP и другие) будет наименьшей затратой человеческих ресурсов и времени, чем скажем уже верстать этот прототип в HTML + CSS + JS — заказчику может не понравится Ваша работа и придется переделывать.
                                        0
                                        Я говорю именно про промышленную разработку и участие в этой разработке на всех этапах жизненного цикла сложного продукта (CI в UX/UI дизайне). И я изначально не надеюсь на то, что эта моя, для кого-то ортодоксальная мысль, будет легко принята аудиторией, потому как на эту тему можно написать длинную статью, и трудно, наверное, быть убедительным в паре строчек комментария. Но я знаю о чем говорю, потому что уже давно именно этим профессионально занимаюсь. Фокус в том, что реальные трудозатраты при сопоставлении этих подходов вполне сравнимы, но в случае использования подхода «дизайн в коде», качество решений несравнимо выше, что существенно сокращает количество проблем (и, соответственно, трудозатраты) на следующих, более дорогих этапах и в принципе способствует гораздо более органичному рабочему потоку именно в командной разработке. А начинал я тоже с фотошопов с акшурами, да…
                                        0
                                        Только, чтоб адекватно и быстро мокапить в коде, надо хорошо знать HTML + CSS + JS + SVG + Polymer и много других опасных слов. А в sketch макет можно наклацать мышкой за пару часов с нулевыми знаниями кода.
                                          0
                                          Чтобы адекватно и быстро заниматься UX-дизайном в принципе нужно очень много чего знать. С нулевыми знаниями наклацать можно только примитивный лэндинг или страничку Васи Пупкина, которую сердитый фронтэндер вам еще десять раз вернет на доработку.
                                        +1
                                        Просто для понимания того как может создаваться макет приложения из Polymer (веб-компонентов)

                                          +1
                                          благодаря Sketch я полюбил делать простые интерфейсы
                                          фотошоп теперь и открывать не хочется
                                            0
                                            мне любопытно, когда наконец первый дельный пост появится в UI хабе в этом году
                                              0
                                              Время фотошопа прошло, и если вы еще не с нами, поторопитесь...

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

                                              Самое читаемое