Веб-дизайнеры. Что нас ждет

Умение вовремя замечать тренды — одно из обязательных условий эффективного развития it-компании.

Мы решили рассказать один из эпизодов принятия решения по организации процесса разработки сайтов. А именно, почему мы стали использовать Sketch и Zeplin на этапе дизайна и что это такое.

Photoshop — наше всё (нет).

Я уверен, что если провести исследование среди веб-дизайнеров и задать всего один вопрос: “С какого ПО начался ваш путь в данной профессии?”, подавляющее большинство ответит, что это был графический редактор Photoshop от компании Adobe. И причина этому очень простая — так сложилось исторически. Еще лет 5-7 назад серьезных альтернатив, о которых мы поговорим далее, на рынке просто не было. Кто-то, возможно, вспомнит совсем старый визуальный HTML-редактор Dreamweaver, который поддерживался компанией Macromedia (до 2005 года), но графика создавалась преимущественно в Photoshop. Кто-то даже использовал или использует и по сей день Illustrator от тех же Adobe. Но индустрия веб-разработок все еще формируется и только набирает обороты. Я говорю не о конкретных технологиях или языках программирования. Я говорю о процессе разработки дизайн-проекта в целом, от момента проектирования до создания интерактивных интерфейсов.

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

  1. Тяжеловесность psd-файлов при разработке крупных проектов. Порой, если в дизайне используется большое количество графики, размер проекта может достигать сотен мегабайт. А Photoshop, как известно, весьма прожорливая программа относительно ресурсов компьютера.
  2. Сложность внесения изменений в элементы интерфейса, которые используются много раз в разных разделах сайта. Особенно, если эти разделы раскиданы в отдельные файлы. Частично эта проблема решается созданием смарт-объектов и библиотек, но, все же, это не всегда удобно.
  3. Необходимость создания разметки страниц и нарезание макетов на отдельные графические элементы при передаче проекта верстальщикам. Поскольку верстка веб-шаблонов требует точных размеров блоков, отступов и описания поведения интерактивных элементов, дизайнеру требуется перевести весь дизайн проект, на язык понятный верстальщику. Эта задача решалась использованием специальных плагинов для нанесения разметки в Photoshop, например Ink, и составлением отдельных файлов GUI (graphical user interface), в которых собраны и описаны все элементы интерфейса. Справедливости ради, стоит отметить, что GUI является хорошим тоном в разработке дизайна, но этот процесс выполнялся вручную и отнимал драгоценное время, как и нанесение разметки.
  4. Макеты, созданные в Photoshop статичны. Во-первых, уходит масса времени, чтобы отрисовать анимации движения, поведение различных кнопок, блоков и других интерактивных элементов. Во-вторых, если для верстальщика данный подход понятен, то демонстрация макетов заказчику превращается не в оценку всей картины, а объяснение нюансов поведения интерфейса.
  5. С активным развитием адаптивной верстки появилась необходимость разработки макетов не только под разрешения настольных мониторов, но и для мобильных устройств. В случае с Photoshop это увеличивало время работы в 1,5-2 раза.
  6. Большая стоимость лицензии Photoshop. Думаю, данный пункт не требует каких-либо комментариев.

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

Sketch VS Experience Design

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

Прежде всего, это специализированная программа для прототипирования и дизайна, в ней нет избыточного функционала, рассчитанного на художников или фотографов. Весь инструментарий и функционал рассчитаны на работу над дизайном сайтов и мобильных приложений. Это векторный редактор, что значительно улучшает качество макетов и позволяет безболезненно масштабировать элементы. Все объекты подсвечиваются и просчитывается расстояние между ними. Возможность создания артбордов с разрешением различных устройств облегчают процесс разработки адаптивного дизайна. Возможности экспорта элементов в отдельные файлы упрощают подготовку проекта к передаче на верстку. Нельзя не упомянуть и о стоимости Sketch, которая составляет, на момент написания статьи, примерно 5 742 рубля за годовую подписку, против 15 456 рублей за Photoshop, также за годовую подписку. Разница значительная. Но есть одно неприятное ограничение в использовании Sketch — существует версия только под macOS, Windows не поддерживается. Пожалуй, это главная причина, почему многие дизайнеры не перешли на использование данного редактора.

