Sketch 3
Опыт и советы по прототипированию интерфейсов
Интро
Привет! Раньше я часто рисовал в Ps и всём остальном. Сейчас занимаюсь разработкой интерфейсов и руки до графических редакторов не дотягиваются (если не нужно что-то обрезать или сжать).
Две недели назад сел за работу над идеей своего проекта и подготовил для него прототипы. Для их создания использовать старый добрый Ps не хотелось и я опробовал Sketch3. Как только я его запустил сложилось впечатление, что он создан людьми для людей — символы, artboards, shared styles! Кстати, для меня было открытием то, что Sketch создали всего 5 человек: 2 программиста и 3 дизайнера.
О том, что это за приложение можно почитать в интернетах. Не буду останавливаться на этом.
Кейсы
Весь Sketch пронизан духом DRY (don’t repeat yourself). Вот кейсы в работе, которые мне помогли:
- Сетки и линейки (toolbar / view / show layout + toolbar / view / show rulers). В Sketch легко и просто можно настроить любую типографскую сетку. Верстаете под бустрап? Ок, возьмите сетку оттуда.
- Shared styles (layer / create shared style). Большая часть всех проектов основывается на том, что есть какой-то общий стиль проекта — styleguide. Sketch позволяет создать shared styles, которые будут использоваться во всём проекте: заголовки или лист фирменных цветов.
- Symbols (layer / create symbol). Символы в Sketch носят более высокий уровень абстакции, чем стили. Здесь символ — это полноценный блок прототипа. К примеру, символом может быть карточка товара или блок в выдаче результатов поиска — группа элементов, каждый из которых может использовать shared styles. Существует единственное ограничение — символ не может содержать другой символ.
- Artboards. (insert / artboard). Artboards, их назначение определено идеологией продукта— часть рабочего пространства, которая определяет вид устройства, точнее поверхность с необходимыми пропорциями и размерами. Таким образом, в одном рабочем пространстве у тебя может быть прототип для телефона, планшета, десктопа, hires десктопа. Профит!
Символы, артборды, стайлгайды, общие стили — это всё классно, но как не путать в проекте теплое и мягкое? Этот вопрос был загадкой. Решение оказалось тривиальным— страницы:
Помимо страницы со всеми артбордами прототипа (где всё разрабатывается), создаем страницы на которых хранятся только символы проекта, все общие стили, вся типографика.
Если проект большой, то эти страницы можно сохранять отдельными sketch-файлами и присоединять их к основному файлу с прототипами.
В результате, я получил стройную и хорошо управляемую структуру проекта в целом.
Плагины
В последнее время Sketch становится всё более популярным, к нему появляется множество плагинов. Вот список тех, что мне помогают в разработке:
- Любишь css? Тогда sketch-flex-layout для тебя;
- Dynamic button — делаем кнопки, которые тянутся под содержимое;
- Content generator — рыба текст и графика;
- Типограф Дмитрия Герасимова.
Конечно, Sketch имеет много спорных моментов — совместимость с Ps, но он превосходно справляется с тем узким списком задач, которые перед собой ставит.
Рад, если этот небольшой текст помог тебе в работе. Отличных проектов и красивых реализаций!
