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

1. Pantone выбрал цвет Ultra Violet цветом 2018 года - https://is.gd/duhuqf
2. Аналог UI challenge для дизайнеров. Если не знаете, что нарисовать для Dribbble - https://is.gd/gZVli2
3. Плагин для Sketch для создания анимаций и экспорта спек после - https://is.gd/9h2bhH
4. Подборка фильмов, подкастов, курсов от Meduza по дизайну - https://is.gd/EJ4mOI
5. Большой материал на тему изучения Типографики - https://is.gd/JyNHPx

#5вПят

Сходил сегодня впервые на pitercss. О нём узнал из подкаста «веб-стандарты». Это ежемесячные встречи по фронтенду в Санкт-Петербурге. Следить за следующими анонсами можно в группе - https://is.gd/CpGTUS  

Понравились доклады про оптимизацию графики для веба, и доклад Анастасии Суховерховой, как сделать сайт доступным для людей с нарушением зрения. В докладе помимо советов по правильной разметке сайта, она рассказала о своём проекте weblind.

Сайт weblind - сборник рекомендаций по разработке сайтов для людей с нарушением зрения. Это отличный сборник гайдов на тему доступного веба. Рекомендую посмотреть его и закинуть в закладки. Полезный ресурс в рунете.

Ссылка на weblind - https://is.gd/OQOcOB

P.s.: может быть вы знаете ещё какие нибудь полезные для дизайнера эвенты в Санкт-Петербурге? Напишите мне @astract  

#accessibility

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

1. Haiku. Ещё один перспективный инструмент для анимаций и экспорта кода - https://goo.gl/sk9zHu
2. Telegram бот, который оптимизирует SVG графику - @svgo_bot
3. Онлайн инструмент для прототипирования Atomic добавил бесплатный аккаунт с неограниченным числом проектов. Хороший инструмент. Использовал его на старте проекта, но бросил после введения платных аккаунтов. Т.к не было большого смысла платить за него когда есть Principle. - https://goo.gl/B9Dhjl
4. Стартап MagicLeap представили очки дополненной реальности. Клевый лендинг - https://goo.gl/nhihS7
5. Teampaper - скриншотилка для дизайнеров с возможностью обсуждений. Использую её лично и активно в работе. Нравится прямая отгрузка как отдельных так и группы артбордов из Sketch. Сервис бесплатен для работы, но если захотите вдруг поставить свой логотип на каждый скриншот, то для этого нужно будет купить. На этот случай, ребята из команды продукта, поделились со мной промокодами на покупку: 3L9TLJP4LXJT, W6T67XEFT676, H63R3LP4P463 - https://goo.gl/yuuF23


#5вПят

Это была последняя в этом году рубрика «Пять в Пят». Следующая выйдет после всех праздников в январе. К сожалению на этой неделе, я был занят рабочими проектами и предпраздничной суетой, и у меня не нашлось времени на оформление публикаций для канала. Извиняюсь. Но хочу сказать, спасибо всем вам, что читаете канал и даёте фидбек, для меня это самое важное 🙏

Канал, как и я, уходит в праздничный отпуск, того же и вам желаю. Увидимся в Январе 2018. С наступающим! Пусть праздники, будут добрыми и веселыми 🎅🏻🎄🐶

Что нового в HTML 5.2

Несколько месяцев назад HTML 5.2 был принят W3C. В статье подробно описаны все основные изменения. Что появилось нового, а что было изменено.

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

Всем привет! 🖐

#фронтенд

Мероприятия для дизайнеров и фронтенд разработчиков в 2018

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

Wikipedia - дизайн приложения для офлайна

Wikipedia рассказала в своём блоге, как они разработали дизайн Android приложения для работы в офлайне. Офлайн режим особенно популярен у пользователей, которые имеют медленный интернет или плохой доступ к сети.

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

Обзор работы приложения Kite compositor для macOS

Kite compositor - вышел в прошлом году и это тот инструмент, который может помочь наладить коммуникацию между разработчиком и дизайнером при передаче анимаций. Приложение чем то похоже на Principle или After Effects, есть огромный список Actions и событий, но её фишка в том, что он может генерировать на выходе анимации код для Xcode.

В посте на хабре дизайнер рассказал о своём опыте работы в приложении, а разработчики из команды дали фидбек полученному коду. Выделил основное из статьи.

Про анимацию и генерируемый код:
- Kite compositor плохо импортирует из Sketch. Теряет некоторые элементы.
- Ограничения работа с трансформацией объектов в анимации.
- Кривой режим демонстрации анимации.
- Генерируемый приложением код «мусорный» и много дублирования. Разработчикам потребуется прописывать функции и чистить полученный код.
- Не учитываются другие разрешения. Нет адаптивности. В каком коэффициенте дизайнили в том и код получайте.
- Мало туториалов.

Итог статьи в том, что в целом инструмент хороший и двигается в правильном направлении, сейчас к сожалению нет других хороших инструментов для передачи анимаций программисту. Lottie от AirBnb имеет свои ограничения и не всем подходит. Не всегда получается подключать к приложению дополнительную библиотеку для проигрывания анимаций. Я надеюсь в 2018 мы увидим много приложений, которые будут решать проблему передачи анимаций в код.

Аналитика от Flurry за 2017

Сервис аналитики Flurry поделился статистикой использования смартфонов и приложений за 2017.

