В этом выпуске: 4-й выпуск передачи Walking head с участием Егора Камелева, 3-й выпуск «ДжонФёдора», отрывок о быстрых прототипах из фильма «Основатель», а также статьи о взаимодействии цветов, сером тексте, обозначении обязательных полей формы, кейс повышения конверсии в регистрации и обсуждение платформ для создания интернет-магазинов.
4-й выпуск Walking head
4-й выпуск передачи Walking head с участием Егора Камелева, в котором мы с ним, как заметил один комментатор, сидим на лавочке как гопники и пишем видео на широкоугольный объектив.
- Как стал работать проектировщиком;
- Как перешёл на фриланс;
- Зачем основал «Проекторат»;
- Чем «Проекторат» является сейчас;
- О передаче накопленного опыта и знаний;
- Об изменении мировоззрения.
- Куда может развиваться проектировщик-фрилансер: проектирование в чужой компании, создание собственной, смена вида деятельности;
- Об опыте формирования своей команды, почему отказался от такой конфигурации;
- Почему свой продукт лучше своего агентства.
- Почему советы начинающим давать отчасти бессмысленно;
- О том, что зарабатывать больше, — некорректная цель;
- О целеполагании: выборе направления для развития, обучении на клиентских проектах;
- О навыках, которые нужны, чтобы хорошо зарабатывать в любом деле;
- Как учиться проектированию (исключительно практика), как обеспечить себе хороший старт;
- Как устроиться на работу;
- Помогут ли курсы по дизайну и проектированию найти работу.
3-й выпуск «ДжонаФёдора»
Ребята из студии Евгения Ярового записали 3-й выпуск передачи «ДжонФёдор», в котором обсудили:
- Онлайновые курсы дизайна, а точнее то, как они себя продают, и связанные с ними персоны;
- Реакцию дизайнеров на экспресс-дизайн студии Артемия Лебедева, в частности, жёсткий пост Олега Чулакова;
- Историю браузера арт-директора Actis Wunderman;
- Реакцию простых людей на брутальный бренд Иркутска;
- Негативное влияние паблика «Десигн» на дизайнеров и их отношения с заказчиками, а также лекцию админа этого паблика, основной посыл которой можно сформулировать как «клиент — дол***б»;
- Дизайнеров ВКонтакте и копирование элементов Фейсбука;
- Профессиональный подход к работе.
Прототип кухонного пространства
Фильм «Основатель» рассказывает, как кафе братьев Макдоналдов с очень быстрым обслуживанием превратилось в огромную сеть.
В этом отрывке — о проектировании компактного и эффективного кухонного пространства. Всё как мы любим: прототип (кухня нарисована мелом на асфальте), тестирование прототипа, итеративные улучшения.
Хорошее видео, если надо объяснить кому-нибудь пользу прототипов и их тестирования.
Взаимодействие цветов
Дмитрий Ваницкий написал о взаимодействии цветов и дал несколько советов о работе с ними.
Цвета объектов часто рассматриваются в вакууме. Если карандаш поглотил весь свет кроме зелёного, значит, он зелёный. Но мы видим его в среде, где на него воздействует тысяча факторов, которые искажают восприятие.
Чтобы изобразить ванильное мороженное, можно открыть «Каталог цветов на все случаи жизни» и найти там нужный цвет. Но если мороженное должно быть освещено светом падающей звезды, отражённым водной гладью, то вряд ли мы найдём что-то подобное.
- Математическая цветовая модель может передать реальный цвет объекта, но он будет отличаться от того, как зритель его видит;
- Цвет, который мы видим, никогда не бывает один, он находится в среде, которая его искажает;
- Запоминайте правила поведения и взаимодействия цвета, а не коды или конкретные цвета в конкретных ситуациях.
Любимый пример Людвига Быстроновского с «несочетаемым красным и зелёным»: просто посмотрите на грядку с клубникой. Цветовая гармония — лишь мера слаженности цветовой палитры, которая служит определённой цели, вызывая необходимое эмоциональное переживание.
Проблема автоматизации поиска гармоничной палитры ещё и в том, что алгоритмы оперируют составом самого цвета, но никак не соотношением количества этих цветов.
Когда 2 цвета слишком сильно контрастируют, можно добавить в каждый частичку партнёра. Если это набор цветов или при разбавлении получается грязь, можно использовать 3-й цвет-партнёр, который привнесёт единство.
В реальном мире восприятие даёт сбои. Например:
- Остаточные изображения, когда рецепторы не могут быстро остыть, и мы видим то, чего нет;
- Цветовая адаптация, когда при долгом лицезрении яркой палитры рецепторы сами снижают интенсивность, чтобы не перегреться.
Атмосфера тоже обладает непрозрачностью, просто она гораздо разреженнее плотных объектов и набирает массу медленнее. Почему солнце в зените светит почти белым, а на рассвете или закате — оранжевым и красным? Во втором случае лучи преодолевают больший объем атмосферы, что вносит свои искажения в восприятие цвета.
Это актуально для работ с перспективой или несколькими планами. Чтобы создать реалистичную глубину, надо смещать цветовую палитру объекта ближе к цвету атмосферы, уменьшая контраст, будто он погружается в туман.
Источник света тоже вносит коррективы. Если лампа светит приятным жёлтым светом, то тени, отбрасываемые освещённым предметом, становятся синее.
При ярком белом свете мы видим жёлтые и красные цвета ярче синих, но всё меняется с приходом ночи — синие цвета выступают вперёд, а красные и жёлтые кажутся почти чёрными.
Геометрическая прогрессия цветового тона воспринимается мозгом как арифметическая. Чтобы скорректировать восприятие, надо сделать шаг между тёмными тонами больше.
(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)
Серый текст
Илья Бирман написал о сером тексте:
Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно.
Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным.
Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой.
Жирность на чёрном работает плохо — разницы почти не видно.
Игорь Штанг считает, что если чего-то не делали раньше, это не значит, что этого не нужно делать сейчас. Серый цвет — уже давно полноправная альтернатива другим шрифтовым приёмам вроде курсива или мелкого кегля.
В заметке — примеры серого текста на печатных макетах конца 20 века.
Обозначение обязательных полей
Джордан Сансон написал, как сообщить, какие поля в форме обязательны.
Большинство дизайнеров использует звёздочки для обозначения обязательных полей. Лучше обозначать необязательные поля:
- Звёздочка очевидна для вас, но не для всех. Есть те, кто не поймёт её смысла;
- Обязательных полей обычно больше, чем необязательных;
- Чем меньше визуального шума в форме, тем она читабельнее;
- Обязательное поле — препятствие на пути пользователя. Необязательное — наличие выбора. Лучше указывать на позитивные моменты (наличие выборе), чем на негативные (препятствия).
Какой текст использовать:
- На английском лучше «Optional», а не «Not required». Отрицания обычно менее понятны;
- От себя добавлю, что на русском лучше писать «Не обязательно». Слово «Опционально» менее понятно широким пользовательским массам.
Кейс повышения конверсии в регистрации
Одностраничное бизнес-приложение предлагало пользователям зарегистрироваться с помощью соцсетей Google+, FB, VK и LinkedIn, чтобы сохранить данные. Конверсия была 2,5%.
Приложение может хранить данные локально и в Google Диске. При авторизации в Диске можно запрашивать пользовательские данные в Google+. Для новых пользователей по умолчанию настроено сохранение данных в Диске.
Регистрацию заменили на авторизацию, из соцсетей оставили только Google+. Конверсия стала 36,7%.
Платформы для создания интернет-магазинов
Обсуждение в группе Проектората в ВК: как учитывать особенности платформ (shopify, woocommerce, magento, prestashop) при проектировании интернет-магазинов.