7954
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
По результатам проведённого опроса решил создать новую рубрику «🖐 в Пят» (что значит, Пять в Пятницу).
Буду в конце рабочей недели вечером, публиковать пять ссылок на различные темы, которые не вошли в основные публикации канала. Это может быть что угодно: полезные ресурсы для работы, инструменты, инспирейшены, всё что полезно дизайнерам. Вы так же можете предлагать мне в личные сообщения @astract свои интересные ссылки в течении недели.
Сейчас мне важно узнать, как вам подобная рубрика? Попробуем? Голосование закреплю на первом сообщении рубрики.
В новой версии Sketch 48 наконец-то добавят возможность масштабирования символов через Scale.
Сейчас изменять размеры символа можно только вручную через изменение высоты и ширины. Такой способ не практичен, так как появляются полупиксели на границах.
На видео я показал разницу между двумя символами. Оранжевый символ - скриншот из Sketch 47. Синий символ - скриншот из Sketch 48 Beta.
Можно заметить, что на синем значке (Sketch 48 Beta), который был масштабирован через инструмент Scale, нет полупикселей на границе иконки. На оранжевом же значке (Sketch 47), размер которого был изменён вручную, есть полупиксели на границе.
Дизайнер Meng To рассказал о своём воркфлоу в Sketch и работе над проектами. Какие инструменты и плагины использует, как организует обсуждение дизайна с клиентами.
https://designcode.io/sketch-start
@uxidesign канал дизайнера, который публикует переводы полезных материалов для дизайнеров интерфейсов.
Раз в месяц автор делает пост с подборкой полезных ссылок и инструментов для дизайнеров в своём канале.
Подписывайтесь: @uxidesign
#реклама
Возможно вы уже слышали, что стартанул турнир Russian Design Cup 2017 (RDC). RDC - ежегодный, крутой и сильный конкурс для дизайнеров и проектировщиков.
Сейчас начался отборочный тур. Записаться можно по ссылке https://russiandesigncup.ru/
Успеха всем участникам!
Коллекция маленьких советов по улучшению визуального дизайна в интерфейсах - https://goo.gl/5EnSgJ
Читать полностью…
Дизайн нижних элементов в iPhone X
Дополнительная статья от этого автора с советами по дизайну нижних элементов в iPhone X.
Все элементы, которые раньше прилипали к нижней границе экрана можно сделать плавающими и поднять на 32 pt от нижнего края экрана.
Max Rudberg - Visual & User Interface Designer - UI Design for iPhone X: Bottom Elements
Nielsen Norman Group провели исследование, какой тип рекламы больше всего ненавидят люди в вебе.
Не стал создавать длинное сообщение и вынес основные тезисы из исследования в статью на телеграф
http://telegra.ph/Samye-nenavistnye-tipy-reklamy-v-vebe-10-03
Мой любимый инструмент публикаций Readymag обновил панель виджетов.
Раньше все элементы при добавлении их на страницу, формировались в горизонтальную ленту снизу. В таком виде работать с большим количеством элементов в большом проекте было сложно.
В последнем обновлении эту важную часть интерфейса переосмыслили. Теперь панель виджетов выглядит, как привычная многим панель слоёв в графических редакторах. Виджеты можно группировать и перетаскивать, и проводить другие действия с ними.
Всё это должно упростить работу с проектами в которых используется большое количество элементов.
Подробнее про обновление виджетов в Readymag на Medium
Сделал выборку статей из блога Анастасии Щебровой UX Experience.
Анастасия простым языком и с примерами рассказывает, как создавать карту эмпатии, персонажей, карты путешествия пользователей, сценарии, карты сценариев. Для чего всё это нужно и какие есть минусы у каждого метода.
Выписал основные тезисы по каждой теме. Рекомендую прочитать эти статьи всем начинающим и опытным проектировщикам и дизайнерам продукта. Ссылки на каждую статью в посте.
http://telegra.ph/Artefakty-proektirovaniya-09-22
Яндекс представили свою систему для автомобилей «Яндекс.Авто». Это как CarPlay от Apple и Android Auto от Google. Видео обзор, как работает система - https://youtu.be/mt4ES0G6mG0
Читать полностью…
Apple добавила рекомендации по созданию приложений для нового iPhone X.
1. Графика для iPhone X должна подготавливаться в @3x.
2. Не рекомендуется размещать элементы управления в приложении, близко к краям и нижней части экрана.
3. Панель датчиков сверху экрана не должна перекрывать элементы управления в приложении.
4. Дисплей iPhone X поддерживает цветовое пространство P3, оно отображает больше цветов чем sRGB.
5. Так как управление в новом айфон основано на жестах, важно учитывать это при создании кастомных жестов в приложении. Они не должны конфликтовать с системными жестами.
6. В iPhone X появился новый и метод подтверждения FaceID, он заменил TouchID. Поэтому важно, что бы приложения для iPhone X не ссылались на TouchID. Аналогичное правило для устройств, которые не имеют FaceID.
Подробнее обо всех обновлениях в связи с выходом iPhone X в гайдлайнах https://developer.apple.com/ios/human-interface-guidelines/overview/whats-new/
При создании любого сервиса важно думать не только, как обычные пользователи будут использовать ваш продукт, но и как им будут пользоваться люди с нарушением зрения.
Автор двух полезных статей по этой теме сделал обзор популярных мобильных приложений с точки зрения их доступности. Дал свои рекомендации по улучшению доступности сайтов и мобильных приложений.
Выписал несколько основных тезисов - http://telegra.ph/Kak-uluchshit-dostupnost-sajtov-i-mobilnyh-prilozhenij-09-12
#accessibility
Josh Fleetwood - тимлид моушен дизайна из Google представил два инструмента для эффективной работы в Sketch и After Effects.
1. Sketch2AE - плагин, который переносит все ассеты из скетча в After Effects. Символы переносит как прекомпозицию, маски остаются масками, векторные шейпы, шейпами, а группы привязываются как родительский слой.
2. Inspector Spacetime - собирает спецификацию анимации в After Effects. На основе кейфреймов собирает все необходимые данные для разработки. Значения кривых, координаты, время анимаций.
Звучит всё классно, надо пробовать.
#tool
Люк Вроблевски проиллюстрировал какую пользу могут принести очки дополненной реальности (AR).
Он привёл несколько кейсов использования очков учитывая метод Скотта Дженсона о том, что польза от использования должна быть выше «проблем» использования. Например, устройство которое требуется заряжать каждый день должно приносить пользователю особенную пользу.
Видео об анимации интерфейсов из школы мобильного дизайна Яндекса от Владислава Фёдорова. В своей лекции Владислав рассказывает, зачем нужна анимация в интерфейсах, какими свойствами обладает анимация, и какие инструменты он использует в работе над анимацией.
Из его лекции я заинтересовался плагином Keyframes для After Effects от Facebook. Плагин подготавливает код для iOS и Android на основе созданной анимации, мне этого очень не хватает в работе. Хотя в недавнем проекте впервые попробовал плагин Inspector Spacetime от дизайн команды Google. Но не понравилось, что он собирает спецификацию в виде видеоролика.
На YouTube канале Яндекса о дизайне, много других полезных видеороликов, но я особенно заинтересовался этим, так как очень люблю анимацию. Делать статику для меня очень скучно, поэтому иногда, как хобби занимаюсь и анимацией иллюстраций.
Ссылка на видео Яндекса об анимации - https://youtu.be/DTLF-Mpv534
Так же рекомендую подписаться на канал и посмотреть другие полезные лекции.
На канале уже много подписчиков и я этому очень рад. Спасибо вам.
Учитывая этот факт я решил провести анонимный опрос и узнать ваш фидбек о канале. Пройдите его пожалуйста, в нём нет обязательных вопросов, но вся полученная информация поможет развитию канала.
📋Ссылка на анонимный опрос - https://goo.gl/forms/WewMZ6azzd65bpXs1
В предверии выхода iPhone X нашёл на хабре подробный гайд по дизайну для iPhone X и для iOS11 в целом.
Возможно повторяюсь, но материал подробный и полезный для дизайнеров новичков, причём и на русском.
https://is.gd/u1WuF6
Когда и как применять фильтры и сортировку.
Резюме исследования от Laura Cunha. Её статья основана на исследованиях Baymard institute в области e-commerce и статье Thierry Meier о популярных паттернах фильтров и сортировки.
Выписал основные тезисы из статьи - http://telegra.ph/Filtry-10-26
Небольшая статья, как сделать форму оплаты заказа удобней.
Исследователи из Baymard Institute выяснили, что во время оплаты заказа в интернет магазине, пользователям сложно не только вводить номер карты, но и проверять его корректность.
Основные выводы по улучшению форм ввода номера карты:
- Принимать номер карты в любом введёном формате. Учитывать набранные пользователем пробелы, а не выдавать их как «ошибка ввода».
- Не рекомендуется ограничивать колличество символов в строке ввода номера карты. Многие карты состоят из 16 цифр. Но есть варианты с номера от 12 до 19 символов.
- Хорошо, если поле будет автоматически форматировать введёный номер.
Дмитрий Симбирев выложил в своём канале круговую диаграмму всех инструментов для дизайнера интерфейсов в PDF.
Полезно иметь такую памятку под рукой.
О дизайне верхних элементов интерфейса в iPhone X
Автор статьи делиться советами по проектированию верхних элементов в iPhone X. Учитывая, что гайдлайны Apple не рекомендуют скрывать вырез чёрными полосками приложения, а работающее приложение должно покрывать всю существующую область экрана.
Статья простая с примерами иллюстрациями.
Отметил для себя несколько интересных моментов.
Область статуса бара занимает 44pt в высоту и имеет скругления углов 44pt. Такую высоту имеет и следующая навигационная панель. Это равно рекомендуемому размеру тач элементов по гайдлайнам Apple.
Узнал, что размер скругления экрана в 44pt, прекрасно гармонирует с рамками устройства. Красота.
При прокручивании, скролл бар визуально останавливается у начала скругления углов статус бара.
Ссылка на материал - UI Design for iPhone X: Top Elements and the Notch
Дизайнер Саша Окунев написал пост, как эффективно применять символы в скетче и какие бывают уровни детализации в интерфейсах. Спойлер.
1. Логический уровень,
2. уровень проектирования,
3. визуально-эмоциональный уровень,
4. уровень масштабирования.
Подробнее обо всём этом в его статье на Medium - https://goo.gl/V92Quw
28 сентября в Moscow Coding School стартует трехнедельный курс по основам UI/UX для всех, кто соприкасается с дизайном продуктов и сервисов — дизайнеров, разработчиков, маркетологов, проджектов, копирайтеров.
Преподаватель — Михаил Розов, основатель и арт-директор студии PINKMAN, проектами которых ежедневно пользуются миллионы пользователей. Среди клиентов: Skoda, Volkswgen, Raffaello, Сбербанк.
Узнать подробности и записаться — moscoding.ru/design
#реклама
Креативное агенство Red Keds проведёт первый в России фестиваль digital креатива G8. Можно подать свою работу на оценку зарубежным профессионалам всего за 1$
В конкурсе – шесть категорий: Интерактивные проекты и сайты, Мастерство, Медиаформаты, Социальные медиа, Мобильные технологии, Инновации.
Прием заявок продлится до 1 октября.
Подробная информация о событии и список жюри на сайте фестиваля - https://2017.ggggggggfest.com
Важно. Отправлять свою работу через десктоп версию сайта.
#Реклама
Шаблон для создания иконок iOS приложений в формате Sketch - http://www.iosicontemplate.com/
#tool
Вопрос
Вообще интересно узнать у вас. Cтоит ли мне кидать в канал подобные мелкие ссылки на различные ресурсы или лучше не засорять канал, и публиковать эти ссылки в твиттер канала?
Проголосуйте пожалуйста.
Канал - эмоджи дом
Твиттер - эмоджи птица
Readymag ищет дизайнера в Московский офис.
Обожаю этот онлайн инструмент публикаций. С ним сделать красивые презентации стало проще. Использую его для презентации рабочих проектов.
Попробовал бы сам откликнуться на вакансию, но живу в Питере и не хочу переезжать в Москву.
https://readymag.com/readymag/hiring/3/
#вакансия
Компания Apple на прошлой неделе опубликовала гайдлайны по работе с дополненной реальностью. Я подготовил перевод на русский основных рекомендаций.
http://telegra.ph/Perevod-Gajdlajny-Apple-po-rabote-s-dopolnennoj-realnostyu-09-07
Подробный гайд по оптическому выравниваю объектов для дизайнеров и разработчиков.
В конце статьи автор делится скриптом для быстрого выравнивания объектов в Adobe Photoshop и Illustrator. Для Sketch есть платный плагин Optically, но сам я им не пользовался к сожалению. Расскажите как он в деле если используете? Интересно узнать.
Я выравниваю объекты на глаз в зависимости от их визуального веса. Но из статьи узнал несколько других методов для более точного выравнивания.
https://habrahabr.ru/company/badoo/blog/333992/
Дизайнер Дмитрий Симбирёв рассказал простым словами и показал на видео, как добиться идеального совмещения 8px Grid и Layout сетки в Sketch.
Вывел формулу расчёта и поделился калькулятором в своей статье
