Ставший за последнее время популярным «плоский» стиль интерфейса – это не просто модная тенденция. Это стремление к созданию более аутентичного дизайна, устранению избытка визуальных элементов, отсеиванию ненужных и фиктивных элементов.
Что же такое аутентичный дизайн?
В погоне за созданием новых возможностей, технологический прогресс иногда приводит к избыточности в тех или иных областях. В XIX веке, например, технология механизированного массового производства позволила быстро и недорого печатать орнаменты, что привело к переизбытку на рынке обильно украшенных товаров. Нечто похожее происходило и в последние годы, когда имеющиеся технологии дизайна позволяли создавать визуально насыщенные интерфейсы. А это, в свою очередь, привело к переизбытку стилей и элементов скевоморфизма (skeuomorphism).
Стремясь к оригинальности, направление модерн обуздало излишки орнаментов, присущие XIX веку, приспособив дизайн к веку массового производства. Сегодня мы наблюдаем тоже самое стремление к оригинальности в тенденциях «плоского» дизайна, который отрицает скевоморфизм и чрезмерное использование визуальных элементов и отдает предпочтение простому, понятному дизайну, ориентированному на контент. Аутентичному дизайну.
Рождение аутентичного дизайна
В 1908 году Адольф Лоос (Adolf Loos), влиятельный австрийский архитектор, написал эссе с провокационным названием «Орнамент и преступление» (Ornament and Crime). Он восклицает, что «создатель современных орнаментов либо отставший от жизни, либо больной человек. Через три года он сам будет вынужден отречься от своего творения. Его произведения уже с момента их создания несносны для культурного человека и очень скоро станут таковыми для остальных». Лоос даже смело заявлял: «Чем ниже стандарты у людей, тем более богатыми будут их орнаменты. Человечество должно стремиться к тому, чтобы видеть красоту в форме предмета, а не к тому, чтобы наделять его излишними орнаментами».
Что привело к такой неприязни орнаментов? Чтобы понять образ мыслей этого прародителя современного дизайна, мы должны для начала сформировать некоторое представление о состоянии дизайна в конце XIX века.
Изобретение парового двигателя возвестило о наступлении эры механизированного массового производства. Как пишет Фрэнк Уитфорд (Frank Whitford): «Станки с паровым двигателем могли отпечатывать, разрезать и моделировать практически любые материи быстрее и корректнее, чем если бы это делалось человеком вручную. Механизированное производство подразумевало сокращение стоимости и повышение доходов».
Но, несмотря на переход от ручного производства к механизированному, стиль товаров не изменился. Большинство продукции, от зданий и мебели до тканей и столовых приборов, было украшено обильным количеством различных орнаментов, созданных в духе великой эпохи Ренессанса.
Чернильница, продемонстрированная на Великой выставке изделий промышленности всех наций (The Great Exhibition) в 1851 году. При ее создании использовалось чрезмерное количество орнаментов, но при этом нестандартных.
Со временем декорирование товаров вручную превратилось в дорогое удовольствие и стало символом богатства и роскоши. С наступлением эры механизации появилась возможность быстро и недорого создавать подделки популярных орнаментов. Вместо того, чтобы поразмышлять над тем, какой дизайн лучше всего подойдет для того или иного товара массового производства, производители ринулись копировать сложившиеся исторически стили, тратя на это минимум средств. В результате рынок наводнили безвкусные товары низкого качества, против которых и выступал Адольф Лоос вместе с другими прародителями современного дизайна.
В своей книге «Современное декоративное искусство» (The Decorative Art of Today) прославленный архитектор Ле Корбюзье (Le Corbusier) открыто заявлял об обильном декорировании всякого хлама. Он утверждал, что «роскошная вещь сделана искусно, опрятно и без всяких примесей, а ее нагота лишь раскрывает ее качество. Именно развитие промышленности привело к существующему положению дел: чугунная печь, переполненная элементами художественного оформления, стоит меньше, чем простая; растущее число недостатков не может быть замечено в процессе литья».
Влиятельный критик и журналист Монтгомери Шайлер (Montgomery Schuyler) осуждал переполненные орнаментами фасады XIX века, заявляя: «Если выскоблить главные стены всех зданий на этой улице, то попросту исчезнет вся архитектура. Здания станут самыми обычными».
Строительство современного здания универмага Harrods было завершено в 1905 году. Проект этого здания создал архитектор Чарльз Уильям Стифенс (Charles William Stephens). Оформление фасадов типично для архитектуры Викторианской эпохи (снимок сделан Майклом Грейфенедером).
Архитектор Луис Салливен (Louis Sullivan), известный как «отец небоскребов», призывал к сдержанности, заявляя: «Было бы прекрасно, если бы мы полностью воздержались от использования орнаментов в течение какого-то периода с тем, чтобы наша мысль могла полностью сосредоточиться на создании хорошо сконструированных и привлекательных по натуре зданий». На картинке ниже приведен пример одного из зданий Салливена. Первый этаж украшен орнаментами, а остальные этажи отличаются на удивление современным для XIX века дизайном, особенно по сравнению со зданием универмага Harrods.
Здание универсального магазина Карсон, Пири и Скотт (Carson Pirie Scott) первоначально проектировалось Луисом Салливеном для компании Шлезингер и Мейер (Schlesinger & Mayer). Простота оформления верхних этажей этого здания поразительна по сравнению с остальными примерами архитектуры XIX века.
В 20-е годы XX века в Германии возникло новое течение, известное под непереводимым названием «Sachlichkeit«, которое имеет значение «фактический», «буквальный», «практический» и «объективный». Течение Neue Sachlichkeit пропагандировало в дизайне достижение максимальной полезности. Немецкий архитектор Герман Матезиус (Hermann Muthesius) пояснял, как эту идею полезности можно применить к стилю, для того чтобы создать то, что он называл Maschinenstil, или «машинным стилем«. По его словам, примеры этого стиля можно встретить в оформлении «железнодорожных станций, выставочных залов, мостов, пароходов и т.д. Здесь мы сталкиваемся с серьезным и почти научным Sachlichkeit, с воздержанием от любого внешнего декорирования, с формами, полностью продиктованными целями, которым они призваны служить».
Другие пионеры современного аутентичного дизайна не критиковали декорирование, а возвели на пьедестал функциональность формы. В 1934 году в нью-йоркском Музее современного искусства архитектором-модернистом Филлипом Джонсоном (Philip Johnson) была организована выставка под названием «Машинное искусство». В экспозиции были представлены различные части механического оборудования, к примеру, пропеллеры самолета, промышленные изоляторы и др. Целью этой выставки было продемонстрировать красоту формы чисто функциональных предметов. Для современного дизайна оформление не имеет особого значения. Красота и изящность исходят от самого контента, а не от поверхностного слоя декоративного оформления.
Этот чайник был спроектирован Наумом Слуцким (Naum Slutzky), ювелиром, промышленным дизайнером и ремесленником школы Баухауз в г. Веймаре (Weimarer Bauhaus). Простой и практичный дизайн – это не следствие декорирования, а почти математическое решение данной проблемы.
В течение первой половины XX века преобладало модернистское течение, и, в конце концов, традиционные стили и технологии были вытеснены новыми подходами. В своей книге «Дизайн 21-го века» Джонатан Вудхем (Twentieth-Century Design, Jonathan Woodham) отмечает, что «для современной эстетики характерны простые, геометрические формы, использование современных материалов, таких как хромированная сталь и стекло, плоских поверхностей, оформленных абстрактными манипуляциями света и тени. Использование цвета часто сдержанное, с акцентом на белый, кремовый, серый и черный». Дизайн того времени искал красоту в гармоничном сочетании формы и функциональности.
Было бы неверно характеризовать течение модерн в дизайне как анти-декорирование. Новые стили приходили и уходили, например, популярные направления арт-нуво и арт-деко. Некоторые стили, такие как футуризм, отличались преувеличенной технологической эстетичностью. Другие, такие как Де Стиль, искали гармонию в ограниченной палитре цветов и форм. Но в основе было неуклонное движение от ненужного декорирования к более чистой, сдержанной форме дизайна, красота которого заключается в стиле и форме самого контента, а не во внешних украшениях.
Аутентичный дизайн против цифрового декора
Если сравнить историю современного дизайна с историей программного обеспечения и веб-дизайна, то можно проследить между ними некую параллель. Аналогично тому, как механизированное массовое производство привело к чрезмерному использованию орнаментов, развитие технологий дизайна послужило толчком к излишнему декорированию программного обеспечения и веб-сайтов. На первоначальном этапе развития сети Интернет дизайнеры с особенным рвением экспериментировали в этом направлении. Наряду с изображениями они активно использовали анимацию и звук, создавая чрезмерно богатые, яркие эффекты.
Ранние операционные системы с графическим интерфейсом пользователя все еще имели довольно простой вид и обладали базовыми функциями. По возможности использовались ассоциации с реальным миром, например, для папок выбирались такие изображения, которые символизировали каталоги файлов, а кнопки изображались со скосами, чтобы пользователь видел, куда нажимать. Но в целом эстетическая составляющая этих операционных систем оставалась довольно плоской и сдержанной. Даже если дизайнеру захотелось бы создать более насыщенные визуальные эффекты, низкое разрешение черно-белых мониторов все равно ограничивало его возможности.
Даже используя только два цвета для первого графического интерфейса Mac OS, компании Apple удалось передать глубину цвета, текстуры, кнопки и иконки, которые имитировали объекты реального мира. Внешний вид интерфейса ограничивался технологическими возможностями, а не умениями дизайнера.
По мере развития технологий дизайнеры получают все большую свободу действий в плане визуального оформления интерфейсов. В ОС Windows XP компании Microsoft используется красочный стиль во всем своем многообразии с различными эффектами выделения, тенями и градиентами.
Компания Apple пошла еще дальше и выпустила Mac OS X с интерфейсом сияющих пластиковых пузырьков, матовым алюминием и реалистичными иконками. Со временем визуальное оформление операционных систем становилось все более насыщенным. Компания Microsoft разработала для ОС Windows блестящую, полупрозрачную тему, а компания Apple представила в своих настольных и мобильных системах еще больше изображений и элементов скевоморфизма, к примеру, имитирующие кожу текстуры для приложения календаря и реалистичные эффекты переворота страницы в программе для чтения книг.
Для операционной системы Windows Vista была создана тема Aero, характеризующаяся блестящим, полупрозрачным окном.
Стили, имитирующие объекты и текстуры реального мира, считаются «скевоморфизмами», т.е. элементы дизайна основываются на символике, заимствованной из реального мира с единственной целью – сделать интерфейс похожим на знакомые для пользователя образы. Но в последнее время дизайнеры начали подвергать сомнению логичность обозначения приложений для ведения записей с помощью изображения блока бумаг или использования имитирующих кожу текстур и эффектов переворачивания страницы в приложении календаря. Конечно, такие эффекты привлекают внимание, но в тоже время они являются пережитками прошлого, пережитками, которые связывают интерфейс со статичными предметами реального мира, несовместимыми с изменчивостью и динамичностью цифровых интерфейсов.
Последняя версия календаря операционной системы Mac OS X представляет собой страницы с рваными краями в кожаном переплете, что создает видимость физического календаря.
В последней версии ОС Windows 8 компания Microsoft сделала смелый шаг в сторону от таких чрезмерных визуальных эффектов, пытаясь придать своей операционной системе полностью цифровой, «аутентичный» вид. Последний интерфейс построен на принципах, которые компания Microsoft разработала для ранних релизов мобильной версии своей ОС. Вниманию пользователей представлено эстетическое оформление, в котором почти не используются текстуры и имитации объектов реального мира.
Вместо этого в ОС Windows 8 уделяется наибольшее внимание шрифтам, расстоянию между элементами и цветовому оформлению, что придает ей особую элегантность. Лишние стили и эффекты реального мира отбрасываются, остается лишь сам контент. Подобно тому, как Матезиус однажды представил железнодорожные станции в качестве примера машинного стиля, дизайнеров Microsoft на создание нового интерфейса для Windows вдохновили примеры знаков на железнодорожных станциях. Созданный интерфейс ранее был известен под названием «Метро».
Стартовый экран Windows 8 с аутентичным дизайном значительно отличается от старого дизайна рабочего стола и состоит из плоских, красочных кадров, которые используются вместо иконок. Использование кадров – это не просто стилистический выбор: они позволяют отображать всю полезную информацию на стартовом экране в виде инструментальной панели.
На протяжении последних лет Интернет претерпевал аналогичные изменения. Ранее, благодаря дизайну, построенному на основании таблиц и flash-эффектов, разработчики могли полностью контролировать свои интерфейсы, поэтому дизайнеры без колебаний создавали визуально насыщенные оболочки для своего контента. Как только мы начали постигать изменчивость новой среды и пытаться отделять визуальное представление от контента с помощью CSS, возможности веб-дизайна стали намного более ограниченными. Контейнеры со множеством элементов оформления не могли быстро менять свою ширину и положение, поэтому дизайнеры стали использовать меньшее количество изображений и стали полагаться на более простые стили CSS. А это позволяет сделать дизайн более отзывчивым и упростить его сопровождение.
Недавняя эволюция отзывчивого дизайна (суть которой заключается в способности страницы приспосабливаться к различным размерам экрана и устройств), а также стремление дизайнеров с самого начала работать непосредственно с кодом, не используя такие визуальные редакторы, как Photoshop, перемещает нас еще дальше – к более простому, ориентированному на контент эстетическому оформлению Интернета. При таком подходе дизайнер придает красоту приложениям, настраивая шрифты, расстояния между элементами, цвета, а не путем добавления чрезмерных текстур и декоративных элементов.
Несколько лет назад компания Apple, лидер в области скевоморфизма, сделала первый шаг на пути к цифровой аутентичности, выпустив последнюю версию своей мобильной операционной системы iOS 7. Прошло время текстур – имитирующих кожу и бумагу с разорванными краями. На смену им пришел минималистический, в основном, плоский интерфейс с яркими, простыми иконками и полупрозрачными поверхностями.
Появление операционной системы iOS 7 компании Apple – это радикальный уход от скевоморфизма в сторону аутентичного дизайна. Слева продемонстрирован предыдущий дизайн приложения «Калькулятор», а справа – аутентичный дизайн этого приложения в iOS 7. Имитация зернистой текстуры, скошенные углы кнопок и полупрозрачные элементы – все это ушло, уступив место в основном плоскому, функциональному интерфейсу.
Аутентичный дизайн
Стремление к аутентичности – вот что связывает первые дни становления течения модерн в дизайне с происходящими на данный момент изменениями в области программного обеспечения и веб-дизайна. Это стремление еще более ста лет назад заставило дизайнеров отказаться от использования орнаментов в своих работах, и это же стремление сегодня заставляет современный цифровой дизайн двигаться в сторону более простого, более функционального эстетического оформления. Но что именно делает дизайн аутентичным?
Аутентичный дизайн стремится избавиться от фальши и ненужных эффектов. В нем элементы представляются без их маскировки под какие-то фальшивые текстуры. Демонстрируются их сильные стороны, а не скрываются недостатки. Аутентичный дизайн отказывается от функций, которые реализованы только для того, чтобы у решения появились знакомые или желательные возможности, но которые не служат никакой иной цели. Он выступает за представление функций в самой оптимальной форме, за элегантность при высокой эффективности решения. Аутентичный дизайн не признает внешний декор и находит красоту в самом контенте.
В аутентичном дизайне стиль имеет немало важное значение, но при этом в оформлении не используются декоративные элементы. Красота формы, скорее, зависит от содержания, а стиль является результатом творческих решений. Деян Суджич (Deyan Sudjic) так прокомментировал дизайн лампы Anglepoise: «Внешний вид лампы, в частности, форма ее абажура, – нечто второстепенное, но в то же время он вызывает некий интерес. Ее бесхитростная форма придала ей некую простодушность, что раскрывает ее аутентичность. Аналогичным образом аутентичность первоначальных версий Land Rover определялась тем, что в основе их проектов лежали технически гениальные идеи, а не желание создать соблазнительный для потребителя товар».
Дизайн лампы Anglepoise – гениальное решение реальной проблемы. Но у формы, которая является эффективным решением, оказывается, имеется свое эстетическое очарование.
Аутентичность в цифровом дизайне определяется несколькими моментами, которые условно можно свести к следующим:
- Цифровой вид
Нам не приходится имитировать на экране компьютера такие текстуры, как металл, дерево или кожа. Они не являются составляющими цифрового интерфейса, поэтому предположим, что их использование не имеет никакого смысла. Однако это не означает, что в дизайне должны использоваться лишь простые, плоские цвета заднего фона. Напротив, это означает лишь то, что мы не должны имитировать или ограничиваться текстурами реального мира.
- Отказ от скевоморфизма
Цифровые книги не нужно имитировать под физические листы бумаги при переворачивании страницы, а приложения для ведения записей не должны выглядеть как физические бумажные блокноты с кожаным покрытием, рваными краями и шрифтом, стилизованным под письменный почерк. Иногда можно использовать и скевоморфизмы, но они всегда вводят ненужные ограничения для интерфейса. Например, несмотря на то, что блокнот статичен, его цифровой интерфейс необязательно должен иметь схожий стиль. Но поскольку этот интерфейс должен имитировать блокнот, он должен учитывать все ограничения физического объекта.
- Создание контент-ориентированного стиля
Необходимо концентрироваться на самом контенте, а не на его оформлении и стилизации. Возможно, это покажется вам банальным, но сколько раз на веб-сайтах вы сталкивались со стандартными темами? Тема всегда определяется контентом, поэтому, по своей сути, она никогда не может выступать для контента в роли оптимального способа отображения. При создании тем с временным текстом дизайнеру приходится сосредотачиваться на стилизации и оформлении, а не на конкретном контенте, потому что он еще не знает, с каким контентом ему придется работать. Только работая с реальным контентом, вы действительно можете преобразовывать функцию в форму.
Аутентичный дизайн – это не минимализм
Дизайн, красота которого кроется в его функциональности, – это не то же самое, что минимализм, или минималистический стиль. При разработке первого дизайнер старается избавиться от всего ненужного, сделать решение более понятным для пользователей, сделать его более эффективным и максимально использовать его возможности. Минимализм же, в свою очередь, подразумевает минимальное эстетическое оформление, что придает объекту некую простоту и опрятность. Один является фундаментальным принципом дизайна, а другой – стилистическим решением.
Так, тематический комплект Flat UI от Designmodo – это внешнее представление описанного выше перехода к аутентичному дизайну. Но, как стиль, «плоскость» – это выбор, а не необходимость.
Было бы ошибкой жестко применять минималистическую эстетику дизайна к интерфейсу в качестве стиля в надежде сделать его более простым, более аутентичным в цифровом плане. Например, безжалостное устранение таких визуальных элементов, как тени, цвета и разнообразные стили фона, необязательно сделает интерфейс проще в использовании. В некоторых случаях можно добиться противоположного эффекта, подрывая структурные связи и фокусирование внимания, которые были созданы этими самыми тенями и цветами фона.
Интерфейс Microsoft Outlook 2013 был обновлен с целью соответствия нынешней теме операционной системы Windows 8. Но в результате того, что интерфейс стал «плоским», все содержимое и меню объединилось в единую белую плоскость, что привело к загроможденности.
В своей работе «Законы простоты» (The Laws of Simplicity) Джон Маеда (John Maeda) утверждает, что «самый легкий способ достичь простоты – разумно сократить то, что уже есть. Если сомневаетесь насчет чего-то, просто удаляйте. Но будьте осторожны, когда что-то удаляете». Последнее предупреждение имеет большое значение. Удаление чего-то зачастую приводит к упрощению только потому, что сокращается количество обрабатываемых элементов. Но удаление визуальных эффектов, которые помогают пользователю мысленно анализировать интерфейс, – к примеру, графических эффектов, используемых для группировки элементов, для различения кнопок и надписей, а также для выделения, – может иметь прямо противоположный эффект, заставляя пользователя выполнять лишнюю работу. Поэтому при разработке дизайна необходимо руководствоваться принципами, а не стилем.
Почему так важно разрабатывать аутентичный дизайн
Приложение Rise – идеальный пример цифрового аутентичного дизайна. Проблема с будильником уже давно решена, но компания Simplebots решила взяться за разработку будильника с нуля, переосмыслив интерфейс в контексте чисто цифровой реализации.
В приложении Rise пользователь устанавливает время с помощью инновационного полноэкранного ползунка, цвет заднего фона которого меняется, отражая цвет неба.
В интерфейсе приложения Rise используется полноэкранный ползунок, цвет заднего фона которого меняется, отражая цвет неба в выбранное вами время. Это приложение никоим образом не имитирует физические часы или физический ползунок, или реальные текстуры. Вместо этого дизайнеры полностью задействовали сенсорную область мобильного телефона, создав приложение, максимально использующее свои возможности. Инновационный дизайн не только позволяет создать богатый опыт пользовательского взаимодействия, но и выделяет это приложение среди других решений на рынке.
Приложение, подобное Rise, можно создать только в том случае, если разработка дизайна ведется исключительно в контексте его цифровой реализации и при этом не предпринимаются попытки имитировать решения из реального мира. Цифровой экран позволяет использовать абстрактные формы, анимацию, яркие цвета и равномерные оттенки. Не нужно ограничивать себя блеклой палитрой и статическим представлением. Кроме того, не нужно использовать скевоморфизмы. Если разобраться в том, как лучше всего представить контент с помощью пиксельной сетки, то можно прийти к более простым решениям, инновационным интерфейсам, которые идеально подходят для конкретного экрана, дизайну, который обеспечивает максимальное пользовательское взаимодействие и выделяет решение среди остальных конкурентов на рынке.
Ставший за последнее время популярным «плоский» стиль дизайна – это не просто модная тенденция. Это стремление к созданию более аутентичного дизайна, устранению избытка декоративных элементов и концентрации на самом контенте. В некоторых случаях технологический прогресс приводит к избыточности. Так, появление в XIX веке механизированного массового производства привело к злоупотреблению орнаментами. Аналогичный эффект произвело развитие технологий дизайна в ранние годы становления программного обеспечения и веб-дизайна. Но со временем избыток орнаментов был сдержан пионерами модернизма, которые искали красоту в функциональности. Существующий на данный момент избыток визуальных эффектов в программном обеспечении также будет устранен через некоторое время благодаря описанному выше стремлению к аутентичности дизайна.
Источники:
- «Баухауз», Фрэнк Уитфорд (2010 г.: Thames & Hudson)
- «Дизайн 21-го века», Джонатан Вудхем (1997 г.: Oxford University Press)
- «Пионеры современного дизайна», Николас Певснер (1991 г.: Penguin Books)
- «Язык вещей», Деян Суджич (2009 г.: Penguin Books)
- «Законы простоты», Джон Маеда (2006 г.: MIT Press)