В свою очередь, компания Adobe не захотев сдавать позиции выпустила на рынок свой новый продукт под названием Adobe XD (Experience design). Некоторое время программа находилась в статусе бета-версии и была бесплатной, но в данный момент продается по месячной или годовой подписке самостоятельно или в полном наборе приложений линейки CC (Creative Cloud). Стоимость годового плана составляет 7 728 рублей, что немногим дороже Sketch. Функционально продукт развивается в том же направлении, что и Sketch, претендуя на позицию основного конкурента. И не зря. Во-первых, Adobe — гигант и старожил индустрии, обладающий ресурсами для разработки качественного ПО. Во-вторых, инструментарий не уступает конкуренту. В-третьих, компания выпустила версии как под Windows, так и под macOS.

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

В 2017 году сотрудники нашей студии побывали на конференции D2D DevPro. Всегда полезно заниматься самообразованием и общаться с коллегами по цеху, как с дизайнерами, так и с разработчиками. В процессе общения интересовались как живут дизайнеры крупных компаний, какие инструменты используют, как находят общий язык с верстальщиками. Как мы и предполагали, у большинства компаний стоял подобный выбор инструмента, что окончательно убедило нас в необходимости перехода. Стоит отметить, что у меня и моего коллеги дизайнера на тот момент уже была в распоряжении техника на базе macOS. Поэтому решили в пользу продукта, уже зарекомендовавшего себя на рынке, в пользу Sketch. Но это было не единственным шагом к улучшению эффективности нашей работы. В одном из докладов мы услышали об онлайн-сервисе Zeplin.

Zeplin — недостающее звено

Оставалась проблема. Как убрать этап разметки страниц? Как упростить передачу элементов интерфейса и изображений от дизайнера верстальщику? И как научить их говорить на одном языке? Очевидно, что сверстанная страница сайта должна максимально соответствовать макету и задумке дизайнера. Но как этого достичь не усаживая этих специалистов перед одним монитором, тратя на объяснения и правки часы рабочего времени? На выручку пришел сервис Zeplin. Он позволяет импортировать проекты из Sketch без каких либо изменений или искажений, и дает верстальщику полную картину того, что необходимо сделать. Доступна информация о любом объекте, его размеры, отступы, цвет, расстояние до других объектов. Функция экспорта позволяет быстро выгрузить всю графику или SVG-объекты в отдельные файлы. Немаловажным является то, что Zeplin это онлайн-сервис, т. е. работает в браузере, а значит не требует установки дополнительного ПО на компьютер верстальщиков, которые, как правило, предпочитают системы Linux, по крайней мере в нашей компании.

На данный момент связка Sketch-Zeplin принята в нашей студии как основа разработки дизайна. Photoshop на подхвате, куда же без него. И это действительно работает. Эффективность взаимодействия и скорость работы значительно выросли. Конечно, мы не перестанем следить за развитием других продуктов. Adobe XD имеет все шансы выйти в лидеры. И переход от одного редактора к другому будет рассматриваться исходя из ценовой целесообразности и повышения эффективности работы. Особенно в свете, немаловажной способности Zeplin импортировать данные не только из Sketch, но и из Adobe XD и даже Photoshop!

Куда ветер дует?

Очевидно, что определилась тенденция сближения процессов разработки дизайн-макетов и верстки шаблонов. Photoshop не давал возможности увидеть как макет будет выглядеть после работы верстальщика. Статичность и отсутствие интерактивности усложняет задачу объяснить заказчику или разработчику как должен вести себя интерфейс при взаимодействии с ним пользователя. Конечно, существуют решения, позволяющие сделать, скажем, анимацию элементов на странице сайта или экране мобильного приложения. Для того же Sketch есть специальный плагин. Или, к примеру, программа Principle, которая также умеет импортировать исходники Sketch и создавать анимацию. Но это путь добавления дополнительного ПО в процесс разработки, что, несмотря на интересные возможности, является усложнением. Возникает логичный вопрос: не должен ли дизайн разрабатываться в среде, в которой будет работать конечный продукт, т. е. в браузере? Я говорю о таком сервисе, где будет доступен функционал, позволяющий создать дизайн-макет, визуально и по поведению идентичный конечному продукту. Тогда возникает еще один вопрос: зачем, после создания такого макета, верстальщику воспроизводить тоже самое средствами HTML и CSS? Такая новая парадигма стирает грани между профессиями дизайнера и верстальщика. Что, в свою очередь, несет целый набор ограничений как в технологиях, так и в компетенциях специалистов. Тема спорная, но, тем не менее, об этом уже говорят. И пусть на рынке на данный момент отсутствует единый кроссплатформенный  инструмент для дизайна и верстки, не исключено, что индустрия веб-разработки будет двигаться в этом направлении. Может однажды Sketch, Adobe XD или какой-либо другой продукт произведут новый прорыв и дадут нам новые возможности. А пока, продолжаем совершенствоваться и следить за направлением ветра.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *