Статьи

» Тренды веб-дизайна 2010
» Создавайте эмоции, а не эстетику
» Понимая веб-дизайн
» Минимализм - не примитивизм
» Основы минимализма
» Очарование несовершенства

Очарование несовершенства

Все свои знания об очаровании несовершенства я приобрел вместе с керамической тарелкой в Киото.

Что особенного в этой тарелке? Перед запеканием она была идеально круглая, но художник намеренно сделал края неровными. Она очаровательна, и это становится еще заметнее, когда что-нибудь касается ее поверхности: блестящая зеленая груша, неряшливо отломленный кусочек шоколада, горстка обжаренного миндаля. Сейчас эта тарелка восседает на столе в моём домашнем офисе. Она символизирует важнейший урок мастерства: полезность предмета не зависит от идеальности его формы. На самом деле, урок, который я выучил о создании изящных образов – от креативного резюме до дизайна пользовательского интерфейса – включает в себя полный отказ от тяги к идеальному.

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

«Разве это не прекрасно?» – спросил мастера Дзен священник…

Мастер кивнул. «Да… твой сад прекрасен, но чего-то не хватает…»

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

«Вот то, чего не хватало», – сказал мастер.

– Janwillem van de Wetering, The Empty Mirror

Ваби-саби и создание сайтов

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

Леонард Корен в своей книге «Ваби-саби для художников, дизайнеров, поэтов и философов» («Wabi-Sabi for Artists, Designers, Poets & Philosophers») описывает следующие материальные проявления ваби-саби: ассиметрия, неровность, простота, скромность, интимность и естественность.

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

Как пишет Корен:

«Простота ваби-саби наиболее очевидна, когда очарование достигается умеренным скромным и проникновенным разумом. Главная стратегия этого разума – экономия средств. Ограничиться лишь самой сутью, но не лишиться поэзии. Сохранить чистоту и свободу, но не стерилизовать.(Все, что относится к ваби-саби всегда овеяно теплом и не бывает холодным). Обычно в ваби-саби используется ограниченное число материалов. Так же приветствуется сведение очевидных деталей к минимуму. Но обязательно должны остаться невидимые нити «паутины», которые собирают все элементы в одно наполненное смыслом целое».

Привнесение чувства в веб-дизайн – сложная задача, тем более, что сайты и приложения изначально построены на логике (через код). И хотя невозможно создать сайт, который явился бы абсолютным воплощением ваби-саби, найдите способ добавить немного ваби-саби в свои труды, и тогда Вам откроются новые грани. Это заставляет нас задуматься, как естественное устройство физического мира может наполнить собой виртуальные информационные миры, которые мы создаем. Существует лишь один путь, по которому естественный порядок находит отражение в веб-дизайне – через присутствие очарования.

Классификация изящности

Джереми Алексис из Иллинойского Технологического Института Дизайна призывает нас учитывать три типа очаровательности, когда речь идет о вопросах дизайна: логическое очарование, системное очарование и эстетическое очарование.

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

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

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

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

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

Любой сайт, который ориентируется на чистоту дизайна, с формальной точки зрения, может считаться изящным – даже, несмотря на то, что он может быть довольно бестолковым, например как National Geographic Kids. Более удачный пример - сайт Luigi Bormoli, в котором используется AJAX для создания очаровательной презентации товаров из стекла. Как и печатный каталог, этот сайт побуждает посетителя тщательно рассматривать и изучать продукцию, без необходимости обновлять страницу. Уберите очарование, которое придает сайту AJAX и он окажется не таким уж изящным.

И я бы хотел добавить еще одну разновидность очаровательности в список Алекса. Естественное очарование – «чувство», которое сайт или приложение вызывает у пользователя через особенности своей работы с течением времени, и которое заложено в законах природы.

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

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

Когда ваби-саби встречает дизайн пользовательского интерфейса

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

Сайт как книга – модель страницы:

Многообразные визуальные особенности заставляют глаз сосредоточиться на наиболее важном контенте (ассиметрия)
Оживляющие дизайн текстуры создают иллюзию многомерности (неровность)
Строгий дизайн, выверенный по системе координат в двухмерном плостранстве (простота) или органичная композиция, которая не может быть полностью систематизирована (естественность)
Аккуратно и продумано стилизованная типографика (скромность) и
Взывающий эмоции дизайн сайта – начиная от основной идеи и заканчивая нюансами (интимность)

Список Крейга (Craigslist) – идеальный, хотя достаточно примитивный пример сайта, который демонстрирует эту модель дизайна в ее естественном очаровании. Хотя результат не поражает нас визуально, этот сайт напрямую отражает то, как люди воспринимают и делятся информацией. С течением времени список Крейга развивался по собственному естественному пути, при этом сохраняя некоторые черты настоящих досок с объявлениями.

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

Сайт как сад – модель физического мира:

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

The Eco Zoo берет естественное очарование и воплощает его в дизайне сайта. Здесь Вы можете «вскарабкаться» на дерево и почитать рассказы из всплывающей книги о созданиях, таких как Яги-Чан – козе, которая носит шкуру овцы.

Сайт как чаша Петри – молекулярная модель

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

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

Мудрость для веб-дизайнера

Ничто из того, что мы видим или слышим не совершенно. Но именно в этом несовершенстве проявляется идеальная реальность.

– Shunryu Suzuki

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

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

Перевод: Hippopotamus

Оригинал статьи: The Elegance of Imperfection

Автор: David Sherwin