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

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

Итак, поехали!
_________

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

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

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

1. Высокая печать
Один из наименее ожидаемых приемов веб-дизайна – имитация высокой печати (letterpress) в типографском деле. В результате мы наблюдаем эффект аккуратных, «впресованных в бумагу» букв. Возможно, этот прием стал трендом по той простой причине, что до сих пор дизайнеры редко его использовали. А теперь, как говорится, открыли для себя заново…
Прием высокой печати используется на самых разных сайтах, самой разнообразной тематики. Чаще всего он встречается на ресурсах онлайн-сервисов.

2. Обогащенные пользовательские интерфейсы (Rich User Interfaces)
К счастью, пользовательские интерфейсы на современных веб-сайтах и веб-приложениях становятся все более красивыми и удобными. Вслед за углублением нашего опыта работы с веб-приложениями развиваются интерфейсы, которые становятся более богатыми на функции, вплотную приближаясь к обычным компьютерным программам.
Потребители настроены на динамическое взаимодействие с сайтом, которое разработчики обеспечивают с помощью технологий Flash и AJAX.
Также мы заметили, что многие сайты предлагают подсказки по работе с элементами интерфейса, помогают определить статус текущего взаимодействия с программой. Например, при клике на кнопку, она меняет свой внешний вид из обычного в «нажатое» состояние (см. пример на сайте www.quicksnapper.com).
Помимо этого, все больше сервисов могут быть изменены под вкусы и потребности пользователя (персонализированы). Это признак грядущего распространения адаптивных пользовательских интерфейсов.

3. Прозрачность в формате PNG
Этот прием не поддерживается все еще популярным броузером Internet Explorer 6. Однако он начал получать распространение уже на протяжении прошлого года. Заметно, что в своих решениях дизайнеры ориентируются на верстку печатных СМИ.
В большинстве случаев прозрачные изображения и плашки выделяются на фоне остальных элементов сайта. Их используют для оформления «шапки» сайта или объявлений. Впрочем, некоторые дизайнеры идут дальше.

4. ОГРОМНЫЙ шрифт
В прошлом году это был один из популярных приемов, его торжественное шествие продолжится и в 2009-м. Интернет-магазины, дизайн-студии, сайты-портфолио, онлайн-сервисы будут использовать огромные шрифты для выделения наиболее важных сообщений.
Размер букв часто превышает 36 пикселей, а владельцы сайтов нередко покупают дорогие шрифты (в России, обычно, шрифты не принято покупать – прим. пер.)
Помимо выбора шрифта, дизайнеры особое внимание уделяют интерлиньяжу (межстрочному интервалу) и высоте строки. В результате сайты выглядят симпатичнее, странички соблюдают единообразие стиля, в целом ресурс кажется более солидным и заслуживающем доверия.

5. Замена шрифта
Поскольку дизайнеры в целом все больше внимания уделяют типографике, они также более внимательно относятся к выбору шрифтов для проектирования веб-сайтов. Классические веб-шрифты, такие как Arial, Helvetica, Georgia и Verdana, по-прежнему будут доминировать. Однако уже сейчас можно наблюдать небольшое движение в сторону замены шрифтов (например, с помощью технологии sIFR).
Что интересно, профессиональные дизайнеры не используют оригинальные шрифты бездумно, невпопад, для того лишь, чтобы прослыть новаторами. В этом их отличие от любителей, которые способны повесить на своем сайте 15 трудночитаемых и плохо совместимых кракозябр. В каждом случае учитывается не только красота и согласованность дизайна, но также влияние шрифта на юзабилити и восприятие пользователей.

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

7. Медиа-блоки
С распространением высокоскоростного интернета многие сайты начали устанавливать на своих страничках специальные блоки для просмотра видео, фотографий, прослушивания музыки. Такие блоки позволяют прямо на сайте быстро и в удобном формате ознакомиться с нетекстовым контентом. Их часто используют новостные сайты, блоги, онлайн-версии ТВ-программ, интернет-магазины, видеохостинги.
Пожалуйста, не забывайте, что не все пользователи обладают скоростным соединением, и не у всех установлены Flash и JacaScript. Видео – лишь дополнительная опция, еще одна форма ознакомления с контентом сайта.

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

9. Карусель (демонстрация слайдов)
В карусели слайды идут друг за другом в горизонтальном или вертикальном направлении. Для прокрутки пользователь обычно кликает или просто нажимает на стрелки.
Карусель удобна тем, что пользователю необязательно бродить по разным разделам сайта в поисках контента. Достаточно начать прокрутку слайд-шоу. Результат: пользователь экономит время и концентрирует внимание на самом контенте, а не на особенностях навигации по сайту.
Карусель обычно используется на крупных развлекательных сайтах, больших блогах, сайтах-портфолио. Кстати, карусель применяется не только на сайтах, но и, например, в телефонах и плеерах Apple, а также на сервисе iTunes.

10. Блоки-вступления
Верхняя левая часть странички – самая важная на сайте, т.к. привлекает к себе наибольшее внимание. Следовательно, разумным будет расположить здесь наиболее значимое сообщение, которое посетитель прочитает, как только попадет на сайт.
Так и поступают почти все дизайнеры: название сайта, слоган, описание ресурса – все располагается здесь и выделяется заметным и привлекательным шрифтом для создания первого приятного впечатления.
Эти блоки-вступления иногда называют «шапкой», но их отличие в том, что они несут важную, содержательную информацию, в то время как «шапка» часто бывает красивой бессмысленной картинкой с логотипом. В моем блоге как раз не «шапка», а вступление. Обычно оно занимает всю ширину сайта при высоте 250-400 пикселей.
Обратите внимание, что вступительные блоки почти никогда не встречаются в интернет-магазинах и блогах (получается, мой исключение).