8855
Это канал об интерфейсах, пользовательском опыте, дизайне. Опубликовать рекламу, пообщаться, предложить статью — @mosink
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/
@
Путешествие через бессознательное.
Достаточно затягивающий ролик. Несмотря на то, что каждый отдельный элемент выполнен на среднем уровне, в сумме вышло видео от которого не оторваться.
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
Добавлю, что я зачитался одним из выпусков рассылки и мне нравится авторский подбор материала. Даже сам подпишусь.
Почитать о дизайне
16-минутное видео на постнауке, в котором Михаил Соколов, рассказывает о вкусе. Это все та же история про то, как люди отличают «плохое» от «хорошего».
«Немного генерализуя, мы можем сказать, что более широкой категорией, чем естественность, но включающей ее является ожидаемость. Когда нечто является ожидаемым, оно превращается в безвкусное. […] Это, например, использование самой очевидной и самой расхожей метафоры, для того чтобы передать какой-то смысл, но именно это ассоциируется для нас с плохим вкусом в искусстве. […] использовать в архитектуре метафору в лоб — значит убить ее. Пример, который я украду у своего коллеги по Европейскому университету Вадима Басса: самое худшее, что может сделать газовая компания в качестве выбора дизайна для своей штаб-квартиры, — это обыграть огонек зажигалки, потому что это первая ассоциация, которая способна возникнуть в связи с газовым гигантом.»
https://www.youtube.com/watch?v=4jYu3SkjRuA
@