8834
Это канал об интерфейсах, пользовательском опыте, дизайне. Опубликовать рекламу, пообщаться, предложить статью — @mosink
Рассказ Тани Бибиковой из «Лаборатория данных» о визуализации данных. В статье очень много примеров, когда из громоздких ненаглядных таблиц делали крутую интерактивную инфографику.
https://habrahabr.ru/company/datalaboratory/blog/343034/
Путешествие через бессознательное.
Достаточно затягивающий ролик. Несмотря на то, что каждый отдельный элемент выполнен на среднем уровне, в сумме вышло видео от которого не оторваться.
https://vimeo.com/242569435
Сайт, на котором показывается сравнение экранов приложений на iOS и Andriod. Можно фильтровать по экранам, можно по приложениям. Пригодится для сравнения гайдлайнов двух платформ. Или можно подсмотреть как адаптировать фичу под другую платформу.
http://uiohmy.com/
Анимированные обложки книг. Можно найти много идей, например, для лоадеров.
https://vimeo.com/141891887
https://vimeo.com/228577316
В твиттере был задан вопрос: «Если вы человек с ограниченными способностями, расскажите, какая вещь для вас самая сложная при просмотре веб-страниц?». Откликнулось много людей и вот какие проблемы они выделили:
— Видео без субтитров
— Анимации и захламленные страницы
— Неструктурированный текст
— Маленький размер шрифтов
— Проблемы с зумом
— Низкий контраст между фоном и текстом
— Яркие цветовые схемы
— Передача функции элемента только через цвет
— Сайты, которые заточены под использование мыши
— Маленькие тач-зоны для элементов
— Капча
На самом деле, мне самому половина этих проблем доставляет неудобство.
https://axesslab.com/accessibility-according-to-pwd
Премия, посвященная лучшей инфографике со всего света. Очень качественные работы на которые можно залипать бесконечно.
http://www.informationisbeautiful.net/2017/longlist-revealed-the-kantar-information-is-beautiful-awards-2017/
Сервис, который показывает как выглядит ваш сайт на устройствах с разным разрешением. Все выводится на одном экране с горизонтальным скроллом, можно задать свое разрешение.
http://app.xrespond.com/
Евгений Брянцев написал изумительную и живую историю о том, как его компания делала остановку общественного транспорта
https://medium.com/russian/как-сделать-остановку-997391386df2
Команда Яндекс.Такси рассказывает о новом визуальном языке бренда. Примечательно, что они привлекли стороннее агенство для его проработки.
https://medium.com/%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81-%D1%82%D0%B0%D0%BA%D1%81%D0%B8/yandex-taxi-visual-language-a87c69a44ae
Илья Бирман рассказывает про принцип одной ссылки.
«Письма-уведомления веб-сервисов нужны только для того, чтобы привести человека из почты на сайт. Поэтому в таких письмах всегда должна содержаться ровно одна ссылка»
https://ilyabirman.ru/meanwhile/all/one-link/
Хорошие примеры веб-дизайна, разбитые на составляющие: футер, социалки, фичи, навигация и т.д.
http://www.goodweb.design/
14 ноября в онлайн-школе Bang Bang Education начнутся занятия на курсе безболезненного управления проектами «Дизайн-менеджмент: как создавать и продавать дизайн». Преподаватели Антон Гора и Алексей Лури много лет работали в Студии Лебедева, а сейчас реализуют большие и классные проекты в составе команды Kindbeetle.
Вы научитесь работать эффективно, свободно управлять процессами, лучше понимать потребности клиентов, принимать целесообразные решения и распределять задачи в коллективе. Это важно как для тех, кто работает в команде, так и для фрилансеров в сфере дизайна и иллюстрации.
Подробности о программе обучения по ссылке: https://bangbangeducation.ru/course/design-management
Регулярно получать интересную информацию о мире дизайна и следить за новостями школы можно в Телеграме @bangbangeducation. Заходите, вам понравится!
Подписчикам канала скидка 5% по промокоду: mosinkru
Немного разносторонних советов о том, как улучшить маленькие детали в интерфейсе
https://twitter.com/i/moments/880688233641848832
Плагин для скетча, который существенно облегчил мою жизнь. Он позволяет задать свои значения для сдвига «→» и «shift+→», а так же добавляет еще один «Ctrl+alt+→»
https://github.com/KevinWoodhouse/sketch-nudged
Мега-рассылка для дизайнеров
Кирилл Олейниченко, автор проекта @awdee, ведёт полезную еженедельную рассылку для дизайнеров — «Дизайнерский дайджест».
Каждую пятницу подписчики получают большое письмо с обзором всего самого крутого для дизайнера за неделю: что читать, использовать, изучать, чем вдохновляться
Посмотрите охват тем, пример письма и подписывайтесь: https://awdee.ru/newsletter
Добавлю, что я зачитался одним из выпусков рассылки и мне нравится авторский подбор материала. Даже сам подпишусь.
Adobe сделала новые иконки для всех своих продуктов и типов файлов.
«Когда мы смотрим на количество размеров и форматов для каждой иконки типа файла, получается более 7000 ассетов, которыми нужно управлять и модифицировать с каждым релизом»
«Одним из основных факторов, лежащих в основе редизайна, было упрощение и удаление как можно большего количества элементов на иконке типа файла без потери ее смысла. Мы опустили тег и переместили тип файла в нижнюю часть иконки. Мы также убрали загиб страницы, чтобы сгладить дизайн и создать более современный визуальный язык»
Типы файлов — annydesign/redesigning-adobes-file-type-icon-system-language-6efa4aed1b30" rel="nofollow">https://medium.com/@annydesign/redesigning-adobes-file-type-icon-system-language-6efa4aed1b30
Перевод про типы файлов — http://sketchapp.me/redizajn-ikonok-fajlov-dlya-vsej-linejki-produktov-adobe/
Про иконки приложений — https://blog.prototypr.io/designing-adobes-evolving-brand-system-6d243992cedd
Дмитрий Карпов рассказывает об онлайн-обучении. Понравилась вот эта часть:
«Зеркальте знание. Научились — научите. Самый продуктивный метод закрепления знания и умения — записывать процесс, результат, делиться ими в блоге, в своём телеграмм канале, в социальных сетях. Старайтесь пересказывать кратко изученное, чтобы ваши друзья, аудитория соцсетей могла стать аккумулятором интереса, задавать вопросы, видеть в вас новые способности и иногда выступать самостоятельным мотивом для новых знаний. Но важнее добиться эффекта артикуляционного мышления, когда формулирование собственной мысли о предмете позволяет его лучше понимать, а пока не начнешь пересказывать изученное другим — сам разберешься. Это кстати здорово помогает расширить аудиторию вашего блога или число подписчиков в соцсетях. Учитесь быть интересным самому себе.»
http://telegra.ph/8-sovetov-dlya-produktivnogo-onlajn-obucheniya-11-16
Как Booking.com манипулирует пользователями за счет темных паттернов. Там прям все плохо: сокрытие важной информации, игра на вашей тревожности, странная шкала оценки.
https://ro-che.info/articles/2017-09-17-booking-com-manipulation
Библиотека визуализации данных. Все виды визуализации удобны разбиты и каталогизированы. Можно искать по функции (для сравнений, взаимосвязей, диапазонов и т.д.), можно по типу (графики, диаграммы, таблицы и т.д.)
https://datavizcatalogue.com/RU/
На @sketchdesigner вышла статья с разбором бесшовного перехода между экранами. С примерами на Фреймере. bit.ly/ui-animation2
#реклама
Сегодня порекомендую канал @vimeone на котором автор заботливо собирают годноту с вимео и описывает чем она его зацепила. Сам бы занялся тем же самым, если бы кто-нибудь отсыпал пару часов в сутки.
Читать полностью…
Поле подтверждения электронной почты не решает свою задачу. В одном из исследований 60% респондентов просто копировали и вставляли почту из предыдущего поля. В статье предлагаются следующие решения:
— Убрать поле подтверждения
— Вынести поле электронной почты на первое место в форме
— Визуально увеличить поле
— Добавить примечание «убедитесь, что правильно написали»
Я не уверен в этих решениях.
http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/
В канале @sketchdesigner дизайнер из Почта Банка пишет посты про Скетч, горячие клавиши, прототипы и дизайн интерфейсов.
Также канал интересен видеоуроками от автора, короткими обучающими гифками и рубрикой «Классные Люди», в которой он рассказывает о вдохновляющих дизайнерах.
Что почитать:
Стратегический дизайн интерфейсов
Как развивается интерфейс с течением времени и как управлять этим процессом
medium.com/sketchdesigner/стратегический-дизайн-интерфейсов-a9146d7d8552
Как настроить свои клавиши в Скетч
medium.com/sketchdesigner/custom-shortcuts-dfd6e4d255fb
Конспекты по Фреймеру на русском
Для тех, кто хочет писать анимацию кодом в Framer Studio.
medium.com/sketchdesigner/framer-guide-3c7e0f7a2e53
Классные_люди №3: Глеб Кузнецов
medium.com/sketchdesigner/glebich-e588a420314c
Если вы забыли о существовании Fluent Design, то вот, посмотрите на работу в этом стиле.
https://medium.com/microsoft-design/from-3d-to-2d-and-back-again-479906df6b47
Max Rudberg в двух статьях рассказывает, как правильно проектировать и адаптировать нижние и верхние элементы под iPhone X. Понравилось, что в статье описаны все нужные размеры и отступы элементов.
http://blog.maxrudberg.com/post/166045445103/ui-design-for-iphone-x-top-elements-and-the-notch
http://blog.maxrudberg.com/post/165590234593/ui-design-for-iphone-x-bottom-elements
Одна из лучших статей про оптические эффекты в интерфейсах. Здесь сразу объяснено как применить теорию на практике с кучей примеров.
Лично для себя утащил отличный прием как узнать сбалансированы ли визуально иконки: нужно заблюрить весь сет и посмотреть выглядят ли размытые пятна одинаково.
Из этой же статьи, вы узнаете почему новое скругление углов в 47 скетче выглядит более красивым для человеческого взгляда.
https://medium.muz.li/optical-effects-9fca82b4cd9a
Нужно больше пунктуационных знаков Богу пунктуационных знаков
http://progressivepunctuation.com/
Выберите своего персонажа. Выбирайте мудро.
https://uxplanet.org/designers-self-checklist-what-kind-of-designer-are-you-or-want-to-become-b2b3590a071b
Как закрыть программу, баннер, вкладку? Найти крестик [x] и нажать его.
Сейчас это рутинная операция, которую мы выполняем по несколько сотен раз в день, но почему именно [x]? Откуда берет корни этот паттерн?
https://medium.com/re-form/x-to-close-417936dfc0dc
Почитать о дизайне
Плоский дизайн привлекает меньше внимания.
Исследование на 71 человеке и 9 сайтах с двумя разными версиями: с плоским дизайном и без. Фиксировали движение глаз, время выполнения задачи и на их основе строили тепловые карты.
Краткий вывод таков: элементы с плоским дизайном плохо привлекают внимание. Люди склонны больше тратить времени на их поиск и дольше задерживаться на странице.
Негативные последствия плоского дизайна можно уменьшить, если сайт имеет низкую плотность информации, знакомую верстку и важные элементы, которые выделяются среди других.
Полные методология, исследование и выводы внутри —
https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
@