Sketch Viewer

Толковый Конкурент Sketch Cloud и Abstract. На главной странице можно найти немало красивых макетов, которые можно поковырять в учебных целях.

В бесплатном аккаунте все макеты общедоступны, можно загружать до 50 мб за файл. В про-версии за 8 долларов можно загружать приватные и без ограничений.

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

#сервисы

#GIF №9: Артборд-лассо — Оборачиваем в артборд любые объекты

Каждый артборд — потенциальный символ. Чтобы делать их точно под размер объекта, удобно использовать функцию:

Layer → Artboard → Resize To Fit Content

У неё нет дефолтной горячей клавиши. Поэтому, я предлагаю назначить через Keys клавишу Ctrl + Alt + Cmd + R. Три пальца удобно ложатся на первые три кнопки.

Если ты любишь делать это мышью, кнопка Resize to Fit есть в инспекторе под размерами артборда.

Это очень мощная и простая техника: если объект находится за пределами артбордов, быстро и неточно рисуем вокруг него какой попало артборд (A), а затем затягиваем его как лассо этой функцией. Использую постоянно, это дико удобно.

Дальше из него можно либо сделать символ (у меня Cmd + Y), либо сделать его экспортируемым (у меня Ctrl + E).

Как назначать горячие клавиши:

Классический способ
medium.com/sketchdesigner/custom-shortcuts-dfd6e4d255fb

Через плагин Keys
medium.com/sketchdesigner/keys-e60d1e3991df

#горячие_клавиши #первые_шаги

Стоит ли обновляться на 48.1?

Вышли апдейты для Keys и Runner, но думаю, что пока преждевременно. Как в 48, так и в 48.1 фиксируют новую проблему с открытием некоторых проектов. Буду держать в курсе.

Две новые рубрики

Мне приходится балансировать, чтобы канал был понятен начинающим, но интересен профи. Начинающие жалуются, что ничего непонятно. Профи жалуются, что я учу маскам и скруглению углов, но на рынке полно людей, которые только переходят с Адоба на Скетч. Я придумал, как найти этот баланс. Представляю две новые рубрики, которые будут делить контент канала по аудитории.

#первые_шаги
Простые подробные уроки, дизайн-детсад для тех, кто недавно открыл Наше Всё. Базовые инструменты, трюки, цвет, типографика, сетки, лэйауты, лоуфай-прототипы и Марвел.

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

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

Видеокурсы по дизайну интерфейсов: Мой отзыв о курсе UX-дизайн от Аиса и другие хорошие курсы

Мой аватар стал завсегдатаем рекламных вебинаров курса Аиса, где тёплым лидам презентуют меня как успешный кейс их студента. От этого несколько неловко, потому что есть важные детали. После каждого продающего вебинара часть возбуждённых зрителей находит меня через Скетч-дизайнер и просит поделиться своим опытом от прохождения курса. Поэтому, я решил написать непредвзятый отзыв.

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

Ключевые слова курса: дизайн-мышление, дизайн на основе данных, UX-аналитика, прототипы, UI-анимация, разбор кейсов.

Также в посте я дал ссылки на другие правильные курсы по теме: Контентед и Школу Дизайна Яндекса.

medium.com/sketchdesigner/aic-ux-design-ebe1d66548df

#для_профи

Sketch: Мощный старт

Вводный пост о главных плагинах и возможностях Скетча от Менга То. Это автор курса Design + Code. Менг подробно написал о том, как сделать рабочий процесс в Скетче эффективным.

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

Поучаствовал в переводе: idzenski.ru/moshchnyi-start-v-sketch/ (пост с гифками)

Оригинал: designcode.io/sketch-start (+аудио)

#первые_шаги

В продолжение темы новых рубрик. Ключевой вопрос:

Какая рубрика будет тебе более интересна?
anonymous poll

#для_профи. Я уже всё давно изучил и знаю Скетч. Мне нужен мясной контент про процесс дизайна, без фокуса на Скетче. – 298
👍👍👍👍👍👍👍 56%

#первые_шаги. Я только присматриваюсь к Скетчу и мне нужны понятные уроки для начинающих, без жести и хакинга. – 234
👍👍👍👍👍 44%

👥 532 people voted so far.

Дизайн-система Акрониса, часть 2

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

goo.gl/xuH9XG

Дизайнеры Акронис активно используют автоматизацию при помощи Gulp и npm, наравне с разработчиками коммитят изменения в git.

