Михаил Лихачев, ведущий дизайнер ВКонтакте и мой коллега, написал большую статью о том, как в ВК велась работа над созданием темной темы для мобильного приложения.

Статья будет полезна тем, кому интересно понять, как организовать стили и цвета для создания тем оформления. А так же, как наладить связь между дизайном и кодом. И просто помогает ответить на вопрос, что такое «токен», понятие, которое кажется в ру дизайне появилось недавно.

Ссылка на статью — http://clc.to/ojsOyQ

Так же хочу добавить, что мы в ВК, сейчас ищем дизайнера продукта в команду. Подробнее о вакансии по ссылке — http://clc.to/TxM_mw

​​Немного задержался с ежемесячным дайджестом, в связи с отпуском. Но как говорят, лучше позже, чем никогда.

Ловите апрельский дайджейст линков следующим сообщением!

​​# Линки. Апрель.

## Почитать
1. Перевод интервью с дизайнерами PornHub.

2. Команда сайта daylico, поделилась своим  опытом использования инструмента WebFlow

3. Статья о том, что стоит меньше запариваться с сетками и использовать паттерны адаптивных контейнеров.

4. Советы по добавлению моушен анимации в дизайн систему.

5. В гайдлайны Material Design добавлены рекомендации по созданию Тёмной темы.


## Паттерны

1. Чек лист по дизайну экранов. Чтобы ничего не забыть.

2. Набор бест практик по созданию корзины в интернет магазине.


## Инструменты

1. Dragula — инструмент с бесплатными стоковыми изображениями.  

2. Milanote — инструмент для организации информации в виде доски.


### Sketch

1. Плагин для создания брейкпойнтов в макетах.

2. Плагин для рисования userflow стрелочек в макетах.

3. Илья, дизайнер ВКонтакте обновил плагин для Sketch. Плагин позволяет добавлять в макеты реальные данные из ВК.


### Figma

Плагины в Figma.


## Код

1. Lottie запустили коллекцию пользовательских svg анимаций.

2. В Framer X появился редактор кода и возможность писать свои компоненты.

3. Расширение для Visual Studio, которое позволяет верстать визуально.

4. Инструмент для визуального коддинга Modulz обновился.

5. Игра по проверке знаний CSS селекторов.


## Разное

1. Коллекция скриншотов приложений из App Store.

2. Официальный аккаунт дизайн команды Instagram.

#links

Behance Portfolio Review
18 мая в Санкт-Петербурге

Практическая конференция для дизайнеров и арт-директоров в уникальном формате: эксперты проанализируют и оценят работы участников прямо на сцене.

В этот раз ITS.agency вместе с re:Store соберут на одной площадке лучших арт-директоров из Нью-Йорка, Москвы и Петербурга. Приходите послушать классные лекции и честное мнение жюри о работах участников.

Показать свою работу можно публично на сцене или в приватном формате. Участники публичных ревью поборются за специальные призы от партнеров.

На конкурс принимаются дизайнерские работы из сферы диджитал: сайты, приложения, концепции, интерфейсы.

Подать работу на конкурс или зарегистрироваться как слушатель можно на сайте — https://clc.to/WtfQfA

Чёрный и белый в темной теме

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

Поэтому вместо RGB (0,0,0) лучше использовать 5% чёрного RGB (0,0,5). Такой цвет так же экономит  заряд устройства и не создаёт плавающий эффект.


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

Источник

Например плавающий эффект я замечаю в темной теме Твиттер.

На гифке можно заметить, как плашка информации чёрного цвета «прыгает».

​​Бесплатный митап для дизайнеров, исследователей и аналитиков — QIWI Кухня.

23 мая в 18:00
DI Telegraph, Москва, ул. Тверская, 7

Юля Урасова, руководитель дизайнеров QIWI
Расскажет, что дизайнер точно должен понимать в аналитике и даст инструкцию как прокачаться.

Вова Зимин, дизайн-директор Почты России
Подскажет, с чего начать менять олдскульные продукты, когда нужно менять ВСЁ.

Алексей Дитятьев, CPO QIWI Кошелька
Поделится историями о границах между ролями менеджера и дизайнера продукта, как их определять и быть сильнее.

Дарья Маткина и Евгений Новичихин из Creative Community
Будут рассуждать о границе между шаблонами и творчеством: UX методики или креативные исследования.

И в завершении, воркшоп от Лизы Ревзиной, design lead в The Boston Consulting Group

Регистрация на эвент по ссылке — https://clc.to/wmEpIA

Гайд по созданию бюджетной UX лаборатории.

Для проведения тестирования мобильного приложения вам понадобится:
- Приложение для десктопа GoToMeeting
- MacBook (Думаю подойдёт и Windows ноутбук)
- USB веб камера
- IPEVO HD — Камера для съемки документов.
- IPEVO Visualizer app
- Privacy экран for MacBook. Что бы респондент ничего не видел на экране монитора.
- Приложение, которое не даст вашему маку заснуть (например Amphetamine)
- USB конференц микрофон (опционально)
- Хороший WiFi

