Одна из лучших статей про оптические эффекты в интерфейсах. Здесь сразу объяснено как применить теорию на практике с кучей примеров.

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

Из этой же статьи, вы узнаете почему новое скругление углов в 47 скетче выглядит более красивым для человеческого взгляда.
https://medium.muz.li/optical-effects-9fca82b4cd9a

Перевод — https://habrahabr.ru/post/338780/

Хорошие примеры веб-дизайна, разбитые на составляющие: футер, социалки, фичи, навигация и т.д.
http://www.goodweb.design/

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

Илья Бирман рассказывает про принцип одной ссылки.

«Письма-уведомления веб-сервисов нужны только для того, чтобы привести человека из почты на сайт. Поэтому в таких письмах всегда должна содержаться ровно одна ссылка»

https://ilyabirman.ru/meanwhile/all/one-link/

Если вы забыли о существовании Fluent Design, то вот, посмотрите на работу в этом стиле.
https://medium.com/microsoft-design/from-3d-to-2d-and-back-again-479906df6b47

Команда Яндекс.Такси рассказывает о новом визуальном языке бренда. Примечательно, что они привлекли стороннее агенство для его проработки.
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://medium.com/russian/как-сделать-остановку-997391386df2

Поле подтверждения электронной почты не решает свою задачу. В одном из исследований 60% респондентов просто копировали и вставляли почту из предыдущего поля. В статье предлагаются следующие решения:
— Убрать поле подтверждения
— Вынести поле электронной почты на первое место в форме
— Визуально увеличить поле
— Добавить примечание «убедитесь, что правильно написали»

Я не уверен в этих решениях.

http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/

Сервис, который показывает как выглядит ваш сайт на устройствах с разным разрешением. Все выводится на одном экране с горизонтальным скроллом, можно задать свое разрешение.
http://app.xrespond.com/

Премия, посвященная лучшей инфографике со всего света. Очень качественные работы на которые можно залипать бесконечно.
http://www.informationisbeautiful.net/2017/longlist-revealed-the-kantar-information-is-beautiful-awards-2017/

В твиттере был задан вопрос: «Если вы человек с ограниченными способностями, расскажите, какая вещь для вас самая сложная при просмотре веб-страниц?». Откликнулось много людей и вот какие проблемы они выделили:

— Видео без субтитров
— Анимации и захламленные страницы
— Неструктурированный текст
— Маленький размер шрифтов
— Проблемы с зумом
— Низкий контраст между фоном и текстом
— Яркие цветовые схемы
— Передача функции элемента только через цвет
— Сайты, которые заточены под использование мыши
— Маленькие тач-зоны для элементов
— Капча

На самом деле, мне самому половина этих проблем доставляет неудобство.

https://axesslab.com/accessibility-according-to-pwd

Библиотека визуализации данных. Все виды визуализации удобны разбиты и каталогизированы. Можно искать по функции (для сравнений, взаимосвязей, диапазонов и т.д.), можно по типу (графики, диаграммы, таблицы и т.д.)

https://datavizcatalogue.com/RU/

Анимированные обложки книг. Можно найти много идей, например, для лоадеров.
https://vimeo.com/141891887
https://vimeo.com/228577316

Как Booking.com манипулирует пользователями за счет темных паттернов. Там прям все плохо: сокрытие важной информации, игра на вашей тревожности, странная шкала оценки.
https://ro-che.info/articles/2017-09-17-booking-com-manipulation

Сайт, на котором показывается сравнение экранов приложений на iOS и Andriod. Можно фильтровать по экранам, можно по приложениям. Пригодится для сравнения гайдлайнов двух платформ. Или можно подсмотреть как адаптировать фичу под другую платформу.

http://uiohmy.com/

Дмитрий Карпов рассказывает об онлайн-обучении. Понравилась вот эта часть:

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

http://telegra.ph/8-sovetov-dlya-produktivnogo-onlajn-obucheniya-11-16

Путешествие через бессознательное.

Достаточно затягивающий ролик. Несмотря на то, что каждый отдельный элемент выполнен на среднем уровне, в сумме вышло видео от которого не оторваться.

https://vimeo.com/242569435

Adobe сделала новые иконки для всех своих продуктов и типов файлов.

«Когда мы смотрим на количество размеров и форматов для каждой иконки типа файла, получается более 7000 ассетов, которыми нужно управлять и модифицировать с каждым релизом»

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

Типы файлов — 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

Рассказ Тани Бибиковой из «Лаборатория данных» о визуализации данных. В статье очень много примеров, когда из громоздких ненаглядных таблиц делали крутую интерактивную инфографику.

https://habrahabr.ru/company/datalaboratory/blog/343034/

Очень обстоятельная статья про формы в вебе

https://medium.com/@justd/the-18-must-do-principles-in-the-form-design-fe89d0127c92

Перевод — http://telegraf.design/16-dizajn-printsipov-kotorye-uprostyat-zapolnenie-lyuboj-formy/

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

http://jxnblk.com/colorable/demos/text/