Метод изометрического дизайна или послеобеденный чай с М.К. Эшером

Бесконечная изометрическая лестница

Изометрический дизайн везде, куда бы вы ни посмотрели.

Несколько примеров

  1. В логотипах компаний (Airtable, Node.js, старый логотип Rightmove, Neo, RaiBlocks, Gas, Enigma, Neblio).
  2. В Силиконовой долине, телешоу, начальная последовательность изометрична.
  3. До недавнего времени у Слэка была целая изометрическая офисная сцена, изображенная на их маркетинговом сайте.
  4. На дрибле в любой момент обязательно будет хотя бы один изометрический «выстрел».

Так что же такое изометрический дизайн?

Изометрический дизайн (в переводе с греческого означает «равной меры») - это когда вы описываете объекты с определенной трехмерной точки зрения, но без какой-либо перспективы.

Эту точку зрения мы все знаем по игре в Sims или Theme Hospital или по игре в гораздо более свежую игру Monument Valley от Ustwo Games.

Изометрический куб

Недавно я решил, что хочу больше узнать об изометрическом дизайне и, в частности, о том, как я могу сам создать такой дизайн в Sketch.

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

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

Дом М.С. Эшера

К сожалению, работа MC Escher защищена авторским правом, и поэтому я поместил ссылки на его работу в следующем.

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

Смотрите трансформации отпечатков MC Escher.

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

Там было много лестниц, идущих в разные стороны.

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

Передо мной поднималась огромная лестница, справа внизу - похожая.

См. Выпуклые и Вогнутые от MC Escher.

Я заметил на столе в зале записку с просьбой о компании на четвертом этаже и направился к лестнице передо мной.

Я поднялся на четыре рейса, каждый из которых повернул направо от предыдущего рейса. Однако, как только я поднялся на четвертый рейс, случилось нечто очень странное. Похоже, я вернулся в то же место, где и начал. Я снова стоял у стола в холле с запиской, в которой говорилось, что мне нужно подняться на четвертый этаж.

См. Ascending and Descending by MC Escher.

Это было странно, но не неожиданно для моего старого друга MC Escher. Был ли четвертый этаж идентичным первому, или я не концентрировался? Я размышлял, стоит ли снова подниматься на четыре рейса, когда я услышал, как мой старый друг вошел в дверь.

Он извинился за опоздание (бормотал что-то о том, что время было единственным измерением, которое он не мог согнуть), и мы удалились в его гостиную, чтобы выпить чаю.

Мы наконец прибыли на предмет изометрического дизайна.

Изометрический дизайн

Он признался, что был рад, что мир дизайна наслаждается странным и интересным миром изометрии.

Затем он показал мне, как начать с такого дизайна ...

«То, что мы стремимся создать, мой старый друг, это ромб. Каждая сторона этого ромба должна иметь одинаковую длину, скажем, 1, а ромб должен быть под углом 30 градусов.

«Чтобы создать такую ​​форму в Sketch, мы можем начать с квадрата шириной 1 единицу и высотой 1 единицу.

«Затем мы должны уменьшить ширину квадрата до квадратного корня из 3, деленного на 2, что составляет примерно 0,866. Затем мы должны увести квадрат на 30 градусов вдоль его вертикальной оси. Это дает нам желаемый ромб со всеми сторонами длины, равными 1, и углом 30 градусов.

«И это одна из плоскостей нашего изометрического дизайна!

Создаем изометрическую плоскость, а затем делаем то же преобразование в изображение самого М.С. Эшера

«Теперь мы можем просто повернуть этот ромб на 120 градусов и 240 градусов, чтобы создать две другие плоскости изометрического куба.

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

Итак, старик сказал мне сделать следующее:

  1. Начните с 1 на 1 квадрат,
  2. Сократите его ширину до 0,866,
  3. Отвесить его на 30 градусов по вертикали,
  4. Поверните его в нужную вам плоскость.

Играя с Изометрией

Как только я взял все это и закончил свой чай, MC Escher хотел показать мне еще одну вещь. Он продолжил…

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

«Позвольте мне отвести вас в мой сад, чтобы показать вам, что я имею в виду».

И вот MC Escher отвел меня к водному сооружению в его саду.

«Посмотрите, как вода течет по трем сторонам этого водного пути, по сути, на одном уровне, но затем она падает в водопад обратно туда, где и началась. Если я нарисую это от руки, вы увидите, как мы можем достичь этого, используя изометрические плоскости, которые мы обсуждали внутри.

См Водопад от MC Escher

Изометрические водопад

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

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

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

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

Также, пожалуйста, проверьте мою компанию www.pilcro.com. Мы делаем умное программное обеспечение для управления брендом для G-Suite.

Эта история опубликована в журнале The Startup, крупнейшем издании по предпринимательству, за которым следят 289 682+ человека.

Подпишитесь, чтобы получать наши главные истории здесь.