​​Паттерн- полоска сверху

Часто замечаю, что всё больше приложений начинают отображать полоску над меню, для показа, что список или менюшку можно потянуть, или проскроллить.

Интересно, кто был первым с подобным приёмом? Я кажется увидел подобное в-первые в iPhone. При нажатии с форс тач, на объекте отображается стрелочка сверху.

Не знаю, если название у этого паттерна, поэтому назову его просто — «полоска сверху» :) Буду рад если поправите и пришлёте название.

Примеры из разных приложений. Twitter, Facebook, Slack.

Подсказали, что такая полоска называется — Handlebar.

Тут можно прочитать про неё — https://is.gd/hMTNe7

Илья Бирман рассказал, как быть в ситуации когда нужно оставлять один обязательный чекбокс в списке других. Как быть когда чекбокс активирует поле ввода и когда в выборе даты нет какого-то числа.

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

Подробнее обо всём этом в статье.

До старта дизайн интенсива Design Line остаётся немного времени.

Начиная с 5 ноября и в течение одной недели, вы сможете прокачать навыки дизайна и получить фидбек по одной из своих работ от ведущих дизайнеров России.

Успей вписаться! Для всех подписчиков канала скидка 10% на покупку билета по промокоду - dui

Ссылка на событие — http://bit.ly/2ysRQrj

Системный подход к отступам в дизайне

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

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

Все символы с отступами хранятся в макете в скрытой папке Vertical Rythm.

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

Фронтентенд разработчику будет достаточно создать переменные с отступами и оперировать ими в своей работе. Автор рекомендует называть переменные — названием цвета, для удобства общения между дизайнером и разработчиком.

Но нужно понимать, что такой подход к системе вертикальных отступов подходит лишь для больших и сложных проектов.

Интересуешься веб-дизайном?

Присоединяйся к БЕСПЛАТНОЙ онлайн-конференции: https://goo.gl/4tMhdL
Смотри перечень тем и выбирай мастер-классы к которым хочешь присоединиться!

🆓 Весь ноябрь тебя ждет живое общение со специалистами, которые дадут только необходимую теорию и максимум практики.
💪 Ты узнаешь огромное количество крутых фишек и лайфхаков, которые помогут в скорости и качестве работы.
➕ Сертификат получит каждый участник, который дойдёт до конца!

Получи концентрат знаний для успешной карьеры: https://goo.gl/4tMhdL

#реклама

На прошлой неделе Samsung анонсировали новую концепцию дизайна интерфейса для своих смартфонов — One UI.

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

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

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

Sketch плагин для вставки реальных данных ВКонтакте

Илья Гришин, дизайнер ВКонтакте создал плагин для Sketch, который позволяет вставлять реальные данные из ВК в макеты.

Самое удобство в том, что есть привязка фотографии с именем пользователя. И все это интегрировано в интерфейс Sketch.

Ссылка для установки плагина — https://is.gd/xX4ePa

Текст для CTA кнопок
Следующий за кнопкой экран должен сохранять смысл
Заголовок страницы при нажатии CTA кнопки по хорошему должен сохранять смысл. Пример. На первой странице пользователь нажимает кнопку — «сделать платёж». При открытии страницы хорошо бы, показать похожий по смыслу заголовок — «Создание платежа» с формой ввода данных заказа.

Сообщайте на кнопке куда она ведёт
Не стесняйтесь указывать на кнопке прямой текст, куда приведёт пользователя её нажатие. Не «аккаунт», а «войти на мою страницу».

Добавьте мотивации к нажатию
Попробуйте вместо скучного - «регистрация» , написать «давайте уже сделаем это!» :)

Сохраняйте краткость в названии кнопки
Большие предложения всё же лишнее для кнопок.

Два варианта кнопок
В случае когда пользователю нужно выбрать одну из двух кнопок для нажатия, старайтесь избегать негативных смыслов. Когда на вопрос «Вы действительно хотите отменить бронирование?» , например есть два действия «отменить» и «продолжить». В таких случаях лучше явно написать на кнопке «Нет, сохранить» и «да, отменить». Так будет понятней.

Подробнее обо всём этом в статье — https://is.gd/gfGM1Z

22–23 декабря в @binarydistrict_ru пройдет практический интенсив Product Design Weekend для дизайнеров и менеджеров.

Двухдневный интенсив о том, как делать дизайн продукта в команде и проверять с помощью исследований и аналитики, что он хороший. В первый день лекции, во второй — практика и защита проектов. Интенсив пройдет под руководством спикеров с опытом работы в MegaLabs, Acronis, лаборатории «Наносемантика», «Билайне», «Студии Артемия Лебедева», МТС и РИА Новости.

На интенсив действует скидка 10% по промокоду — duiux

Регистрируйтесь: https://goo.gl/KsQSBQ

#реклама

Блиц интервью от дизайн директора MailRu Юрия Ветрова для Оди.О дизайне.

Юрий ответил на вопросы про организацию дизайн процессов в команде. Рассказал про новый термин DesOps, который набирает популярность в дизайн сообществе, и о том, как не дать алгоритмам заменить себя.

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

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

💪🏼Индивидуальная программа онлайн-обучения и опытный дизайнер в качестве персонального наставника, который всегда на связи.
👨🏽‍💻Учись откуда удобно. А время лучше используй на получение опыта. 2 года жесткой практики и проекты в портфолио, которые не похожи на ученические.
🤝Лучших порекомендуем на стажировку и трудоустройство в команды Redmadrobot, BBDO, Creative people, Rambler&Co, Yandex. 📒Государственный диплом – если кроме опыта тебе нужен документ                                                
⚡️Оставляй заявку и начни прокачку своих навыков https://clck.ru/E9pRD

#реклама

Подробное руководство по созданию плоских иконок

Перевод статьи Hopefully, the Ultimate Guide to a Flat Icon Set

Выписал основные принципы создания иконки описанные в статье с тезисами для каждого из них.

- Используйте оптическую сетку.

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

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

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

- Определите минимальный размер промежутков. И сохраняйте его во всех иконках. Для контурных иконок, промежуток должен равняться толщине линии.

- Убирайте повторяющейся элементы.

- Соблюдайте стиль. Не комбинируйте фронтальные и иконки с перспективой. При это менять контурную иконку на залитую можно при взаимодействии с ней.

- Используйте размеры кратные двум.

- Соблюдайте чистоту при рисовании. Удаляйте лишние опорные точки и дробные значения у точек.

- Оптимизируйте SVG иконки. Автор рекомендует экспортировать иконку в Adobe Illustrator и удалять там лишние слои. Но можно и просто прогонять графику через ImgOptim на macOS.