Дизайн нижних элементов в iPhone X

Дополнительная статья от этого автора с советами по дизайну нижних элементов в iPhone X.

Все элементы, которые раньше прилипали к нижней границе экрана можно сделать плавающими и поднять на 32 pt от нижнего края экрана.

Max Rudberg - Visual & User Interface Designer - UI Design for iPhone X: Bottom Elements

Дмитрий Симбирев выложил в своём канале круговую диаграмму всех инструментов для дизайнера интерфейсов в PDF.

Полезно иметь такую памятку под рукой.

Коллекция маленьких советов по улучшению визуального дизайна в интерфейсах - https://goo.gl/5EnSgJ

Небольшая статья, как сделать форму оплаты заказа удобней.

Исследователи из Baymard Institute выяснили, что во время оплаты заказа в интернет магазине, пользователям сложно не только вводить номер карты, но и проверять его корректность.

Основные выводы по улучшению форм ввода номера карты:
- Принимать номер карты в любом введёном формате. Учитывать набранные пользователем пробелы, а не выдавать их как «ошибка ввода».

- Не рекомендуется ограничивать колличество символов в строке ввода номера карты. Многие карты состоят из 16 цифр. Но есть варианты с номера от 12 до 19 символов.

- Хорошо, если поле будет автоматически форматировать введёный номер.

Возможно вы уже слышали, что стартанул турнир Russian Design Cup 2017 (RDC). RDC - ежегодный, крутой и сильный конкурс для дизайнеров и проектировщиков.

Сейчас начался отборочный тур. Записаться можно по ссылке https://russiandesigncup.ru/

Успеха всем участникам!

Когда и как применять фильтры и сортировку.

Резюме исследования от Laura Cunha. Её статья основана на исследованиях Baymard institute в области e-commerce и статье Thierry Meier о популярных паттернах фильтров и сортировки.

Выписал основные тезисы из статьи - http://telegra.ph/Filtry-10-26

@uxidesign канал дизайнера, который публикует переводы полезных материалов для дизайнеров интерфейсов.

Раз в месяц автор делает пост с подборкой полезных ссылок и инструментов для дизайнеров в своём канале.

Подписывайтесь: @uxidesign

#реклама

В предверии выхода iPhone X нашёл на хабре подробный гайд по дизайну для iPhone X и для iOS11 в целом.

Возможно повторяюсь, но материал подробный и полезный для дизайнеров новичков, причём и на русском.
https://is.gd/u1WuF6

Дизайнер Meng To рассказал о своём воркфлоу в Sketch и работе над проектами. Какие инструменты и плагины использует, как организует обсуждение дизайна с клиентами.

https://designcode.io/sketch-start

На канале уже много подписчиков и я этому очень рад. Спасибо вам.

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

📋Ссылка на анонимный опрос - https://goo.gl/forms/WewMZ6azzd65bpXs1

В новой версии Sketch 48 наконец-то добавят возможность масштабирования символов через Scale. 

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

На видео я показал разницу между двумя символами. Оранжевый символ - скриншот из Sketch 47. Синий символ - скриншот из Sketch 48 Beta. 

Можно заметить, что на синем значке (Sketch 48 Beta), который был масштабирован через инструмент Scale, нет полупикселей на границе иконки. На оранжевом же значке (Sketch 47), размер которого был изменён вручную, есть полупиксели на границе.

Размер оранжевого значка изменён вручную в Sketch 47. Синий отмасштабирован в Sketch 48 Beta.

Пора обновиться.

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

Из его лекции я заинтересовался плагином Keyframes для After Effects от Facebook. Плагин подготавливает код для iOS и Android на основе созданной анимации, мне этого очень не хватает в работе. Хотя в недавнем проекте впервые попробовал плагин Inspector Spacetime от дизайн команды Google. Но не понравилось, что он собирает спецификацию в виде видеоролика.

На YouTube канале Яндекса о дизайне, много других полезных видеороликов, но я особенно заинтересовался этим, так как очень люблю анимацию. Делать статику для меня очень скучно, поэтому иногда, как хобби занимаюсь и анимацией иллюстраций.

Ссылка на видео Яндекса об анимации - https://youtu.be/DTLF-Mpv534
Так же рекомендую подписаться на канал и посмотреть другие полезные лекции.

По результатам проведённого опроса решил создать новую рубрику «🖐 в Пят» (что значит, Пять в Пятницу).

Буду в конце рабочей недели вечером, публиковать пять ссылок на различные темы, которые не вошли в основные публикации канала. Это может быть что угодно: полезные ресурсы для работы, инструменты, инспирейшены, всё что полезно дизайнерам. Вы так же можете предлагать мне в личные сообщения @astract свои интересные ссылки в течении недели.  

Сейчас мне важно узнать, как вам подобная рубрика? Попробуем? Голосование закреплю на первом сообщении рубрики.

​​1. Вышел Sketch 48 Beta - https://www.sketchapp.com/beta/

2. Веб инструмент для создания анимаций Spirit вышел в бету по инвайтам - https://spiritapp.io/

3. Бесплатный шрифт хорошо подходящий для экранов Inter UI - https://rsms.me/inter/

4. Дизайн гайдлайны Rambler. Можно пощупать исходники - https://brand.rambler.ru/

5. Apple выпустила рекламу для Apple Music. Выглядит сочно. https://www.youtube.com/watch?v=qqo9kTRscKQ

#5вПят

Егор Сорокин написал в своём блоге живой отзыв о школе стажёров Бюро Горбунова. Он прошёл две ступени в школе дизайна и решил остановиться на этом и не продолжать обучение.

Рекомендую прочитать отзыв всем дизайнерам, которые планируют или возможно планировали поступать в будущем в школу Бюро. Очень содержательный материал.

Nielsen Norman Group опубликовали результаты исследования, что 80% пользователей (среди 120 участников тестов) просматривают левую область контента на сайте чаще, чем правую. Причём просмотр начинается не от самого левого края экрана. Исследование проводилось с использованием FullHD мониторов и оборудованием отслеживания глаз.

Область просмотра начиная с 200 пикселей до 960 пикселей наиболее просматриваемая у большинства пользователей. В крайнюю левую область от 0 до 200 пикселей пользователи смотрели очень редко, это связано с тем, что пользователи привыкли видеть там навигацию. Правую область почти никто не просматривал.

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

#research