Московский  государственный  университет  имени  М.  В.  Ломоносова   Факультет  журналистики     Визуальная культура современного медиа-дизайна онлайн: эволюция Реферат студента 520 группы дневного отделения ТАТЬЯНЫ СЕРГЕЕВНЫ НЕПОРАДЫ Преподаватель: кандидат филологических наук ИВАН ИВАНОВИЧ ЗАСУРСКИЙ Москва, 2014       Социальные сети, сотни миллионов веб-сайтов, электронная почта, мобильные приложения – для многих все это уже стало неотъемлемой частью жизни. Однако началось все не так давно – первый в мире сайт появился в мае 1990 года и стал первым в сервисе World Wide Web (WWW), который сегодня многие отождествляют с интернетом вообще («не так давно» - понятие, конечно, относительное, так как получается, что «мировая паутина» старше автора данного текста). Интересно, что в то время браузер еще не умел работать с компьютерной графикой, поэтому ни о какой визуальной культуре говорить не приходилось: первая страница представляла собой зеленый текст на черном фоне1. Впрочем, уже тогда было ясно, что такое положение дел является временным. Автор протокола HTTP и языка HTML Тимоти Бернес-Ли (который и создал первый сайт) изначально заложил в них возможности для форматирования текста, отображения графики, воспроизведения аудио и видео. Реализовать эти возможности получилось в самом скором времени, когда были созданы первые графические браузеры, в том числе Mosaic (1993 год), получивший широкую популярность. Он во многом определил внешний вид современных браузеров2: пользовательский интерфейс, включающий в себя меню, панель инструментов и адресную строку, расположенные наверху страницы. «Именно сочетание Web протокола от Тима Бернерс-Ли, который обеспечивал "связь" (connectivity), и браузера от Марка Андриссена, который предоставил функционально совершенный пользовательский интерфейс, создало условия для наблюдаемого взрыва. За первые 24 месяца, истекшие после появления браузера Моsaic, Web прошел стадию от полной                                                                                                                         1  С  его  внешним  видом  можно  ознакомиться  по  адресу:   http://www.nkj.ru/upload/iblock/509/50988a5c2dd8eca397f8671db58cf3ef.gif   2 С  его  внешним  видом  можно  ознакомиться  по  адресу:   http://npsod.radiushosting.ru/uploads/images/00/00/01/2013/06/18/b7146d7132.jp g     2   неизвестности (за пределами считанного числа людей внутри узкой группы ученых и специалистов лишь одного мало кому известного профиля деятельности) до полной и абсолютно везде в мире его распространенности3» (A Brief History of Cyberspace, by Mark Pesce, ZDNet, October 15, 1995,). Итак, во многом именно графический интерфейс обусловил популярность интернета благодаря своей привлекательности для пользователей. Привлекательность эта заключалась, прежде всего, в большей понятности по сравнению с интерфейсом командной строки. Основой для формирования графического языка веб-дизайна (как и графических интерфейсов компьютеров вообще) послужили метафоры и оформительские соглашения. О них пишет А. А. Беляев в статье «Аффордансы, оформительские соглашения и метафоры в дизайне веб-интерфейсов»4. «Аффорданс» термин, введенный исследователем дизайна пользовательского опыта Д. Норманом в книге «Психология обыденных вещей». Он исходит из того, что в объект дизайна закладываются возможности по взаимодействию с ним пользователя, и сообщение о таких возможностях при помощи дизайна и сообщение о таких возможностях при помощи дизайна и следует назвать аффордансом»5. Этими сообщениями в реальном мире являются размер, форма, поведения предмета. В компьютерной двухмерной плоскости остаются только внешний вид и поведение объекта. Оформительские соглашения и метафоры - это типы аффордансов, которые либо требуют определенных усилий для распознавания, либо работают только тогда, когда пользователь уже знаком с их значением.                                                                                                                         3 4  Цитирование по http://www.wdigest.ru/next.htm    Дизайн СМИ: тренды XXI века. Материалы IV Международной научно- практической конференции 26-27 сентября 2014 года. – М.: Факультет журналистики МГУ, 2014. – 116 с.   5    Там  же.  -­‐  С.  6.   3   «Метафоры переносят на элемент дизайна определенный признак, знакомый пользователю из реального мира»6. Примером может послужить Корзина как элемент интерфейса, предназначенный для удаления и временного хранения удаленных файлов, неизменно сопровождающийся пиктограммой корзины. Метафоры не могут быть слишком абстрактными или подвергаться серьезной трансформации, так как в этом случае они не будут распознаваться пользователями (об этом мы вспомним в разговоре о скевоморфизме). Другая проблема метафор – их неоднозначность. В качестве примера Беляев приводит иконку с лупой, «которая может означать как возможность увеличить что-либо, так и начать поиск»7. Такая метафора требует некоторого опыта общения с интерфейсом, так как ее смысл становится понятным только из контекста. «Оформительские соглашения» (design conventions) формируются без прямой связи с объектами реального мира, зацепка образуется в сознании пользователей прежде всего в силу привыкания к определенному символу»8. В отличие от метафор, оформительские соглашения могут быть сколь угодно абстрактными и простыми – это просто определенный прием оформления. Самый простой пример – обозначение гиперссылки синим подчеркнутым текстом. Другой - изменения курсора, показывающие, что определенное окно неактивно, или что при нажатии на наведенный объект должно произойти какое-то событие (интересно, что с появлением тач-скринов у дизайнеров появилось много новых проблем в этой области). Вместе с тем, как определенные соглашения становятся все более привычными, они могут упрощаться или получать большую свободу оформления. Так, все те же ссылки сейчас могут быть какого угодно цвета (разве что отличающегося от основного текста) или выделяться только подчеркиванием.                                                                                                                         6  Там  же.  -­‐  С.  10.    Там  же.  -­‐  С.  11.   8  Там  же.  -­‐  С.  9.   7   4   Высокой активностью в формировании соглашений отличается именно начальный период развития веб-дизайна (90-е годы), именно тогда сформировались его базовые принципы визуальной культуры в целом. Этот период характерен также высокой степенью технологических ограничений, которые очень удачно, на наш взгляд, сформулировал Д. Кирсанов в книге «Веб-дизайн». Он разделил их9 на три основные группы: 1) ограничения средств ввода (монитор, его разрешение, динамики); 2) ограничения канала передачи информации (скорость интернета); 3) ограничения технологий и определяющих их стандартов (HTML, CSS, JavaScript и т.д.). На наш взгляд, во многом именно постепенное преодоление теми или иными способами этих препон оказало решающую роль в развитии веб-дизайна. Так, тот же самый Кирсанов пишет (книга была издана в 2001 году), что в среднем разрешение компьютерного экрана составляло на тот момент 72-96 dpi (dots per inch, точек на дюйм – или PPI, пикселей на дюйм), против минимум 300 dpi у самых дешевых принтеров. Разрешение iPhone 4s с экраном Retina, выпущенного в 2011 году, составляет 326 PPI. Цифры, описывающие среднюю скорость интернета в то время, и вовсе кажутся теперь смешными: «девять из десяти пользователей Интернета способны получать данные из сети со скоростью, не превышающей одногодвух килобайт в секунду», «допустимый максимум этой величины лежит в районе 100 Кб»10. Это, как справедливо отмечает автор, сильнейшим образом влияло на восприятие страницы – она никогда не возникала перед пользователем сайта сразу, а только «томительно проявлялась», и часто пользователь так и не дожидался ее полной загрузки. Конечно, подобное случается и сегодня, однако из общего правила это превратилось в серьезный                                                                                                                         9  Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2001. - C. 176.   10    Там  же.  –  177.     5   недостаток, который и дизайнеры, и программисты стараются решить самыми разными способами, а технические возможности для увеличения скорости передачи данных продолжают развиваться. Однако эти первые два ограничения являются скорее качественными – более высокие характеристики экрана и скорость передачи данных позволяют загружать и просматривать картинки и графику лучшего качества (больше пикселей на дюйм, большее разнообразие в палитре), смотреть видео и слушать аудио (опять же, все более и более высокого качества). Все это также повлияло на визуальную культуру медиа-дизайна самым серьёзным образом (и снова скевоморфизм), но самым интересным будет посмотреть на эволюцию дизайна в связи с появлением новых технологий и стандартов. В этом нам поможет материал из блога Froontblog11 «Краткая история вебдизайна». Выше уже было сказано о первом вебсайте и первых браузерах, поэтому начнем с 1995 года, который ознаменовался появлением таблиц, как самого популярного способа структурирования информации. Главным их преимуществом было то, что они позволяли максимально близко воспроизвести макетную сетку. Таким образом, появилась возможность не вываливать весь контент на сайт сплошным потоком, а «разрезать» его на смысловые части в рамках одной страницы. В том же году появляется Javascript, позволяющий обходить некоторые ограничения HTML, например, выводить всплывающее окна, или настраивать динамические изменения расположения элементов. Серьезным его недостатком являлось то, «Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно»12. Однако во многом он и сегодня не теряет своей актуальности.                                                                                                                         11 12    blog.froont.com, для цитирования используется перевод habrahabr.ru    http://habrahabr.ru/company/web_payment_ru/blog/245153/   6   Настоящую свободу дизайнерскому воображению принесла технология Flash, появившаяся в 1996 году. «Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента»13. Трудность была в том, что для воспроизведения всего этого великолепия у пользователя должна была стоять последняя версия flash plugin, для загрузки требовалось значительное время, а работа с поисковиками была серьезно затруднена. Кроме того, нельзя было создать ссылку на определённую страницу сайта, так как весь он состоял зачастую из одного файла. Развитие данной технологии остановилось с выходом первого iPhone, который Flash не поддерживал. В 1998 появляется новый способ структурирования дизайна - CSS (Cascading Style Sheets). Он подразумевает разделение функций HTML и CSS – в первый помещается сам контент, а его оформление осуществляется с помощью второго. Первые версии CSS были далеки от гибкости, и браузеры медленно адаптировались к нему, однако сегодня именно эта технология обеспечивает значительную гибкость в оформлении при сравнительно небольшом потреблении ресурсов. Последние версии технологии даже поддерживают самые различные анимации, которые раньше оформлялись с помощью Flash или Javascript. Началом следующего этапа автор материала считает подъем мобильного контента в 2007 году (это не значит, что с 1998 по 2007 ничего не происходило). Различия в разрешении и размерах экранов разных дизайнов поставили вопрос: «стоит ли отображать на малом экране тот же вариант сайта, что и на большом, или от отдельных его частей необходимо отказаться»14? Первым шагом к решению проблемы стало создание сетки со столбцами, а следующим – «стандартизация широко распространенных                                                                                                                         13 14    Там  же.      Там  же.   7   элементов, таких как формы, меню навигации, кнопки, а также создание возможности их быстрого и простого использования или, попросту говоря — создание библиотеки визуальных элементов, которая содержит в себе весь необходимый код»15. 2010 автор считает годом появления адаптивного дизайна («Responsive web design») – возможности отображать на разных устройствах один и тот же контент, используя разные макеты для его представления. В 2010 же году начинается движение к упрощению дизайна: «Упрощение визуальных элементов, или так называемый «плоский дизайн» также является частью этого процесса. Главное его преимущество в том, что материалам, приоритетности отображаемой информации и содержимому в целом уделяется гораздо больше внимания. Глянцевые кнопки заменяются иконками, это позволяет нам использовать векторные изображения и шрифты-иконки. Веб-шрифты позволяют получить прекрасную типографику»16. На наш взгляд, именно этот момент является переломным в эволюции визуальной культуры веб-дизайна. До этого компьютерный дизайн с самого своего начала шел по пути имитации (матафоры к объектам из реального мира) но возможности первых графических систем чрезвычайно ограничивали его создателей: например, при том, что первая Mac OS отображала только черно-белую палитру, в ней были и объем, и текстуры, и иконки-метафоры17. Развитие технологий, о котором говорилось выше, давало все больше и больше возможностей для развития данной тенденции. Windows XP представила яркий интерфейс, наполненный сиянием, тенями и градиентами.                                                                                                                         15    Там  же.    Там  же.   17  http://www.smashingmagazine.com/2013/07/16/authentic-design/   16   8   Apple в Mac OS X, а в особенности в мобильных приложениях пошла еще дальше – реалистичные иконки, имитация самых разных текстур – пластика, металла, кожи, правдоподобные объемы и тени. Экраны Retina позволили добиться невероятной до этого реалистичности изображения. «Скевоморфи́зм (англ. skeuomorph (скюаморф); греч. σκε ος — «сосуд», «орудие», µορφή — «форма») — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами»18. Именно по этому пути – копирования и имитации – шел компьютерный дизайн до определенного момента. Сквебоморфизм делал интерфейсы более понятными для пользователя (чем подробнее метафора – тем легче она распознается, мы говорили об этом выше), что было особенно важным на ранних стадиях распространения компьютеров и интернета. Кроме того, такой дизайн, несомненно, несёт в себе определенную эстетическую ценность. Проблема заключается в том, что такие явления, как приложение «Календарь», имитирующий настоящий календарь, - реликты другого времени, которые привязывают статичные предметы из реального мира к несовместимым с ними динамичным и изменяющимся цифровым интерфейсам. С последним релизом Windows 8, Microsoft делает смелый шаг от сквебоморфизма к полностью цифровому и «аутентичному» дизайну. За ним идет и лидер сквебоморфизма Apple – релиз IOS 7 заставил (пусть и не сразу) самую широкую аудиторию оценить и полюбить «плоский» дизайн. Что же такое – «аутентичный дизайн»? Аутентичный дизайн работает с материалами, не маскируя их подо что-то другое, он стремится представить функцию предмета в наиболее оптимальной форме и через эффективность достичь красоты и элегантности. Стиль немаловажен, однако он стремится уйти от декоративности, главное – контент.                                                                                                                         18    https://ru.wikipedia.org/wiki/Скевоморфизм   9   Для цифрового дизайна «аутентичность» может быть кратко сведена к трем принципам19: 1) Опираться на «цифровой внешний вид». Компьютерные интерфейсы сделаны не из стекла, дерева или кожи – и поэтому они не обязаны их имитировать. Это не значит, что дизайнер может использовать только простые плоские элементы – однако изображать что-то, чем ты не являешься - бессмысленно. 2) Уходить от сквебоморфизма. Он не всегда плох, но всегда доставляет ненужные проблемы, так как копирование предметов реального мира приносит с собой и физические ограничения (метафорически) этих предметов. 3) Базировать стиль на контенте. Здесь важно понять, что бесполезный и пустой контент ведет к такому же дизайну. Только по-настоящему стоящее содержание заставит превратить функцию в форму. О похожих вещах говорится в тексте «Честность веб-материалов»20. В нем автор предлагает решить споры между поклонниками сквебоморфизма и плоского дизайна основываясь на идее «честных материалов»: «К счастью, дебаты о честности материалов, которые велись в девятнадцатом и двадцатом веке, породили зрелые философские концепции с практическими рекомендациями, которые мы можем использовать для распространения информации о веб-материалах, создания более долговечных работ, более глубокой оценки процессов разработки и более эффективного использования общих инструментов и однозначной терминологии»21. Так, флэш-страницы, у которых нет настоящих URL-адресов, не честно называть страницами. Использование растровых градиентов и всего созданного в графических редакторах, что можно создать с помощью чистого                                                                                                                         19  http://www.smashingmagazine.com/2013/07/16/authentic-design/    http://frontender.info/material-honesty-on-the-web/   21  Так  же.   20   10   CSS, - не честно. И даже эффекты теней и бликов, даже созданных в CSS, не являются честными, так как в цифровом экране нет источника света. То же и с имитацией объектов реального мира – это не честно, так как они изображают то, чем не являются на самом деле. Кроме вышеназванных «идеологических» причин упрощения дизайна можно назвать и более простые и приземленные. Например, информационная перегрузка – пользователь устал от бесконечных потоков информации, старается фильтровать поступающий контент, и устранение ненужных элементов из оформления частично снимает ощущение перегрузки. Кроме того, появляется все больше и больше узкоспециализированных приложений с небольшим набором функций, а меньше функций – проще интерфейс. Как уже говорилось выше, контент – прежде всего. Эйфория от оформления и возможностей новых устройств и технологий обычно сменяется возвращением к значимости контента – в конце концов, в любом медиа это главное.   11   Заключение. Итак, мы кратко проследили эволюцию веб-дизайна с самого момента его зарождения до наших дней. Рассмотрели базовые принципы его визуальной культуры, почему и как они сформировались: увидели, что создатели интерфейсов изначально стремились к тому, чтобы сделать их максимально понятными пользователю, равно как и к оптимизации их работы на крайне несовершенной технике того времени. Стало понятно также, что развитие веб-дизайна зависит как от развития устройств ввода и передачи данных в такой же степени, как от развития технологий и стандартов. Кроме того, в силу того, что этот раздел дизайна является относительно молодым, он еще находится в стадии поиска своего собственного языка, отвечающего именно его запросам и потребностям. Возможно, что процессы, происходящие сейчас (переход от сквебоморфизма к упрощению и плоскому дизайну), как раз приведут цифровой мир к формированию такого языка.   12   Использованная литература: 1. А. А. Беляев. Аффордансы, оформительские соглашения и метафоры в дизайне веб-интерфейсов // Дизайн СМИ: тренды XXI века. Материалы IV Международной научно-практической конференции 26-27 сентября 2014 года. – М.: Факультет журналистики МГУ, 2014. – 116 с. 2. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: СимволПлюс, 2001 – 376 с.: цв. ил. 3. Wdigest: http://www.wdigest.ru/next.htm 4. Habrhabr: http://habrahabr.ru/company/web_payment_ru/blog/245153/ 5. Smashingmagazine: http://www.smashingmagazine.com/2013/07/16/authentic-design/ 6. Frontender: http://frontender.info/material-honesty-on-the-web/ 7. https://ru.wikipedia.org   13