Минимализм и анимация в веб-дизайне

Минимализм и анимация в веб-дизайне

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

Факт 1

Красота сайта равна его удобству, реальной или потенциальной пользе для посетителя.

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

Факт 2

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

Факт 3

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

Это базовые факты, на основе которых построены выводы ниже.

Минимализм

Чем выше плотность полезной информации, тем красивее сайт. Важно только содержание. “Дизайн ради дизайна” вредит. Оформительство, стилизации или имитации, которые не помогают раскрытию идеи, ухудшают дизайн. Кнопка может быть плоской, иконка — схематичной, а ссылка — неподчеркнутой. Потому что из простого образа мы считаем его назначение. А блики, тени и выпуклости понижают плотность полезной информации.

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

В противовес можно привести примеры отличных промо сайтов, построенных на спецэффектах:

  • lookbook.reebok.com
  • nike.com/xp/b/genealogyofthefree
  • ogreen.special-t.com

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

Удобство

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

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

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

Подборка минималистичных сайтов — siteinspire.com

Адаптивность

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

Анимация

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

Отличные примеры использования анимации как содержания:

  • tokyomildfoundation.com
  • soleilnoir.net/dreamon
  • dataveyes.com
  • codeandtheory.com/why-we-make