75статья

Эстетика веб-пространства

Опубликовал Александр Иваничкин, 2 сентября 2013

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

Джон Аллсопп, The Dao of Web Design

Двадцать лет назад Джон Аллсопп попросил нас акцентировать внимание на адаптивной природе веб-пространства. Мы не послушались.

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

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

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

Материал веб-пространства

Чтобы правильно создавать дизайн для среды, ее нужно понимать. Мне нравится думать о веб-пространстве как о каком-либо материале со своими уникальными характеристиками, которые мы можем использовать, и пределами, до которых он может развиваться до момента перелома. Интернет можно считать составным объектом, состоящим из HTTP (как), URL (где) и HTML (что). Если опустить хотя бы один из этих ингредиентов, то вы уже будете строить не интернет-пространство.

Это сочетание протоколов и знаков, которое помогает веб-пространству достигать того, что Сэр Тим Бернерс-Ли назвал «основным принципом дизайна»: универсальности.

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

За счет так присущей среде универсальности, можно сказать, что веб-пространство является отзывчивым по умолчанию. «Отзывчивый» – это не техника или процесс, это основная характеристика платформы, и это то, чему мы угрожаем с каждой накладываемой на нее строкой CSS и JavaScript. Универсальность также переступает границы визуального дизайна: вебсайты просто должны быть настолько же простыми в использовании, как и обычный текст или чтение вслух.

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

Среда – это сообщение

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

Особенно это было заметно в 70-е и начале 80-х годов. Несмотря на то, что программы записывались в цвете, телекомпаниям приходилось учитывать интересы большого количества зрителей с черно-белыми телевизорами. Экранная графика должна была работать на обоих типах экранов, поэтому дизайнеры использовали контрастные формы и цвета. Например, на заставке BBC1 использовался желтый (а позже бледно-зеленый) вращающийся глобус на темно-синем фоне. В конечном итоге, дизайн мог казаться безвкусным, но эффективным.

Заставки BBC1 с 1974 по 1981 год

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

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

Новое – это хорошо забытое старое

До появления “первоклассных сайтов” и желания создавать печатные макеты – когда пропускная способность была ограничена, а маленькие экраны отображали только 256 цветов – пиксельная графика считалась в порядке вещей. Макеты были простыми и сфокусированными.

В 1995 году на сайте Hotwired использовалось только шестнадцать цветов. Навигация домашней страницы состояла из всего шести четырехцветных GIF-анимаций по 1 кБ, которые представляли собой различные тематические рамки. Макет представлял собой всего лишь такие изображения, расположенные по центру:

Hotwired, примерно 1995 год

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

Учитываем ограничения

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

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

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

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

Создаем дизайн на основе проблемы

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

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

    Оригинальное изображение: 9кБ. Оптимизированное изображение: 4кБ.

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

  2. Изменение эстетики
    Если изображения с несколькими цветами и более высоким уровнем сжатия могут составлять меньшие файлы, тогда, наверное, это стоит учитывать и в нашем дизайне.
    Благодаря теме «игра с будущим» сайт конференций dConstruct 2012 использовал высоковерстабельный дизайн, который отличается монохромными изображениями с областями «плоского цвета». Такое дизайнерское решение подразумевает, что изображение может быть действительно небольшим, и использовать не более восьми цветов:

    Оригинальное изображение: 14кБ. Оптимизированное изображение: 11 Кб

    Как мы уже видели на примере телевидения, ограничения среды могут оказывать влияние на конечную эстетику. В том случае, могло ли изображение на основе малого количество цветов или с размытым фоном – и возможно даже заметными артефактами от сжатия – стать принятой нормой в сети? Бесспорно, популярность сервисов типа Instagram (продукт по сути созданный на основе ограничений) доказала, что фотографии оцениваются исходя из их содержания, а не разрешения.

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

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

    Мобильный сайт BBC News – это отличный пример прогрессивного улучшения. В сыром HTML источнике есть ссылки только на два изображения: логотип BBC и изображение к главной статье. Этот наборполучает каждое устройство, а страницы могут весить всего 28 кб – это мелочь в мире вебсайтов весом 5Мб.

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

    Прогрессивные улучшения долгое время использовались в качестве инструментов разработчиков, но сегодня они должны присутствовать на протяжении всего процесса создания дизайна. Если рассматривать сайты в менее двоичных терминах (настольные компьютеры против мобильных устройств; IE6 против «современных» браузеров), мы сможем создавать опыты взаимодействия, которые будут адаптироваться к различным возможностям сети.

Адаптируем идеи (не только макеты)

Представьте себе разработку нового вебсайта. Вы видите макет, обрамленный заголовком и подвалом, с навигацией вверху и областью основного контента с боковой панелью?

Нам нужно избавиться от такого представления.

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

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

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

Газетный вид могут иметь только новости

При мысли о сайтах, созданных по примеру печатных материалов, в первую очередь вспоминаются газеты. Сайт The New York Times отличается фиксированнойплотной многоколонной сеткой. Как и на большинстве современных сайтов, контент здесь насыщен рекламой, виджетами и полезными ссылками:

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

Сайты, ориентированные на решение проблемы

Еще один сайт,который страдает от такого же громоздкого каркаса, это BBC Good Food:

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

Контент, а не Chrome

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

Как и в приложениях Chrome для The New York Times и BBC Good Food, толчок в сторону интерфейсов приложений привел к появлению более сильного акцента на контент (в данном случае, обложки альбомов), более гибкого каркаса и менее навязчивой навигации.

В некоторых смыслах, новый интерфейс включает качества языка Метро-дизайна Microsoft, используемого в Windows Phone и Windows 8. Если вы считаете, что некоторые принципы дизайна согласно Метро включают принципы «Чистый, легкий, открытый и быстрый», «Контент, а не Chrome» и «Только цифровой формат», будет сложно поспорить с тем, что эти качества не могут с тем же успехом применяться и в веб-интерфейсах.

Конечно, одна из причин, почему к этим приложениям можно относиться не так, как к традиционным сайтам – это отсутствие экранной рекламы – ограничения не столько для веб-пространства, сколько для построенных на нем бизнес-моделей. Онлайн-реклама переживает длительную и болезненную смерть: рекламные блоки становятся все больше и агрессивнее, а сервисы, которые их удаляют, например, AdBlock, Instapaper и Readability, становятся все популярнее. Поэтому, без оправдывающих себя бизнес-моделей, которые смогут их заменить, экранные рекламные блоки просуществуют еще всего несколько лет.

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

Приключения продолжаются

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

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

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

Это перевод статьи под названием “The Web Aesthetic” от Paul Robert Lloyd. Перевели в компании UXDepot с одобрением издания A List Apart.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂

VK.init({apiId: 2745953, onlyWidgets: true}); VK.Widgets.Like(‘vk_like_7163’, {type: ‘button’, pageTitle: ‘Эстетика веб-пространства’, pageUrl:’/the-web-aesthetic/’, verb: ‘0’}, 7163);

Все комментарии:

    Нет комментариев.


    Оставьте комментарий: