Сервис, который показывает как выглядит ваш сайт на устройствах с разным разрешением. Все выводится на одном экране с горизонтальным скроллом, можно задать свое разрешение.
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/

Если вы достаточно упоротый дизайнер как я, то вы задумываетесь о том, как вес сайта влияет на его отрисовку. Вот вам достаточно взвешенная статья без криков «сайты в вебе весят по 3 мб, конец света близок».


«If you care about measuring user experience, then use custom metrics


Correlating page size with user experience is like presenting someone with an entire buffet dinner and assuming that it represents what they actually ate. To properly measure user experience, we need to focus on the content – such as the navbar or hero product image – that users actually want to consume. The best performance metric for measuring user experience is one that measures how long the user waits before seeing this critical content»


https://speedcurve.com/blog/web-performance-page-bloat/

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

https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9

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

Как Google возрождает итальянский дизайн в своих физических продуктах. Выглядит вкусно.
https://blog.prototypr.io/google-and-the-resurgence-of-italian-design-e9234cf3d073

Артемий Лебедев завёл телеграм-канал — @temablog

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

https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens

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

http://telegra.ph/Pro-kod-podrazdeleniya-v-pasporte-11-17

Люди смотрят 80% времени на левую часть сайта и 20% на правую

https://www.nngroup.com/articles/horizontal-attention-leans-left/

Как выстроить систему отступов на проекте. 

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

https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c