UXPUB

UXPUB - сообщество из 2,348 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Дизайны Netflix, HBO, Spotify, Twitter, Hulu, Apple и Google противоречащие советам из Интернета
Редакция
Редакция

Опубликовано

Дизайны Netflix, HBO, Spotify, Twitter, Hulu, Apple и Google противоречащие советам из Интернета

Что и как проектировать

Мы, дизайнеры, часто стремимся делиться информацией и советами по продуктовому дизайну. Это важно для профессионального роста коллег и нашей отрасли. Я многому научился у опытных UI и UX-дизайнеров, разработчиков и представителей различных профессий, занимающихся продуктовым дизайном. Я все еще учусь каждый день, и в этом сила нашей отрасли. На самом деле нет предела профессиональному росту.

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

Ниже приведены несколько советов «как проектировать», взятых из соцсетей, и примеры дизайнов от крупных компаний, противоречащих им. Из уважения к дизайнерам я отредактировал их имена.

Фоны и контраст

Image description

HBO Max и Hulu

HBOMax и Hulu выбрали фирменный фон. HBO использует свой новый пурпурно-фиолетовый градиент, а Hulu — темно-бирюзовый. Иногда это может порождать причудливый контраст, но это, похоже, крайний случай, поскольку большинство постеров фильмов и сериалов остаются четкими и читабельными.

Image description

Кнопки

Image description

Material Design от Google

Огромная команда дизайнеров Google потратила годы на создание и усовершенствование своего языка дизайна Material Design. Ниже представлен скриншот из библиотеки компонентов MaterialDesign. Основная причина, по которой Google использует черные тени (в отличие от примера выше), заключается в том, что Material Design предназначен для имитации реальной жизни, и поэтому непрозрачный объект не создает красочной тени. Это видно в примере ниже.

Image description

Макет интерфейса

Image description

Apple Music и Twitter

Это сложный пример, поскольку термин «функциональность» не совсем понятен. Я думаю, дизайнер имел в виду основную «цель/задачу». Проблема приведенного выше примера в утверждении, что количество элементов, отображаемых на экране может быть уменьшено без каких-либо компромиссов. Представление меньшего количества элементов, когда это возможно — это здорово, но это имеет свою цену. Существует множество примеров экранов со множеством элементов-кнопок, но я выбрал AppleMusic и Twitter, потому что они больше напоминают пример из поста Instagram, показанный выше. В этом случае стоимость будет заключаться в способности платформ создавать индивидуальный контент для пользователя.

Image description

Центрированный текст

Image description

Сайт Apple

Практически на любом сайте довольно легко найти примеры выравнивания текста по центру. Дизайнер на изображении выше сказал никогда не центрировать текст. Это не совсем так, поскольку контент длинной формы, безусловно, не должен быть центрирован, и каждый фрагмент текста должен рассматриваться отдельно. Например, некоторые заголовки, выравниваются по левому краю на больших устройствах и по центру на мобильных/маленьких устройствах. Большую роль играет объем текста.

Image description

Image description

Использование цвета

Image description

Spotify и Apple Music

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

Image description

Поля и отступы

Image description

Netflix и Hulu

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

Известно, что Netflix является одним из самых эффективных в оценке и измерении интерфейса в зависимости от действий/поведения клиентов. Ниже вы можете видеть, что Netflix (и Hulu) используют узкие поля между каждым фрагментом контента. По сравнению с приведенным выше примером вы можете заметить, что эти два стриминговых гиганта нарушают рекомендацию из Instagram выше.

Image description

Спасибо за прочтение! Я не ставлю перед собой цель принижать посты о дизайне в социальных сетях. Моя цель – постоянно подталкивать дизайнеров к тому, чтобы они придавали контекст своим публикациям. Каждый день я узнаю что-то новое о дизайне. Это потому, что у нас есть сильное сообщество дизайнеров, обладающих разным опытом, культурой и точками зрения.

Перевод статьи ryanhouk.medium.com

Обсуждение (1)

Свернуть/развернуть
valeria_ptiich_16b8f8ad7a profile image
Valeria Ptiich • Изменен on

Действительно, сама раньше часто замечала подобные ситуации в дизайне крупных компаний. И думала: блин, это ж не по правилам! Как так?
Но годы работы дизайнером дали мне понять такой смысл: если ты опытный дизайнер, то можешь нарушать любое правило, потому что ты сделаешь так, что все будет гармонировать. А новичок этого ну никак не может сделать. Соответственно, все эти "туториал посты" только для новичков. А-ля: смотрите да повторяйте, без всяких отклонений от правил, и будет вам счастье))