Дизайн сайтов в программе Sketch 3
После публикации процесса работы над сайтом для лейбла Digital Om Productions меня просили рассказать, что это за странный графический редактор на скриншотах, в котором мы делали макеты. Рассказываю.
Последние лет десять я работал в Фотошопе. Безусловно, это лидер индустрии, проверенный временем. Но меня всегда не покидало чувство, что это как-то неправильно. Дизайнить сайт в Фотошопе это как резать хлеб швейцарским ножом: вроде с задачей справляется, но много лишнего мешается.
Несколько месяцев назад я задумался об альтернативном решении и нашел его: программа “Sketch 3”. Ниже я расскажу об особенностях программы на личном опыте.
Что такое Скетч
Скетч — векторный графический редактор. В отличии от многофункционального Фотошопа, Скетч задуман как узкое нишевое решение для дизайна интерфейсов, сайтов, приложений и иконок. Программа доступна только для платформы Mac OS X и стоит 99$.
Разработчики — компания с интересным названием “Bohemian Coding”. В команде работают всего десять человек, а офис находится в Гаагах. На мой взгляд это хорошо: небольшая команда проще адаптируется к изменениям в индустрии и больше прислушивается к нуждам пользователей, чем огромные корпорации.
Интерфейс
У Скетча минималистичный интерфейс. Даже слишком — после других программ-собратьев он выглядит как минимум непривычно, а пустота даже немного пугает. Когда открыл программу в первый раз, подумал: “текстовый редактор, что ли?”.
Потом понял, что это офигительно — рабочее пространство не перекрывается инструментами, окошками, менюшками и другими элементами, ставшими классикой оформления графических программ.
В Скетче слои находятся слева, панель инстурментов — сверху, а инспектор с параметрами — справа. Классно, что инспектор контекстный: доступные параметры меняются в зависимости от выделенного объекта. Верхняя панель инструментов настраивается: туда можно вынести часто используемые объекты и поменять их местами. Хотя я этим практически не пользуясь, привык работать хоткеями.
Организация проектов
Больше всего я тащусь от внутренней организации проектов. Для этого в Скетче придуманы страницы (“Pages”) и доски (“Artboards”). Последнее я называю просто артбордами, без перевода.
Артборды — это контейнеры для помещения внутрь слоёв, папок, форм и других объектов. Внутри страниц можно создать сколько угодно таких артбордов.
Я делаю так: на страницах располагаю действительные страницы сайта — например, “главная”, “каталог”, “контакты”. А внутри каждой страницы делаю артборды под разные разрешения экранов и состояния элементов.
В данный момент я не могу показать сайты, над которыми работаю, поэтому приведу пример на новом проекте. Вот как это выглядит:
Это просто восхитительно при работе над адаптивными сайтами. А самый кайф, что на выходе получается один файл на весь проект. Представьте сайт из двадцати страниц под три разных разрешения, плюс страницы ошибок и состояний элементов — и всё это в одном структурированном файле.
Символы
Одна и лучших функций, которая еще и шикарно реализована. Символы — это группы объектов, которые можно использовать сколько угодно раз, но при этом у слоёв внутри группы общие стили — изменили в одном месте, изменилось везде. Типа смарт-объектов, только круче и удобнее.
Представьте дизайн сайта или мобильного приложения с сотней различных экранов, но общими элементами, типа меню. И нужно чуть-чуть изменить что-нибудь в этом общем элементе — изменить цвет фона или добавить подчеркивание текста. С помощью символов это делается в несколько кликов:
И еще
- Скетч рендерит текст практически также, как браузер. Наконец-то текст в макетах и свёрстанных HTML-страницах выглядит одинаково.
- Умные направляющие и сетка. Здесь ничего сверх-нового, но эти функции сделаны удобно и работают прекрасно.
- Если изменить выравнивание текстового слоя, то текст не съезжает, а остаётся на месте. Мелочь, но в Фотошопе иногда бесила :-)
- Скетч быстрый. То ли сказывается нативность приложения под OS X, то ли отсутствие тяжелого обвеса функций, не знаю. Но факт — приложение работает на порядок быстрее и плавнее Фотошопа.
Помимо этого в программе еще полно мелких приятных плюшек, но описывать всё-всё не буду — оставлю на радость исследователям, которые захотят попробовать Скетч сами.
Хотя в новой версии Фотошопа CC 2015 добавили некоторые функции (например, артборды), он по-прежнему остаётся монструозной программой, которая во многом проигрывает Скетчу как специализированному решению для дизайна интерфейсов.
Вёрстка из макетов
Первый сайт я нарисовал в Скетче буквально на одном дыхании, не переставая удивляться: “ух ты, здесь всё такое классное!”. Но дизайн — лишь один этап в создании сайтов, впереди еще вёрстка и разработка.
Когда дошла очередь до экспорта проекта, я наконец-то увидел форматы файлов: JPG, GIF, TIFF, PDF, EPS, SVG. Формата PSD-то нет. Скетч — программа только для Мака, а наш разработчик Максим— на Виндоусе. Понимаете, да? :-) “Упс!”
В итоге ему пришлось верстать сайт из макетов JPG — не самое большое удовольствие. Я расстроился и даже с неохотой думал вернуться к привычному Фотошопу, но потом нашел замечательный сервис — Цепелин.
Цепелин (www.zeplin.io) — это такая прослойка между дизайнерами на Маке и программистами, которые традиционно сидят на Винде или Линуксе.
Работает это так: дизайнер на Маке экспортирует макеты из Скетча в десктопное приложение Цепелина (делается ровно в один клик), после чего проект появляется в вебе. В проект приглашается разработчик, и вуаля, — он видит макеты через веб-интерфейс.
Самый кайф, что макеты видны не просто как статичные изображения, а почти также, как и в Скетче: при клике на любой элемент показываются его параметры (цвет, размеры, шрифт), отступы до других элементов и другая полезная информация.
По словам Максима, так оказалось верстать даже удобнее, чем из Фотошопа. Поэтому динственный минус Скетча — невозможность экспорта в формате PSD — обернулся даже плюсом.
Всё, теперь дизайн сайтов — только в Скетче.
Mirai Art Studio — студия дизайна. Мы помогаем клиентам создавать дизайн продуктов и услуг. Проекты и информация — на сайте www.miraispace.ru.
А еще у нас есть страничка в Фейсбуке, там мы публикуем новости — подписывайтесь.
Если вам понравилась эта статья, порекомендуйте её друзьям.
