Трюк с прозрачностью
Дизайнеры довольно часто используют в работе полупрозрачные блоки и надписи. Однако, не всегда стоит накладывать чистый белый. Он понижает насыщенность цвета, на который накладывается, и от этого дизайн кажется тусклым.
Это можно компенсировать. Делай полупрозрачным не чистый белый, а подкрашенный фоновым цветом. Для синего фона я использовал голубой. Таким образом, блок выглядит более элегантно.
UPD: В @sketchchat предлагают просто подбирать непрозрачный цвет, но это решение не подходит по двум причинам. Первая: оно даёт меньше контроля, поскольку прозрачность можно настраивать горячими клавишами от 1 до 0. Вторая: основной фон может быть неоднородным. Раз мы решили использовать прозрачный блок, мы захотим сохранить текстуру основного фона, а не просто заливать его цветом.
—
#первые_шаги — рубрика для юных падаванов
Дизайнеры довольно часто используют в работе полупрозрачные блоки и надписи. Однако, не всегда стоит накладывать чистый белый. Он понижает насыщенность цвета, на который накладывается, и от этого дизайн кажется тусклым.
Это можно компенсировать. Делай полупрозрачным не чистый белый, а подкрашенный фоновым цветом. Для синего фона я использовал голубой. Таким образом, блок выглядит более элегантно.
UPD: В @sketchchat предлагают просто подбирать непрозрачный цвет, но это решение не подходит по двум причинам. Первая: оно даёт меньше контроля, поскольку прозрачность можно настраивать горячими клавишами от 1 до 0. Вторая: основной фон может быть неоднородным. Раз мы решили использовать прозрачный блок, мы захотим сохранить текстуру основного фона, а не просто заливать его цветом.
—
#первые_шаги — рубрика для юных падаванов
Мой новый канал: UX–гайд
@uxguide
Я постепенно наполняю свою Библиотеку дизайн-паттернов статьями.
У неё появился короткий адрес: p.skdr.in.
Это большая и долгая работа, которую я только начал. Готовы уже три статьи:
- Лендинг
- Баннер
- Поле ввода карты: t.me/uxguide/22
С моей точки зрения, в Скетч-дизайнере они выглядят инородно.
Поэтому, я решил отпочковать тему с такими статьями в отдельный проект.
В Скетч-дизайнер буду продолжать писать больше про Скетч и практику дизайна, а все статьи о паттернах буду писать в новый канал. Раз в 10 статей планирую делать подборку из UX-гайда.
@uxguide
Я постепенно наполняю свою Библиотеку дизайн-паттернов статьями.
У неё появился короткий адрес: p.skdr.in.
Это большая и долгая работа, которую я только начал. Готовы уже три статьи:
- Лендинг
- Баннер
- Поле ввода карты: t.me/uxguide/22
С моей точки зрения, в Скетч-дизайнере они выглядят инородно.
Поэтому, я решил отпочковать тему с такими статьями в отдельный проект.
В Скетч-дизайнер буду продолжать писать больше про Скетч и практику дизайна, а все статьи о паттернах буду писать в новый канал. Раз в 10 статей планирую делать подборку из UX-гайда.
Учебник по Фреймеру для начинающих: § 1.3. Cлои и их свойства
Выкладываю первый по счёту параграф учебника про анимацию интерфейсов, который пишу. Концепция слоёв лежит в основе понимания Фреймера.
sketchdesigner.ru/framer/fguide/1-3-layers/
У слоя есть набор свойств, таких как ширина, высота, цвет фона и другие. Меняя их, можно кардинальным образом изменить внешний вид любого объекта. Любые числовые свойства можно анимировать и именно это делает Фреймер таким мощным.
В параграфе: как создавать слои через код, задавать свойства, позиционировать, вкладывать друг в друга и вращать в трёх осях.
Пожалуйста, оставляй фидбэк через Ctrl + Enter или сообщением. Вопросы по Фреймеру — сюда: @framerchat.
#Фреймер
—
#первые_шаги — рубрика для юных падаванов
Выкладываю первый по счёту параграф учебника про анимацию интерфейсов, который пишу. Концепция слоёв лежит в основе понимания Фреймера.
sketchdesigner.ru/framer/fguide/1-3-layers/
У слоя есть набор свойств, таких как ширина, высота, цвет фона и другие. Меняя их, можно кардинальным образом изменить внешний вид любого объекта. Любые числовые свойства можно анимировать и именно это делает Фреймер таким мощным.
В параграфе: как создавать слои через код, задавать свойства, позиционировать, вкладывать друг в друга и вращать в трёх осях.
Пожалуйста, оставляй фидбэк через Ctrl + Enter или сообщением. Вопросы по Фреймеру — сюда: @framerchat.
#Фреймер
—
#первые_шаги — рубрика для юных падаванов
Дизайн-конференция mail.ru + Дрибл Митап 2018
Москва: 2 июня, 10:00
Открыта регистрация на крупную ежегодную конференцию интерфейсных дизайнеров. Митап проводится в седьмой раз и собирает несколько сотен человек.
corp.mail.ru/ru/press/events/463/
С утра — большая конференция по продуктовому дизайну, вечером — короткие выступления по 20 минут.
Обещают рассказать, как создаются современные цифровые продукты, инструменты дизайна и иллюстрации. Точное расписание будет опубликовано позже.
Спикеры
territorystudio.com
phase.com
norde.st
realtimeboard.com
brand.rambler.ru
setka.io
futurelondonacademy.co.uk
bem.design
design.mail.ru
Буду присутствовать и планирую вести текстовую трансляцию:
t.me/joinchat/AAAAAEeAdZin7fKVvlthBw
#тусовки #трансляции
Москва: 2 июня, 10:00
Открыта регистрация на крупную ежегодную конференцию интерфейсных дизайнеров. Митап проводится в седьмой раз и собирает несколько сотен человек.
corp.mail.ru/ru/press/events/463/
С утра — большая конференция по продуктовому дизайну, вечером — короткие выступления по 20 минут.
Обещают рассказать, как создаются современные цифровые продукты, инструменты дизайна и иллюстрации. Точное расписание будет опубликовано позже.
Спикеры
territorystudio.com
phase.com
norde.st
realtimeboard.com
brand.rambler.ru
setka.io
futurelondonacademy.co.uk
bem.design
design.mail.ru
Буду присутствовать и планирую вести текстовую трансляцию:
t.me/joinchat/AAAAAEeAdZin7fKVvlthBw
#тусовки #трансляции
#плагины №13: Sketch Style Libraries
Маленький нужный плагин, который синхронизирует стили текста и шейпов между файлами. Идентифицирует их по названию и мёрджит дубликаты.
sketchdesigner.ru/sketchapp/plugins/style-libraries
Плагин есть в Runner
Продолжаю тему синхронизации. Дубликаты стилей с одинаковыми названиями мешают контролировать все стили проекта. Не можешь выбрать, какой стиль актуальный.
Как использовать
Допустим, все твои стили текста прописаны в файле-библиотеке с названием UI-kit.sketch. Находясь в любом другом файле, сделай Style Libraries → Fetch From. Фетч — от англ. извлечение.
В окне плагина можно выбрать библиотеку, из которой будем запрашивать стили.
Галочка Strict Sync удаляет те стили, которые были в текущем файле и оставляет только новые.
Галочка Merge Duplicates — ключевая, позволяет сохранять связи между стилем и текстовыми объектами, даже если обновлённые версии стиля с таким названием высосаны из библиотеки. Если её не поставить, впоследствии можно будет сделать мёрдж через одноимённую функцию в меню плагина.
—
#для_профи — рубрика для скетч-джедаев
Маленький нужный плагин, который синхронизирует стили текста и шейпов между файлами. Идентифицирует их по названию и мёрджит дубликаты.
sketchdesigner.ru/sketchapp/plugins/style-libraries
Плагин есть в Runner
Продолжаю тему синхронизации. Дубликаты стилей с одинаковыми названиями мешают контролировать все стили проекта. Не можешь выбрать, какой стиль актуальный.
Как использовать
Допустим, все твои стили текста прописаны в файле-библиотеке с названием UI-kit.sketch. Находясь в любом другом файле, сделай Style Libraries → Fetch From. Фетч — от англ. извлечение.
В окне плагина можно выбрать библиотеку, из которой будем запрашивать стили.
Галочка Strict Sync удаляет те стили, которые были в текущем файле и оставляет только новые.
Галочка Merge Duplicates — ключевая, позволяет сохранять связи между стилем и текстовыми объектами, даже если обновлённые версии стиля с таким названием высосаны из библиотеки. Если её не поставить, впоследствии можно будет сделать мёрдж через одноимённую функцию в меню плагина.
—
#для_профи — рубрика для скетч-джедаев
Вышел Скетч v.50. Как откатиться, если что
Читатели пишут, что как всегда после обновления всё глючит, плагины отвалились и жизнь по-прежнему боль.
Чтобы избежать проблем, я советую на всякий случай перед апдейтом делать резервную копию приложения. Это очень просто:
1. Открываем Файндер, нажимаем Shift + Cmd + A, чтобы попасть в папку Applications.
2. Дублируем файл приложения Sketch клавишей Cmd + D. Копию переименовываем в Sketch 49.3.
3. Открываем Скетч, делаем апдейт через Check For Updates. Файл Sketch перезаписывается и теперь у него версия 50. Копия остаётся нетронутой.
4. Если хочется откатиться, удаляем файл Sketch, переименовываем Sketch 49.3 обратно.
Если же ты уже кликнул кнопку Update, откатиться можно, удалив приложение из папки Applications и скачав версию 49.3 со страницы sketchapp.com/updates/.
О чём говорят
«Плагин Paddy зависал и приходилось закрывать Скетч через диспетчер задач с потерей всех изменений. Отключил все плагины и оставил только Paddy, RenameIt и Distributor, всё заробатало.» — @yuryoz
Пэди, к сожалению, оказался очень капризной штукой и пользоваться им стоит осторожно, если вообще стоит. При первых же глюках вырубать и слать тикеты на Гитхаб автору (github.com/DWilliames/paddy-sketch-plugin/issues). Точно не стоит строить на нём рабочий процесс. Я ровняю руками.
Новые функции этого апдейта рассмотрим следом. Есть, чему порадоваться.
Читатели пишут, что как всегда после обновления всё глючит, плагины отвалились и жизнь по-прежнему боль.
Чтобы избежать проблем, я советую на всякий случай перед апдейтом делать резервную копию приложения. Это очень просто:
1. Открываем Файндер, нажимаем Shift + Cmd + A, чтобы попасть в папку Applications.
2. Дублируем файл приложения Sketch клавишей Cmd + D. Копию переименовываем в Sketch 49.3.
3. Открываем Скетч, делаем апдейт через Check For Updates. Файл Sketch перезаписывается и теперь у него версия 50. Копия остаётся нетронутой.
4. Если хочется откатиться, удаляем файл Sketch, переименовываем Sketch 49.3 обратно.
Если же ты уже кликнул кнопку Update, откатиться можно, удалив приложение из папки Applications и скачав версию 49.3 со страницы sketchapp.com/updates/.
О чём говорят
«Плагин Paddy зависал и приходилось закрывать Скетч через диспетчер задач с потерей всех изменений. Отключил все плагины и оставил только Paddy, RenameIt и Distributor, всё заробатало.» — @yuryoz
Пэди, к сожалению, оказался очень капризной штукой и пользоваться им стоит осторожно, если вообще стоит. При первых же глюках вырубать и слать тикеты на Гитхаб автору (github.com/DWilliames/paddy-sketch-plugin/issues). Точно не стоит строить на нём рабочий процесс. Я ровняю руками.
Новые функции этого апдейта рассмотрим следом. Есть, чему порадоваться.
Что нового в версии 50
В отличие от предыдущих релизов, в этом разработчики сконцентрировались на оптимизации производительности (хотя, куда уж). Клёвые косметические изменения тоже есть.
Водянистый пост о новом апдейте:
blog.sketchapp.com/making-sketch-better-in-version-50-66514771d625
Я прощупал все описанные в нём функции и выжал интересное:
В отличие от предыдущих релизов, в этом разработчики сконцентрировались на оптимизации производительности (хотя, куда уж). Клёвые косметические изменения тоже есть.
Водянистый пост о новом апдейте:
blog.sketchapp.com/making-sketch-better-in-version-50-66514771d625
Я прощупал все описанные в нём функции и выжал интересное:
#новая_функция: 1. Вложенные оверрайды теперь имеют визуальную иерархию
Было: Все оверрайды в едином списке и сливаются.
Стало: Вложенные оверрайды отображаются под своими родителями на отступе. Теперь легче разобраться.
На скриншоте выделен символ поля ввода, в котором можно переключать иконки. Так по отступу можно понять, что в символе каждой иконки есть два вложенных оверрайда: её цвет и база. Символ цвета — второй уровень вложенности.
Вот мой файл с настроенными оверрайдами для самостоятельного разбора:
Было: Все оверрайды в едином списке и сливаются.
Стало: Вложенные оверрайды отображаются под своими родителями на отступе. Теперь легче разобраться.
На скриншоте выделен символ поля ввода, в котором можно переключать иконки. Так по отступу можно понять, что в символе каждой иконки есть два вложенных оверрайда: её цвет и база. Символ цвета — второй уровень вложенности.
Вот мой файл с настроенными оверрайдами для самостоятельного разбора: