Дизайн сайтов в программе Sketch 3

26 ноября 2015 · Даниил Соколовский

Инструменты

После публикации процесса работы над сайтом для лейбла Digital Om Productions меня просили рассказать, что это за странный графический редактор на скриншотах, в котором мы делали макеты. Рассказываю.

Последние лет десять я работал в Фотошопе. Безусловно, это лидер индустрии, проверенный временем. Но меня всегда не покидало чувство, что это как-то неправильно. Дизайнить сайт в Фотошопе это как резать хлеб швейцарским ножом: вроде с задачей справляется, но много лишнего мешается.

Фотошоп — как швейцарский нож

Несколько месяцев назад я задумался об альтернативном решении и нашел его: программа «Sketch 3». Ниже я расскажу об особенностях программы на личном опыте.

Что такое Скетч

Скетч — векторный графический редактор. В отличии от многофункционального Фотошопа, Скетч задуман как узкое нишевое решение для дизайна интерфейсов, сайтов, приложений и иконок. Программа доступна только для платформы Mac OS X и стоит 99$.

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

Программа Sketch 3 доступна только для платформы Mac OS X. Цена — 99$. www.sketchapp.com

Интерфейс

У Скетча минималистичный интерфейс. Даже слишком — после других программ-собратьев он выглядит как минимум непривычно, а пустота даже немного пугает. Когда открыл программу в первый раз, подумал: «текстовый редактор, что ли?».

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

В Скетче слои находятся слева, панель инстурментов — сверху, а инспектор с параметрами — справа. Классно, что инспектор контекстный: доступные параметры меняются в зависимости от выделенного объекта. Верхняя панель инструментов настраивается: туда можно вынести часто используемые объекты и поменять их местами. Хотя я этим практически не пользуясь, привык работать хоткеями.

Минималистичный интерфейс

Организация проектов

Больше всего я тащусь от внутренней организации проектов. Для этого в Скетче придуманы страницы («Pages») и доски («Artboards»). Последнее я называю просто артбордами, без перевода.

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

Я делаю так: на страницах располагаю действительные страницы сайта — например, «главная», «каталог», «контакты». А внутри каждой страницы делаю артборды под разные разрешения экранов и состояния элементов.

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

Это просто восхитительно при работе над адаптивными сайтами. А самый кайф, что на выходе получается один файл на весь проект. Представьте сайт из двадцати страниц под три разных разрешения, плюс страницы ошибок и состояний элементов — и всё это в одном структурированном файле.

Символы

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

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

И еще

  • Скетч рендерит текст практически так же, как браузер. Наконец-то текст в макетах и свёрстанных HTML-страницах выглядит одинаково.
  • Умные направляющие и сетка. Здесь ничего сверх-нового, но эти функции сделаны удобно и работают прекрасно.
  • Если изменить выравнивание текстового слоя, то текст не съезжает, а остаётся на месте. Мелочь, но в Фотошопе иногда бесила :-)
  • Скетч быстрый. То ли сказывается нативность приложения под OS X, то ли отсутствие тяжелого обвеса функций, не знаю. Но факт — приложение работает на порядок быстрее и плавнее Фотошопа.

Помимо этого в программе еще полно мелких приятных плюшек, но описывать всё-всё не буду — оставлю на радость исследователям, которые захотят попробовать Скетч сами.

Хотя в новой версии Фотошопа CC 2015 добавили некоторые функции (например, артборды), он по-прежнему остаётся монструозной программой, которая во многом проигрывает Скетчу как специализированному решению для дизайна интерфейсов.

Вёрстка из макетов

Первый сайт я нарисовал в Скетче буквально на одном дыхании, не переставая удивляться: «ух ты, здесь всё такое классное!». Но дизайн — лишь один этап в создании сайтов, впереди еще вёрстка и разработка.

Когда дошла очередь до экспорта проекта, я наконец-то увидел форматы файлов: JPG, GIF, TIFF, PDF, EPS, SVG. Формата PSD-то нет. Скетч — программа только для Мака, а наш разработчик Максим— на Виндоусе. Понимаете, да? :-) «Упс!»

В итоге ему пришлось верстать сайт из макетов JPG — не самое большое удовольствие. Я расстроился и даже с неохотой думал вернуться к привычному Фотошопу, но потом нашел замечательный сервис — Цепелин.

Цепелин (www.zeplin.io) — это такая прослойка между дизайнерами на Маке и программистами, которые традиционно сидят на Винде или Линуксе.

Zeplin. Бесплатно для одного активного проекта, платные тарифы от 15$ в месяц. Нам пока хватает бесплатного аккаунта

Работает это так: дизайнер на Маке экспортирует макеты из Скетча в десктопное приложение Цепелина (делается ровно в один клик), после чего проект появляется в вебе. В проект приглашается разработчик, и вуаля, — он видит макеты через веб-интерфейс.

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

Вид на макет страницы «глазами разработчика» через веб-интерфейс Цепелина

По словам Максима, так оказалось верстать даже удобнее, чем из Фотошопа. Поэтому единственный минус Скетча — невозможность экспорта в формате PSD — обернулся даже плюсом.

Всё, теперь дизайн сайтов — только в Скетче.

Читайте также

Как мы сверстали и оформили книгу

Как мы сверстали и оформили книгу

Представляем наше первое книжное издание! Мы очень рады, что довелось открыть для себя это новое направление в дизайне. Работа над оформлением книги оказалась не легкой, но интересной. Тут мы покажем процесс работы и всякие закулисные подробности.

10 августа 2016
Процесс работы над сайтом Epson для партнеров

Процесс работы над сайтом Epson для партнеров

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

11 октября 2016
Как перестать откладывать дела на потом: 4 совета о прокрастинации

Как перестать откладывать дела на потом: 4 совета о прокрастинации

Типичные фразы-отмазки в голове прокрастинатора, их причины, и как с ними бороться.

5 октября 2016