23 заметки с тегом

хинт

Научиться ремеслу

Мария Комарова:
— Вот я верстаю страницу. И у меня получается страшно. И еще скучно. Прямоугольники и колонки. Смотрю референсы, но не знаю, как применить хорошие приемы в этом случае. Еще нет нормальных картинок. И времени маловато. И опыта. Где взять идей, как научиться верстать нескучно, что делать, если с картинками напряг? Каждый раз такие вопросы.

Мария!

Не получится обхитрить систему и сверстать нескучно, при этом не особо погружаясь в тонкости дизайнерского ремесла. Нескучно сверстать — это неправильная постановка задачи. Надо уметь верстать понятно и аккуратно, попадая в тему и передавая настроение. Тогда, если материал интересный — оно и получится нескучно. Как научиться? Я вижу два возможных направления.

Первое — гигиентическое. Верстать как можно чище. Использовать минимум шрифтов и начертаний, максимально унифинированные отступы, поля и способы компоновки блоков, без визуального шума. Когда новичку кажется, что проще уже некуда, профессионал видит ещё десяток возможных упрощений. Тут практика нужна, ничего особенного.

См. также: убрать всё лишнее, ещё разок, смешать комки.

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

Может показаться, что коллекционирование примеров дизайна работает как заготовка шаблонов. Но нет! Чтобы загрузить в себя шаблон, надо его воспроизвести. Перерисовать своими руками.

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




Отлично. А теперь сделай, пожалуйста, то же самое, только по-русски? Да, Мила, это я тебе сейчас говорю — давай, присылай уже!

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

А иллюстрации — ну да, хорошо, когда они классные. И это редакторская задача — обеспечить иллюстрации. Но и с плохими, если не особо на этом зацикливаться, можно сделать терпимо.

6 декабря   отвечаю   профессия   сайт   типографика   хинт

Всё украл

Я очень люблю воровать дизайн. Мой творческий метод — собирать клёвые картинки не для конкретного проекта, а просто так. Когда пора делать проект, я роюсь не в интернете, а в своей коллекции. И оттуда краду.

Вот несколько примеров. Я здесь не показываю случайные совпадения или что-то неосознанное. Только прямые заимствования.

Слева какой-то классный дизайн, справа фрагмент плаката про лекцию:

Обложка книги и страница о франшизе Джастфлипа:

Сверху какая-то форма подписки, под ней наша иллюстрация:

Штуковины Кортекса все ворованные:

Слева какая-то прекрасная книга, справа наш дизайн:

Так можно.

7 ноября   опыт   профессия   хинт

Сперва перевари, затем говори

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

Вот прочитали крутую книгу, или что там сейчас читают. Автор всё разложил по полочкам, показал, назвал — вы в экстазе. Но не торопитесь повторять слова. Поживите со всем этим, попробуйте объяснить по-своему. Попробуйте применить. Пусть это станет частью вас. И тогда можно смело транслировать дальше.

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

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

18 октября   взаимодействие   хинт

Фрагменты лекции «Как стать сильным»



Почему ответственность — это прикольно:



Как думать не своей головой:



Что делать, если «клиент всегда прав»:



Как не быть тупицей:



Обязательное условие роста:



Как не бояться говорить «нет»:



Откуда берутся конфликты:



* * *

24 сентября   лекция   профессия   рассказываю   хинт

Человек-робот

Вот есть человек, который способен вывести вас из себя. Коллега, кто-то в компании друзей, родственник, сосед какой-нибудь. Он в общем-то нормальный — так сходу и не объяснишь, в чём проблема. Но раз в пару месяцев он делает или говорит что-то, выбешивающее вас до трясучки. Неприятный такой тип.

Знаю одно прекрасное средство.

Нужно представить, что это не человек, а робот-андроид. Как в Чужом или в Блейд Раннере. Существо с довольно сложным поведением, но совершенно без души, что-то вроде пылесоса.

И вот есть у него голосовой интерфейс, какая-то программа, он говорит слова, улыбается. Чтобы всё это функционировало, вы тоже говорите ему слова и улыбаетесь. Отчего бы и не улыбнуться, если вот так оно устроено.

И вы знаете, что эта штука довольно глючная. Иногда она делает странные вещи. Но она их делает просто по своей природе, вас это касается ровно настолько, насколько вам придётся устранять последствия. Если оно там что-то уронит, вы поднимите. Если оно что-то не так скажет или спросит — ну, плечами пожмёте, и дальше займётесь своими делами.

Глупо же обижаться на пылесос. И главное, делать ничего не надо — это же не ваш, а просто здесь ходит, что-то своё выполняет.

Рекомендую, отпускает на раз.

19 сентября   друзья   уроки вежливости   хинт

Ты не умеешь объяснять

Никто не умеет нормально объяснять. Вы не умеете, я не умею, ваш руководитель не умеет, авторы учебников не умеют, лекторы в вузах не умеют, и ваш любимый блогер не умеет. Разве что это был Тим Урбан, тогда да. Но таких единицы.

И вот почему.

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

