Дизайн сайтов в программе 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 — обернулся даже плюсом.

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

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

Как создавать и запускать успешные проекты

Как создавать и запускать успешные проекты

Избранные цитаты из книги «Getting Real».

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

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

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

11 октября 2016
Как мы сделали логотип архитектора

Как мы сделали логотип архитектора

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

2 сентября 2015