8031
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
Наборы реальных данных для использования в дизайне с возможность экспорта в JSON. Хорошо подойдёт в связке с плагином Craft от Invision.
- Галлерея реальных данных https://goo.gl/Sg0ESD
- Плагин Craft https://goo.gl/xd9vjX
#tool
Искал шаблон Android пермишенов для показа в рабочем проекте, но не нашёл. Поэтому собрал его для себя и делюсь с вами скетч файлом.
Возможно кому нибудь он будет так же полезен.
Канал достиг первой тысячи читателей. Спасибо вам большое, что читаете его! 😊
👍Я был бы рад если вы оцените канал в каталоге и напишите отзыв - https://goo.gl/wnFp9I
Любой фидбек можете писать мне лично @astract
Перевод статьи Николая Бабича о разнице использования чекбоксов и переключателей.
Нажимая переключатель, пользователь ожидает мгновенной реакции. Это аналогично переключателю света.
От чекбокса пользователь же не ждёт такой реакции, то что он выбрал произойдёт позже, после отправки формы или сохранения настроек.
https://goo.gl/VOR1ei
Краткая иллюстрированная история развития iOS - https://goo.gl/LFCRuo
Хотел бы взглянуть подобное и про Android. Поделитесь ссылкой если встречали?
Продакт дизайнер Statsbot Влад Понаморенко написал статью, почему Figma лучше Sketch и как её удобно использовать в работе с командой.
Лично я в очередной раз задумался попробовать её в деле в будущих проектах.
https://goo.gl/CIM240
Продуктовый дизайнер Антон Бадашов подготовил материал о принципах дизайна, которые применяют Google, Apple, Facebook и другие компании в своих продуктах. Понимание и применение этих дизайн принципов поможет создавать качественные продукты.
Четыре принципа дизайна:
- Принципы самого дизайна: набор базовых качеств, определяющих хороший дизайн.
- Принципы дизайн-процесса: рекомендации, которые помогают выстроить работу команды так, чтобы добиваться ожидаемого результата.
- Продуктовые дизайн-принципы: как продукт должен восприниматься пользователями, какие эмоции пробуждать, чем отличаться от других.
- Принципы дизайн-систем: как унифицировать пользовательский опыт в различных условиях и на всех платформах.
https://goo.gl/Osy0HP
Хорошие ребята, занялись переводом сериала от Netflix - Abstract: The Art of Design. Документальный сериал рассказывает истории восьми талантливых мировых дизайнеров.
Первая серия в переводе доступна для просмотра по ссылке - https://goo.gl/JAjqkG
UX лаборатория Мейл.ру и команда медиапроектов компании, провели большое и качественное исследование, как люди читают медиа, и читают ли вообще. В исследовании участвовали 10 респондентов, каждый из которых принадлежит к одной из группе людей: профи и обычные люди.
Основные вопросы в исследовании:
- Как часто и как долго люди читают?
- Читают или бегло просматривают статьи?
- Как люди выбирают, какие статьи читать?
- Что удерживает внимание?
- Какие приемы работают?
- Какие есть стратегии потребления информации?
Некоторые выводы из результатов:
- Люди читают.
- Редко делятся прочитанными статьями.
- Переходы к статьям идут из соц. сетей.
- Доверяют авторитетным источникам.
- Крайне редко переходят по ссылкам внутри статьи.
https://goo.gl/hOkFgO
#research
Frontend разработчик и аналитик AIC Анастасия Барыбина подготовила исследование о современных возможностях интерфейсов для людей с ограниченными возможностями.
Основные тезисы из статьи:
За стандарты разработки сайтов для людей с ограниченными возможностями отвечает WCAG (Web Content Accessibility Guidelines), рекомендации по доступности содержимого веб-ресурсов.
WCAG выделяет четыре основные принципа доступности:
1. Воспринимаемость.
2. Управляемость.
3. Понятность.
4. Надежность.
Совместить все требования стандартов с крутым дизайном, функционалом и кроссбраузерностью практически невозможно.
О Цвете.
- Не используйте один цвет для единственного способа передачи визуальной информации. Добавляйте к кнопкам подписи и значки, которые помогут пользователю понять предназначение.
- Предоставляйте пользователю кастомизацию цветовой схемы.
О Тексте
- Текст должен быть контрастный, не менее 7:1.
- Предоставляйте возможность кастомизации и масштабированя шрифта до 200%, без потери контента и функциональности.
О слепых пользователях:
Слепые пользователи активно используют «скрин ридеры», софт, которые озвучивает информацию с экрана. Поэтому весь не текстовый контент должен иметь текстовый эквивалент.
- Для ссылок и картинок нужно указывать альтернативное описание в атрибуте alt=«...»
- Контент, которые создан в целях оформления должен игнорироваться скрин ридерами. Используйте пустой атрибут alt=«»
- Для правильной последовательности чтения скрин ридерами, важно построить правильную семантику вёрстки сайта.
О людях с нервными и психическими расстройствами.
Важно избегать мерцания объектов. Элементы не должны менять своё состояние более 3 раз в секунду. Так же стоит исключить появление звуковых и неожиданных сигналов.
https://goo.gl/tcUHw3
Михаил Капанага рассказывает, как можно прокачать формы ввода и избежать многих ошибок при заполнении.
Например, в поле «почта» вводить только латиницу, независимо от раскладки пользователя. В номере телефона, 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/
#вакансия
Realtimeboard ищет профессионального веб-дизайнера в офис, которого вдохновит разработка дизайна для международного продукта с миллионом пользователей.
Сервисом пользуются UX/UI дизайнеры и менеджеры из Twitter, Ikea, Autodesk, Cisco, Adobe, Unity, Lenovo, PwC, Deloitte, EY и других компаний.
Работа в Перми. Компания поможет с переездом и предоставлением необходимых условий для кандидата.
Подробное описание вакансии - https://goo.gl/KaOp2m
Шаблон создания адаптивных иконок для Android O. Для всех популярных графических редакторов. https://goo.gl/bJd97H
На самом деле в паке шаблоны для всех систем. Поэтому рекомендую скачать для работы.
#tool
Три стратегии, как обрабатывать случайные нажатия пользователя в приложениях:
1. Действие пользователя принимается без какого либо подтверждения и отмены.
2. Появление алерта с подтверждением действия.
3. Возможность отмены совершенного действия.
Выбирать необходимый метод можно исходя из принципов частоты использования действия и его серьёзности.
Если действие используется часто - автор рекомендует первый или третий метод.
Если действие имеет серьёзные последствия после нажатия - второй или третий метод.
https://goo.gl/WO7LR0
Плагин для просмотра CSS свойств в браузере Chrome. https://goo.gl/Z9cQh0
#tool
Исследование на тему использования голосовых технологий. В опросе участвовала тысяча респондентов из Британии.
- Популярны голосовые технологии от Amazon, Google и Apple.
- 37% пользователей используют голосовые технологии хотя бы раз в месяц, 18% минимум раз в неделю.
- Люди 18-34 лет, богатые с доходом выше 50 тыс. фунтов используют голосовые технологии чаще других.
- Люди используют голосовые технологии, потому что это проще и естественней в использовании.
- 41% пользователей использует голосовые технологии, когда им лениво.
- Голосовые технологии используют вне общественных мест. Дом, в машине.
- Основное применение - поиск информации, управление смартфоном, включение музыки и совершение звонков.
- 18% пользователей покупали товары с помощью голоса используя Alexa от Amazon. Но люди не доверяют таким покупкам и всё равно проверяют заказ.
https://goo.gl/IIDOHq
Если вы ещё не слышали про вариативные шрифты, то самое время разобраться что это такое.
Вариативный шрифт (variable font) - один шрифтовой файл, включающий в себя множество начертаний. Работая с ним можно контролировать каждый параметр шрифта: насыщенность, пропорции, контраст, изменение размера. Таким образом создавать бесконечное число вариантов одного шрифта.
Демонстрация работы и подробное описание в статье - https://goo.gl/jZKLY8
Трейлер сериала на русском - https://www.youtube.com/watch?v=-OyCk6hs_hA&t
Читать полностью…
Руководитель портальной дизайн-команды в компании Mail.Ru Group Юрий Ветров, запустил сайт коллекцию про алгоритмический дизайн http://algorithms.design/
Если вы не поняли о чём речь и что такое алгоритмический дизайн, то можете прочитать подробнее об этом блоге у Юры - https://goo.gl/dzdL7D
Microsoft провели исследование по узнаваемости кнопки «поделиться» и после отказались от своего круглого варианта в пользу старого варианта от Apple со стрелкой.
https://goo.gl/3COZkm
Думаю, среди подписчиков канала найдутся люди, которые хотят развиваться в сфере проектирования и дизайна интерфейсов.
Наверняка вы уже слышали о "Нетологии". Это образовательный сервис в рунете, курсы в котором ведут эксперты крупных технологических компаний: Яндекс, Google, Mail. Практические занятия строятся на реальных проектах, а по окончании вы получите сертификат.
Для подписчиков моего канала - скидка 2500 руб. на любой курс из программы дизайн и проектирование, по промокоду duiux
В программе обучения есть направления: проектирование и дизайн интерфейсов, дизайн для мобильных приложений и другие.
Я считаю это неплохой вариант войти в профессию или подтянуть и структурировать свои знания.
Программа курса по ссылке - http://netolo.gy/c8U
#реклама
О типографике и сетке.
В девяти пунктах автор рассказывает о создании типографической базы и формирование сеточной структуры.
Основные шаги:
- Цели. Определите принципы вашего бренда и дизайна.
- Иерархия. Старайтесь использовать реальный или близкий по теме текст для дизайна.
- Подберите шрифт для заголовков и основного текста. в этом могут помочь сервисы по подбору шрифтовой пары.
- Подберите размер шрифта и высоту строки. Удачное соотношение между 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/