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

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

Портальная дизайн команда 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

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