8162
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Канал в Дзен — https://dzen.ru/dui Автор: @astract Поддержать канал https://t.me/duiux/1481
Михаил Капанага рассказывает, как можно прокачать формы ввода и избежать многих ошибок при заполнении.
Например, в поле «почта» вводить только латиницу, независимо от раскладки пользователя. В номере телефона, 8 заменять на +7 (если клиент из России). В статье есть ещё про заполнение данных карты и даты.
https://goo.gl/0YNh8O
Люди имеют склонность верить в то, что продукт, который выглядит лучше, лучше и работает, даже если это на самом деле не так. Другими словами, пользователи, которые положительно относятся к визуальной части вашего дизайна, будут более терпимы к мелким интерфейсным ошибкам.
https://www.nngroup.com/articles/aesthetic-usability-effect/
Фреймворк, как создавать тёмные и светлые варианты цвета в модели HSB.
Автор приводит простые правила работы с цветом. Для получения тёмного оттенка нужно уменьшить яркость (B), увеличить насыщенность (S), оттенок (H) немного сместить в сторону минимума. Противоположные же действия создадут светлые варианты основного цвета.
erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e#.iuhu49tbz" rel="nofollow">https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e#.iuhu49tbz
Avocode поделился статистикой основаной на анализе файлов, которые загружали пользователи в 2016 году.
Photoshop теряет позиции. В 2016 - 59% загруженных исходников формата Sketch против 41% PSD. Хотя в 2015 году - Photoshop имел 57% загрузок.
Symbols стали стандартном для дизайна. Подобный функционал уже введи Adobe XD и Affinity Designer. Хотя, у Photoshop было нечто подобное - smart object.
Roboto - популярный шрифт.
Округлые формы по прежнему в моде.
https://avocode.com/design-report-2016/
Об организации рабочих файлов
У большинства дизайнеров постоянно возникает вопрос: как хранить рабочие файлы, и как работать с ними команде?
Портальная дизайн команда mail.ru поделилась своими методами хранения, именования файлов и структурированием макетов в Sketch. Для организации файлов им пришлось обратиться к помощи разработчиков.
https://habrahabr.ru/company/mailru/blog/319884/
Apple опубликовала официальный UI kit с глифами, компонентами. Всё это доступно для Sketch и Adobe photoshop -
https://developer.apple.com/ios/human-interface-guidelines/resources/
Маленькая таблица, которая поможет проверить длину слова на всех языках мира.
Полезно при проектировании для широкой аудитории - https://docs.google.com/spreadsheets/d/1EBNCqbiK-X-DljBD1WhfmsLXaO4iJYGe0Mi5yTuiUb0/htmlview
#tool
Дизайн государственных систем представил практические рекомендации по дизайну доступных сайтов.
Дизайн, который учитывает людей с нарушением зрения, слуха. В статье описаны методы по применению стандарта, описан инструментарий и процесс проверки сайта на доступность, даны ссылки на ключевые материалы и руководства по доступности сайтов.
http://gov.design/blog/2016/11/08/accessibility.html
Интересное видео, как может выглядеть наше будущее с AR (Дополненная реальность) https://vimeo.com/166807261
Читать полностью…
Давно я ничего не публиковал в канале, извиняюсь и исправляюсь.
Читать полностью…
Видео, как автопилот Tesla видит дорогу https://vimeo.com/192179727
Читать полностью…
Сегодня Яндекс проводит субботник для дизайнеров. Программа мероприятия и ссылка на трансляцию - https://events.yandex.ru/events/yasubbotnik/26-november-2016
Текстовая трансляция будет идти в канале /channel/yandexdesign
Компания GE рассказала, о создании дизайн системы Predix на основе Atomic Design. Рассказали о структуре системы и проблемах с которыми столкнулись при её создании.
http://sketchapp.me/dizajn-sistema-predix-ot-kompanii-ge-na-osnove-atomic-design/
Большой рассказ о проектировании большого проекта. Этапы создания динамического прототипа, составление технического задания, использование сценариев поведения пользователей для тестирования работы.
https://habrahabr.ru/company/SECL_GROUP/blog/314906/
Affinity Designer релизнули для Windows, в честь этого цена на покупку снижена. От себя скажу, что это хорошая альтернатива Adobe Illustrator и подходит для дизайна интерфейсов
https://affinity.store/en-gb/
#tool
О типографике и сетке.
В девяти пунктах автор рассказывает о создании типографической базы и формирование сеточной структуры.
Основные шаги:
- Цели. Определите принципы вашего бренда и дизайна.
- Иерархия. Старайтесь использовать реальный или близкий по теме текст для дизайна.
- Подберите шрифт для заголовков и основного текста. в этом могут помочь сервисы по подбору шрифтовой пары.
- Подберите размер шрифта и высоту строки. Удачное соотношение между 1.2 и 1.5.
- Определите масштабирование. Cервис type scale поможет определить прогрессию размеров.
- Длина строки. Оптимальное значение длины строки 65-85 символов.
- Вертикальное расстояние. Высота строки должна составлять половину или полную базовую высоту строки.
- Настройте горизонтальную и вертикальную сетку.
http://sketchapp.me/garmonichnaya-tipografika-i-setki-rukovodstvo/
При выборе между двумя продуктами, пользователи с большей вероятностью выберут тот, который выглядит эстетически приятным. Хоть он и может уступать в плане функциональности другому.
Скажу за себя, я не могу пользоваться каким либо сервисом, если он плохо выглядит.
В дополнение к сообщению ниже, хочу добавить похожий материал по теме - https://goo.gl/8W0Sid
Там же можно найти приложение (или заказать бумажную колоду) с карточками посвященными психологии пользователя. Хорошая шпаргалка для дизайнеров при работе над проектами.
Почему не стоит мельчить с кнопками в мобильных интерфейсах.
Чем меньше размер кнопки в тач интерфейсах, тем чаще совершают ошибочные нажатия пользователи.
Палец человека занимает от 10 до 14 мм. Обратим внимание, что Apple в своих гайдлайнах предлагает использовать кнопки с размером 44pt (~6,9 мм.), Google 56pt (~8.8 мм), а Microsoft 82pt (12,8 мм), что близко к рекомендуемому размеру кнопок.
http://scotthurff.com/posts/how-to-make-truly-tappable-user-interfaces
Airbnb запустили Lottie - набор библиотек для iOS, Android и React Native, которые позволяют использовать анимации из After Effects в разработке - http://airbnb.design/lottie/
#tool
Команда дизайна Dropbox рассказала о правилах дизайна мультиязычных приложений
Статья нацелена на дизайн приложений с английским языком и закладкой на другие.
- Из интересного и важного, хочется выделить табличку IBM global. (Кину картинкой после сообщения). Она поможет понять, сколько нужно заложить дополнительного места для корректного отображения текста.
- Лучше использовать описательные названия. И не использовать те слова, которые понятны только одному народу.
- Предлагать альтернативный перевод для других языков. Затратно, но эффективно.
https://habrahabr.ru/company/everydaytools/blog/320376/
Описание методологии OOUX на теории и практике. Две полезные статьи.
- Sophia Voychehovski рассказывает о методологии объектно ориентированный пользовательский опыт (OOUX). В этом методое перед проектированием действий, прежде создаётся карта ключевых объектов. На примере некой соц. сети для поваров она описывает работу этого метода.
Подробный перевод статьи - https://goo.gl/uDy5jB
Оригинал - https://goo.gl/QxVIuO
- Глеб Кушедов рассказывает, как применял этот метод при проектировании приложения для тренировок - https://goo.gl/ntyLb3
Дизайн команда AIC поделилась своим видением трендов на 2017 год. Умные алгоритмы, победа мобильного трафика, авторские фотографии и иллюстрации.
С наступающим, друзья! 🎉 Счастливого Нового года!
http://2017.aic.ru/
Команда дизайна Facebook опубликовала шаблоны для проектирования интерфейсов в VR http://facebook.design/vr-template
Читать полностью…
Команда дизайна Dropbox запустила блог на Medium. В первом посте они рассказывают, как подбирают нужные слова для интерфейсов, что бы они были понятным пользователям.
Незнакомые и непонятные слова могут оттолкнуть пользователей от использования продукта.
Команда делится сервисами и методами, которые могут помочь в решении этой задачи.
- Google Trends сравнивает, как часто люди ищут подобные вашим слова в поиске. На примере списка: Log in, Log on, Sign in, Sign on. Sign In оказался самым популярным по поисковым запросам пользователей. На основе подобной статистики, Dropbox назвали кнопку «version history» именно так.
- Второй сервис Google Ngram Viewer показывает, какие термины чаще используются в конкретном языке на основе отсканированных книг.
- Опросы и тесты на лёгкость понимания слов тоже могут помочь в решении задачи. Но вы тоже можете влиять на понимание пользователя. Обучайте нужным действия при работе с продуктом. Например «Используйте кнопку Copy, что бы скопировать текст».
https://medium.com/dropbox-design/design-words-with-data-fe3c525994e7#.grnjv8uo7
Смарт часы многим кажутся скучными и бесполезными. Об этом даже говорит статистика продаж. Но разработчики из университета Пенсильвании нашли способ, который может расширить возможности часов. Они показали, как можно взаимодействовать с помощью жестов с другими устройствами.
https://youtu.be/Poi0MeASmuY
Оригинал новости: http://gizmodo.com/brilliant-mod-makes-smartwatches-actually-useful-1789193228
Запись видеотрансляции уже доступна на YouTube.
Сергей Кондауров — Первые 90 дней в компании https://youtu.be/7YJV2gBuAfo?t=11m30s
Антон Шеин — Компонентный подход 🔥 https://youtu.be/7YJV2gBuAfo?t=52m35s
Антон Тен — Переведено https://youtu.be/7YJV2gBuAfo?t=1h56m
Дмитрий Пшек — Как мы делаем редизайн Яндекс.Денег https://youtu.be/7YJV2gBuAfo?t=2h32m15s
Лола Кристаллинская — Дизайн в большой компании https://youtu.be/7YJV2gBuAfo?t=3h46m10s
Сергей Фёдоров — Дизайнер в большой компании https://youtu.be/7YJV2gBuAfo?t=4h43m34s
Также в рамках мероприятия Дмитрий Быков (ведущий дизайнер Поиска) задавал вопросы из Твиттера дизайнерам и арт-директорам Яндекса.
Интервью 1: Николай Васюнин (ведущий дизайнер Музыки), Дарья Старицина (ведущий дизайнер Такси), Илья Александров (руководитель дизайна Карт) https://www.youtube.com/watch?v=6yAg0ASwRxM
Интервью 2: Данил Ковчий (арт-директор Поиска), Максим Катюнин (ведущий дизайнер коммуникаций Яндекса), Антон Шнайдер (креативный директор Яндекса) https://youtu.be/7YJV2gBuAfo?t=3h11m55s
Дополнением будет полезная статья по организации Atomic design и Sketch.
http://sketchapp.me/verstka-sajta-s-pomoshhyu-sketch-i-atomic-design/
Тонкие и не контрастные шрифты могут усложнять читабельность для людей с ослабленным зрением.
По мнению Кевина Маркса минимальное рекомендуемое значение контраста для комфортного чтения - 7:1. Но даже такие компании, как Google и Apple пренебрегают этим правилом. Google рекомендует использовать контраст типографики 7:1, но в тоже время понижает непрозрачность до 54% , тем самым снижая отношение до 4,6:1.
https://habrahabr.ru/post/315346/
Как системные приложения MacOS используют тач бар на новых MacBook Pro
https://9to5mac.com/2016/11/04/macbook-pro-touch-bar-apple-apps-screenshot-gallery/
Простой совет по созданию правильного меню подтверждения. Не заваливайте пользователя постоянными вопросами о подтверждении действий, это вызывает дополнительные ошибки. Уточняйте вопрос в заголовке меню, в теле сообщения прописывайте описание операции, на кнопке подтверждения дублируйте описание действия, которое произойдёт после нажатия.
https://uxdesign.cc/designing-confirmation-278d159723e#.hf57uuojs