Веб-инспектор в браузере — величайший из инструментов дизайнера. Это кратчайший, доступный каждому способ проверить гипотезы. Это оракул, который за пару мгновений отвечает на вопрос «А что если…».

Например, нарвался я сегодня на клевый сайт: https://s-i-l-o.fr/. И при изучении него у меня возник вопрос, насколько ощущения от сайта зависят от выбранного шрифта.

И через десять секунд ковыряния в веб-инспекторе я получил ответ: с Ариалом сайт почти не теряет своего шарма.

А в связке с плагином для браузера Stylish (https://userstyles.org/), который позволяет сохранять внесенные в css правки в персональные стили для сайтов, мощь веб-инспектора становится воистину бескрайней.

То есть если раньше я просто завидовал дизайнерам, которые пользуются своим же продуктом и имеют кратчайший путь от личного пользовательского недовольства до исправления (по дороге на работу заметил в сайте слипшийся отступ — приехал на работу и быстро замерджил фикс), то теперь этот путь кажется бесконечно долгим и муторным, ведь с помощью Стайлиша я могу иметь персональную версию любого сайта.

В общем, из этого опыта допиливания разных популярных сайтов под себя и выросла моя рубрика «CSS-десант», в которой я наскоро затюнил дизайн Википедии и Sports.ru, объясняя свою мотивацию и ход мыслей.

Да чего уж там, я при помощи Stylish даже сделал себе эго-стиль, который добавляет на мою страничку на сайте студии (artlebedev.ru/kefiijrw/) фоточку, как у остальных важных ребят. Да, отображается она только у меня, но на это это и эго-стиль, чтобы тешить мое самолюбие.

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

И чтобы вам не подумалось, что вы заглянули сюда только ради этой новости, вот еще один скриншотик. Мучительно представлять, как найти в списке нужное место самовывоза.

Наверное, где-то лет пять назад я посмотрел видео с лекции Антона Шнайдера и Мики Зубрилова (https://www.youtube.com/watch?v=JpCm1DIKzEc), и меня так зацепило и само выступление, и формат маленьких и емких порций смысла вместо какой-то одной глобальной темы выступления, что с тех пор в голове моей зажила фантазия, о каких бы порциях смысла рассказывал бы я на своей выдуманной лекции.

С тех пор в моих записках-черновичках появилось 24 потенциальных тезисов-кандидатов. Но выступить с лекцией меня ни разу не приглашали, по своей инициативе я тоже только один раз не особо удачно выступил внутри студии (Жгун покинул лекторий через 5 минут после начала, после этого я уже мало что видел из-за слез, стоявших в глазах). Да и, откровенно говоря, эти накопленные тезисы не кажутся мне сейчас особой кладезью мудрости. Где-то очевидная банальность, где-то спорно, где-то поверхностный «лайфхак», что-то вообще не про дизайн. Ну такое, короче.

После всей этой постеленной соломки можно наконец анонсировать, что достойных картинок из папки «мяу» осталось не так уж много, поэтому отныне в канал будут примешиваться и чисто текстовые простынки из тех заготовочек, а может и написанные с нуля. На славу Design & Productivity Кости Горского не претендую, конечно, но ощущение мытищинского косплея при прочтении может проскальзывать.

Так вот, почему я об этом вспомнил. Сегодня я вновь воспользовался одним приемом из этого хранилища «мудростей».

Начни с конца / начни с письма
Когда задача дается тяжело и тянется бесконечно долго, мозг ленится, а в голове бардак из мыслей, я начинаю с конца. Обычно это заключается в том, что я открываю почтовик и начинаю писать письмо артдиректору/менеджеру/команде с результатом этапа до того, как у меня этот результат появляется. Так как письмо физически невозможно писать дольше нескольких часов, да и правила сетевого этикета подразумевают какие-то пределы объемов письма, то магическим образом мой мозг откидывает всё ненужное и умудряется четко описать состояние проекта и мои соображения по нему, хотя до открытия почтовика в соседнем окне какого-нибудь Notes у меня ничего из этого не получалось. Да и ощущение близости разрешения — вот только на кнопку «Отправить» осталось нажать — дисциплинирует и мобилизует все ресурсы организма на финальный рывок воли, тут уже не до лени и праздношатания. Открытое окно ввода письма, особенно с уже заполненными адресатами и заголовком — это как дуло пистолета, смотрящее тебе в лицо. Остается только важное.

Даже не обязательно обманывать себя и убеждать, что вот сейчас ты в письме внезапно напишешь решение, которое искал так долго. Во время затыка можно начать писать письмо-просьбу о помощи артдиру с описанием возникшей проблемы. Во время написания письма проблема структурируется, приходит понимание, письмо удаляется, работа идет дальше.

Следующий раунд игры «Угадай, какие из элементов веб-страницы интерактивны» для тех, кто справился с предыдущим (https://news.1rj.ru/str/meow_design/101).

Фрустрирую от ливреи карты рокетбанка. Иконка бесконтактной оплаты находится на противоположной стороне от чипа, и я постоянно из-за нее пытаюсь вставить карту в банкомат не той стороной.

То чувство, когда ты слишком тихо произнес шутку и ее никто не услышал, а потом кто-то ее повторил громко и все катаются со смеху.

Где-то уже на втором месяце работы над схемой ВДНХ территория на ней упростилась до формы, напоминающей очертания космического корабля «Тысячелетний сокол» из «Звездных войн». Шуточки про то, почему на схеме нет Чубакки, сопровождали проект следующие полгода работы, и при сборке анонса схемы (https://www.artlebedev.ru/vdnh/scheme/) мы решили добавить в него маленькую отсылку к «Звездным Войнам». Подмигнуть, так сказать, общественности, дать понять, что такая визуальная ассоциация — не случайность, не откровение и не форс-мажор, и мы так-то в курсе. Людвиг предлагал добавить подкалывающую приписку типа «Люди глупые и с плохим чувством вкуса могут увидеть в схеме космический корабль…», но в итоге ограничились лишь небольним упоминанием.

И теперь когда в очередной раз кто-нибудь в интернете срывает джекпот лайков и восхищения своей наблюдательностью («Слава, это гениально!»), я чувствую себя проклятым.

например:

https://www.facebook.com/kuteev/posts/10215211177900229

https://twitter.com/despensero_tw/status/1101402270581821440

Наверное, надо было самому в твитере сразу после анонса написать «Ну ничего себе, видали, на что похожа схема ВДНХ от Студии Лебедева??? ВОТ ЭТО ПРЕКОЛ»

Эта ВДНХ-ностальгия напомнила мне про один полезный принцип, про который я нигде еще не рассказывал. Точнее, даже два смежных принципа.

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

Все попытки заставить людей называть что-либо правильным названием провалятся, если это название неудобное, плохозапоминаемое и долговыговариваемое, поэтому лучше возглавить стихию и заранее обеспокоиться поиском емкого названия. Нет ничего более жалкого и бессильного, чем СММ-менеджер, который в соцсетях настаивает на правильном использовании пользователями названия компании. У меня был когда-то интернет-провайдер «Изумруд-сервис», и вся сетевая тусовка иначе как «Изюм» его не называла, за что можно было словить бан на форуме техподдержки, хе-хе. А вот газета «Комсомольская Правда» не парится использовать устоявшееся сокращение «Комсомолка» вместо того, чтобы бороться с ним. Да что там, это работает даже с именами людей: словил имя Алексей — будешь всю жизнь Лехой.

Это касается не только топонимов или названий компаний. Например, во время презентации клиенту нескольких вариантов концепции лучше представлять их под заранее придуманными кодовыми именами, по которым они будут идентифицироваться во время обсуждения. Иначе они довольно быстро получат стихийно сформированные названия типа «варик с желтой хернюшкой слева», что, как можно догадаться, уже подсознательно закладывает не самое благоприятное отношение к носителю этого названия. Короче, лучше заранее назвать вариант «дерзким», прежде чем его назовут «ебанутым». Главное, не держать людей за дураков, быть с ними искренними и не стесняться жизни, потому что всё же есть вещь более жалкая и бессильная, чем упомянутый выше СММ-менеджер — это СММ-менеджер, который пытается внедрить среди пользователей какое-нибудь новое «модное и молодежное название», утвержденное душными дядечками в галстуках. How do you do fellow kids точка жпг.

Но вообще рассказать я хотел о немного другом принципе «Дай возможность назвать», применяемом при необходимости ввести кодирование элементов, то есть внедрить признаки, по которым эти элементы будут различаться. Например, есть территория, поделенная на зоны (в моем случае это был, вы не поверите, опять ВДНХ), и надо раздать этим зонам помимо уникальных названий еще какие-нибудь другие отличительные признаки, чтобы усилить их узнаваемость — ну там у каждой зоны свой цвет или пиктограмма-символ или паттерн какой. Так вот, важно назначать цвета, учитывая не только их визуальную различимость друг от друга, но и их называбельность, то есть чтобы посетители без проблем могли сказать, какой это цвет без каких-либо мудреных «перламутровых» и «пепельно-ананасовых». Потому что кодирование цветом — штука довольно удобная и обычно используется людьми чаще других альтернативных способов кодирований, но работает, только если цвета выбраны с явными названиями, которые будут использовать люди: «Пошли в зеленую зону!». Достаточно вспомнить московское метро — именование линий по цвету выигрывает у номеров линий и у официальных супердлинных названий. В московском метро правило не работает только в нескольких случаях — когда форма линии оказывается еще более явным отличительным признаком (кольцевая ветка), когда линия не обладает вообще фирменным цветом (МЦК) и когда цвет оказывается слишком сложным для наименования (Бутовская ветка, как там этот цвет называется, сиреневый вроде, да?). Даже «салатовая» — это уже на грани и, как мне кажется, вызывает недоумение у приезжих.

То же самое и с графическими символами — если посетила креативная идея, скажем, каждому корпусу на территории присвоить геометрическую фигуру, то лучше позаботиться, чтобы посетители могли без проблем назвать эту фигуру, иначе в ход снова могут вступить похабные трактовки, рожденные в курилке (ну там «анальный расширитель» вместо конуса и всё такое).

Фильтр по размерам барабанных тарелок на сайте Sabian — пожалуй, самый непонятный из увиденных мной когда-либо контролов. Даже текстовая подсказка «Slide →» не сильно помогает, потому что невозможно понять, что должно скользить и что для этого надо сделать (нет, сама надпись не хватается).

То был скриншот трехлетней давности, а сегодня перед публикацией я заглянул на сайт проверить старого приятеля. Многое вокруг поменялось, другие шрифты, цвета и паттерны, но он всё так же верно несет службу на своем посту. Ну и прикрепил гифку с его механизмом работы. Люблю его (он ужасен).