Дмитрий Караневский

Работаю продуктовым дизайнером в av.by. Проектирую интерфейс для приложений и веба. Помогаю коллегам с текстом и редактурой.

В свободное время и в кайф: швейцарские плакаты, кофе в воронке и джаваскрипт.

Слова и образы

Люди любят давать названия событиям, вещам и эмоциям. Слова — как способ коммуникации — вызывают картинки в голове и чувства в теле. Пережил, увидел, ощутил — расскажи и поделись опытом. Так строится коммуникация.

Слово

Большинству вещей нужно объяснение или подпись. Уберите текст с плаката Лисицкого, и он превратится в хаос геометрических фигур:

Можно оставить только подпись и превратить её в рисунок: сделать крупной, шумной, яркой. Удачный графический приём приумножит суть слова:

Вначале было слово

Глагол

В 1969 году штат Вирджиния заказал айдентику для туристической кампании:

Любовь 70-х, понятный образ и типографика: всё было круто. Даже сегодня штат использует этот слоган, а каждый американец знает, где искать любовь. Но Вирджинии не подражают как Нью-Йорку:

Дело не только в лаконичности и простоте. Сердечко в знаке Вирджинии — лишь буква, часть существительного, без которого образ потеряет смысл. У Нью-Йорка сердечко — глагол. Если слово вызывает картинку в голове, то глагол заставляет её двигаться.

Любовник < Любить

Контекст

В 1949 году Пабло Пикассо нарисовал голубя для плаката ко «Всемирному конгрессу сторонников мира»:

В следующем году концепция повторилась. И в следующем. И сегодня это символ мира. И всё потому что художник любил вино, женщин и рисовать голубей.

Через 45 лет к 50-й годовщние окончания Второй Мировой войны Лекс Древински нарисовал свой плакат:

Метафора очень проста: чёрное-белое, движение назад и вперёд, силуэт голубя на небесном фоне. С каждым годом всё больше людей видят в фигуре слева самолёт и падающую бомбу вместо уродских усиков и чёлки. Гитлер — как символ зла — стирается. И плакат становится не таким эффектным, как 20 лет назад.

***

Эта заметка — обрывки лекции Андрея Логвина «Я бы обнял тебя, но я просто текст». Возвращаюсь к ней, если не могу найти удачный приём или метафору. Когда нахожу — сразу так спокойно, ведь…

Слово, движение и контекст — формула крепкого образа

The Work

Для тренировки эмпатии.

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

Ты напоминаешь меня в прошлом. Я тоже так делал: наклонял голову и прятал слёзы. А потом научился плакать глядя вперёд, как мужчина.

Скрипт для приводности

ds-steelline.by — проект, на котором удалось применить приводность

Приводность — совпадение базовых линий строк. Этот приём часто применяется в книжной и журнальной вёрстке. В вебе редко: некогда заморачиваться вертикальным ритмом.

Однажды мне удалось убедить команду использовать приводность на проекте. Аргументы: что-то про дисциплину дизайнера и верстальщика, согласованность, дизайн-система и т. д. Но мой истинный мотив был: попробовать как у Бюро. Интересно же.

Результат: вёрстка ехала на каждой странице как и прежде. Приходилось скриншотилкой мерять отступы, лезть в отладчик, двигать текст и отправлять верстальщику. Мучительная рутина.

Чтобы победить рутину, написал скрипт:

