8162
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481
Как использовать Вариативные шрифты в вебе
Вариативные шрифты для тех кто слышит о них в-первые. Это один шрифт, который включает в себя огромное множество начертаний. Каждый параметр шрифта можно настраивать отдельно, таким образом получая уникальный внешний вид. Вариативный шрифт имеет один файл шрифта, в отличии от обычных шрифтов, где каждое начертание хранится в отдельном файле.
Пример из статьи:
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
Пару дней назад разработчик плагина diya для анимаций в Sketch, сообщил о закрытом бета тесте плагина и поделился со мной сборкой. Я попробовал плагин в работе и написал маленько ревью по ссылке https://goo.gl/QhcNuU
Читать полностью…
Дизайнер Юля Кондратьева из looi, рассказала почему, по её мнению pie-chart не так удобен для отображения расходов в банковских приложениях. И что лучше отображать статистику трат в виде линейной диаграммы с отображением категории трат и места.
https://is.gd/lczeaq
Мне сообщили, что в статье про Wikipedia не у всех может отображаться ссылка на статью. Видимо это проблема есть в приложении Telegram X для iOS.
Добавлю ссылку на статью отдельно - https://is.gd/dkqo1a
Аналитика от Flurry за 2017
Сервис аналитики Flurry поделился статистикой использования смартфонов и приложений за 2017.
Мобильные приложения
Использование мобильных приложений выросло на 6% в 2017 по сравнению с 2016. Подросла популярность у категории приложений Shopping. Люди стали чаще покупать, особенно на этот рост оказало влияние Apple Pay и Samsung Pay. Просела популярность категории приложений Lifestyle.
Устройства
Фаблеты наиболее популярные устройства у пользователей (55% в 2017, против 41% в 2016).
Производители
Apple на высоте, Samsung держит позиции, китайские бренды немного подросли в 2017.
🇺🇸 Подробнее обо всём в статье с графиками - https://is.gd/n3ex05
Wikipedia - дизайн приложения для офлайна
Wikipedia рассказала в своём блоге, как они разработали дизайн Android приложения для работы в офлайне. Офлайн режим особенно популярен у пользователей, которые имеют медленный интернет или плохой доступ к сети.
Для решения проблем таких пользователей, они сделали возможность загрузки статей в офлайн, добавили раздел «офлайн библиотека», добавили возможность поделиться статьёй в офлайне и сделали онбординг, что бы познакомить пользователя с новыми возможностями приложения.
Что нового в HTML 5.2
Несколько месяцев назад HTML 5.2 был принят W3C. В статье подробно описаны все основные изменения. Что появилось нового, а что было изменено.
Я пока ещё «зелен» в вёрстке, поэтому не все описанные фичи мне понятны из статьи, но всё равно держать актуальные знания полезно. В этом году я хочу сделать особый упор на вёрстку в своей работе.
Всем привет! 🖐
#фронтенд
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
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вПят
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
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вПят
Индивидуальная программа онлайн-обучения и опытный дизайнер в качестве персонального наставника, который всегда на связи.
Учись откуда удобно. А время лучше используй на получение опыта. 2 года жесткой практики и проекты в портфолио, которые не похожи на ученические. Лучших порекомендуем на стажировку и трудоустройство в команды Redmadrobot, BBDO, Creative people, Rambler&Co, Yandex. Государственный диплом – если кроме опыта тебе нужен документ. https://goo.gl/rrZRU4
#реклама
AppStore предложил установить обновления для системы и ещё какие-то обновления для iTunes и Safari. Я как обычный пользователь согласился на обновление, и столкнулся с проблемой.
Пока система скачивает и устанавливает эти обновления, я не могу использовать Safari. Хотя в текущий момент, мне очень нужен был браузер. Пришлось открывать запасной. Плохой UX Apple.
В канале PSD пишут просто и понятно обо всём околодизайнерском и не только.
Можно найти много полезной и интересной информации. Подписывайтесь на канал - /channel/psd_eu
#реклама
Nielsen Norman Group о типографике для Glancing чтения.
Как я понял из материала, понятие Glancing означает – быстрое считывание короткого текста. Текст которого, как правило состоит из одного или двух слов. Такие тексты в основном используются на умных часах и в уведомлениях. В статье они дают рекомендации по подбору шрифтов для отображения такой информации и приводят сравнительные графики, в которых показано как размер шрифта влияет на скорость считывания.
Выделил основные моменты из статьи:
— Короткие сессии использования смартфона составляют 40% и длятся менее 15 секунд. В основном это просмотр уведомлений.
— Для считывания строчных букв (lowercase) требуется на 26% больше времени, чем для заглавных (uppercase) букв.
— Узкие (condensed) шрифты требуют на 11,2% больше времени на считывание, чем обычные шрифты (regular).
— Больше - лучше. Regular лучше Condensed. Uppercase превосходит lowercase. Но это подходит только для коротких сообщений.
— Крупные шрифты подходят для информации, которую пользователю нужно считать быстро. Стоит избегать использования строчных (lowercase) там где уместней будет использовать заглавные буквы (uppercase).
— Откажитесь от использования узких (condensed) и тонких шрифтов в приложениях для навигации. Использование таких шрифтов в навигации может помешать пользователю быстро считывать важную для него информацию в дороге. https://goo.gl/QiywfV
Перевод книги Брэда Фроста Atomic Design https://goo.gl/M9mvc2
Читать полностью…
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
1. Приложение для ios которое определяет что за шрифт - https://is.gd/1Yq2A2
2. Ещё один инструмент для создания анимаций и экспорта в код https://is.gd/mnRBtD
3. Инструмент для сравнения макетов приложения с уже сверстанным - https://is.gd/EflQY1
4. Хорошее чтиво о графическом дизайне в Северной Корее - https://is.gd/XllaUk
5. Вышел Pixelmator Pro для macOS. Можно скачать Trial на 30 дней - https://is.gd/MpnG0y
#5вПят
Всем привет и с днём студента! 👩💻👨💻
Сегодня расскажу о совместной истории со школой Contented. Ребята позвали меня посмотреть их программу обучения «Дизайнер интерфейсов» и поделиться своими впечатлениями. Для меня это особенное предложение. Хотел по возможности пройти подобный курс и возможно структурировать текущие знания.
Поэтому, ближайшие несколько месяцев я буду держать вас в курсе обучения, напишу пару рецензий и инсайтов, если они появятся. Всё обучение проходит онлайн.
Кто хочет учиться в школе параллельно со мной - скидка 25 %. Промокод EL2MGZ (работает до 30 января).
Ссылка на обучение - https://goo.gl/hhWJqX
Юра Ветров собрал интересные анонсы с недавно прошедшей выставки CES (Consumer Electronics Show) 2018, которые касаются интерфейсов в своём канале - t.me/pdigest/16
Рекомендую подписаться на его канал, а лучше на ежемесячную эмейл рассылку дайджеста. По ссылке можно найти форму на подписку в любом дайджесте - https://is.gd/7xko2o
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
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вПят
FAB в нижней навигации приложения
Мнение, стоит ли прятать FAB (Floating Action Button) в приложениях в нижнюю панель навигацию. Визуально это выглядит хорошо, но пользователям может быть не понятно, действие это или навигация. Теряется смысл кнопки. Стоит учитывать это когда используете подобный партер в своём приложении.
🇺🇸 Ссылка на статью - https://is.gd/w31u1c
Обзор работы приложения Kite compositor для macOS
Kite compositor - вышел в прошлом году и это тот инструмент, который может помочь наладить коммуникацию между разработчиком и дизайнером при передаче анимаций. Приложение чем то похоже на Principle или After Effects, есть огромный список Actions и событий, но её фишка в том, что он может генерировать на выходе анимации код для Xcode.
В посте на хабре дизайнер рассказал о своём опыте работы в приложении, а разработчики из команды дали фидбек полученному коду. Выделил основное из статьи.
Про анимацию и генерируемый код:
- Kite compositor плохо импортирует из Sketch. Теряет некоторые элементы.
- Ограничения работа с трансформацией объектов в анимации.
- Кривой режим демонстрации анимации.
- Генерируемый приложением код «мусорный» и много дублирования. Разработчикам потребуется прописывать функции и чистить полученный код.
- Не учитываются другие разрешения. Нет адаптивности. В каком коэффициенте дизайнили в том и код получайте.
- Мало туториалов.
Итог статьи в том, что в целом инструмент хороший и двигается в правильном направлении, сейчас к сожалению нет других хороших инструментов для передачи анимаций программисту. Lottie от AirBnb имеет свои ограничения и не всем подходит. Не всегда получается подключать к приложению дополнительную библиотеку для проигрывания анимаций. Я надеюсь в 2018 мы увидим много приложений, которые будут решать проблему передачи анимаций в код.
Мероприятия для дизайнеров и фронтенд разработчиков в 2018
Большая подборка интересных событий в России, странах СНГ и зарубежных странах. Жаль, что основная часть мероприятий проходит за рубежом.
Это была последняя в этом году рубрика «Пять в Пят». Следующая выйдет после всех праздников в январе. К сожалению на этой неделе, я был занят рабочими проектами и предпраздничной суетой, и у меня не нашлось времени на оформление публикаций для канала. Извиняюсь. Но хочу сказать, спасибо всем вам, что читаете канал и даёте фидбек, для меня это самое важное 🙏
Канал, как и я, уходит в праздничный отпуск, того же и вам желаю. Увидимся в Январе 2018. С наступающим! Пусть праздники, будут добрыми и веселыми 🎅🏻🎄🐶
Сходил сегодня впервые на pitercss. О нём узнал из подкаста «веб-стандарты». Это ежемесячные встречи по фронтенду в Санкт-Петербурге. Следить за следующими анонсами можно в группе - https://is.gd/CpGTUS
Понравились доклады про оптимизацию графики для веба, и доклад Анастасии Суховерховой, как сделать сайт доступным для людей с нарушением зрения. В докладе помимо советов по правильной разметке сайта, она рассказала о своём проекте weblind.
Сайт weblind - сборник рекомендаций по разработке сайтов для людей с нарушением зрения. Это отличный сборник гайдов на тему доступного веба. Рекомендую посмотреть его и закинуть в закладки. Полезный ресурс в рунете.
Ссылка на weblind - https://is.gd/OQOcOB
P.s.: может быть вы знаете ещё какие нибудь полезные для дизайнера эвенты в Санкт-Петербурге? Напишите мне @astract
#accessibility
Сравнительное исследование двух компоновок списка с изображениями
Стандартный список, когда картинка и текст выравниваются по одной вертикальной линии сверху вниз. И когда текст с изображением чередуется (слева и справа). На внимание и восприятие информации пользователем, такие два способа расположения информации мало влияют, но всё же выровненный список подходит больше для случаев когда изображения дополняют текст.
1. Пользователи хорошо считывают зигзагообразные, и выровненные по одной линии списки с изображениями. Особенно когда иллюстрации отлично дополняют информационный текст.
2. От первого изображения в списке зависит, будут ли пользователи игнорировать следующие изображения в списке или нет.
3. Декоративные изображения лучше выравнивать по одной линии, но для коротких списков подойдёт и использование зигзагообразного списка.
4. Изображения должны дополнять текст и помогать пользователю понять его, а не усложнять его понимание. Важно создавать хорошие иллюстрации.
5. Основное внимание пользователей идёт по левой области страницы при прокручивании. Поэтому стоит оценивать что поставить первым, изображение или текст. Важно, что бы если изображение будет первым, то оно должно дополнять текст рядом.
https://goo.gl/88JMkP
#research
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
1. Коллекция скриншотов, как выглядит одно и тоже приложение на iOS и Android - https://is.gd/UFG1zB
2. Веб инструмент, который отлично подойдёт для создания карты экранов - https://is.gd/WtX5ed
3. Пример документа, как дизайнеры оформляют спецификации для разработчика в рамках одного проекта (🇺🇦 на Украинском) - https://is.gd/La7HjV
4. Google maps освежили дизайн - https://is.gd/DfXp66
5. Выступление Владимира Пирожкова об инновациях и о том, что нужно думать о чём то большем при создании нового продукта - https://is.gd/TvkfSl
#5вПят
Фреймворк по созданию гармоничной системы отступов в дизайне.
Автор в статье рассказывает и показывает, как на основе выбранного размера шрифта и интерлиньяжа, подобрать необходимые отступы и расстояния между элементами интерфейса, и по каким правилам применять эту систему расстояний. Применение такой системы может ускорить процесс разработки, так как разработчики будут знать правила применения отступов и смогут правильно перенести их из дизайн макетов.
Оригинал статьи: https://is.gd/DusfTX
Перевод: https://is.gd/N91zFu
Дизайнер Тони Пинкевич (Tony Pinkevich) поделился советами по правильной работе с плагином Lottie для After Effects от AirBnb. О самом плагине я писал в канале ранее - t.me/duiux/255
В конце своей статьи, он рассказал, как настроить тестовое окружение в xcode для проверки полученной анимации. Советы из статьи будут полезны тем, кто активно использует плагин в работе.
Список основных моментов из статьи:
— Не стоит использовать композиции в анимации.
— Отказаться от использования эффектов After Effects.
— Отказаться от экспрешенов.
— Не рекомендуется использование эффектов Alpha matte.
— Уменьшайте количество точек и keyframes в маске
Так же Тони поделился ссылками на таблицу, в которой наглядно показаны, какие фичи After Effects поддерживает Lottie - https://goo.gl/trRYC6 и ссылкой на просмотр анимаций из полученного JSON файла в вебе - https://goo.gl/4AjjJg
Ссылка на саму статью Тони - https://goo.gl/ibkh6h
Недавно решил попробовать отказаться от стандартного Safari на iPhone в пользу Firefox или Chrome. Потому что на маке работаю я так же, либо в Chrome либо в новом Firefox. Возможностей Safari мне не хватает к сожалению.
И я заметил, что мобильный Chrome пусть и имеет верхнюю навигацию, в отличии от Safari и Firefox где вся основная навигация находится снизу приложения. У него есть крутая штука с управлением вкладками, жестом. Можно потянуть вниз на активной вкладке, и появится меню главных действий для работы с вкладкой. Где можно выбрать необходимое действие свайпом. Можно создать новую вкладку, обновить и закрыть вкладку. И всё это приправлено симпатичной анимацией.
При активном использовании, для меня это стало очень удобным методом управления. Жаль, что вот только для перехода ко всем вкладках приходится тянуться к верхней части экрана. Но я все равно люблю такие штуки.
Ps: И хоть мне понравился мобильный Chrome, я всё равно не могу полностью слезть с Firefox на всех платформах.
Запись выступления Вадима Макеева из htmlacademy на Web Standards Days - 4 ноября 2017.
В своём выступлении он рассказывает, как делать интерфейсы доступными, почему нужно отказываться от постоянного div в разметке и начать использовать специальные теги (например nav, button и другие). Эти теги смогут правильно понимать скринридеры, и их использование сделает ваш сайт доступным для людей с ограниченными возможностями.
https://www.youtube.com/watch?v=KAK-WAb9vow
Статистика популярных голосовых команд для Amazon Echo (чёрный) и Google Home (белый). Включить музыку, установить таймер и узнать погоду.
Всё же пока, голосовые ассистенты не несут никакой особенной пользы.