Для проведения десктоп тестирования приложений и веб сайтов.
- Приложение GoToMeeting
- MacBook (Думаю подойдёт и Windows ноутбук)
- Внешний монитор
- Внешняя клавиатура
- Мышь
- USB веб-камера
- Privacy экран for MacBook. Что бы респондент ничего не видел на экране монитора.
- Приложение, которое не даст вашему маку заснуть (например Amphetamine)
- USB конференц микрофон (опционально)
- Хороший WiFi

Ссылка на статью, как всё настраивать  — https://clc.to/_n92UQ

Этой новостью хочется поделиться хотя бы потому, что Microsoft смогли сделать стильное видео о терминале. Посмотрите, как круто — https://youtu.be/8gw0rXPMMPE

Подробнее о других презентациях Майков — https://clc.to/R4FS0Q

Apple анонсировала Dark Mode в iOS и опубликовала гайдлайны по оптимизации дизайна приложения для неё.

Я написал короткую выжимку по основным пунктам рекомендаций. И приложил ссылку на запись демонстрации iOS 13 c WWDC 2019.

https://vk.com/@duiux-dark-mode-guidlines

Толковая выжимка с конференции WWDC — https://youtu.be/OWlFlDgQJtw

​​Чат канала

В связи с недавним обновлением телеграм, я решил создать чатик для канала. Этот день настал.

Теперь можно обсуждать и комментировать публикации в нём.

Что бы попасть в чат, просто нажмите «Обсудить» в канале или перейдите по ссылке — https://t.me/joinchat/ABFz0hNQzE7dQ7-71Fmgbw

Новый шрифт Нью-Йорк от Apple! После вчерашней презентации для разработчиков уже доступен в бесплатном доступе для скачивания новый шрифт, на этот раз антиква, созданная на высочайшем технологическом уровне, являющаяся парой Сан-Франциско. Так же в шрифте есть вариативность и специальные 4 оптических рисунка начертаний под различные размеры текста. Шрифт кстати очень круто выглядит и кириллица неплохая!
Любопытно, что в 1983 Apple уже выпускали шрифт New York для своих первых макинтошей. Но ничего общего, кроме названия, между шрифтами нет.
Cкачать NY: https://developer.apple.com/fonts/

Вторая грандиозная новость — поддержка кастомных шрифтов. Теперь в App Store можно будет устанавливать шрифты крупнейших шрифтовых издательств (Adobe Typekit, Monotype и т.д.) и использовать их по желанию в приложениях.

В третьих: в рамках шрифтовой семьи Сан-Франциско теперь добавлены вариативные иконки в едином стиле. Можно максимально точно регулировать насыщенность линий в зависимости от размера, дизайна или задач интерфейса!
Подробнее: https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
Скачать: https://developer.apple.com/design/downloads/SF-Symbols.dmg
ВУУУХ!

Новая антиква от Apple выглядит вот так, кириллица, как видите, тоже есть!

Немного инсайтов о будущих обновления Sketch

Умное выравнивание слоёв в группе
Аналогично Smart Select в Figma. Можно выбрать слои в стеке и быстро изменить отступы между ними.

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

Удобная работа с компонентами
Бывший разработчик плагина Paddy для умного выравнивания слоёв, который ранее перешёл в команду скетча, показал наработки. Теперь функция будет доступна нативно. По всей видимости можно будет создавать сложные и гибкие компоненты. Очень жду! В видео демонстрация работы с лейблом в кнопке. От плагина Relabel Buttons можно будет отказаться.

Новые возможности в Sketch Cloud
Вот тут самое непонятное по видео. Может быть появится нативый инструмент для просмотра спецификаций?

В прошлом посте я упомянул новые возможные Sketch Cloud, но видео с конфы было плохого качества и было непонятно, что там.

И вот подъехали официальные подробности. Команда Sketch сделала анонс в твиттере о новых возможностях Sketch Cloud.

Появится командный режим работы. Судя по видео, можно будет работать над одним макетом совмести с другими дизайнерами, будет некий простой контроль версий. И возможно (кажется по видео), хотя я сам в это не верю — автоматическая загрузка макета в облако для сбора фидбэка.

Публичную бету обещают в Июле. Очень жирные анонсы. Наконец-то ребята зашевелились, не зря привлекли инвестиции :)

Решил протестить голосового помощника Олега от банка Тиньков. И я сразу словил проблему, после которой пользоваться помощником я буду с осторожностью.

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

Вообще это очень фиговая ситуация для банка. Я теперь буду бояться общаться с помощником, так как он может внезапно отправить команду в чат с сотрудником.

Но смеялся я долго с ответа оператора. Смешная ситуация вышла.

🤔 Кстати. Я вот публикую в лонгриды ВКонтакте дайджест, а он у всех открывается?

Особенно интересно узнать мнение людей из Украины и других стран, где ВК заблокирован. Нет проблем с просмотром статьи, или с Instant View всё отлично читается?