Я нахожу этот способ слишком гиковским и невизуальным. Нужно выстраивать в голове ментальную модель и сопоставлять числа и углы. Но почему бы и нет, если кому-то это удобно. Таким образом можно копировать настройки скругления на другой прямоугольник. Через копирование стиля это сделать не удастся.
Значения вводятся по часовой:
1. Верхний левый;
2. Верхний правый;
3. Нижний правый;
4. Нижний левый
Значения вводятся по часовой:
1. Верхний левый;
2. Верхний правый;
3. Нижний правый;
4. Нижний левый
Копируем CSS-атрибуты скругления углов
Читатель Артём Фёдоров указал на глюк Скетча, связанный с углами. Если задавать угол способом из гифки и копировать его CSS-свойства, в нём не будет border-radius:
Если задать значения через запятую (например, 28; 0; 0; 0), тогда будет:
Наглядное видео:
Читатель Артём Фёдоров указал на глюк Скетча, связанный с углами. Если задавать угол способом из гифки и копировать его CSS-свойства, в нём не будет border-radius:
/* Rectangle */
background: #D8D8D8;
Если задать значения через запятую (например, 28; 0; 0; 0), тогда будет:
/* Rectangle */
background: #D8D8D8;
border-radius: 28px 0 0 0;
Наглядное видео:
#классные_люди №6: Дон Норман
Дональд — очень крутой 80-летний дедуля. Профессор психологии, когнитивных и компьютерных наук. Учёный в области пользовательского опыта, классик промышленного и интерфейсного дизайна, автор книги «Дизайн привычных вещей» и термина пользовательский опыт (User Experience).
medium.com/sketchdesigner/don-norman-b124b84ecec0
Посвятил свою жизнь изучению эргономичного дизайна. В 1993 устроился работать в Apple на должность «архитектор пользовательского опыта» и это было первое использование такого выражения в названии должности. Позже Норман стал вице-президентом в Apple. Сейчас возглавляет дизайн-лабораторию The Design Lab в университете Калифорнии.
В посте на основе лекций и книги Дона я рассказываю, что такое ментальные модели, какими качествами должен обладать хороший UX-дизайн и что такое естественное соответствие.
Лекция Дона на TED youtube.com/watch?v=QYNiNv-5Im4
Забавный сюжет на VOX про Дверь Нормана (англ) youtube.com/watch?v=yY96hTb8WgI
Дональд — очень крутой 80-летний дедуля. Профессор психологии, когнитивных и компьютерных наук. Учёный в области пользовательского опыта, классик промышленного и интерфейсного дизайна, автор книги «Дизайн привычных вещей» и термина пользовательский опыт (User Experience).
medium.com/sketchdesigner/don-norman-b124b84ecec0
Посвятил свою жизнь изучению эргономичного дизайна. В 1993 устроился работать в Apple на должность «архитектор пользовательского опыта» и это было первое использование такого выражения в названии должности. Позже Норман стал вице-президентом в Apple. Сейчас возглавляет дизайн-лабораторию The Design Lab в университете Калифорнии.
В посте на основе лекций и книги Дона я рассказываю, что такое ментальные модели, какими качествами должен обладать хороший UX-дизайн и что такое естественное соответствие.
Лекция Дона на TED youtube.com/watch?v=QYNiNv-5Im4
Забавный сюжет на VOX про Дверь Нормана (англ) youtube.com/watch?v=yY96hTb8WgI
Medium
#классные_люди №6: Дон Норман
Узнай что такое ментальные модели и естественное соответствие, чтобы делать дизайн логичным и простым.
Канал «Фреймер-ответы»
Я собрал лучшие вопросы, которые задавали участники @framerchat, добавил несколько хороших от себя и выложил в канал @framerfaq. В нём будут появляться высушенные ответы из Фреймер-чата.
Оглавление:
Вопрос 1 Что такое Фреймер?
Вопрос 2 Год лицензии Framer Studio стоит 144$. Смогу ли я работать в Framer Studio через год, или мне нужно будет покупать новую?
Вопрос 3 Нужно ли мне знать JavaScript, чтобы использовать Фреймер?
Вопрос 4 Будет ли Фреймер использовать КофеСкрипт всегда?
Вопрос 5 Фреймер заточен на создание именно сложных анимаций, или в нём можно быстро делать и что-то простое?
Вопрос 6 Какие плюсы использования Фреймера?
Вопрос 7 Какие возможности анимации даёт Фреймер?
Вопрос 8 Поможет ли фреймер-код программистам в дальнейшей разработке проекта?
Вопрос 9 Можно ли использовать Фреймер в VR?
Вопрос 10 С чего начинать изучение Фреймера?
Вопрос 11 Не будет ли правильным начать изучать Swift и делать анимацию в нативной среде разработки?
Вопрос 12 Подойдёт ли Фреймер, чтобы собрать простой кликабельный прототип приложения или сайта?
Вопрос 13 Как записать фреймер-прототип в формат видео?
Вопрос 14 Почему все макеты из Скетча нужно импортировать в двойном размере (2x) ?
Вопрос 15 Фреймер может осилить любую анимацию?
Вопрос 16 Как сделать слой кликабельным?
Вопрос 17 Как импортировать макет из Скетча в Фреймер?
Вопрос 18 В чём смотреть фреймер-прототипы?
Я собрал лучшие вопросы, которые задавали участники @framerchat, добавил несколько хороших от себя и выложил в канал @framerfaq. В нём будут появляться высушенные ответы из Фреймер-чата.
Оглавление:
Вопрос 1 Что такое Фреймер?
Вопрос 2 Год лицензии Framer Studio стоит 144$. Смогу ли я работать в Framer Studio через год, или мне нужно будет покупать новую?
Вопрос 3 Нужно ли мне знать JavaScript, чтобы использовать Фреймер?
Вопрос 4 Будет ли Фреймер использовать КофеСкрипт всегда?
Вопрос 5 Фреймер заточен на создание именно сложных анимаций, или в нём можно быстро делать и что-то простое?
Вопрос 6 Какие плюсы использования Фреймера?
Вопрос 7 Какие возможности анимации даёт Фреймер?
Вопрос 8 Поможет ли фреймер-код программистам в дальнейшей разработке проекта?
Вопрос 9 Можно ли использовать Фреймер в VR?
Вопрос 10 С чего начинать изучение Фреймера?
Вопрос 11 Не будет ли правильным начать изучать Swift и делать анимацию в нативной среде разработки?
Вопрос 12 Подойдёт ли Фреймер, чтобы собрать простой кликабельный прототип приложения или сайта?
Вопрос 13 Как записать фреймер-прототип в формат видео?
Вопрос 14 Почему все макеты из Скетча нужно импортировать в двойном размере (2x) ?
Вопрос 15 Фреймер может осилить любую анимацию?
Вопрос 16 Как сделать слой кликабельным?
Вопрос 17 Как импортировать макет из Скетча в Фреймер?
Вопрос 18 В чём смотреть фреймер-прототипы?
Упорядочиваем слои автоматом
Пара отличных плагинов для ускорения работы и создания порядка в слоях. Rename It и Sort Me.
#плагины #автоматизация
Пара отличных плагинов для ускорения работы и создания порядка в слоях. Rename It и Sort Me.
#плагины #автоматизация
/designer
Photo
Плагин: Rename It
Используется, когда нужно заменить или удалить фрагмент текста в названии слоёв.
rodi01.github.io/RenameIt/
Пример: Допустим, в макетах есть страница «Кредит». Все слои на ней начинаются с слова credit. При экспорте все они попадут в папку с таким названием.
credit/backgrounds/back-big.png
credit/backgrounds/back-small.png
credit/icons/credit-icon-big.png
credit/icons/credit-icon-small.png
credit/icons/credit-icon-transparent.png
Чтобы не заменять вручную слово credit, используем Rename It. Выделяем все слои, по которым будем искать, ищем credit и заменяем на deposit. Оно меняется во всех местах. Все картинки выгружаются в папку deposit.
Используется, когда нужно заменить или удалить фрагмент текста в названии слоёв.
rodi01.github.io/RenameIt/
Пример: Допустим, в макетах есть страница «Кредит». Все слои на ней начинаются с слова credit. При экспорте все они попадут в папку с таким названием.
credit/backgrounds/back-big.png
credit/backgrounds/back-small.png
credit/icons/credit-icon-big.png
credit/icons/credit-icon-small.png
credit/icons/credit-icon-transparent.png
Чтобы не заменять вручную слово credit, используем Rename It. Выделяем все слои, по которым будем искать, ищем credit и заменяем на deposit. Оно меняется во всех местах. Все картинки выгружаются в папку deposit.
/designer
Photo
Плагин: Sort Me
Используется когда надо отсортировать названия по возрастанию или убыванию. Помогает сделать уборку в названиях слоёв перед выгрузкой в Марвел или Зеплин.
github.com/romashamin/sort-me-sketch
Выделяем все артборды, сортируем по возрастанию или убыванию через меню:
Plugins — Sort Me — Sort Z9→A1
Почему-то плагин воспринимает слои от нижнего к верхнему. Чтобы они выстроились в нормальном порядке сверху вниз, нужно использовать Z9→A1.
Оба плагина доступны через Runner.
Используется когда надо отсортировать названия по возрастанию или убыванию. Помогает сделать уборку в названиях слоёв перед выгрузкой в Марвел или Зеплин.
github.com/romashamin/sort-me-sketch
Выделяем все артборды, сортируем по возрастанию или убыванию через меню:
Plugins — Sort Me — Sort Z9→A1
Почему-то плагин воспринимает слои от нижнего к верхнему. Чтобы они выстроились в нормальном порядке сверху вниз, нужно использовать Z9→A1.
Оба плагина доступны через Runner.
Спасибо каналу DUI
Когда в конце сентября Скетч-дизайнер был маленький и насчитывал всего 300 читателей, немногие каналы соглашались его поддерживать. @duiux был одним из первых. Тогда я заметил, сколько у него читателей и запомнил эту цифру: 2700. Я хочу поблагодарить его автора Андрея Астракта за то что он первым заметил мои посты. Желаю ему вдохновения и новых читателей. Андрей ведёт еженедельную рубрику «5 в Пят», где по пятницам собирает 5 лучших ссылок за неделю:
https://t.me/duiux/388
Если ведёшь канал, на начальном этапе поддержка других каналов очень важна. Если пишешь классный оригинальный контент и вкладываешь в него всю душу и умение, его обязательно найдут и заметят. Но не сразу. Сначала будут банить и жаловаться на спам. Действительно хороший контент нужно предлагать и продвигать, не боясь отказа или игнора от больших каналов и пабликов.
То, насколько мы доброжелательны к новым лицам, очень влияет на климат в дизайн-сообществе. Когда меньше развлекательной псевдодизайн-херни вроде Десигна и ЮиксЛайва, а больше годных проектов вроде Оди, Кости Горского, Design Pub, Интерфейсов без шелухи, Contented, Secret Design и DUI. Это далеко не все, кто заслуживает упоминания.
Телеграм-движение только в начале пути и разнообразие ему на пользу. Чем больше авторов и уникальных каналов, тем больше образованных дизайнеров, которых мы вдохновили и кому сумели рассказать что-то новое. Чем больше бурных тематических чатов, тем больше ценных знакомств и азарта развития. Тем лучше в итоге дизайн вокруг нас.
Когда в конце сентября Скетч-дизайнер был маленький и насчитывал всего 300 читателей, немногие каналы соглашались его поддерживать. @duiux был одним из первых. Тогда я заметил, сколько у него читателей и запомнил эту цифру: 2700. Я хочу поблагодарить его автора Андрея Астракта за то что он первым заметил мои посты. Желаю ему вдохновения и новых читателей. Андрей ведёт еженедельную рубрику «5 в Пят», где по пятницам собирает 5 лучших ссылок за неделю:
https://t.me/duiux/388
Если ведёшь канал, на начальном этапе поддержка других каналов очень важна. Если пишешь классный оригинальный контент и вкладываешь в него всю душу и умение, его обязательно найдут и заметят. Но не сразу. Сначала будут банить и жаловаться на спам. Действительно хороший контент нужно предлагать и продвигать, не боясь отказа или игнора от больших каналов и пабликов.
То, насколько мы доброжелательны к новым лицам, очень влияет на климат в дизайн-сообществе. Когда меньше развлекательной псевдодизайн-херни вроде Десигна и ЮиксЛайва, а больше годных проектов вроде Оди, Кости Горского, Design Pub, Интерфейсов без шелухи, Contented, Secret Design и DUI. Это далеко не все, кто заслуживает упоминания.
Телеграм-движение только в начале пути и разнообразие ему на пользу. Чем больше авторов и уникальных каналов, тем больше образованных дизайнеров, которых мы вдохновили и кому сумели рассказать что-то новое. Чем больше бурных тематических чатов, тем больше ценных знакомств и азарта развития. Тем лучше в итоге дизайн вокруг нас.
Telegram
dui
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
1. Просмотр и хранении истории Sketch файлов в веб браузере https://goo.gl/HTR17d
2. Сборник UX паттернов от разных компаний https://goo.gl/WUQi9i
3. Перенос символов из Sketch файла в…
Пять интересных ссылок за неделю.
1. Просмотр и хранении истории Sketch файлов в веб браузере https://goo.gl/HTR17d
2. Сборник UX паттернов от разных компаний https://goo.gl/WUQi9i
3. Перенос символов из Sketch файла в…
Как улучшить любую веб-форму
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
В журнале Телеграф.дизайн вышел перевод статьи «16 дизайн-правил в дизайне форм» Дмитрия Коваленко из Readdle. Он проанализировал проблемы веб-форм и рассказал как их улучшить:
http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/
Оригинал:
https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92
Я выделил 10 лучших советов и добавил примеров от себя:
Спрашивай только самое необходимое в данный момент
Если на этапе регистрации от пользователя достаточно его электронной почты и имени, а номер телефона понадобится позже, то нет смысла спрашивать всё сразу. Чем большее усилие должен совершить пользователь, тем меньше будет конверсия формы. Информацию надо выуживать постепенно, чтобы пользователь не устал.
Фокусируй первое поле по умолчанию
Подсказывай респонденту, откуда начинать и тем ты сэкономишь ему клик. Кроме того, явно выделенное первое поле побуждает к заполнению формы.
Используй одну колонку
Структурированная форма воспринимается лучше, её легче сканировать глазами как оглавление. В противном случае глаза двигаются зигзагом, на что уходит больше сил пользователя и дизайнера.
Разделяй поля по смысловым группам
Большая бесформенная куча полей демотивирует. Если разделить её на группы и сделать отступы между ними, будет проще воспринимать информацию. Вспомни сплошной текст без деления на абзацы.
Как можно раньше информируй об ошибках
Используй ограничения на ввод данных. Например, в поле ввода карты не нужно вводить буквы.
Делай поля пропорциональными их контенту
Если в поле нужно ввести две буквы, оно не должно занимать целую строку.
В сообщении об ошибке пиши причину
Если поле введено неверно, это понятно уже из красного цвета. Фраза «Что-то пошло не так» не делает мир лучше. Лучше писать что-то вроде: «В пароле должно быть 8 символов».
Поощряй пользователя: ставь ему зелёную галочку за каждое заполненное поле
Если поле заполнено корректно, это можно понять уже на этапе ввода следующего. Срабатывает психологический эффект: заполнил поле — похвалили галочкой.
Не отвлекай от заполнения
Никаких лишних отвлекающих ссылок, которые могут прервать сценарий. Пользователь уже сделал подвиг: он сфокусировал внимание. Наша задача — затаить дыхание и дождаться, чтобы он закончил и отправил её. Если нужно что-то объяснить, это надо делать словами и всплывашками.
Обоснуй, зачем тебе именно эти данные
Информация, которую готов дать пользователь, дорога ему. Не имея мотивации, он её просто так не отдаст. Чтобы развеять его сомнения, хорошо бы объяснить, с какой стати мы спрашиваем у него группу крови на сервисе авиабилетов.
Бонус не из статьи: Сохраняй введённые данные
Данные пользователя бесценны. Если после нажатия кнопки «Отправить» пользователь видит ошибку 404, о красивом дизайне формы он уже не вспомнит и в бешенстве закроет страницу. Современный фронтенд позволяет проверять, произойдёт ли успешная отправка. Если нет интернета или есть ошибки, сайт должен выводить предупреждение до того, как случилась катастрофа.
#UX #дизайн_форм #высушено
• —
16 дизайн принципов, которые упростят заполнение любой формы
Дмитрий Коваленко, Head of Product Design в Readdle, о том, как улучшить дизайн форм и почему это важно для сервисов и пользователей.
/designer
GIF
Скрытая суперсила зума
В Скетче есть две клавиши, которые позволяют мгновенно приближать и отдалять холст, основываясь на его содержимом, а не на значении масштаба.
Это:
Cmd + 1 – Показать все артборды на странице, самый дальний масштаб. Как далеко бы ни стояли друг от друга два объекта, ты увидишь их оба в рамках окна.
Cmd + 2 – Показать выделенный объект максимально близко в пределах окна Скетча. Это ноу-хау, которого очень не хватает в Фотошопе и Иллюстраторе. Именно об этой клавише мы поговорим позже.
Есть также:
Cmd + 0 – Масштаб 100%. Но эта используется реже.
* * *
В чём недостаток обычного способа
Понятно, что везде есть стандартные Cmd + плюс и Cmd + минус, чтобы приближать и отъезжать, но они не заменяют Cmd + 2, поскольку не привязаны к объектам в окне Скетча.
Пример использования
В Скетче мы постоянно работаем с группами и артбордами. Когда заходишь на новую страницу незнакомого скетч-проекта, первым делом нажимаешь Cmd + 1, чтобы сразу же увидеть все артборды и объекты, которые есть на открывшейся странице.
Чтобы начать работать с любым объектом в пределах страницы, выделяешь его и нажимаешь Cmd + 2. Он занимает всю доступную ширину и высоту окна. Не важно, был ли выделен целый артборд или всего лишь маленький текстовый объект, Скетч покажет его максимально крупно. Всего за две команды ты с большой точностью переключаешься от максимально далёкого до максимально близкого масштаба, а Cmd + плюс/минус используешь только для коррекции.
Прыгаем по масштабу
Когда нажал Cmd + 2, зацепившись за какой-то объект, можешь сделать новый прыжок, выбрав новый более мелкий объект и приблизив его, ещё раз нажав Cmd + 2. По ощущениям это похоже на прыжки к нужному масштабу.
Хорошая практика: когда работа завершена, можно снова вернуться в Cmd + 1, чтобы в следующий раз при открытии страницы всё её содержимое было в поле зрения.
#GIF #горячие_клавиши
В Скетче есть две клавиши, которые позволяют мгновенно приближать и отдалять холст, основываясь на его содержимом, а не на значении масштаба.
Это:
Cmd + 1 – Показать все артборды на странице, самый дальний масштаб. Как далеко бы ни стояли друг от друга два объекта, ты увидишь их оба в рамках окна.
Cmd + 2 – Показать выделенный объект максимально близко в пределах окна Скетча. Это ноу-хау, которого очень не хватает в Фотошопе и Иллюстраторе. Именно об этой клавише мы поговорим позже.
Есть также:
Cmd + 0 – Масштаб 100%. Но эта используется реже.
* * *
В чём недостаток обычного способа
Понятно, что везде есть стандартные Cmd + плюс и Cmd + минус, чтобы приближать и отъезжать, но они не заменяют Cmd + 2, поскольку не привязаны к объектам в окне Скетча.
Пример использования
В Скетче мы постоянно работаем с группами и артбордами. Когда заходишь на новую страницу незнакомого скетч-проекта, первым делом нажимаешь Cmd + 1, чтобы сразу же увидеть все артборды и объекты, которые есть на открывшейся странице.
Чтобы начать работать с любым объектом в пределах страницы, выделяешь его и нажимаешь Cmd + 2. Он занимает всю доступную ширину и высоту окна. Не важно, был ли выделен целый артборд или всего лишь маленький текстовый объект, Скетч покажет его максимально крупно. Всего за две команды ты с большой точностью переключаешься от максимально далёкого до максимально близкого масштаба, а Cmd + плюс/минус используешь только для коррекции.
Прыгаем по масштабу
Когда нажал Cmd + 2, зацепившись за какой-то объект, можешь сделать новый прыжок, выбрав новый более мелкий объект и приблизив его, ещё раз нажав Cmd + 2. По ощущениям это похоже на прыжки к нужному масштабу.
Хорошая практика: когда работа завершена, можно снова вернуться в Cmd + 1, чтобы в следующий раз при открытии страницы всё её содержимое было в поле зрения.
#GIF #горячие_клавиши
/designer
Photo
10 пронумерованных артбордов за 10 секунд
Пример использования Duplicator и Rename It
Об обоих этих плагинах я уже рассказывал. Но не рассказывал, как они могут дополнять друг друга. Один быстро генерирует сколько угодно артбордов, а другой их нумерует.
1. Создаём Артборд, A, используя любой пресет, например iPhone SE.
2. Дублируем его девять раз Дупликатором: Ctrl + Cmd + →. Получается десять пустых артбордов, которые называются iPhone SE.
3. Выделяем их все, открываем Rename It → Rename Selected Artboard.
4. В окне Rename It нажимаем кнопку Num. Sequence DESC (Нумеровать по убыванию).
В Preview должно появиться: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
5. Нажимаем Rename, и готово. Rename It позволяет тонко настраивать паттерн, по которому артборды будут называться.
Подробнее про эти плагины:
Duplicator t.me/sketchdesigner/25
Rename It t.me/sketchdesigner/160
#плагины
Пример использования Duplicator и Rename It
Об обоих этих плагинах я уже рассказывал. Но не рассказывал, как они могут дополнять друг друга. Один быстро генерирует сколько угодно артбордов, а другой их нумерует.
1. Создаём Артборд, A, используя любой пресет, например iPhone SE.
2. Дублируем его девять раз Дупликатором: Ctrl + Cmd + →. Получается десять пустых артбордов, которые называются iPhone SE.
3. Выделяем их все, открываем Rename It → Rename Selected Artboard.
4. В окне Rename It нажимаем кнопку Num. Sequence DESC (Нумеровать по убыванию).
В Preview должно появиться: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
5. Нажимаем Rename, и готово. Rename It позволяет тонко настраивать паттерн, по которому артборды будут называться.
Подробнее про эти плагины:
Duplicator t.me/sketchdesigner/25
Rename It t.me/sketchdesigner/160
#плагины
Результаты конкурса №1 в Фреймер-чате
В @framerchat прошли первые любительские соревнования по Фреймеру. Цель конкурсов — дать интересные задания, которые прокачают участников.
Объявляю победителя №1: Павел Новицкий @P_Newman.
Правила: Я выбираю задачу, в течение недели дизайнеры присылают ссылку на Фреймер Клауд. Первый, кто выполнит условия и пришлёт правильный ответ, получит возможность проанонсировать что-то околодизайнерское на Скетч-дизайнере. Павел призом не воспользовался.
Первая задача заключалась в анимации обновленного логотипа Ютюба.
Работа Павла: framer.cloud/BXLgI
Мой вариант: framer.cloud/ujgds
Разбор к нему + скетч-макет: t.me/framerchat/1057
В качестве практики задача оказалась интересной, однако в данном контексте было бы удобнее использовать AE.
Также классную работу прислал Антон Лапко, который добился точного наложения маски: t.me/framerchat/1035.
Новые задачи будут появляться в @framerchat.
#Фреймер #анимация #конкурс
В @framerchat прошли первые любительские соревнования по Фреймеру. Цель конкурсов — дать интересные задания, которые прокачают участников.
Объявляю победителя №1: Павел Новицкий @P_Newman.
Правила: Я выбираю задачу, в течение недели дизайнеры присылают ссылку на Фреймер Клауд. Первый, кто выполнит условия и пришлёт правильный ответ, получит возможность проанонсировать что-то околодизайнерское на Скетч-дизайнере. Павел призом не воспользовался.
Первая задача заключалась в анимации обновленного логотипа Ютюба.
Работа Павла: framer.cloud/BXLgI
Мой вариант: framer.cloud/ujgds
Разбор к нему + скетч-макет: t.me/framerchat/1057
В качестве практики задача оказалась интересной, однако в данном контексте было бы удобнее использовать AE.
Также классную работу прислал Антон Лапко, который добился точного наложения маски: t.me/framerchat/1035.
Новые задачи будут появляться в @framerchat.
#Фреймер #анимация #конкурс
Вышел перевод книги Брэда Фроста «Атомарный дизайн»
Книга подробно описывает весь процесс создания и поддержания дизайн-систем. В ней можно найти ответы на вопросы, как выстроить иерархию интерфейса, организовать библиотеку шаблонов и оптимизировать документацию.
Аплодисменты Ольге Кокоулиной и Ринату Шайхутдинову за перевод. Они проделали большую и нужную работу.
Одна из первых и важнейших книг по организации сложных дизайн-систем. В своём канале я ещё многократно вернусь к идеям Брэда Фроста, а о самом авторе давно стоит сделать выпуск Классных Людей.
Книга оформлена в виде коллекции постов на Медиуме.
Начало: https://medium.com/атомарный-дизайн/atomic-design-foreword-4960ad17bc1a
Оригинал: atomicdesign.bradfrost.com
#дизайн_системы #книги
Книга подробно описывает весь процесс создания и поддержания дизайн-систем. В ней можно найти ответы на вопросы, как выстроить иерархию интерфейса, организовать библиотеку шаблонов и оптимизировать документацию.
Аплодисменты Ольге Кокоулиной и Ринату Шайхутдинову за перевод. Они проделали большую и нужную работу.
Одна из первых и важнейших книг по организации сложных дизайн-систем. В своём канале я ещё многократно вернусь к идеям Брэда Фроста, а о самом авторе давно стоит сделать выпуск Классных Людей.
Книга оформлена в виде коллекции постов на Медиуме.
Начало: https://medium.com/атомарный-дизайн/atomic-design-foreword-4960ad17bc1a
Оригинал: atomicdesign.bradfrost.com
#дизайн_системы #книги
Вопрос про гифки и видео
Все мини-уроки по Скетчу я выпускал в виде гифок с хэштегом #GIF. Гифки имеют хорошие плюсы: сразу воспроизводятся, зациклены и их не нужно скачивать. Однако, Телеграм режет их под размер 320х320. Качество картинки никакое.
Альтернатива гифкам — видео в Телеграме. Видео значительно лучшего качества, но у этого формата есть свои недостатки: видео надо скачать перед просмотром, оно оседает в папке Downloads или памяти телефона, пока не почистишь кэш.
Все мини-уроки по Скетчу я выпускал в виде гифок с хэштегом #GIF. Гифки имеют хорошие плюсы: сразу воспроизводятся, зациклены и их не нужно скачивать. Однако, Телеграм режет их под размер 320х320. Качество картинки никакое.
Альтернатива гифкам — видео в Телеграме. Видео значительно лучшего качества, но у этого формата есть свои недостатки: видео надо скачать перед просмотром, оно оседает в папке Downloads или памяти телефона, пока не почистишь кэш.