71. О взаимодействии цветов

В этой рассылке Проектората: 4-й выпуск передачи Walking head с участием Егора Камелева, 3-й выпуск «ДжонФёдора», отрывок про быстрые прототипы из фильма «Основатель», а также статьи о взаимодействии цветов, сером тексте, обозначении обязательных полей формы и кейс повышения конверсии в регистрации.

Материалы Проектората

4-й выпуск передачи Walking head с участием Егора Камелева, в котором мы с ним, как заметил один комментатор, сидим на лавочке как гопники и пишем видео на широкоугольный объектив:

Часть 1:

  • Как стал работать проектировщиком;
  • Как перешёл на фриланс;
  • Зачем основал «Проекторат»;
  • Чем «Проекторат» является сейчас;
  • О передаче накопленного опыта и знаний;
  • Об изменении мировоззрения.

Часть 2:

  • Куда может развиваться проектировщик-фрилансер: проектирование в чужой компании, создание собственной, смена вида деятельности;
  • Об опыте формирования своей команды, почему отказался от такой конфигурации;
  • Почему свой продукт лучше своего агентства.

Часть 3:

  • Почему советы начинающим давать отчасти бессмысленно;
  • О том, что зарабатывать больше, — некорректная цель;
  • О целеполагании: выборе направления для развития, обучении на клиентских проектах;
  • О навыках, которые нужны, чтобы хорошо зарабатывать в любом деле;
  • Как учиться проектированию (исключительно практика), как обеспечить себе хороший старт;
  • Как устроиться на работу;
  • Помогут ли курсы по дизайну и проектированию найти работу.

Обсуждение в нашей группе в ВК: как учитывать особенности платформ (shopify, woocommerce, magento, prestashop) при проектировании интернет-магазинов.

Интересные статьи

Дмитрий Ваницкий написал о взаимодействии цветов и дал несколько советов о работе с ними.

Цвета объектов часто рассматриваются в вакууме. Если карандаш поглотил весь свет кроме зелёного, значит, он зелёный. Но мы видим его в среде, где на него воздействует тысяча факторов, которые искажают восприятие.

Чтобы изобразить ванильное мороженное, можно открыть «Каталог цветов на все случаи жизни» и найти там нужный цвет. Но если мороженное должно быть освещено светом падающей звезды, отражённым водной гладью, то вряд ли мы найдём что-то подобное.

  • Математическая цветовая модель может передать реальный цвет объекта, но он будет отличаться от того, как зритель его видит;
  • Цвет, который мы видим, никогда не бывает один, он находится в среде, которая его искажает;
  • Запоминайте правила поведения и взаимодействия цвета, а не коды или конкретные цвета в конкретных ситуациях.

Любимый пример Людвига Быстроновского с «несочетаемым красным и зелёным»: просто посмотрите на грядку с клубникой. Цветовая гармония — лишь мера слаженности цветовой палитры, которая служит определённой цели, вызывая необходимое эмоциональное переживание.

Проблема автоматизации поиска гармоничной палитры ещё и в том, что алгоритмы оперируют составом самого цвета, но никак не соотношением количества этих цветов.

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

В реальном мире восприятие даёт сбои. Например:

  • Остаточные изображения, когда рецепторы не могут быстро остыть, и мы видим то, чего нет;
  • Цветовая адаптация, когда при долгом лицезрении яркой палитры рецепторы сами снижают интенсивность, чтобы не перегреться.

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

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

Источник света тоже вносит коррективы. Если лампа светит приятным жёлтым светом, то тени, отбрасываемые освещённым предметом, становятся синее.

При ярком белом свете мы видим жёлтые и красные цвета ярче синих, но всё меняется с приходом ночи — синие цвета выступают вперёд, а красные и жёлтые кажутся почти чёрными.

Геометрическая прогрессия цветового тона воспринимается мозгом как арифметическая. Чтобы скорректировать восприятие, надо сделать шаг между тёмными тонами больше.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в Заметках UX-проектировщика ВКонтакте.)

Ребята из студии Евгения Ярового записали 3-й выпуск передачи «ДжонФёдор», в котором обсудили:

  • Онлайновые курсы дизайна, а точнее то, как они себя продают, и связанные с ними персоны;
  • Реакцию дизайнеров на экспресс-дизайн студии Артемия Лебедева, в частности, жёсткий пост Олега Чулакова;
  • Историю браузера арт-директора Actis Wunderman;
  • Реакцию простых людей на брутальный бренд Иркутска;
  • Негативное влияние паблика «Десигн» на дизайнеров и их отношения с заказчиками, а также лекцию админа этого паблика, основной посыл которой можно сформулировать как «клиент — дол***б»;
  • Дизайнеров ВКонтакте и копирование элементов Фейсбука;
  • Профессиональный подход к работе.

Илья Бирман написал о сером тексте:

«Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно.

Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным.

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

Жирность на чёрном работает плохо — разницы <…> почти не видно».

Игорь Штанг считает, что если чего-то не делали раньше, это не значит, что этого не нужно делать сейчас. Серый цвет — уже давно полноправная альтернатива другим шрифтовым приёмам вроде курсива или мелкого кегля.

В заметке — примеры серого текста на печатных макетах конца 20 века.

Фильм «Основатель» рассказывает, как кафе братьев Макдоналдов с очень быстрым обслуживанием превратилось в огромную сеть.

В этом отрывке — о проектировании компактного и эффективного кухонного пространства. Всё как мы любим: прототип (кухня нарисована мелом на асфальте), тестирование прототипа, итеративные улучшения.

Хорошее видео, если надо объяснить кому-нибудь пользу прототипов и их тестирования.

Одностраничное бизнес-приложение предлагало пользователям зарегистрироваться с помощью соцсетей Google+, FB, VK и LinkedIn, чтобы сохранить данные. Конверсия была 2,5%.

Приложение может хранить данные локально и в Google Диске. При авторизации в Диске можно запрашивать пользовательские данные в Google+. Для новых пользователей по умолчанию настроено сохранение данных в Диске.

Регистрацию заменили на авторизацию, из соцсетей оставили только Google+. Конверсия стала 36,7%.

Джордан Сансон написал, как сообщить, какие поля в форме обязательны.

Большинство дизайнеров использует звёздочки для обозначения обязательных полей. Лучше обозначать необязательные поля:

  • Звёздочка очевидна для вас, но не для всех. Есть те, кто не поймёт её смысла;
  • Обязательных полей обычно больше, чем необязательных;
  • Чем меньше визуального шума в форме, тем она читабельнее;
  • Обязательное поле — препятствие на пути пользователя. Необязательное — наличие выбора. Лучше указывать на позитивные моменты (наличие выборе), чем на негативные (препятствия).

Какой текст использовать:

  • На английском лучше «Optional», а не «Not required». Отрицания обычно менее понятны;
  • От себя добавлю, что на русском лучше писать «Не обязательно». Слово «Опционально» менее понятно широким пользовательским массам.

Рассылка Проектората × Заметки UX-проектировщика

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.