Они же не хотят выглядеть тупыми. Или боятся вас. Или всё это сразу. Если признаешься, что ни фига не понятно — тебе наверняка сделают больно. Здоровые люди избегают боли. Они слушают, и когда не понимают, то делают вид, что всё понятно.

В результате вы получаете обратную связь слишком поздно, в очень размытом виде, через какие-то негативные последствия. Расстраиваетесь и делаете вывод, что окружены идиотами. И не учитесь объяснять.

Эта ситуация уравновешивается тем, что со временем люди приобретают суперспособности по обработке некачественных объяснений. Кажется, что раз так, то и проблемы нет. Но это пока задачи простые. А нам же интересно про сложные.

Иногда решение в том, чтобы исполнитель рассказал, что он услышал. Рядовой докладывает, как понял приказ. Дизайнер сразу после скайп-кола отправляет арт-директору конспект. Они обязаны это делать, и чтобы защититься от боли, вынужденно прокачивают свои понимательные суперспособности. А объясняющий по-прежнему остаётся в ситуации, не помогающей совершенствоваться.

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

Без ответа

Предположим, вы хотите написать мне письмо, поделиться чем-то. Но вам не нужен ответ. Теперь для этого есть специальный адрес: [email protected]. Пишите о чём угодно. Обещаю не отвечать.

Восприятие

Все дизайнеры знают принцип близости. С ним дизайн получается очень понятным. Но скучным. Да что уж там — часто выходит вообще фигня.

Чтобы делать кайф, нужен опыт, практика, книги читать, учиться там где-нибудь — это да. Но может, дело ещё и в том, чтобы знать больше разных принципов. Больше, чем один :—)

Я хотел было опубликовать для вас перевод статьи «Принципы гештальта» (автор — профессор Деян Тодорович, Лаборатория экспериментальной психологии, факультет психологии Белградского университета, Белград, Сербия, 2008).

Но вместо этого осмелился пересказать их своими словами и дополнить собственными комментариями о возможном применении этих принципов.

Разделение на фигуру и фон

Два цветовых пятна. Области, однородно окрашенные в разные цвета:

Вы воспринимаете их как фигуру и фон. Они не выглядят равнозначными: фигура это скорее субъект, активное начало, а фон пассивен. Фигура воспринимается лежащей поверх фона, ближе к нам, как будто фон позади неё тоже есть.

Вообще-то вы видите пиксели, и строго говоря, существует сколько угодно способов разделить их на две группы. Можно сказать «всё, что левее середины — это одно, а всё, что правее — другое». Можно так: «чётные ряды пикселей — одна группа, нечётные — другая». Можно сказать, что первый пиксель это одна группа, а все остальные — другая.

Эти способы группировки доступны нам в виде умозаключений. А для непосредственного восприятия — нет. Непосредственному восприятию доступно только разделение на фигуру в центре и фон вокруг неё.

В этом нет какого-то закона дизайна, который вы могли бы использовать. Мы это проговорили, чтобы обозначить систему координат.

Когда мозг получает изображение, он разбивает его на подструктуры. Формально способов такого деления может быть сколько угодно, но для восприятия обычно доступен только один. Реже — два или три, тогда они конкурируют между собой, вашему мозгу это не нравится, он пытается выбрать что-то одно.

Близость

Вот шесть объектов:

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

Если поменять расстояния, получатся три пары:

Обратите внимание, что и на первой картинке объекты можно было представлять как три пары. Но для этого понадобились бы специальные мысленные усилия, и эффект был бы нестабильным. Да и вторую картинку можно мысленно разделить как угодно — и на две группы по три объекта, и на любые произвольные комбинации. Но развидеть три пары объектов невозможно.

А ещё сложнее разбить мысленно на три пары объекты, расположенные как-нибудь так:

На практике принцип близости хорошо работает с однородными объектами. Иконки, строчки и колонки текста — всё это прекрасно подходит.

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

Синхронность

Здесь по-разному сгруппированные объекты из предыдущего примера, только некоторые синхронно движутся:


И совместное движение побеждает, собирая объекты в новую, очень устойчивую группу.

Самое простое, где это можно увидеть: если что-то на сайте скроллится, а что-то зафиксировано относительно окна браузера. Это однозначно воспринимается как две группы объектов, два смысловых слоя. Даже если они раскиданы по разным углам. Даже если лежат в разных пространственных слоях, когда что-то неподвижное иногда перекрывается движущимся, и наоборот.

Перемещаются вместе — значит связаны.

Подобие

Тут просто. Можно не менять расстояния между объектами, а например, раскрасить их, и это создаст группировку:

Достаточно оттенков:

Сработает и размер:

И наклон:

И пропорции:

Если всё вместе — эффект усилится:

Если поддержать расстояниями — ещё понятнее:

А вот если признаки конкурируют — одни топят за концепцию трёх пар, а другие предлагают альтернативную группировку — вашему мозгу приходится как-то с этим разбираться:

Практическое применение — видеть такие конфликты, избегать их или создавать осознанно.

Непрерывность

Вот фигура, составленная из элементов, образующих три линии (а справа — просто эти линии), сходящиеся в точке Х:

