Сири, переведи 10 рублей Евгению Ивлеву. Переведи 10 рублей.
Пе-ре-ве-ди 10 рублей! Переведи деньги!
Если ничего не поняли — значит еще не смотрели.

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

https://youtu.be/-XrXKNX3i0g

Способы организации CSS-кода

Как писать CSS код, что бы его можно было легко масштабировать и поддерживать. Об основных методах структурирования и организации кода рассказывает автор статьи на хабре.

Методы, которые описаны в статье:

1. БЭМ
2. OOCSS
3. SMACSS
4. Atomic CSS
5. MCSS
6. AMCSS
7. FUN

Статья содержит лишь базовое описание принципов. За подробностями автор рекомендует обратиться к документациям.

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

Ссылка на статью по организации CSS — https://is.gd/c6HRAH

Дополнение
Добавлю по этой теме, отличную статью по БЭМ для начинающих на русском. Узнал о ней из подкаста «Веб–стандарты». Планировал ей поделиться раньше, но видимо забыл. И «поиск» по каналу сообщил, что я её не публиковал. Но в любом случае, не будет хуже напомнить о ней ещё раз. Поэтому держите про БЭМ — https://is.gd/Dwkx5r

В начале недели я писал, что Figma выкатила API. Я хотел узнать, какой от этого профит в разработке. И вот нашёл подробный ответ в канале по мобильной разработке. ⏬

На прошлой неделе Figma представили API для разработчиков. С его помощью можно скачать проект в формате JSON, читать и писать комментарии к файлам и экспортировать любой компонент в виде картинки. Пока что это все возможности, но разработчики обещают добавлять новые фичи.

В JSON-файле каждому экрану соотвествует объект CANVAS. В него входят элементы экрана с их свойствами — цвет, эффекты, шрифт и так далее. Можно работать с компонентами, сетками и констрейнтами.

В качестве юзкейсов Figma предлагают генерировать компоненты или стайлгайды, интегрировать спелл-чек для текстов в интерфейсе, делать живые мокапы и так далее.

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

Github сделали систему, которая автоматически обновляет иконки в проекте вслед за изменениями в макете. Сотрудник создаёт пулл-реквест со ссылкой на обновлённый макет, система continuous integration билдит проект, подтягивает иконки из макета в Фигме и нарезает их в подходящий для проекта формат.

Haiku представили интергацию с Фигмой и написали туториал про то, как анимировать элементы ваших макетов.

#figma #инструмент

​​Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.

1. Презентация шрифта IBM Plex — https://is.gd/sgwFlj
2. Отличные примеры инфографики от русского агентства — https://is.gd/uvM0Wm
3. Гайдлайны Microsoft по Fluent Design — https://is.gd/b2akaI
4. Lunacy. Как они говорят на сайте — «Sketch для Windows» — https://is.gd/5t9bGC
5.  Flawless app делятся купонами на бесплатную регистрацию .wiki и .ink доменов. .wiki — https://is.gd/8puSWb .ink — https://is.gd/DHChl3

#5вПят

Саша Окунев написал большой обзор про Invision Studio. Прочтите если вы давно ждёте подробности про этот инструмент. Я тоже получил на прошлой неделе свой инвайт, но не успел добраться до подробного разбора.

Обзор Инвижн Студио

Специально для @awdee я написал большой обзор, в котором опробовал в работе новый редактор от розовых хайпожоров. Он оказался небезнадёжным.

awdee.ru/invision-studio-review

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

В статье сравнил интерфейс Скетча и Инвижна и показал ключевые моменты в гифках.

#Инвижн
—
#для_профи — рубрика для прожжённых

Что же такое дизайн–система?

Андрей Сундиев написал на хабр статью, в которой старается подробно рассказать, что же такое дизайн–система? И почему стайлгайды и ui–киты нельзя называть дизайн–системой. Андрей работает шеф–дизайнером портальной команды Mail.Ru Group.

Дизайн–система по своему является системой по передаче знаний между разработчиками. Статья начинается с истории, как люди систематизировали знания. После в формате вопрос–ответа, Андрей отвечает на частые вопросы.

Что должна включать в себя настоящая дизайн–система:

1. Визуальный язык — это философия и набор принципов на основании которых принимаются решения в разработке продукта.
2. Библиотека компонентов в коде — техническая реализация того, что было заложено в визуальном языке.
3. Шаблоны для дизайнерских инструментов — библиотека элементов с помощью которой дизайнеры могут прототипировать.
4. Команда дизайн–системы.

Ссылка на статью — https://is.gd/VWYBmv

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

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

https://youtu.be/7fg1MXuKbBI

​​Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.

1. Сервис для создания карты переходов — https://is.gd/ylfn5h
2. Подробные разборы онбордингов приложений — https://is.gd/6Ioyi5
3. Инструмент для создания SVG анимаций — https://is.gd/4R3JBp
4. Расширение для Chrome по созданию палитры из сайта — https://is.gd/hxfQ8N
5. Инструмент для создания презентаций. Очень красивая палитра на лендинге — https://is.gd/zZZ9cP

#5вПят

Стрим по методологии Jobs to be Done от UX Research Meetup (на русском) — https://youtu.be/9NeqX72urHI

Даже несмотря на плотную подготовку к событию, которое  уже на этих выходных — мы продолжаем свой эфир!

Почти 10 лет (в следующем году юбилей) прошло со дня появления знака Перми.  А до сих пор есть что обсудить. Эркен Кагаров рассказывает как полтора года возглавлял центр развития дизайна, что видел, что понял; и у кого Москва подрезала все лучшие идеи.

https://youtu.be/rrmUL8J6SKM

​​​​Многие начали тревожиться, что телеграм в РФ 🇷🇺 скоро всё. Но я буду считать до последнего, что все это полный булщит, и всё будет хорошо.

В прошлом году, когда уже была подобная истерия я завёл зеркала канала в других сетях и дублировал в них публикации из канала. Правда спустя некоторое время я забил на зеркала, так как шумиха утихла, а я не нашёл нормального инструмента для удобно кросспостинга из телеграм в другие сети. Делать это руками было лень, да и я попросту забывался.

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

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

Вконтакте - https://is.gd/bXnWz3
Facebook - https://is.gd/Mm8btr
Twitter - https://is.gd/ptGHhA

Telegram will be free! ✊

Ищут продуктового дизайнера в Яндекс — https://is.gd/0f6U2l

​​В связи с событиями вокруг телеграм в 🇷🇺 я решил опубликовать пятничный дайджест в группе Facebook и VK.

В дайджесте. Как сделать качественную gif из видео через терминал, плагин Media Queries для Sketch и ещё другие три ссылки.

Facebook — https://is.gd/sIhslG
Вконтакте — https://is.gd/q9SlQS

🙏Извиняюсь, что ссылки в Вконтакте оказались нерабочими. Спасибо читателю, который сообщил о проблеме. Теперь все ссылки в дайджесте ВК рабочие.

Отличный пример, как машина и дизайнер могут работать в будущем вместе — http://telegra.ph/Budushchee-sovmestnoj-raboty-dizajnera-i-mashiny-04-14

Сделал выжимку из прочитанной статьи о коридорном исследовании — http://telegra.ph/Koridornoe-testirovanie-maketov-04-17

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

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

А вы как считаете?

Евгений Беляев в сообществе «качественный Android» делится полезной статистикой по версиям Android.

Ссылка на фейсбук сообщество — https://is.gd/jkRPwN

Следующим сообщением изображение со статистикой по версиям Android на 16 апреля (до 5 февраля 2018).

Статистика по версиям Android на 16 апреля (до 5 февраля 2018).