Иконки
Ранее иконки хранились как попало в трёх местах и встраивались в продукты разными технологиями, включая ручную сборку. После оптимизации они были собраны в единый скетч-файл. Там, где иконок не хватает, стали использовать заглушки. Мы тоже так делаем, а на заглушки удобно накладывать символы иконок.

Все иконки и компоненты были добавлены в Lingo и протегированы. Интересная особенность с изменением цвета иконки через маску. У каждой иконки есть оверрайд, в котором можно задавать её цвет. Увы, с Андроид-разработкой такое не прокатит, поскольку SVG-иконкам запрещено использовать маски. Эта проблема была решена через кастомный скрипт remove-mask, который превращает код SVG в формат, нужный Андроиду.

SVG-шрифты для иконок
Оказались наиболее универсальным решением для всех команд разработки. Для сборки таких шрифтов используют gulp-iconfont.

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

Все ссылки на упомянутые инструменты — в конце поста.

#для_профи #дизайн_системы #автоматизация

Видеокурс: Быстрый старт в основы Фреймера

Руслан Шарипов записал бесплатный видеокурс, в котором на протяжении 4 часов и почти 40 компактных видео рассказал, как освоить Фреймер. Я сделал подробное оглавление курса с описаниями всех видео.

medium.com/sketchdesigner/framer-kickstart-93f9bcd85bb6

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

В курсе рассматриваются
Переменные, типы данных, операторы, условия, массивы, объекты, циклы, функции, свойства, импорт, кривые, снипеты, утилиты, события, состояния, компоненты, модули и классы.

Практический проект
Во второй части курса Руслан показывает, как сделать сложный прототип приложения для заметок. Он использует реальные данные из интернета и полноценную аналитику.

#для_профи #Фреймер

Курс «Введение в основы Framer», с примерами

3 типичные ошибки в флэт-иллюстрации

Я адаптировал текст статьи @mr_mad_rabbit и добавил кое-что от себя.

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

medium.com/sketchdesigner/flat-illustrations-680247f39c3f

Итак, какие ошибки делают начинающие?

1. Ломают форму объекта, неправильно рисуя тени
Можно научиться хорошо работать с тенями, если рисовать больше базовых геометрических объектов: шар, параллелепипед или цилиндр, а также их тени друг на друге. Привет, академический рисунок.

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

3. Не используют потенциал цвета
Нужно изучить цветовую теорию, чтобы понимать, какие цвета образуют гармоничные композиции. В флэт-иллюстрации можно подкрасить теневые участки объекта его комплиментарным цветом и от этого будет ощущение насыщенной тени.

#первые_шаги #высушено #флэт

Разработчики Скетча выпустили UI-кит Elements

35 экранов для iPhone Х, свёрстанных на символах, по семь штук на каждую из тем: еда, соцсеть, музыка, фото, тревел.

sketchapp.com/elements

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

#скачать

Однако, это не самый удачный пример того, как организовать сами символы. Аккуратные батальоны кнопочек маршируют по странице Symbols. Идеальный мир перфекциониста. На большом боевом проекте на выстраивание солдатиков нет времени, а плагины не решают этой задачи, потому что не умеют читать наши мысли. Рано или поздно символы в Symbols начнут напоминать бесформенное облако и их будет трудно искать.

Есть две альтернативы странице Symbols:

1. Локальные символы
Выносить символы над каждым экраном и не отправлять их в Symbols. Если некий блок встречается на очередном экране впервые, значит, он будет над ним всегда. Получается ровный горизонтальный ряд экранов и символы над ними. Такой метод хорош для сценариев, состоящих из последовательных экранов. Чтобы символ создавался на той же странице, на которой ты работаешь, снимай галочку Send to Symbols page.

2. Глобальные символы
Формировать внешнюю библиотеку, на которой много страниц, выполняющих функции категорий. В каждой категории однотипные символы. Пример таких категорий: Кнопки, Иконки, Поля, Заголовки, и тд. Подключить такой файл в качестве библиотеки к Скетчу, либо импортировать все элементы в Линго. В первом случае будет больно вставлять символы, потому что Скетч не позволяет перетаскивать нужные символы в макет из библиотеки, а ориентироваться по их названиям муторно. Во втором будет удобно перетаскивать символы в макет прямо из Линго. Но тогда будет другая боль: импорт и экспорт символов в Линго. Он тоже косячит, пусть не так люто, как Крафт.

На январских я планирую раскрыть тему создания и поддержки дизайн-систем более подробно.

#для_профи #дизайн_системы