Согласно принципу близости, отрезок ХB должен был бы восприниматься связанным с отрезком XС. Но АХВ — это одна плавная линия. Непрерывность сильнее близости, поэтому AXB воспринимается цельным объектом, а XC — неким придатком.

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

Завершённость

Если к той же фигуре добавить новые элементы, всё изменится. Теперь мы видим в первую очередь две половинки — DXA и CXB:

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

И снова с помощью подобия можно переключать восприятие, делая цельными произвольные части фигуры:

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

Что делать с этим знанием? Не бояться нарушить принцип близости и влезть в пространство такой группы. Она это выдержит.

Избегать случайных эффектов

Камуфляж

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

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

А вот эта же фигура, но дорисованные линии, используя непрерывность, «подключаясь» к узловым точкам формы, формируют другую завершённость, более «сильную»:


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

Где употребить знания о камуфляже, я не знаю. Придумайте что-нибудь.

Хороший гештальт

Здесь мы видим две линии: прямую и волнистую.

Это противоречит принципу близости (на втором рисунке цветом выделены фрагменты, наиболее близкие друг к другу), и частично игнорирует принцип непрерывности (согласно которому, вполне логично было бы представить разделение, показанное на третьем рисунке).

Мы уверенно разбиваем рисунок на прямую и волнистую линии, потому что это «хороший гештальт». Или, иными словами, что-то понятное, упорядоченное, целостное. Ваш мозг очень любит такие штуки.

Ещё пример:

Здесь принцип непрерывности явно указывает на две странные линии — как они раскрашены на втором рисунке. Но на первом рисунке мы видим зубчатое колесо и квадратную змейку, как на третьем. Потому что в этом есть смысл.

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

Сюда же: перейдолия.

Опыт

Чтобы вы вдруг не подумали, будто всё так просто — существует ещё один принцип, способный победить все перечисленные. Это опыт восприятия.

Вот, прочитайте, пожалуйста:

Как блин это вообще возможно? Да так, что вы многократно делали это раньше. И больше никак. Вы умеете читать. 

Если я попробую вам помешать, ложно сгруппировав объекты подобием, вы справитесь:

Если я расставлю капканы из ложной близости, вы справитесь всё равно:

Да, это было на грани. Но здесь специально подобранное слово, с другими полегче.

Когда в игру вступает опыт восприятия — частью которого во многом является узнавание хорошего гештальта — другие принципы могут и покурить в сторонке.

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

На этом всё, удачи!

Цвет и буква

Вы меня не поймёте, потому что не пользуетесь гугловским Инбоксом — это такой почтовый клиент, состоящий из матириал-дизайна. Им никто, наверное, не пользуется, кроме меня. И всё в нём хорошо (по правде говоря, нет), но есть одна особенная странность.

Если у адресата нет фотки, то отображается цветной кружок с первой буквой имени. И там придумали, что каждой букве должен соответствовать цвет. Не рандомайзером же их раскрашивать. Пусть будет система строгого соответствия. Решено.

Это с самого начала так работало, но я думал — мало ли, все ошибаются, исправят в ближайшем релизе, забудем. А годы идут.

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

Не делайте так, прошу.

Умность

Ребята, я собираюсь напомнить вам одну штуку, которую вы как бы знаете, а на деле нет.

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

Умность линейна. Если Николай доктор наук, а Михаил кандидат, то умность выше у Николая. Если Катя сдаёт отчёты, а Ира только носит кофе, то значит вот Катя. Если Ольга Павловна раньше работала инженером на заводе, а Любовь Ивановна всю жизнь продавцом, то Ольга Павловна.

Я не про стереотипы. Если отбросить стереотипы, придётся разобраться: может Ольга Павловна — курица, а Любовь Ивановна — чистый Илон Маск. Может Николай учёную степень купил, а Ира вечерами программирует. И тогда выяснилось бы, что всё наоборот. Но я не про стереотипы.

А что не существует никакой умности. Нет такого показателя у человека. Нет общей для всех шкалы. Да, это неудобно, а что делать. Подменять неудобную реальность иллюзией не надо.

Может быть, есть интеллект — и это слово значит что-то конкретное, какие-то когнитивные функции, я не берусь сказать, какие именно. Может быть, их десяток разных, интеллектов, ну или четыре. Может быть, есть такая штука как ум — в смысле «рассудок», «принципиальная способность оперировать абстракциями и находить логические связи». Чего точно нет — так это одного простого измеримого свойства.

И это все знают, любого спроси. Это даже в Министерстве образования знают — запрещают первоклассникам ставить оценки. Чтобы выращивать личностей. В первом классе можно поставить бабочку или грибочек, а пятёрку или двойку нельзя. Но Елена Васильевна говорит — «нам, конечно, запрещают, и в журнал я не могу поставить оценку, но так вообще я же должна как-то оценить их работу в классе, они ведь так хотят получить пятёрку, как же я не поставлю!» Смешная, да?

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

А не надо. Следи за собой, будь осторожен.

Ctrl + ↓ Ранее