/designer
15.6K subscribers
405 photos
26 videos
24 files
431 links
Канал про продуктовый дизайн, инструменты и практику. Рекламы нет.

Рубрики: #первые_шаги #для_профи #Figma #майндсет #UX_задача #UI_ревью #дизайн_системы #помоги_беженцам #эмиграция

Форматы: #снек #статья #видео #анонс #видео #подкаст

Автор: @okunev
Download Telegram
sketchviewer.com — сервис для загрузки и просмотра скетч-макетов
/designer
sketchviewer.com — сервис для загрузки и просмотра скетч-макетов
Sketch Viewer

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

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

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

#сервисы
This media is not supported in your browser
VIEW IN TELEGRAM
#GIF №9: Артборд-лассо — Оборачиваем в артборд любые объекты
/designer
#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.
/designer
Дизайнер из Acronis написал годный пост про их дизайн-систему и сервисы, которые они используют в работе отдела https://habrahabr.ru/company/acronis/blog/338246/ У меня в банке в сильно упрощённом виде я формирую то же самое: Sketch, Lingo, Zeplin. Пока…
Дизайн-система Акрониса, часть 2

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

goo.gl/xuH9XG

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

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

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

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

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

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

#для_профи #дизайн_системы #автоматизация
Видеокурс: Быстрый старт в основы Фреймера

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

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

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

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

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

#для_профи #Фреймер
designwhale - Введение в основы Framer.zip
993.5 MB
Курс «Введение в основы Framer», с примерами
3 типичные ошибки в флэт-иллюстрации

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

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

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

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

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

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

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

#первые_шаги #высушено #флэт
Разработчики Скетча выпустили UI-кит Elements

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

sketchapp.com/elements

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

#скачать