Мобильные приложения
Использование мобильных приложений выросло на 6% в 2017 по сравнению с 2016. Подросла популярность у категории приложений Shopping. Люди стали чаще покупать, особенно на этот рост оказало влияние Apple Pay и Samsung Pay. Просела популярность категории приложений Lifestyle.

Устройства
Фаблеты наиболее популярные устройства у пользователей (55% в 2017, против 41% в 2016).

Производители
Apple на высоте, Samsung держит позиции, китайские бренды немного подросли в 2017.

🇺🇸 Подробнее обо всём в статье с графиками - https://is.gd/n3ex05

FAB в нижней навигации приложения

Мнение, стоит ли прятать FAB (Floating Action Button) в приложениях в нижнюю панель навигацию. Визуально это выглядит хорошо, но пользователям может быть не понятно, действие это или навигация. Теряется смысл кнопки. Стоит учитывать это когда используете подобный партер в своём приложении.

🇺🇸 Ссылка на статью - https://is.gd/w31u1c

Мне сообщили, что в статье про Wikipedia не у всех может отображаться ссылка на статью. Видимо это проблема есть в  приложении Telegram X для iOS.

Добавлю ссылку на статью отдельно - https://is.gd/dkqo1a

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

1. Коллекция референсов сайтов на любую тему со всего мира. Полезно в работе на стадии анализа конкурентов - https://is.gd/m86t0n
2. Плагин Timeline для Sketch. Позволяет создавать анимации внутри редактора https://is.gd/hlreg5
3. Как получить многие сведения о пользователе не задавая лишние вопросы. Подборка инструментов, советов и наборов данных от Антона Жиянова https://is.gd/3ffjqy
4. Сборник полезных хоткеев для работы в Sublime Text https://is.gd/ikew36
5. Видео интервью с Леонидом Иваховым — руководителем отдела дизайна социальной сети «Одноклассники». Рад, что мне удалось работать под руководством Леонида, я получил полезный опыт - https://is.gd/ljayfn

#5вПят

Дизайнер Юля Кондратьева из looi, рассказала почему, по её мнению pie-chart не так удобен для отображения расходов в банковских приложениях. И что лучше отображать статистику трат в виде линейной диаграммы с отображением категории трат и места.

https://is.gd/lczeaq

Юра Ветров собрал интересные анонсы с недавно прошедшей выставки CES (Consumer Electronics Show) 2018, которые касаются интерфейсов в своём канале - t.me/pdigest/16

Рекомендую подписаться на его канал, а лучше на ежемесячную эмейл рассылку дайджеста. По ссылке можно найти форму на подписку в любом дайджесте - https://is.gd/7xko2o

Пару дней назад разработчик плагина diya для анимаций в Sketch, сообщил о закрытом бета тесте плагина и поделился со мной сборкой. Я попробовал плагин в работе и написал маленько ревью по ссылке https://goo.gl/QhcNuU

Всем привет и с днём студента! 👩‍💻👨‍💻

Сегодня расскажу о совместной истории со школой Contented. Ребята позвали меня посмотреть их программу обучения «Дизайнер интерфейсов» и поделиться своими впечатлениями. Для меня это особенное предложение. Хотел по возможности пройти подобный курс и возможно структурировать текущие знания.

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

Кто хочет учиться в школе параллельно со мной - скидка 25 %. Промокод EL2MGZ (работает до 30 января).

Ссылка на обучение - https://goo.gl/hhWJqX

Как использовать Вариативные шрифты в вебе

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

Пример из статьи:
Roboto имеет 12 файлов шрифта и 12 начертаний соответственно. Вариативный шрифт - 1 файл и большое множество начертаний.

По ссылке можно посмотреть пример работы вариативного шрифта - https://is.gd/lrsfkk

У вариативного шрифта можно регулировать список параметров:
- Weight
- Width
- Optical size
- Slant
- Italic

Вариативные шрифты можно подключить к веб странице так же как и обычный шрифт. Для настройки шрифта в CSS есть свойство font-variation-settings:

К сожалению вариативные шрифты поддерживают пока не все браузеры. Например мой Safari 11.0.2 отказался работать с сайтом axis-praxis (хотя автор говорит, что последние версии браузера имеют поддержку). Пришлось открывать в Chrome. В конце 2017 Adobe Photoshop и Illustrator добавили работу с вариативными шрифтами. В панели Properties есть возможность настроить шрифт.

Ссылка на статью со всеми подробностями - https://is.gd/s42cnd

Вчера, 25 января каналу исполнилось 2 года! Большое спасибо всем вам, что читаете канал 🎉

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

1. Чеклист по созданию хорошей типографики в проекте https://is.gd/dl4f9e
2. Инструмент для создания системы типографики. Можно экспортировать в  Sketch с привязкой стилей - https://is.gd/hkv8s7
3. Помоги благотворительным фондам выполняю интеллектуальную работу. Не только для дизайнеров. Хорошая возможность выполнить настоящие проекты и наполнить своё портфолио - https://is.gd/i6czmi
4. Сайт где можно посмотреть скринкасты, как работают профессионалы дизайна - https://is.gd/2sqgiv
5. Orion – сервис с отличными иконками для работы https://is.gd/ij8w26

#5вПят

Павел Лаптев написал лонгрид об истории виртуальной реальности, какие типы виртуальных реальностей сейчас существуют. Я узнал, что их четыре, а не три. Знал про VR, AR и Mixed Reality, но незнал про AV (augmented virtuality). В статье он так же рассказывает, как прототипировать такие интерфейсы в Framer.

🇺🇸 Ссылка на статью - https://is.gd/c6xbf2