ДизайнДайджестВеб ДизайнUXUI

Дизайнерский дайджест за неделю: статьи, кейсы и полезные инструменты

Twitter и Netflix добавили истории, Sketch выкатил глобальный редизайн, Figma обновила Auto Layout, а Webflow и InVision представили несколько приятных фич. Помимо новостей в новом выпуске дайджеста, по традиции, полезные статьи, видео ссылки на инструменты.

Обязательно делитесь мыслями по поводу новостей и материалов за прошедшую неделю. Мне будет полезно узнать ваше мнение.

Полезные инструменты

Подборка приложений и сервисов, которые упростят твою жизнь

📐 The good line-height. Бесподобный калькулятор высоты текстовой строки (line-height). Он предлагает наилучшее значение на основе вашей вертикальной сетки, размера шрифта и прочих параметров. Больше никаких ручных расчётов.

👋🏻 Hands Illustrations. И снова иллюстрации с руками. На этот раз хотя бы не в заезженном 3D, а более крафтовые, флэтовые. Похоже, бесконечное мытьё рук во время эпидемии вознесло значимость этой части тела до небес. Другого объяснения этому тренду у меня нет.

🪑 Glorify. Крутой и функциональный генератор изображений товаров для E-commerce. Обязательно посмотрите видео-презентацию на главной. Это своеобразная Canva с фокусом именно на товарах. Куча шаблонов, работа с цветовыми палитрами и экспорт сразу для всех соцсетей и форматов.

🖥 macOS icon pack. В новом обновлении macOS все иконки системных приложений приведены к общему виду. А что делать с остальным софтом? По ссылке доступна гигантская (почти 2К) база иконок единой формы для большинства популярных приложений. И да, это бесплатно.

📌 UX Toolset. Набор инструментов для проектирования интерфейса: блоки, стрелки, экраны, а также элементы разметки для создания документации. Адаптировано для Sketch и Figma, отлично тянется и масштабируется.

🖥 UIBlend. Простой и быстрый генератор мокапов. Заливаете свою картинку и получаете на выходе десятки вариантов в разных размерах и девайсах. Бесплатно скачивается в JPEG, за PNG без фона нужно 15$ (не подписка, а единоразовый платёж).

Статьи и публикации

Полезные материалы для чтения на русском и английском языке

Руководство по проектированию адаптивных сеток. Супер-полезный гайд-шпаргалка по проектированию и дизайна адаптивной сетки для веб-сайта или интерфейса. Если у вас есть вопросы на тему сеток, с огромной вероятностью они исчезнут после прочтения этой статьи. Читать статью →

Редизайн процесса Регистрации и Выписки в отельном сервисе. Отличный пример продуктового редизайна, обусловленного реальной проблемой. И кстати, проблема эта крайне актуальна для сервисов и приложений, создаваемых одними лишь программистами без участия дизайнера. Читать статью →

Как нарисовать сет иконок? Дизайнер‑иконист из Бюро Горбунова опубликовал подробнейший гайд из 10 глав. Кажется, в нем описано абсолютно всё, что необходимо знать про дизайн иконок в едином стиле и с общими характеристиками. Читать статью →

Как спроектировать настройки в приложении. Перевод статьи UX-дизайнера Имрана Парвез об особенностях проектирования интерфейса настроек. В статье помимо реально полезных советов есть также куча примеров из современных приложений или техники (например, меню настроек зеркальной камеры). Читать статью →

Прекратите оценивать продуктовых дизайнеров, как визуальных дизайнеров. Перевод статьи дизайнера Тэйта Уэйланда о том, почему продуктовый дизайн — это намного больше, чем красивая и опрятная картинка. Современному product-дизайнеру приходится идти на бесконечные компромиссы ради решения поставленных задач. Читать статью →

Пять источников вдохновения для UX-дизайнера: личные эмоции и экскурс в историю. Оказывается, для того, чтобы найти вдохновение и новые идеи не обязательно идти на Behance. Можно, например, посетить музей или библиотеку (само собой, онлайн, как же иначе в наше время). Читать статью →

Новые книги по дизайну: о патентном праве, проектировании продуктов и творческой атмосфере в команде. Мега-подборка новых книг по дизайну от Юрия Ветрова. Пандемия и карантин позволили авторам сосредоточиться на творческом процессе. В подборке — книги по UX, креативному мышлению и копирайтинге. Читать статью →

