Skvot

Mag

Skvot Mag
Курсы по теме:

Школьные знания во взрослом дизайне

Как круг, спираль и гравитация помогут с дизайнерскими тасками.
card-photo
card-photo
Люся
Зеленко

Авторка в SKVOT

26 сентября, 2022 / Дизайн / Статья

В системе образования не сильно парятся над тем, чтобы детям было интересно. Многие из тех школьных «инноваций», о которых мы слышим, были еще во времена динозавров. Как результат дети (= будущие взрослые) часто забивают на школу и учат только то, что нужно для поступления в колледж.

Но на самом деле школьные знания интересны и могут пригодиться даже там, где (казалось бы) им нет места. Например, знания о животном мире и законах движения помогут создать крутые визуалы.

Рассказываем, как школьные знания по математике, физике и биологии можно использовать в дизайне разных форматов.

Математика и дизайн

Математика — наука, знакомство с которой начинается еще в первых классах школы и не заканчивается, кажется, никогда. Она влияет на подсознание, потому что в природе и мировых шедеврах — куча закономерностей. Поэтому такие знания — must have для создания логотипов, дизайна и понимания себя.

Обычно тех, кто легко улавливает суть математики, считают «технарями», но и в гуманитарном мире есть место для цифр. При желании их даже можно использовать в проектах. Одну из математических формул, которая играет с восприятием, называют последовательностью Фибоначчи. С нее и начнем.

Последовательность Фибоначчи — это ряд чисел, в котором каждое число равно сумме двух предыдущих: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55… «Золотой спиралью» называется визуальное изображение этих чисел (квадраты с дугами). Размеры квадратов соотносятся друг с другом как числа Фибоначчи:

В ряду Фибоначчи каждое число относится к предыдущему ≈ 1,618. Такое соотношение еще называют идеальной пропорцией, или золотой спиралью (золотым сечением).

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

В природе много примеров золотого сечения: ракушка или ушная раковина. Эти пропорции — буквально синоним слова art: «Мона Лиза», храм Парфенон в Афинах. Яркий пример в логотипах компаний — Twitter и Apple, в которых есть и формы, и пропорции и свободное место.

Логотипы Twitter и Apple с золотым сечением (слева), спираль, вписанная в Парфенон в Афинах (справа)

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

В природе много фракталов: молекула ДНК, пчелиные соты, кристаллы. В дизайне их тоже используют: на них приятно смотреть. Голландская модельер Айрис ван Херпен вдохновляется фракталами и создает платья:

Такие дизайны легко создавать в 3D-модели. Сперва выбери ядро, а затем — задай параметры повторения. Вот несколько программ, которые с этим помогут:  

  • Visnos — в этом онлайн-софте для новичков можно создать фракталы, менять размер, цвет, интенсивность и геометрию. Здесь можно понять сам принцип создания узоров и сохранить результат на компьютере.
  • UsefulJS — этот онлайн-генератор фракталов поможет сформировать фрактал, подобрать расположение и цвет.
  • Fr.ax — бесплатное приложение для iOS. Тут можно регулировать экспозицию, цвет, глубину резкости и отражение.
  •  
Посмотреть курс
 

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

Около 20% компаний используют в своем логотипе круг, с ним делают кнопки на сайтах и ​​графики. Этот символ — о natural процессах, солнце, движении, он ассоциируется со стабильностью, вызывает эмпатию.

Круг дает ощущение safe and predictable, поэтому его часто используют в автопроме (BMW) и науке (Nasa). Эта форма также про круг общения, поэтому его найдешь в лого Coca-Cola и Pepsi. Круглые формы — еще и о феминности, так что компании, которые делают косметику (Nivea) и одежду (Chanel), не придумывали колесо, а использовали его.

Биология и дизайн

В работе с инновациями всегда появляются новые вопросы — и природа знает ответы на кучу из них (ей миллиарды лет, она успела разобраться).

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

Есть специальные организации и команды, которые помогают понять законы природы. Например, Институт биомимикрии и онлайн-проект Ask nature знакомят с литературой по биологии, биопланами и биостратегиями. С ученых — теория, с креаторов — зеленый дизайн.

Если говорить о подходах биомимикрии, то они разделены на три направления:

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

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

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

Физика и дизайн

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

Посмотреть курс
 

Сила притяжения. Гравитация — сила, которая притягивает два тела друг к другу. От нее зависит, как объект будет двигаться. Чтобы объект балансировал — помести центр тяжести в центр массы, иначе движения персонажа выйдут странными.

Если изменить один из физических показателей — можно создать новый опыт для игрока. Разработчик Super Mario специально нарушил законы физики, чтобы игра вышла не-такой-как-у-всех. Ему удалось: Марио прыгает слишком высоко, а падает — нереально медленно. Иначе невозможно было бы пройти и первый уровень. Потом в 2D-игре появился double jump. Новая высота — больше эндорфинов у игроков.

Атомарный дизайн. Есть еще один подход в веб-дизайне, связанный с физикой. Главный принцип — разделить целое на части. Графические элементы в нем сравнивают с атомами (smaller) и молекулами (bigger). От этого будет зависеть и анимация объектов. Большие — будут менее подвижными, а маленькие — можно быстро проскролить.

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

  • Из какого материала был бы этот элемент, будь он реальным?
  • Как это улучшит UX?
  •  

Скорость движения. Этот метод подойдет для UX/UI-дизайнеров, работающих с моушеном в интерфейсах. В реальном мире картинка не меняется резко, как слайд-шоу — это необходимо учесть при смене кадров в интерфейсе. Найди баланс в скорости: чтобы картинка не тянулась как черепаха и не была too fast.

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

Поделиться материалом