Sketch Craft: союз, созданный на цифровых небесах
Sketch недавно обзавелся новым лучшим другом, имя которого Craft* *Продукт создан талантливыми парнями из InVision Lab. В прошлом я был ярым поклонником парочки плагинов Sketch, которые сэкономили мне уйму времени при работе с живыми данными — Content Generator и Unsplash It. Эти два плагина значительно облегчали труд огромного количество дизайнеров, которым нужно было вставить текст или картинки в их дизайны внутри Sketch. Но с Craft все эти возможности собраны в маленький, аккуратный и быстрый инструмент. Я сделаю быстрый обзор этого потрясающего инструмента…
Скачайте Craft
Сначала перейдите на http://labs.invisionapp.com/craft и скачайте копию Craft. Установите его и дайте волю реальным данным! Вернитесь в Sketch, вы увидите новую панель возле панели инспектора, а также новый пункт в панели меню.
Примечание: Выпадающее меню, похоже, еще не имеет опцию Type, оно ограничено другими опциями.
Пока что используйте панель. Я уверен, что недостающие опции появятся в ближайшем обновлении.
Горячие клавиши для фото
- Вставить фото из папки Shift + Ctrl + 1
- Вставить фото из Dropbox Shift + Ctrl + 2
- Вставить (рандомно) фото из Unsplash Shift + Ctrl + 3
Примечание: для папки и Dropbox вам, конечно же, придется указать папку из главной панели перед началом использования этих горячих кнопок.
Я создал простой экран News Feed для iPhone 6, который можно скачать здесь, и попробовать Craft в деле. Теперь пройдемся по крутым возможностям Craft…
Текст
Прощай, Lorum Ipsum. И да здравствует плейсхолдерный текст обо всем, что есть в вашем дизайне. Заголовки, текст статей, даты и т.д… Вы можете даже добавить дополнительное действие в опцию добавления текста. Хотите, чтобы заголовки в блоге отображали все фильмы с Биллом Мюрреем? Не вопрос! Горячая клавиша для быстрого перехода по текстовым фрагментам будет очень кстати в следующем обновлении.
Фото
Импортируйте снимки из Dropbox, приватной папки или веб сайтов, прямо в ваш дизайн. В Craft вы можете легко добавлять изображения в с дизайн Sketch. Craft предоставляет множество опций на выбор. Мой личный любимчик — возможность вставлять рандомные изображения из Unsplash. Но вы также можете довольно легко брать картинки из собственной папки на Dropbox, или даже из веба. Например, в прошлом я использовал картинки из UIFaces для аватарок.
Duplicate
А это еще одна действительно удобная опция для экономии времени. Я использовал в прошлом инструмент Grid (сетка), чтобы сделать дубликаты элемента нужное количество раз, предусмотреть нужные расстояния и т.д. или просто 
Опция Duplicate в Craft делает все вышеперечисленное, но автоматически заменяет изображения и текст теми, которые вы только что сделали. Не нужно вручную заменять картинки и текст.
Styles
Возможность генерировать красивые руководства по стилю одним нажатием клавиши. Эксклюзивно для Sketch! https://vimeo.com/158273059 Я впечатлен работой InVision LABS и тем, что привнес в мою работу Craft. Нужно добавить всего несколько штришков. Нужно больше горячих клавиш, несколько улучшений в интерфейсе, чтобы он выглядел 100% родным в Sketch. Отдельные плагины, вышедшие перед Крафт, отлично выполняли свою работу, но располагать всеми этими возможностями в одном инструменте — это настоящая мечта. С Craft и грядущим выходом Silver http://silverflows.com, маленький соперник от Adobe под названием Comet должен быть начеку!
Перевод статьи Marc Andrew
14 советов по использованию Sketch и InVision в работе дизайнера
- UI/UX
- 7 мин на чтение
- 986
Эти советы помогут вам определиться с оптимальным набором инструментов, который необходим современному дизайнеру интерфейсов: где создавать, в чем анимировать и собирать прототипы.Инвижн позволяет дизайнеру продемонстрировать заказчику прототип дизайна приложения, сделав его интерактивным. Кроме того, благодаря Инвижн, можно организовать слаженную работу внутри команды, между дизайнером, менеджером проекта, верстальщиком и программистами, независимо от платформы (macOs, Windows, Linux). Предлагаю вашему вниманию удобные сценарии использования связки Sketch + InVision.
Советы по подготовке прототипов в Sketch
1. Установите набор плагинов «Craft»
Craft — это великолепный набор плагинов, созданный компанией InVison LABS. В контексте нашей темы, обращаю внимание на плагин Sync, который позволяет прямо из редактора Скетч загружать артборды в Инвижн. Для этого, вначале нужно создать проект на сайте Инвижн, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).
После этого возвращаемся в Скетч, выбираем созданный проект из списка, и можно выгружать дизайн. Артборды выгружаются или все сразу, или только выбранные, что бывает весьма кстати, когда их много.
Кроме того, дизайн можно выгружать в разрешениях @1x или @2x. Благодаря этому, ваш дизайн будет великолепно смотреться на устройствах с ретина-дисплеями.
2. Один раздел — одна страница
Если проект крупный и предполагает большое количество артбордов, то лучше, для каждого большого раздела создавать отдельную страницу в Скетче. Тогда удобно выгружать сразу все экраны одного раздела, не загружая артборды других разделов.
3. Модальные окна на отдельных артбордах
Инвижн позволяет показывать модальные окна «перекрывая» контент. Раньше, для того чтобы показать модальное окно, копировался артборд с контентом, сверху рисовался полупрозрачный оверлей, сверху которого создавалось само модальное окно. Теперь, лишних телодвижений можно не делать.
Создайте модальное окно на отдельном артборде. Положение окна, степень прозрачности и цвет оверлея можно будет указать в Инвижн.
Обратите внимание, что если у окна есть тень, то она должна быть внутри артборда, иначе она «обрежется» и не будет видна.
Важно в Скетче сразу правильно называть артборды, т. к. в Инвижн экраны получат такое же имя. А если арборд переименовать после синхронизации, то в Инвижн создадутся 2 одинаковых экрана с разными именами, один из которых придётся удалять вручную.
На мой взгляд, это бага. Надеюсь, в скором времени её исправят, но пока этот момент надо иметь в виду.
4. Состояния элементов
Если вы разрабатываете интерфейс для десктопа, то для выпадающих списков, и других элементов интерфейса нужно изобразить состояние «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде и загрузите в Инвижн. У вас создастся отдельный экран с этим списком.
Далее, создаём область над заголовком списка, при наведение на который будет отображаться развёрнутое меню, выбираем «Screen as overlay» и экран со списком в раскрытом состоянии.
Для того чтобы всё размещалась ровно, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.
5. Статусбар рисовать не нужно
В дизайне приложений для мобильных и планшетов не изображайте Статусбар, но оставьте для него место. Дело в том, что Инвижн покажет свой статусбар при просмотре через браузер. Вы сможете выбрать оформление статусбара из 2 вариантов: тёмный и светлый.
6. Подготавливайте иконки и графику для экспорта
Благодаря недавним нововведениям в Инвижн появился Inspect Mode, через который верстальщики и программисты могут смотреть описание любых элементов, а так же экспортировать их. Какие элементы будут доступны для экспорта из Инвижн, и их размеры, определяет дизайнер в редакторе Скетч. Просто выберите элемент, укажите форматы и размеры для экспорта. Теперь этот элемент можно скачать в указанных форматах прямо из Инвижн.
Забыли настроить экспорт для какого-либо объекта? Не беда.
Идём в Скетч, настраиваем экспорт элемента и синхронизируем артборд через плагин «Craft Sync». Готово, объект можно экспортировать из Инвижн.
Советы по работе в InVision
Инвижн весьма демократичны в ценовой политике. Для того, чтобы ознакомиться с функционалом, платить ничего не нужно, создание одного прототипа — бесплатно. Если вы фрилансер, который одновременно ведёт не больше трёх проектов, то вам подойдёт «Стартовый» тариф, за 15 долларов в месяц. На этом тарифе можно создавать до 3 активных прототипов. Причем, сколько прототипов у вас в архиве — не важно, главное, чтобы активных было не больше трёх.
Я использую тариф «Professional» за 25 долларов в месяц. Он позволяет создавать неограниченное количество проектов. Более дорогие планы нужны для компаний, в которых над прототипами работает больше одного дизайнера.
Как я писал выше, Инвижн позволяет разработчикам из под Windows верстать макеты или приложения, созданные в Скетче. Согласитесь, $25 в месяц сильно дешевле, чем купить всей команде Маки 🙂
7.
Создавайте иконку приложенияДля прототипов мобильных приложений в Инвижн можно добавить иконку. Для этого нажмите на «Плюс» около названия проекта и выберите вашу иконку. Она будет отображаться при просмотре в браузере, а так же если «установить» приложение на мобильный (об этом в следующем совете).
8. «Устанавливайте» приложения на iOs
Если скопировать ссылку на проект в «Public share link» и вставить в браузере Сафари на мобильном, то в нём откроется ваше приложение. Нажмите на иконку «Поделиться» в браузере и выберите «На экран „Домой“». Теперь у вас на рабочем столе мобильного появилась иконка приложения, а само приложение можно посмотреть без адресной строки браузера. Трудозатрат — минимум, заказчик — в восторге, он может перемещаться между экранами на своей мобилке.
9. Создавайте хедер и футер в приложениях
Зачастую контент занимает больше одного экрана, и при его прокрутке необходимо закрепить хедер и футер. Для этого в режиме «Build Mode» перемещайте ползунки «Fixed Header» и «Fixed Footer».
Теперь контент проматывается между ними.
Пока в Инвижн нет возможности закреплять сайдбар слева или справа в прототипе, что бывает весьма полезно в десктопных интерфейсах. Надеюсь эту фичу тоже когда-нибудь добавят.
10. Используйте шаблоны (templates) для навигации
Долгое время я не обращал внимания на эту мега-полезную возможность и для каждого экрана по новой создавал «кликабельные» области. На самом деле, для сквозных меню (тех, что есть на всех страницах сайта) нужно «кликабельные» области добавлять в «Шаблоны». Создаём область, выбираем куда ведёт клик по ней и добавляем в шаблон, например, «Sidebar».
В одном шаблоне может быть любое количество «кликабельных» областей. Теперь для того чтобы установить области из шаблона на новом экране, просто выбираем нужный шаблон.
11. Inspect Mode
Ранее я упоминал об этом нововведении Инвижн, но оно достойно отдельного пункта. Невозможность открыть файл в Виндоус до недавнего времени было большой проблемой для дизайнеров, вынуждающей использовать Фотошоп вместо Скетча.
Для передачи файлов использовались различные сервисы, например Avocode или плагин Marketch. Также, недавно появилось бесплатное решение от ребят из Icons8, позволяющее открывать Скетч-файлы из-под Виндоус, за что им отдельное спасибо!
Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.
Для того чтобы он правильно работал — используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.
Причём, разработчику достаточно иметь бесплатный аккаунт, чтобы получить доступ в режиме Inspect Mode к любому количество ваших прототипов.
12. Создавайте комментарии и туры
Когда проектов и экранов много, масса времени уходит на выяснение в каком именно экране интерфейса нужно внести правки. Эта проблема легко решается если предоставить заказчику доступ к комментариям. Он кликает в нужном месте, и создает текстовый комментарий.
Уведомление о нём упадёт вам на почту и будет доступно в Инвижн во вкладке «Comments». На комментарий можно написать ответ или уточняющий вопрос, а можно выполнить задачу и отметить комментарий как выполненный (Mark as resolved).
Бывает, нужно сделать не полноценный интерфейс, а обзорный тур по нему. Для этого в Инвижн есть функционал создания туров. Он работает по принципу комментариев. Вы создаёте одну или несколько точек на экране с текстовым описанием. Точки последовательно «проведут» пользователя по экранам, при помощи кнопок «Prev» и «Next». Пример маленькой презентации.
13. Храните историю версий
Если у вашей комнады нет необходимости в Inspect Mode и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. Для этого загружайте макеты при помощи программы «Desktop Sync App», а не плагина «Craft Sync». Вся история изменений вашего макета с возможностью скачать предыдущие версии будет доступна в разделе «Assets».
Вот короткое видео об этом функционале.
Очень жаль, что история версий не создаётся при выгрузке данных плагином «Craft Sync». Надеюсь, и эта фича когда-нибудь заработает.
Хороший дизайнер должен уметь не только создавать качественный интерфейс будущего продукта, но и грамотно презентовать его. Очень важно обосновать и донести до заказчика свои идеи и решения. Конечно, лучше это делать при встрече в уютном конференц-зале, но такая возможность есть не всегда. В таких случаях весьма полезен интерфейс «LiveShare», позволяющий в режиме реального времени показывать экраны, перемещаться между ними, обсуждая увиденное. Вот как это работает:
Скетч и Инвижн позволяют создавать, обсуждать и улучшать пользовательские интерфейсы. Бесспорно, в Инвижн есть что доработать, но уже сегодня это отличный продукт для презентации ваших дизайн-решений. А если учесть, что над Инвижн постоянно ведётся осмысленная работа и регулярно внедряются отличные решения, то стоит попробовать его в своей работе!
Источник: designpub.
ru
- #invision
- #sketch.app
- #ui
- #анимация
- #прототип
- #прототипирование
- #скетч
- #статья
- 0
Прототипирование с помощью Sketch + InVision + Craft
Что вы используете сейчас для создания своих проектов? Фотошоп? аффинити-дизайнер? Эскиз? Все эти инструменты великолепны, и у каждого есть свое место в моем доке, но когда дело доходит до прототипирования и совместной работы, мой предпочтительный набор инструментов включает Sketch, InVision и Craft.
Но так было не всегда. До недавнего времени я был заядлым наркоманом Фотошопа — если мы говорили о дизайне, мы говорили о Фотошопе.
Так зачем переключатель? Ну, есть две основные причины:
- Sketch — это векторное приложение; Фотошоп нет.
- Sketch + InVision + Craft = проектирование и прототипирование без переключения приложений.
Но действительно ли прототипирование необходимо? Да, конечно.
Когда вы создаете прототипы своих проектов, вы можете лучше понять функциональность и удобство использования вашего приложения. А благодаря тому, что вам не нужно переключать приложения для создания прототипов, вы можете гораздо быстрее и с меньшими трудностями повторять эти проекты. Кроме того, с InVision вы можете сотрудничать со всеми членами вашей команды, даже если у них нет Sketch.
Эй, я никогда не слышал об InVision. Что это? Где я могу получить это? Не волнуйтесь, мы кратко рассмотрим каждый из этих инструментов, прежде чем узнать, как вы можете использовать их для улучшения своего рабочего процесса.
Инструменты
Sketch
Первоначально выпущенный в сентябре 2010 года, Sketch представляет собой набор инструментов для проектирования, разработанный Bohemian Coding. С помощью Sketch вы можете создавать дизайны для мобильных приложений, настольных приложений, веб-сайтов или… ну, чего угодно.
В настоящее время Sketch доступен только для macOS. Тем не менее, Icons 8 недавно выпустила Lunacy, средство просмотра эскизов для Windows, которое в настоящее время находится в бета-версии. Я пробовал это некоторое время, и хотя я не пользователь Windows, мне нравится то, что я видел до сих пор.
InVision
InVision, который впервые был запущен в 2011 году, берет ваши статические проекты Sketch (и Photoshop) и превращает их в интерактивные макеты. Затем макетами можно поделиться в Интернете с другими, предлагая по-настоящему совместную среду.
Ремесло
Здесь происходит волшебство! Согласно их веб-сайту, Craft — это набор плагинов, которые позволяют вам проектировать с учетом данных.
Плагины, управляемые с помощью нового Craft Manager, работают со Sketch и Photoshop; мое любимое приложение для дизайна приложений — чаще всего — это Sketch.
Поскольку Ремесло является такой важной частью моего процесса проектирования, я хочу более подробно рассмотреть, что это такое и как каждая часть способствует общему процессу.
Подробнее о Craft
Набор плагинов Craft включает семь плагинов и Craft Manager. Давайте рассмотрим каждый плагин и то, как вы можете использовать его в своем рабочем процессе.
Примечание. Craft работает как с Photoshop, так и со Sketch, но я предпочитаю использовать Sketch, поэтому сосредоточусь на нем.
Наличие на складе
Stock позволяет просматривать и добавлять изображения из существующей учетной записи iStock или Getty Images. Вы можете быстро приобрести новый контент или добавить контент, который у вас уже есть. Вы можете легко менять изображения или изменять размер изображений с высоким разрешением — прямо в Sketch.
Freehand
Freehand позволяет вам сотрудничать с другими пользователями — в режиме реального времени — путем зеркального отображения проектов Sketch в вашем браузере. После зеркалирования вы можете получить немедленную (и, опять же, в режиме реального времени) обратную связь от своей команды. Это отлично подходит для встреч.
Прототип
Для меня это переломный момент! Возможность создавать прототипы непосредственно в Sketch повысила мою производительность и помогла мне более эффективно повторять свои проекты. Раньше мне нужно было экспортировать свои проекты и работать над прототипом в другом приложении; но теперь я могу создавать горячие точки и связывать экраны прямо в Sketch. Великолепно!
Sync
Sync делает именно то, что вы ожидаете: он поддерживает синхронизацию ваших проектов Sketch с InVision. Больше не нужно сохранять, экспортировать, копировать или отправлять дизайн по электронной почте команде. Вместо этого вы можете нажать кнопку и отправить свои проекты непосредственно в InVision.
Данные
Lorem ipsum это прошлый год. С помощью плагина Data вы можете мгновенно вводить все виды данных: имена, адреса, изображения и многое другое. Вы даже можете использовать веб-данные или заполнять свои элементы из фида JSON или файла JSON.
Примечание. Если вы ищете новое решение для стоковых фотографий, обязательно ознакомьтесь с новыми фотографиями Icons8!
Библиотека
С библиотекой вы можете делиться ресурсами дизайна вашего проекта и обновлять их с остальной частью команды. Если что-то изменится, вы можете синхронизировать эти изменения с вашим дизайном и продолжить работу. Для команд библиотека работает с Box, Dropbox и Google Drive.
Duplicate
Последний, но не менее важный, плагин Duplicate. С Duplicate + Data вы можете быстро дублировать элементы в своем дизайне и заполнять эти элементы уникальными данными. Вы можете дублировать элементы по вертикали, горизонтали или в обоих направлениях. Вы также можете установить интервал между каждым дублированным элементом.
Самое приятное: вы можете вернуться к своему дублирующему элементу управления и изменить эти настройки в любое время.
Мастер-менеджер
С помощью Craft Manager вы можете устанавливать свои плагины и поддерживать их в актуальном состоянии. Вы также можете включать или отключать отдельные плагины.
Теперь, когда вы лучше понимаете инструменты, которые я использую, давайте в общих чертах рассмотрим мой процесс проектирования.
Процесс проектирования/рабочий процесс
Когда я работаю над новыми проектами, особенно над которыми я сотрудничаю, я начинаю с набросков, нарисованных от руки; затем я перехожу к вайрфреймам и мокапам.
Вот часть дизайна, который я сделал для приложения, которое находится в разработке для Just Write Code:
Когда макеты будут готовы, я буду готов создать свои прототипы и отправить их в InVision с помощью Craft.
Примечание. Существует три типа статических проектов: эскизы, каркасы и макеты. Существует также три типа прототипов: низкая, средняя и высокая точность.
Я начинаю с добавления соединений и точек доступа в свой дизайн, чтобы моя команда могла почувствовать приложение, когда они будут работать с ним в InVision:
Синее соединение, показанное выше, соединяет экран входа в систему с экраном панели инструментов. Это соединение было создано с помощью плагина Craft Prototype:
Когда у меня есть готовые прототипы, я делюсь своим дизайном с командой. Для этого я использую подключаемый модуль Sync, который отправляет информацию непосредственно в InVision:
После завершения синхронизации моя команда может получить доступ к проектам и прототипам внутри InVision и при необходимости оставить комментарии:
Этот процесс продолжается до тех пор, пока все не будут удовлетворены всем. Как только мы довольны тем, как все выглядит и ощущается, мы начинаем разработку.
Для этого мы также используем Sketch и InVision!
Внутри Sketch вы можете пометить элементы как экспортируемые и добавить в документ цветовые схемы. После добавления и отправки в InVision с помощью плагина Sync команда разработчиков может получить доступ к этой информации с помощью Inspect.
Inspect, который также является частью InVision, позволяет разработчикам извлекать необходимые им ресурсы, включая активы, цветовые коды, текст, измерения и многое другое.
Рабочий процесс от проектирования до разработки еще никогда не был таким простым.
Итак, если ваш текущий процесс заставляет вас терять сон по ночам, подумайте о переходе на Sketch + Invision.
Об авторе
Тэмми Корон — независимый творческий профессионал и ведущий программы Roundabout: Creative Chaos. Она также является соучредителем Day Of The Indie, организатором Indie DevStock и основателем Just Write Code. Узнайте больше на TammyCoron.com.
дизайн приложения вдохновение для дизайна процесс проектирования ресурсы дизайна + 13
Craft Plugin дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble
Просмотр последних новостей от Craft — прототипирование в Sketch
Новинка от Craft — прототипирование в Sketch
Просмотр снимков — Расширения для снимков экрана 🧩
Захваты — Расширения скриншотов 🧩
Просмотр Craft Stock от InVision
Ремесленный запас от InVision
Посмотреть редизайн Boss Loop Station
Новый дизайн Boss Loop Station
Просмотр VEED.
