8162
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481
Юра Ветров собрал интересные анонсы с недавно прошедшей выставки 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 (белый). Включить музыку, установить таймер и узнать погоду.
Всё же пока, голосовые ассистенты не несут никакой особенной пользы.
Apple опубликовала иллюстрированные советы по UI для разработчиков. Что и как можно, или нельзя делать в дизайне приложений. Советы очень базовые и простые. https://developer.apple.com/design/tips/
Читать полностью…
Дизайнер Юля Кондратьева из 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вПят
Продублирую рабочую ссылку - https://developer.apple.com/design/tips/
Получил сообщение, что ссылка возможно не у всех работает. Видимо изменённое сообщение не у всех сразу обновилось.
#вакансия
KUPIVIP.RU - один из крупнейших екоммерсов в России ищет дизайнера продукта.
Задачи:
1. Много думать — о пользователях, продукте, экосистеме. Мы не шаблонный интернет-магазин от дизайн студии, мы всё-таки долгосрочный бизнес, который, в первую очередь именно продает в онлайне. Помнить о том, что есть цифры, A/B тесты и не стесняться спрашивать их результаты.
2. Уметь проектировать функционал/фичи на пару с продакт-менеджером (имея минимум вводных требований и формализованных описаний).
3. Оборачивать крутой UX в симпатичный UI (куда уж мы без секси тенюшечек или что там сейчас в моде). Желательно это делать в виде быстрых скетчей/набросков, без ухода в раздумья на недели.
Бонусы, Преимущества и прочие молодой коллектив
1. Компания достаточно крупная, так что супер-гибкий эджайл стартапный не ждите, тут всё-таки иногда приходится идти на поводу у бизнеса (глотая слезы).
2. Офис оупен спейс, вполне стандартный, до dropbox’ов и прочих airbnb конечно далеко, но лучше, чем в каком-нибудь НИИ. И да, главный его минус — расположение на м.Волгоградский проспект.
3. Деньги платят вовремя, оформление полностью белое (есть же те, кого это волнует).
4. Работать в офисе, иногда можно удаленно (если ничего не полыхает).
5. Платить можем 80 (если хотите), можем 150 (если сможете).
Непосредственная команда: 2 продакта, аналитик.
Опыт в екоммерс не обязательный, но должны быть продукты посложнее лендингов и корп.сайтов.
Пишите по вакансии velichko.stepan@gmail.com
Скажите пожалуйста, что увидели это объявление в канале @duiux при отклике на вакансию
