Сайты в стиле htmинимаlизма

Вначале было слово. До этого был Flash, до этого был RealAudio, до этого был GIF и JPEG, до этого был текст. Простой текст HTML. Ранние текстовые браузеры, такие как Lynx, не сильно заботились об элегантном размещении текста, потому что интернет изначально была создана для того, чтобы обособленная группа физиков могла обмениваться научными статьями.

С появлением тега и его атрибута face Web-дизайнеры смогли, наконец, освободиться от шрифтов браузера, установленных по умолчанию (в основном Times и Courier). Кроме того, атрибут тега size дал дизайнерам новые возможности управления размером шрифта. Несмотря на то, что тег был значительно лучше серии тегов h1, h2 ... и т.д., он все еще оставлял желать лучшего. Размеры HTML-шрифтов значительно отличались от одной операционной системы к другой. И если вы хотели изменить размер основного шрифта сайта, нужно было изменять этот участок программы для каждой страницы сайта.

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

Такого рода межплатформенное, межбраузерное управление шрифтом привело к появлению новой волны блюстителей чистоты HTML. Вдохновленные идеей удобства использования Якоба Нильсена (Jacob Nielsen) с его мантрами быстрой загрузки и дизайнерским подходом наименьшего общего знаменателя, эти новые НТМинимаLисты продолжают создавать красоту в программном коде. НТМинимаLисты используют свое дизайнерское мастерство для того, чтобы превратить «простое» из скучного в подчеркнутое. И, как всегда, цель заключается в создании эффективной коммуникации - чёткой и чистой.

