Фреймворк, как создавать тёмные и светлые варианты цвета в модели HSB.

Автор приводит простые правила работы с цветом. Для получения тёмного оттенка нужно уменьшить яркость (B), увеличить насыщенность (S), оттенок (H) немного сместить в сторону минимума. Противоположные же действия создадут светлые варианты основного цвета.

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e#.iuhu49tbz

При выборе между двумя продуктами, пользователи с большей вероятностью выберут тот, который выглядит эстетически приятным. Хоть он и может уступать в плане функциональности другому.

Скажу за себя, я не могу пользоваться каким либо сервисом, если он плохо выглядит.

В дополнение к сообщению ниже, хочу добавить похожий материал по теме - https://goo.gl/8W0Sid

Там же можно найти приложение (или заказать бумажную колоду) с карточками посвященными психологии пользователя. Хорошая шпаргалка для дизайнеров при работе над проектами.

Люди имеют склонность верить в то, что продукт, который выглядит лучше, лучше и работает, даже если это на самом деле не так. Другими словами, пользователи, которые положительно относятся к визуальной части вашего дизайна, будут более терпимы к мелким интерфейсным ошибкам.

https://www.nngroup.com/articles/aesthetic-usability-effect/

О типографике и сетке.

В девяти пунктах автор рассказывает о создании типографической базы и формирование сеточной структуры.

Основные шаги:
- Цели. Определите принципы вашего бренда и дизайна.

- Иерархия. Старайтесь использовать реальный или близкий по теме текст для дизайна.

- Подберите шрифт для заголовков и основного текста. в этом могут помочь сервисы по подбору шрифтовой пары.

- Подберите размер шрифта и высоту строки. Удачное соотношение между 1.2 и 1.5.

- Определите масштабирование. Cервис type scale поможет определить прогрессию размеров.

- Длина строки. Оптимальное значение длины строки 65-85 символов.

- Вертикальное расстояние. Высота строки должна составлять половину или полную базовую высоту строки.

- Настройте горизонтальную и вертикальную сетку.

http://sketchapp.me/garmonichnaya-tipografika-i-setki-rukovodstvo/

Михаил Капанага рассказывает, как можно прокачать формы ввода и избежать многих ошибок при заполнении.

Например, в поле «почта» вводить только латиницу, независимо от раскладки пользователя. В номере телефона, 8 заменять на +7 (если клиент из России). В статье есть ещё про заполнение данных карты и даты.

https://goo.gl/0YNh8O

Думаю, среди подписчиков канала найдутся люди, которые хотят развиваться в сфере проектирования и дизайна интерфейсов.

Наверняка вы уже слышали о "Нетологии". Это образовательный сервис в рунете, курсы в котором ведут эксперты крупных технологических компаний: Яндекс, Google, Mail. Практические занятия строятся на реальных проектах, а по окончании вы получите сертификат.

Для подписчиков моего канала - скидка 2500 руб. на любой курс из программы дизайн и проектирование, по промокоду duiux

В программе обучения есть направления: проектирование и дизайн интерфейсов, дизайн для мобильных приложений и другие.

Я считаю это неплохой вариант войти в профессию или подтянуть и структурировать свои знания.

Программа курса по ссылке - http://netolo.gy/c8U

#реклама

Frontend разработчик и аналитик AIC Анастасия Барыбина подготовила исследование о современных возможностях интерфейсов для людей с ограниченными возможностями.

Основные тезисы из статьи:

За стандарты разработки сайтов для людей с ограниченными возможностями отвечает WCAG (Web Content Accessibility Guidelines), рекомендации по доступности содержимого веб-ресурсов.

WCAG выделяет четыре основные принципа доступности:
1. Воспринимаемость.
2. Управляемость.
3. Понятность.
4. Надежность.

Совместить все требования стандартов с крутым дизайном, функционалом и кроссбраузерностью практически невозможно.

О Цвете.
- Не используйте один цвет для единственного способа передачи визуальной информации. Добавляйте к кнопкам подписи и значки, которые помогут пользователю понять предназначение.
- Предоставляйте пользователю кастомизацию цветовой схемы.

О Тексте
- Текст должен быть контрастный, не менее 7:1.
- Предоставляйте возможность кастомизации и масштабированя шрифта до 200%, без потери контента и функциональности.

О слепых пользователях:
Слепые пользователи активно используют «скрин ридеры», софт, которые озвучивает информацию с экрана. Поэтому весь не текстовый контент должен иметь текстовый эквивалент.
- Для ссылок и картинок нужно указывать альтернативное описание в атрибуте alt=«...»
- Контент, которые создан в целях оформления должен игнорироваться скрин ридерами. Используйте пустой атрибут alt=«»
- Для правильной последовательности чтения скрин ридерами, важно построить правильную семантику вёрстки сайта.

