Designing Depth

Бесплатная версия Журналуса. Полная версия: – на сайте zhurnalus.artlebedev.ru – в боте @designersdigestbot

дизайнглубинаинтерфейс

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

Главное:

  • В кино и фотографии часто добавляют объекты на передний план, чтобы добиться глубины и эмоциональности. Этот приём называют «загрязнение кадра»
  • В интерфейсах добиться глубины можно с помощью многоплановости, размытия и даже анимации
  • Размытие фона под оверлеем помогает создать ощущение глубины и фокусирует внимание на активных элементах интерфейса
  • Правильная последовательность анимации улучшает повествование и тем самым добавляет глубину
  • В стае животные двигаются вместе, но с небольшим рассинхроном. Этот приём можно использовать в интерфейсах для добавления «жизни» группе объектов. Например, можно загружать карточки на сайте с небольшим отставанием

#статья

Превью: размытие и многоплановая UI-композиция с аннотациями, иллюстрирующая приёмы создания глубины в интерфейсах и фокусировки внимания.
Превью статьи о приёмах создания глубины в интерфейсах