Конкурс 5к (http://www.the5k.org) - это своего рода Олимпийские игры дизайнеров стиля НТМинимаLизма. Все сайты - участники должны иметь размер не более 5К. Не допускается применение любых, кроме самых примитивных, пиксельных GIF. Узоры, движение, фигуры и интерактивность должны создаваться из смеси HTML, CSS и JavaScript, который считается динамическим HTML. Соревнование происходит в духе ранних войн хакеров в Массачусетском технологическом институте - выигрывает тот, кому удается разрешить проблему с помощью минимума программного кода.

Победители конкурса поражают своей гениальностью. Одной из моих любимых работ является «The Word's Smallest Art Museum» («Самый маленький в мире художественный музей») - Алекса Барбера (Alex Barber), в котором представлены мини-работы Мондриана, Альберса (Albers) и (Rothko) Ротко, созданные исключительно при помощи программирования. Гуру комического стрипа? Скотт МакЛауд (Scott McCloud) заметил: «Искусство использовать минимум элементов долгое время считалось благородным стремлением». Конкурс дизайнеров 5к доводит это утверждение до некоторой неестественной крайности.

К счастью, ни один клиент не попросит создать для него такой же сайт, как у 5к. Тем не менее, среди десяти описанных нами стилей НТМинимаLизм кажется наиболее применимым к большей части коммерческих проектов в Сети интернет. Со своим аккуратным, чистым видом, быстро загружающимися GIF-изображениями и серьезным отношением, не допускающим никакого беспорядка, этот стиль идеален для компании, которая хочет сказать: «Дело прежде всего».

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

Примеры сайтов

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

Просто для продажи: сайт 37signals

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

То, что вы можете, не означает, что вы должны это делать.

Конечно, бывают случаи, когда нужен светлый шрифт на тёмном фоне, но мы не думаем, что для этого достаточно причины «так круто выглядит».

Команда 37signals полагает, что понятия «классное» и «отчетливое» не обязательно должны быть взаимоисключающими. Нам точно так же, как и другим, нравится «крутое», но мы понимаем, что наша работа заключается в том, чтобы облегчать, а не усложнять жизнь людей.

37signals.com - это НТМинимаLизм в его чистейшем виде. Обратите внимание на изобилие белого пространства, не только на основной странице, но и на всех других. На основной странице находятся 46 ссылок (примерно столько же размещено на сайте amazon.com «до сгиба»). Это достаточно большое количество, однако 37signals.com не выглядит перегруженным. Единственным GIF - изображением является крохотный логотип в верхнем правом углу, весом в дистрофические 396 байтов. Разноцветные точки, разбросанные по всему сайту, не являются GIF. На самом деле это буллиты HTML, настроенные в CSS. Самое массивное изображение на всем сайте имеет размер только в 6,6К.

Основная страница выглядит одинаково хорошо и при размере 800x600, и при 1000x800. Она замечательно смотрится даже на экране640x480. И все благодаря подвижному оформлению таблиц, что позволяет странице по мере необходимости изменять размер, не нарушая при этом целостной композиции. НТМинимаLист рассматривает вэб-страницу не как статичную журнальную страницу, но как подвижную сущность, которая изменяется, приспосабливаясь к техническим ограничениям и предпочтениям зрителя. Задача дизайнера - структурировать страницы таким образом, чтобы они хорошо выглядели независимо от типа операционной системы пользователя, размера экрана, числа доступных цветов и т. д. Обратите внимание, что страницы не должны выглядеть одинаково в этих различных условиях. (Они и не будут. Просто не смогут.)

Страницы второго уровня на сайте 37signals.com так же выразительны, как и основная страница. По-прежнему просторные, они, тем не менее, предоставляют пользователю четыре чётких способа исследования сайта:

• щёлкнуть по опции НОМЕ в нижнем меню, вернуться на основную страницу и продолжить просмотр оттуда;
• обратиться к выпадающему меню ссылок на все 37 сигналов, с кратким описанием каждого по отдельности;
• в нижнем меню представлены числа с 1 до37 на тот случай, если вы захотите сразу перейти к определенному сигналу. Этот длинный ряд простых чисел HTML придает сайту элемент занимательности, усиливая eгo концепцию;
• и самое удобное - в нижнем меню есть стрелки «вперед» и «назад», благодаря которым можно легко просмотреть всю последовательность сигналов. Вероятно, при первом посещении сайта большинство людей пользуются именно этим способом.

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

В конечном итоге, 37signals - это увлекательный, юмористичный, простой, полезный и быстро загружающийся сайт. Его оформление так же свежо, как проза самих сигналов. Потенциальный клиент должен уходить с 37signals.com с мыслями: «Эти ребята действительно знают своё дело». В этом, конечно, и заключается задача сайта.

37signals доказывает, что удобство использования не всегда уродливо. От этого сайта получаешь эстетическое наслаждение, особенно в сравнении с характерным «не-дизайном» Якоба Нильсена (Jacob Nielsen) на его сайте useit.com.

Нильсен считает, что дизайн сайта должен быть таким, чтобы не отвлекал внимание от содержания, но выполнял свою задачу лишь отчасти. И напротив, 37signals перевыполняет свои более честолюбивые планы создания оформления, которое подчеркивает содержание.

Gettyone: продавать стало просто

Несомненно, НТМинимаLизм отлично подходит для сайта - портфолио собственных работ, но как насчет заказного коммерческого сайта? Своей квалифицированной работой над оформлением gettyone.com (сайт хранения фотографий) команда 37signals доказала, что НТМинимаLизм столь же успешно действует и на коммерческом сайте, особенно если он содержит большую базу данных о представляемых продуктах, gettyone.com идеально подходит для такого рода минималистичного оформления.

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

gettyone.com не предназначен для отображения на экранах размером 640x480 (без горизонтальной прокрутки), но ему этого и не надо. Клиентами сайта являются художники-оформители, обладатели больших мониторов. Здесь нет подвижного дизайна. Композиция построена для размера 800x600, и на больших экранах она просто размещается в центре без каких-либо заметных изменений.

И вновь обратите внимание на преобладание белого пространства. На главной странице содержится 31 ссылка, поле поиска и 14 пунктов для выбора. Однако пространства все-таки много. Команда 37signals решила отвести большую часть экрана для опций поиска, потому что именно так большинство людей будут перемещаться по сайту. Однако gettyone.com не похож на поисковую систему. Почему?

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

На главной странице есть раздел заголовка,левый раздел, правый раздел и раздел нижнего меню. Разделы отделяются друг от друга при помощи элементов оформления. Но обратите внимание, насколько деликатны эти разделители - просто пунктирные линии. Только раздел поиска полностью окружен прямыми. Здесь нет вездесущих таблиц с цветным фоном. Весь фон выдержан в белом цвете. Почему amazon.com не выглядит так аккуратно?

Если быть справедливым, то Amazon предлагает для продажи гораздо больше товаров. Но на главной странице gettyone можно было бы представить любое количество комплектов CD-ROM. Там можно было бы подробно описать условия регистрации. Можно было бы поговорить о политике защиты авторского права или о разрешении (низком или 300 dpi, пригодном для типографии), в котором представлены изображения, и о множестве других подобных вещей. Но на ранней стадии разработки оформления, когда определялась архитектура проекта, кто-то оказался настолько мудрым, что понял, что большинство людей будут приходить на gettyone.com только по одной причине - в поисках нужных изображений и для их загрузки. Определив эту основную цель, можно соответствующим образом структурировать главную страницу.

При выполнении поиска на gettyone.com к интерфейсу добавляется еще больше функций и возможностей, но команде 37signals всё же удается поддерживать порядок. Это достигается при помощи всё того же белого пространства и подачи только необходимой информации. Например, под каждым изображением есть четыре загадочных крохотных кнопки. Наведите курсор мыши на любую, и появится строка подсказки с объяснением ее назначения. Уберите указатель мыши с кнопки, и подсказка исчезнет. Это разумное использование DHTML для предоставления информации только тогда, когда она нужна.

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

Великолепие gettyone.com заключается в деталях. Например, при первом посещении сайта вы видите быстро загружающуюся начальную страницу. При последующих визитах вы попадаете напрямую на главную страницу. (Это становится возможным при помощи небольшого кука (cookie)). Предполагается,что загрузочная страница произвела на вас хорошее впечатление ещё при первом визите, иначе бы вы не вернулись. Теперь, когда вы вернулись, нет нужды в повторных уговорах. Перед вами сразу появляются изображения, которые можно загружать.

Для навигации на сайте gettyone.com активно используются экономящие место выпадающие меню. В них даже пару раз применяются закладки, как у Amazon. Но навигация никогда не отвлекает внимания от самих представляемых изображений. Напротив, сочетание разумного программирования и минималистического интерфейса создает приятное ощущение.

Jovino: принцип относительности

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

Сайт jovino.com представляет собой великолепный пример того, как единственный яркий преувеличенный элемент может «грохотать» на фоне «тихого» окружения. Классическим примером коммерческого использования этого технического приема можно назвать неоднократно обсуждавшийся apple.com. Нравится вам сайт Apple или нет, но их специальные предложения невозможно не заметить.