8031
Блог о продуктовом дизайне. По рекламе — https://bit.ly/46IJwSH Канал с вакансиями — @dui_work Автор: @astract Поддержать канал https://t.me/duiux/1481
Собрал в честь чёрной пятницы немного ссылок на различные полезности для дизайнеров и разработчиков.
1. До конца ноября скидка 50% на инструмент Protopie - https://goo.gl/URmXUj
2. Все ui-kit и мокапы от lstore по промокоду blackfriday2017 со скидкой 50% - https://goo.gl/aAAX7U
3. Скидки на курсы по разработке от Udemy - https://goo.gl/Qv7Zmr
4. Скидка на весь набор Uber полезных плагинов для Photoshop - https://goo.gl/7pVNPT
5. Скидки до 50% на обучающие курсы по разработке от Web Bos. Для Россиян постоянные скидки 30% - https://goo.gl/BU28ZH
6. Readymag даёт скидку 30% по промокоду RMFRIDAY17 - https://goo.gl/8AGwC4
7. ui8 раздаёт отличные киты за 8$ - https://goo.gl/T3dpQo
8. Framer даёт скидку 40% новым пользователям. По ссылке есть и другие скидки от партнёров Framer - https://goo.gl/VMvVzS
9. Pixelmator со скидкой 50% - https://goo.gl/a3Dsoo
10. Designernews собирает все скидки для дизайнеров в отдельной ветке - https://goo.gl/rQMqXD
11. Коллекция скидок для дизайнеров в честь Black Friday - https://goo.gl/EPnK3o
12. Ещё одна ссылка с коллекцией ссылок - https://goo.gl/kzrDWy
Хороших покупок!
Мобильная игра Animal Crossing от Nintendo во время загрузки дополнительных данных для игры, предлагает пользователю сыграть в простенькую игру, где нужно собирать монетки. Это помогает удержать внимание пользователя и не дать ему выйти из приложения.
Игра к слову очень простая в отличии от других подобных раннеров, сложно пропустить монету. Нечто подобное есть в браузере Chrome когда он теряет соединение, там нужно бегать динозавриком.
Интересны вам подобные заметки? Нечто похожее публикуется на сайте http://littlebigdetails.com но я буду публиковать тут только личные наблюдения.
Вчера искал для проекта хорошие кириллические шрифтовые пары и наткнулся на полезную таблицу сочетания шрифтов от Артёма Помельникова. Ссылка на его статью в блоге.
В своей статье он рассказывает об анатомии шрифта, как составлять шрифтовые пары и делится ссылкой на свой комбинатор шрифтов. В нём можно подобрать необходимые сочетания для основного текста и заголовков.
Сохранил эту табличку для себя, думаю надо будет распечатать и держать рядом - хорошая шпаргалка. Прикреплю в следующем сообщении PDF файл таблицы.
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
1. Коллекция гайдлайнов для разработки голосовых интерфейсов популярных компаний - https://goo.gl/hGMLVC
2. Небольшая подборка фильмов для дизайнеров https://goo.gl/DzG4yu
3. Сервис увеличивает разрешение изображений. Загружаете мелкое - получаете большое https://letsenhance.io/
4. IBM разрабатывает шрифт для набора текста — IBM Plex. Который по их мнению должен заменить Helvetica - https://youtu.be/xcs9snQnkJs
5. Плагин для работы с ключевыми кадрами в After Effects. Позволяет клонировать и разворачивать их - https://conigs.com/tools/key-cloner/
#5вПят
В статье, как создавать веб таблицы, которые удобно читать и использовать, мне особенно понравилась цитата французского писателя Антуан Мари Жан-Батист Роже де Сент-Экзюпери: «Совершенство достигается не тогда, когда нечего больше добавить, а тогда, когда ничего больше нельзя отсечь».
Эта цитата характеризует то, о чём идёт речь в статье. Что для создания удобной таблицы нужно отбросить всю лишнюю информацию и оставить только необходимое в ней. Автор статьи кроме советов по предоставлению данных в таблице для больших и маленьких экранов, даёт советы какие свойства CSS и HTML можно использовать для корректного отображения таблиц на экранах.
Источник: https://goo.gl/B8hEfH
Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.
1. Плагин для Chrome переводит веб страницу в Sketch файл. Работает через раз, но работает - https://goo.gl/qTc9z2
2. Сверхбыстрый обзор InVision Studio. Пока ничего особенного в инструменте я не заметил - https://goo.gl/PEUpkJ
3. Коллекция UI паттернов - https://goo.gl/olQw
4. Коллекция шрифтовых пар из Google Fonts - https://goo.gl/igNAhi
5. Видео от Microsoft, как технологии изменят нашу жизнь в будущем - https://youtu.be/w-tFdreZB94
#5вПят
Запись выступления Дмитрия Мацкевича в школе управления проектами Яндекс.
Дмитрий рассказал, как работает наш мозг, как люди принимают решения и как можно применять все эти знания к дизайну продуктов и к своей жизни.
🕓 Продолжительность видео: 1 ч. 48 минут.
https://youtu.be/70hcbjyJZ-Q
Nielsen Norman Group опубликовали результаты исследования, что 80% пользователей (среди 120 участников тестов) просматривают левую область контента на сайте чаще, чем правую. Причём просмотр начинается не от самого левого края экрана. Исследование проводилось с использованием FullHD мониторов и оборудованием отслеживания глаз.
Область просмотра начиная с 200 пикселей до 960 пикселей наиболее просматриваемая у большинства пользователей. В крайнюю левую область от 0 до 200 пикселей пользователи смотрели очень редко, это связано с тем, что пользователи привыкли видеть там навигацию. Правую область почти никто не просматривал.
Исследования подчеркнули, что пользователи привыкли к стандартному лейауту, когда навигация располагается слева или сверху, основной контент находится по центру, а вторичная и маловажная информация справа. Поэтому размещая важную информацию в правой области экрана, проверяйте, замечают ли её пользователи.
#research
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вПят
Видео об анимации интерфейсов из школы мобильного дизайна Яндекса от Владислава Фёдорова. В своей лекции Владислав рассказывает, зачем нужна анимация в интерфейсах, какими свойствами обладает анимация, и какие инструменты он использует в работе над анимацией.
Из его лекции я заинтересовался плагином Keyframes для After Effects от Facebook. Плагин подготавливает код для iOS и Android на основе созданной анимации, мне этого очень не хватает в работе. Хотя в недавнем проекте впервые попробовал плагин Inspector Spacetime от дизайн команды Google. Но не понравилось, что он собирает спецификацию в виде видеоролика.
На YouTube канале Яндекса о дизайне, много других полезных видеороликов, но я особенно заинтересовался этим, так как очень люблю анимацию. Делать статику для меня очень скучно, поэтому иногда, как хобби занимаюсь и анимацией иллюстраций.
Ссылка на видео Яндекса об анимации - https://youtu.be/DTLF-Mpv534
Так же рекомендую подписаться на канал и посмотреть другие полезные лекции.
На канале уже много подписчиков и я этому очень рад. Спасибо вам.
Учитывая этот факт я решил провести анонимный опрос и узнать ваш фидбек о канале. Пройдите его пожалуйста, в нём нет обязательных вопросов, но вся полученная информация поможет развитию канала.
📋Ссылка на анонимный опрос - https://goo.gl/forms/WewMZ6azzd65bpXs1
В предверии выхода iPhone X нашёл на хабре подробный гайд по дизайну для iPhone X и для iOS11 в целом.
Возможно повторяюсь, но материал подробный и полезный для дизайнеров новичков, причём и на русском.
https://is.gd/u1WuF6
Когда и как применять фильтры и сортировку.
Резюме исследования от Laura Cunha. Её статья основана на исследованиях Baymard institute в области e-commerce и статье Thierry Meier о популярных паттернах фильтров и сортировки.
Выписал основные тезисы из статьи - http://telegra.ph/Filtry-10-26
Небольшая статья, как сделать форму оплаты заказа удобней.
Исследователи из Baymard Institute выяснили, что во время оплаты заказа в интернет магазине, пользователям сложно не только вводить номер карты, но и проверять его корректность.
Основные выводы по улучшению форм ввода номера карты:
- Принимать номер карты в любом введёном формате. Учитывать набранные пользователем пробелы, а не выдавать их как «ошибка ввода».
- Не рекомендуется ограничивать колличество символов в строке ввода номера карты. Многие карты состоят из 16 цифр. Но есть варианты с номера от 12 до 19 символов.
- Хорошо, если поле будет автоматически форматировать введёный номер.
Дмитрий Симбирев выложил в своём канале круговую диаграмму всех инструментов для дизайнера интерфейсов в PDF.
Полезно иметь такую памятку под рукой.
Мини-игра в Animal Crossing во время загрузки больших данных
Читать полностью…
Началась трансляция Яндекс Субботника для дизайнеров в Москве. По ссылке расписание и трансляция https://events.yandex.ru/events/yasubbotnik/18-november-2017/
Читать полностью…
Дизайнер звука Дмитрий Новожилов сделал конспект статьи аудио-директора Уилла Литлджона (Will Littlejohn) из Facebook. В статье Уилл рассказывает, как улучшить мобильный интерфейс с помощью саунд-дизайна.
Список важных моментов при создании звуков в интерфейсе.
1. Люди любят лёгкие и простые звуки.
2. Все звуки, как и элементы дизайна, должны быть совместимы между собой.
3. Звук только для важных действий в интерфейсе.
4. Думайте о том, как часто пользователь будет слышать конкретный звук и не будет ли он его раздражать после неоднократного повторения.
5. Звук должен нести пользу при работе с интерфейсом. Пример из статьи - это успешная публикация нового поста в приложении Facebook.
6. Думайте о громкости и восприятии звука пользователем.
Дмитрий так же ведёт канал «Сила звука» /channel/silazvuka В своём канале он пишет о дизайне звука для интерфейсов и интересных кейсах из мира аудио. Подписывайтесь на него.
Перевод статьи - https://goo.gl/SyTjQE
Оригинал статьи - https://goo.gl/P3KgsD
Дейтинг сервис Pure и сообщество Creative Russia анонсировали конкурс на создание стикеров для их сервиса знакомств. Приз 1 BitCoin самому крутому художнику стикеров. Все подробности на сайте конкурса
Читать полностью…
Дейтинг сервис Badoo ищет опытных продуктовых дизайнеров в команду, в Лондон. Подробнее о вакансии по ссылке http://badoo.design/
#вакансия
11 ноября в Москве пройдёт семинар о философии цвета для дизайнеров от Александра Бурта. Автор разрабатывает собственную теорию цвета, которая помогает лучше понимать и выбирать цвета.
Александр - дизайнер, UX проектировщик, разработчик. Закончил Академию Искусств в Сан-Франциско, факультет компьютерной графики. Проектировал и разрабатывал интерфейсы для интернет-телевидения в Streamtec Barcelona, потом в анимационной студии Ilion. Работал главным проектировщиком UX в Parallels.
Для подписчиков канала, организаторы предоставили скидку 1990 р. по промокоду: duiux
Загляните в сообщество Facebook, чтобы узнать все подробности о мероприятии - https://www.facebook.com/events/352167298564918/
#реклама
Егор Сорокин написал в своём блоге живой отзыв о школе стажёров Бюро Горбунова. Он прошёл две ступени в школе дизайна и решил остановиться на этом и не продолжать обучение.
Рекомендую прочитать отзыв всем дизайнерам, которые планируют или возможно планировали поступать в будущем в школу Бюро. Очень содержательный материал.
По результатам проведённого опроса решил создать новую рубрику «🖐 в Пят» (что значит, Пять в Пятницу).
Буду в конце рабочей недели вечером, публиковать пять ссылок на различные темы, которые не вошли в основные публикации канала. Это может быть что угодно: полезные ресурсы для работы, инструменты, инспирейшены, всё что полезно дизайнерам. Вы так же можете предлагать мне в личные сообщения @astract свои интересные ссылки в течении недели.
Сейчас мне важно узнать, как вам подобная рубрика? Попробуем? Голосование закреплю на первом сообщении рубрики.
В новой версии Sketch 48 наконец-то добавят возможность масштабирования символов через Scale.
Сейчас изменять размеры символа можно только вручную через изменение высоты и ширины. Такой способ не практичен, так как появляются полупиксели на границах.
На видео я показал разницу между двумя символами. Оранжевый символ - скриншот из Sketch 47. Синий символ - скриншот из Sketch 48 Beta.
Можно заметить, что на синем значке (Sketch 48 Beta), который был масштабирован через инструмент Scale, нет полупикселей на границе иконки. На оранжевом же значке (Sketch 47), размер которого был изменён вручную, есть полупиксели на границе.
Дизайнер Meng To рассказал о своём воркфлоу в Sketch и работе над проектами. Какие инструменты и плагины использует, как организует обсуждение дизайна с клиентами.
https://designcode.io/sketch-start
@uxidesign канал дизайнера, который публикует переводы полезных материалов для дизайнеров интерфейсов.
Раз в месяц автор делает пост с подборкой полезных ссылок и инструментов для дизайнеров в своём канале.
Подписывайтесь: @uxidesign
#реклама
Возможно вы уже слышали, что стартанул турнир Russian Design Cup 2017 (RDC). RDC - ежегодный, крутой и сильный конкурс для дизайнеров и проектировщиков.
Сейчас начался отборочный тур. Записаться можно по ссылке https://russiandesigncup.ru/
Успеха всем участникам!
Коллекция маленьких советов по улучшению визуального дизайна в интерфейсах - https://goo.gl/5EnSgJ
Читать полностью…
Дизайн нижних элементов в iPhone X
Дополнительная статья от этого автора с советами по дизайну нижних элементов в iPhone X.
Все элементы, которые раньше прилипали к нижней границе экрана можно сделать плавающими и поднять на 32 pt от нижнего края экрана.
Max Rudberg - Visual & User Interface Designer - UI Design for iPhone X: Bottom Elements