(function() {
  var body = document.body;
      gridCreate = document.createElement('div');

  gridCreate.id = 'overlay-grid';
  body.appendChild(gridCreate);

  var grid = document.getElementById('overlay-grid');
      gridPosition = 0;
      gridSize = 10;
      bodyHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight);

  grid.style.cssText = 'display: none; position: absolute; top: 0; width: 100%; pointer-events: none;'
  grid.style.height = bodyHeight + 'px';
  grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
  grid.style.backgroundColor = 'rgba(255, 0, 0, 0.05)';
  grid.style.backgroundImage = 'linear-gradient(180deg, #777 0.5px, transparent 0)';

  document.onkeydown = function(e) {
    if (e.keyCode == 71 && e.ctrlKey) {
      if (grid.style.display == 'none' ) {
        e.preventDefault();
        grid.style.display = 'block'; }
      else {
        e.preventDefault();
        grid.style.display = 'none'; }
    }
    if (e.altKey && e.key == 'ArrowUp') {
      e.preventDefault();
      gridSize++;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (e.altKey && e.key == 'ArrowDown') {
      e.preventDefault();
      gridSize--;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (grid.style.display == 'block' && e.key == 'ArrowDown') {
      e.preventDefault();
      gridPosition++;
      grid.style.top = gridPosition++ + 'px';
    }
    if (grid.style.display == 'block' && e.key == 'ArrowUp') {
      e.preventDefault();
      gridPosition--;
      grid.style.top = gridPosition + 'px';
    }
  }
})();

Запускается в консоле. Создаёт скрытый блок с сеткой. Сочетание ctrl + G показывает и скрывает сетку. Стрелки ↓↑ опускают и поднимают её на один пиксель. Alt + ↓↑ меняет интерлиньяж. По-умолчанию стоит 10px, поменять можно в переменной gridSize.

Использую когда нужно отсматривать текстовые страницы. Верстальщикам нравится. И вы попробуйте.

Движение вперёд на экране

В кино персонажи ограничены двумя сторонами экрана: правой и левой. Правая — это положительная сторона, добро, движение вперёд и преодоление трудностей. Левая — ошибки, отступление, зло и возвращение. Это классика.

В экранизации «Властелина колец» оператор использовал классическую и эффективную композицию. На протяжении всей трилогии герои идут к цели, двигаясь в кадре слева направо.

Движение истории и её героев чётко ощущается на общих, длинных планах. Тёмные холмы и горы на фоне создают контраст. Глаз прикован к шагающим направо хоббитам:

Фродо и Сэм отправляются в путь

Сэм останавливается и заставляет Фродо обернуться. Холм и кустарник на горизонте работают как направляющие линии: визуально указывают на Сэма. Фродо и полевое пугало тоже смотрит на хоббита. Все элементы кадра заставляют зрителя смотреть влево. Слева уютный дом, а справа пугающая неизвестность:

«Если я пройду ещё шаг...то окажусь так далеко от дома, как никогда ещё не заходил»

После победы над злом меняется направление движения:

Хоббиты возвращаются домой

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

«Те, кому нечего ждать, отправляются в путь»

В клипе U2 главный герой покидает тюрьму. На выходе его ждёт дочь и это тревожная встреча. Слева привычное прошлое, а справа пугающая свобода. На 4-й минуте заключённый мешкает и останавливается, камера опережает героя и он оказывается на стороне «отступления». Следующий путь зритель словно тянет заключённого за собой, не волю. Только к концу сцены герой берёт себя в руки и опережает камеру. Сомнение, преодоление, движение.

***

На экранах, в интерфейсах мы также ограничены двумя сторонами. Левая — шаг назад, а правая — движение к цели. Логин в Гугл-аккаунт, отправка сообщения в Телеграме, свайп в Тиндере и т. д. Мне нужен был ответ, почему кнопки располагаются так, а не иначе.

Кажется, очевидное расположение кнопок можно объяснить приёмами из кинематографа. Мне нравится такой аргумент.

Пойду поставлю кнопку «далее» в правой части модуля. Даже если это нарушает вектор чтения или конструкцию модуля.

Закон Теслера

Или «Закон сохранения сложности».

Любой продукт стремится к максимальному пределу сложности. В критический момент встаёт вопрос кому страдать. Разработчикам от костылей в коде или пользователям от недостатка функционала? Но не важно, по какому пути продолжит развиваться продукт. Пользователи использовали и продолжат использовать его для более сложных задач:

Закон Якоба Нильсена

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

Порог Доггерти в интерфейсах

Чем дольше отвечает компьютер, тем сложнее человеку сохранять фокус на задаче.

Запуск Фотошопа, переключение треков в Айтюнсе и создание задачи в Джире длятся целую вечность. А вечность равна 0,4 секунды — столько нужно времени, чтобы человек устал ждать следующего шага.

Скорость обратной связи тоже подчиняется этому наблюдению. Если анимация длится дольше чем 0,3 секунды, то это — самая важная анимация в сценарии.

Эффект эстетики

Визуально привлекательный дизайн чувствуется надёжным. Люди склонны прощать продукту баги и неудобный интерфейс, если тот кажется им красивым.

Треть моделей Макбук Про 2016 года выпустили с бракованной клавиатурой. Но всё равно хочется:

Не все дизайнеры — булочники

Дизайнер оказывает услуги как гардеробщица, шофёр или бариста. Но чтобы стать «булочником» нужно пройти долгий путь: учить химию, подмастерьем месить тесто, открыть пекарню и не прогореть.

Только сделав корпоративный шрифт для Мерседеса и оглянувшись назад, можно скромно сказать: «я просто служу людям»: