В этой статье оглашается современное положение дел в веб дизайне,
и выделяются основные элементы, которые делают страницу более
современной, привлекательной и простой в использовании. В 2006
год веб дизайн был лучшим за все время. И не только потому, что
было создано больше сайтов, а потому что было сделано много
интересного в этой области. Конечно, не обошлось и без ужасного.
Но веб дизайнеры поняли, как нужно разрабатывать сайты, лучше чем
когда-либо, используя дизайн web 2.0. Примеры
представленные ниже показывают отличную современную технику
графического дизайна. Они хорошо смотрятся, ясны и просты в
использовании.

Примеры:

web 2.0 designe web 2.0 designe web 2.0 designeweb 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe web 2.0 designe Я не утверждаю, что это лучшие сайты,
просто это типичные современные сайты с хорошим дизайном.

Общие черты:

Общие черты этих замечательных сайтов:

  • Простая разметка
  • Центральное расположение
  • Основа дизайна — содержание, а не страница
  • 3D эффекты
  • Легкие, нейтральные цвета фона
  • Яркие цвета
  • Оригинальные иконки
  • Много пространства
  • Крупные шрифты

Рассмотрим эти элементы дизайна web 2.0 по отдельности.

Простая разметка:

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

Центральное расположение:

Другой момент, который бросается в глаза на всех сайтах
представленных выше то, что они расположены в центре окна
браузера. Пару лет назад вы могли найти множество примеров сайтов
с резиновой версткой или расположенных слева с фиксированной
шириной, теперь содержание переместилось к центру экрана.
web 2.0 designe
Разметки с выравниванием по левому краю распространены гораздо
меньше чем когда-то. Также резиновые разметки стали менее
популярны. Всегда считалось полезным показать как можно больше
информации «на обложке» (видимой на экране без скроллинга),
резиновая разметка хорошо подходит для этой цели. Тем не менее,
сегодня мы видим что наличие скроллинга не критично, и
сознательно идем на его использование получая много пространства
и больший междустрочный интервал.

Основа дизайна — содержание, а не страница:

Хорошие современные веб дизайнеры вкладывают меньше сил в
разработку фоновых элементов, а напротив фокусируются на
оформлении содержимого сайта. Это отражает принцип привлечения
внимания пользователя к содержимому. (Этот вопрос рассмотрен в
статье Фила Бриска
Don’t decorate communicate
!)

Он выражается в следующем:

  • Свободная менее сжатая разметка
  • Легкая, простая «фурнитура»
  • Яркие цвета и 3D эффекты используются, чтобы привлечь
    внимание к содержанию и бренду.
  • Все направлено на то чтобы на сайте с лучшей стороны было
    показано содержимое, а не дизайнер (что гораздо полезнее для
    дизайнера в долгосрочной перспективе).

Выводы:

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

  1. Мне нравится центральное выравнивание, и я буду использовать
    его в своих работах.
  2. Когда контент находится в центре экрана, он выдвигается на
    передний план.
  3. Также центральное выравнивание придает простоту и
    сбалансированность.

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

3D эффекты:

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

Мягкий, нейтральный цвет фона:

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

Яркие цвета:

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

Оригинальные иконки:

Главная тема здесь: Не использовать слишком много отвлекающих
элементов на странице (которые притягивают взгляд и отвлекают
пользователя от содержания сайта). Яркие, привлекательные иконки
с 3D эффектами могут придать сайту некоторый блеск, произвести
впечатление высокого качества дизайна. Но используемые слишком
часто, они дают обратный эффект, засоряют страницу и запутывают
пользователя. web 2.0 designe

Много пространства:

Вашим глазам нужно пространство (guttering на типографском языке)
разделяющее материал чтобы помочь вам ясно и четко отделять
объекты. В идеале, чем больше пространства, тем лучше. Очень
редко бывает, что я смотрю на страницу и думаю: «Боже, им очень
нужно немного сжать страницу!». Конечно, пространство не
обязательно должно быть белым. Но оно должно быть
пространством.Приятно видеть, как много дизайнеров используют
широкие границы, чтобы разделить элементы, и большую высоту
строк, чтобы упростить чтение с экрана. Посмотрите на это
прекрасное освежающее пространство! web 2.0 designe

Крупные шрифты:

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

Наиболее важный текст на странице должен быть больше чем
нормальный текст

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

Ссылки:

Здесь представлены ссылки на коллекции сайтов, которые могут быть
красивы, совместимы, эффективны или все вместе. Смотрите, но
создавайте свой стиль дизайна. Design Melt Down — хорошо
рассмотрены все аспекты веб дизайна с уклоном на стиль Web 2.0
CSS Beauty
gallery
— Красивая и простая в использовании коллекция
качественных ссылок CSS
Thesis
— замечательная коллекция сайтов Stylegala — Сообщество
дизайнеров, обсуждение веб стиля, хорошо отобранные и
профессиональные комментарии.
Andy Budd’s list of «Well designed CSS sites
— Более 400
сайтов! Почувствуйте себя чайником… CSS Blast — Русский сайт CSS Drive — ссылки разобранные по
категориям chobi.net
Японский сайт Piepmatzel.de
Масса сайтов, есть из чего выбрать. Web Designers — список личных
страниц веб дизайнеров по всему миру. Оригинальный
текст статьи
.