Почему минимализм, или какой сайт делать

(Автор — Виктория Шидловская)

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

Во всем прогрессивном  мире сейчас процветает минимализм. Особенно мне понравилась главная страница одного дизайнерского портфолио: белый экран, слева вверху обычным Times New Roman в 12 пунктов, синим цветом, с подчеркиванием и в виде списка – три пункта меню – ссылки на содержимое сайта, типа «Работы, контакты, блог». Все! Вот это смелость! Вот это чувство юмора! И такое может себе позволить только ОЧЕНЬ крутая дизайнерская фирма.

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

Примеры: Greg Ponchak, http://www.toko.nu/.

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

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

Пример: Undesign.

сайты на javascript

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

Но по-настоящему задуматься заставил массовый переход западного веб-мира на горизонтальный скроллинг!

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

Что происходит?

Направить мысль в нужное русло помогла случайно прочитанная статья «Новый дизайн столов». В ней рассказывается о журнальном столике, где вместо крышки – multitouch-screen, то есть сенсорный компьютерный дисплей. И разговор собственно не о столе, а о возможности скорого появления горизонтальных мониторов и связанным с этим развитием дизайнерской мысли: как должен измениться пользовательский интерфейс. К примеру, если это стол для настольных игр, то каким образом все участники вокруг стола будут читать одни и те же надписи на кнопках? Я думаю, взгляд на монитор под углом дает свои преимущества – можно было бы использовать принцип переливающихся открыток. Отсюда и до 3D дисплея недалеко!

Но откуда такие идеи?