О людях с нервными и психическими расстройствами.
Важно избегать мерцания объектов. Элементы не должны менять своё состояние более 3 раз в секунду. Так же стоит исключить появление звуковых и неожиданных сигналов.

https://goo.gl/tcUHw3

Microsoft провели исследование по узнаваемости кнопки «поделиться» и после отказались от своего круглого варианта в пользу старого варианта от Apple со стрелкой.
https://goo.gl/3COZkm

UX лаборатория Мейл.ру и команда медиапроектов компании, провели большое и качественное исследование, как люди читают медиа, и читают ли вообще. В исследовании участвовали 10 респондентов, каждый из которых принадлежит к одной из группе людей: профи и обычные люди.

Основные вопросы в исследовании:
- Как часто и как долго люди читают?
- Читают или бегло просматривают статьи?
- Как люди выбирают, какие статьи читать?
- Что удерживает внимание?
- Какие приемы работают?
- Какие есть стратегии потребления информации?

Некоторые выводы из результатов:
- Люди читают.
- Редко делятся прочитанными статьями.
- Переходы к статьям идут из соц. сетей.
- Доверяют авторитетным источникам.
- Крайне редко переходят по ссылкам внутри статьи.

https://goo.gl/hOkFgO

#research

Руководитель портальной дизайн-команды в компании Mail.Ru Group Юрий Ветров, запустил сайт коллекцию про алгоритмический дизайн http://algorithms.design/

Если вы не поняли о чём речь и что такое алгоритмический дизайн, то можете прочитать подробнее об этом блоге у Юры - https://goo.gl/dzdL7D

Хорошие ребята, занялись переводом сериала от Netflix - Abstract: The Art of Design. Документальный сериал рассказывает истории восьми талантливых мировых дизайнеров.

Первая серия в переводе доступна для просмотра по ссылке - https://goo.gl/JAjqkG

Трейлер сериала на русском - https://www.youtube.com/watch?v=-OyCk6hs_hA&t

Продуктовый дизайнер Антон Бадашов подготовил материал о принципах дизайна, которые применяют Google, Apple, Facebook и другие компании в своих продуктах. Понимание и применение этих дизайн принципов поможет создавать качественные продукты.

Четыре принципа дизайна:
- Принципы самого дизайна: набор базовых качеств, определяющих хороший дизайн.
- Принципы дизайн-процесса: рекомендации, которые помогают выстроить работу команды так, чтобы добиваться ожидаемого результата.
- Продуктовые дизайн-принципы: как продукт должен восприниматься пользователями, какие эмоции пробуждать, чем отличаться от других.
- Принципы дизайн-систем: как унифицировать пользовательский опыт в различных условиях и на всех платформах.

https://goo.gl/Osy0HP

Если вы ещё не слышали про вариативные шрифты, то самое время разобраться что это такое.

Вариативный шрифт (variable font) - один шрифтовой файл, включающий в себя множество начертаний. Работая с ним можно контролировать каждый параметр шрифта: насыщенность, пропорции, контраст, изменение размера. Таким образом создавать бесконечное число вариантов одного шрифта.

Демонстрация работы и подробное описание в статье - https://goo.gl/jZKLY8

Продакт дизайнер Statsbot Влад Понаморенко написал статью, почему Figma лучше Sketch и как её удобно использовать в работе с командой.

Лично я в очередной раз задумался попробовать её в деле в будущих проектах.
https://goo.gl/CIM240

Исследование на тему использования голосовых технологий. В опросе участвовала тысяча респондентов из Британии.

- Популярны голосовые технологии от Amazon, Google и Apple.
- 37% пользователей используют голосовые технологии хотя бы раз в месяц, 18% минимум раз в неделю.
- Люди 18-34 лет, богатые с доходом выше 50 тыс. фунтов используют голосовые технологии чаще других.
- Люди используют голосовые технологии, потому что это проще и естественней в использовании.
- 41% пользователей использует голосовые технологии, когда им лениво.
- Голосовые технологии используют вне общественных мест. Дом, в машине.
- Основное применение - поиск информации, управление смартфоном, включение музыки и совершение звонков.
- 18% пользователей покупали товары с помощью голоса используя Alexa от Amazon. Но люди не доверяют таким покупкам и всё равно проверяют заказ.

https://goo.gl/IIDOHq

Краткая иллюстрированная история развития iOS - https://goo.gl/LFCRuo

Хотел бы взглянуть подобное и про Android. Поделитесь ссылкой если встречали?

Плагин для просмотра CSS свойств в браузере Chrome. https://goo.gl/Z9cQh0

#tool

Перевод статьи Николая Бабича о разнице использования чекбоксов и переключателей.

Нажимая переключатель, пользователь ожидает мгновенной реакции. Это аналогично переключателю света.

От чекбокса пользователь же не ждёт такой реакции, то что он выбрал произойдёт позже, после отправки формы или сохранения настроек.

https://goo.gl/VOR1ei