С Новым годом 🎄

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

Полезно при проектировании для широкой аудитории - https://docs.google.com/spreadsheets/d/1EBNCqbiK-X-DljBD1WhfmsLXaO4iJYGe0Mi5yTuiUb0/htmlview

#tool

Описание методологии OOUX на теории и практике. Две полезные статьи.

- Sophia Voychehovski рассказывает о методологии объектно ориентированный пользовательский опыт (OOUX). В этом методое перед проектированием действий, прежде создаётся карта ключевых объектов. На примере некой соц. сети для поваров она описывает работу этого метода.
Подробный перевод статьи - https://goo.gl/uDy5jB
Оригинал - https://goo.gl/QxVIuO

- Глеб Кушедов рассказывает, как применял этот метод при проектировании приложения для тренировок - https://goo.gl/ntyLb3

Apple опубликовала официальный UI kit с глифами, компонентами. Всё это доступно для Sketch и  Adobe photoshop -
https://developer.apple.com/ios/human-interface-guidelines/resources/

Команда дизайна Dropbox рассказала о правилах дизайна мультиязычных приложений

Статья нацелена на дизайн приложений с английским языком и закладкой на другие.

- Из интересного и важного, хочется выделить табличку IBM global. (Кину картинкой после сообщения). Она поможет понять, сколько нужно заложить дополнительного места для корректного отображения текста.

- Лучше использовать описательные названия. И не использовать те слова, которые понятны только одному народу.

- Предлагать альтернативный перевод для других языков. Затратно, но эффективно.

https://habrahabr.ru/company/everydaytools/blog/320376/

Об организации рабочих файлов

У большинства дизайнеров постоянно возникает вопрос: как хранить рабочие файлы, и как работать с ними команде?

Портальная дизайн команда mail.ru поделилась своими методами хранения, именования файлов и структурированием макетов в Sketch. Для организации файлов им пришлось обратиться к помощи разработчиков.

https://habrahabr.ru/company/mailru/blog/319884/

Airbnb запустили Lottie - набор библиотек для iOS, Android и React Native, которые позволяют использовать анимации из After Effects в разработке - http://airbnb.design/lottie/

#tool

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/

Почему не стоит мельчить с кнопками в мобильных интерфейсах.

Чем меньше размер кнопки в тач интерфейсах, тем чаще совершают ошибочные нажатия пользователи.

Палец человека занимает от 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

Фреймворк, как создавать тёмные и светлые варианты цвета в модели 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