Новую волну в развитии технологической мысли вызвало даже еще не появление, а только анонсирование iPad от Apple (посмотреть новинку можно на http://apple.com/). Сразу надо отметить, как только Apple объявили о возможности предварительного заказа iPad (это произошло 12 марта 2010 года), в первые же два часа было заказано 50 000 революционных устройств! За день они продали 120 000 iPad-ов и заставили потребителей раскошелиться на 75 миллионов долларов только благодаря их вере в брэнд и в качество продукции Apple – никто из покупателей даже не видел устройство вживую.

Microsoft на данный момент только анонсировал свое конкурентное устройство — HP Slate.

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

Причем тут веб-дизайн и флэш?

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

Если же говорить о Flash, то за несколько месяцев до появления iPad в продаже, развернулась настоящая Вторая Холодная Война между Apple и Microsoft, где были замешаны Google, Adobe со своим продуктом Flash Macromedia, новая версия языка разметки веб-страниц HTML – HTML5 и даже браузеры, начиная с Internet Explorer и заканчивая Opera.

Толчком к развитию скандала послужило заявление Стива Джобса, главы Apple, что в анонсируемом iPad не будет поддерживаться Flash. Если для iPhone и iPod Touch отказ от технологии был оправдан малыми размерами дисплея, то в данном случае это уже открытая враждебность. И Стив Джобс еще яснее выразил ее в нескольких интервью, где назвал Flash «свиньей, пожирающей процессор» и «устаревшим, как дискета».

За что Apple не взлюбил Flash?

Я являюсь фанатом Apple единственно из-за их дизайна, пользуюсь при этом Windows, так как сама являюсь flash-разработчиком. То, что на Windows можно сделать с флэшом за два часа, на Маке выходит за 8, при этом никакой гарантии опубликования готовых файлов без потери графической и текстовой информации. Но дизайн Макинтошей настолько outstanding, что мониторы с морально устаревшей начинкой вычищают, заливают водой и пускают туда аквариумных рыбок – людям жалко выбросить корпус на свалку.

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

Дизайнеры традиционно работают на Маках, почему же флэш-дизайнеры оказались за бортом?

Ключ ко всему – доступ к процессору компьютера для быстрой работы Flash-плеера. Дело в том, что Windows такой доступ предоставляет, а Apple – нет. В итоге все, кто работает на Маках, ругают Flash за то, что тот тормозит всю систему. Естественное раздражение на баннерную рекламу и тем более – на всплывающие баннеры, которые раздражают вообще всех без исключения, вплоть до приступов ярости.

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

Однако, думаю, Стив Джобс не был бы настолько самоуверен при выпуске iPad, если бы не официальный появление новой версии гипертекстовой разметки – HTML5. А возможно, он только этого и ждал.

HTML – это то, что «держит» веб-страницу. Определенные контейнеры (в виде кода) содержат информацию, которую мы видим на экране монитора при открытии любого сайта, и одновременно сообщают браузеру (Explorer, Mozilla, Opera и другим), как именно отображать контент.

Этот язык постоянно обновляется, устаревшие контейнеры (тэги) выбрасывают, новые добавляют. И нынешняя версия — HTML5, в паре с бесплатными ява-скриптами, приобрела вдруг возможность отображать то, что раньше было доступно только флэш-плееру. Вот совершенно беспрецедентный пример мультипликации на основе случайных чисел: http://9elements.com/io/projects/html5/canvas/.

Основным же преимуществом стало отсутствие необходимости в «посреднике» между видео и его отображением на сайте. Раньше (и поныне) видео отображали с помощью того же Flash, теперь, с помощью HTML5, его можно напрямую вставлять на страницу. Пример: http://jilion.com/sublime/video.

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

Microsoft спасет мир?

А что же Microsoft? Судя по всему, ждал, как пойдут дела с продажей iPad у Apple. На конференции в честь тестирования демо-версии HP Slate было продемонстрировано его основное преимущество – поддержка Flash, отсюда – флэш-игр, флэш-сайтов и флэш-видео. Так сказать, доступ к некастрированному интернету.

Согласно http://www.alexa.com/, 85% ста самых популярных сайтов мира используют флэш-технологию, и 75% всего видео в интернете показывают с помощью флэш-плеера. Статистика впечатляет. Но что ожидает нас с появлением HTML5 и переходом на новый стандарт YouTube и Vimeo? Будем надеятся, что не исчезнут совершенно такие работы как безумный интерактивный промо-сайт IKEA — http://kominigarderoben.se/ или погруженный в глубины океана http://interactive.nfb.ca/waterlife/

Универсальность страдает

Вся эта история похожа на то, как если бы в мире существовало только две компании, выпускающие электроприборы с принципиально разными вилками и розетками. Кто из них двоих захватит мир?

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

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

Отсюда выводы:

При заказе сайта нужно исходить из аудитории, ее территориального расположения в первую очередь. Если это Москва, то пора переходить на новый уровень мышления, поколение от 15 до 35 «проглотит» новые технологии со скоростью, сравнимой с западной, цена на iPad всего $500!

Сайт нужно проверять на совместимость с мобильными устройствами. Сделать это можно здесь: http://www.w3.org/Mobile/ (в правом нижнем разделе есть поле Check it!). Скорее всего, ваш сайт не будет мобильным по ряду причин, в первую очередь из-за веса, большого количества ссылок, присутствия флэша и ява-скриптов. Решение – создавать еще одну версию сайта. Например, как Twitter, http://m.twitter.com/login.

График тестирования покажет, насколько ваша страница получается mobile-friendly. К примеру, мобильная версия журнала Smashing Magazine — http://m.smashingmagazine.com/ тоже была мной протестирована, коэфициент «дружелюбности» мобильным устройствам составил 64%. Она полностью на ява-скрипте, так что не обращайте особого внимания на список проблем, который выведут при тестировании сайта, больше на то, как такие сайты делают другие.

HTML5 использовать рано (не все браузеры еще поддерживают), Flash – нельзя, ява-скрипты – нежелательно. Возвращаемся к заре интернета – только контент вас спасет.

Новые технологии образуют новое течение в дизайне, пока это поле пусто, что приятно щекочет нервы разработчикам и неприятно – рядовым веб-дизайнерам, которых вдруг разом лишили многолетних наработок в области «произведения впечатления» на клиента. Зато благодаря этому дизайнеры всего мира вернулись к своим первоначальным занятиям – рисункам от руки, наброскам, акварели, фотографии и даже рукодеолию. Предложение внезапно вызвало спрос – люди соскучились по «теплым», некомпьютерным произведениям. Так что сайты нужно насыщать качественной, нестандартной и эксклюзивной графикой. Примеры: http://www.danielegneus.com/, Yulia Brodskaya

И в конце концов – делайте что-то полезное и прекрасное! Люди сами найдут способ увидеть вашу продукцию он-лайн.

Читать далее:

HTML5 – введение в новый язык разметки

Уроки HTML5 – создаем макет

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Google индексирует флэш / Flash Indexing by Google