Новости одной строкой

Важные новости из мира дизайна, маркетинга и бизнеса

Netflix экспериментирует с форматом а-ля TikTok и лентой коротких смешных видео. Компания предлагает нарезки небольших отрывков из сериалов и кинокартин, чтобы привлечь внимание пользователей к новинкам. Как ни крути, TikTok оказал довольно сильное влияние на всю индустрию развлечений.

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

Twitter запустил флиты — сообщения, которые исчезают через 24 часа. Четыре года понадобилось Твиттеру, чтобы внедрить эту фичу после Snapchat, Instagram и, конечно же, Тинькофф Банка.

Figma выкатила новый подход в Auto Layout. Я не большой фанат Figma, но данное обновление выглядит как логичная эволюция для создания легко масштабируемой системы компонентов.

Sketch получил большой редизайн под macOS Big Sur. Как и было анонсировано неделю ранее, Sketch получил глобальное обновление под номером 70. Главное изменение — новый дизайн, соответствующий гайдлайнам и принципам операционной системы macOS Big Sur.

Google анонсировала выпуск обновлённых виджетов для iOS 14. Уже готовы виджеты для Gmail, Drive и Google Fit. На подходе ещё несколько. Выглядит приятно, все виджеты в едином стиле — это круто. Непонятно только, почему многие компании так тянут с выпуском виджетов, если операционка была представлена в июне.

Instagram расширила функцию Guides — пользователи смогут создавать посты, как в блогах. Затестил на неделе эту функцию в своём Instagram — это реально, одна из полезнейших фич приложения за последнее время. Горе-блогерам вроде меня теперь намного удобнее структурировать свои посты и распределять их по темам.

Webflow добавил отдельную вкладку Audit, для проверки ошибок в проекте. На данный момент функция находится в стадии Beta и поддерживает три типа ошибок: отсутствие alt-тегов у изображений, пустые ссылки и самое кайфовое — нарушение иерархии заголовков H1-H6.

InVision представили раздел с шаблонами для Freehands. Очевидно, компания пытается конкурировать на этом поле с Miro, который для меня пока выглядит менее тормозным и более функциональным для организации мозгового штурма и подготовки мудбордов и концепций.

Видео и лекции

Познавательные материалы для изучения в свободное время

Fintech Design Conf 2020

Запись прошедшей недавно онлайн-конференции про дизайн в финтехе. Целых семь часов пламенных речей, интересных спичей и умных продуктово-дизайнерских идей.

Embedded content: Fintech Design Conf 2020

RingCentral

Красивый рекламный ролик с 3D-объектами и приятной анимацией. Концепция, явно, подхвачена у последних роликов Microsoft, но тренд этот выглядит довольно залипательно. Главное, чтобы такой не стала каждая вторая реклама продукта.

Embedded content: RingCentral - Message, Video, Phone.

Hatch

Чувак сделал фреймворк для Webflow. Фреймворк. Для Webflow. Ну то есть, он руками сделал 2000 классов, которые можно применять к элементам. Классы такие, типа «Text Align Center». То есть вместо выравнивания текста по центру через параметры, можно добавить класс. Вся эта тема с CSS фреймворками, которые тащат за собой тысячи ненужных классов, нагоняет тоску.

Embedded content: A New Framework for Webflow Just Hatched!

Прочие ништяки и интересности

Всё полезное и интересное, что не удалось разметить в других категориях

  1. 5 книг для развития креативного мышления. Приятная подборка книг для всех, кто хочет расширить границы познания и реализовать свой творческий потенциал.
  2. «Xbox Series X может попасть в музей современного искусства»: взгляд промышленного дизайнера на новую консоль Microsoft. Денис Гармаш из бюро «Масштаб» проанализировал дизайн и конструкцию Xbox Series X вместе с редактором vс.ru
  3. Chimera Painter. Безумно залипательный эксперимент на искусственном интеллекте от Google. Рисуете как можете существо при помощи кистей: каждая кисть отвечает за различные объекты — голова, уши, лапы, зубы и так далее. Затем AI генерирует фотореалистичное изображение получившегося монстра.

Заключение

Не забывайте подписываться на Email-версию дайджеста (она выходит немного раньше). Я также буду рад видеть вас в своём Instagram и на YouTube. Хороших выходных!

P.S. Подробнее о том, как появился этот дайджест, я писал в отдельной публикации на VC.

Embedded content: Twitter