Ben Hunt, 7 марта 2007
В этой статье я постараюсь суммировать современное положение дел в веб
дизайне и выделить основные элементы, которые делают страницу более современной,
привлекательной и простой в использовании.
Я рад признать, что для веб дизайна 2006 год был лучшим за все время.
И не только потому, что было создано больше сайтов, а потому что было сделано
много интересного в этой области. Конечно, не обошлось и без ужасного. Просто
я думаю, что больше веб дизайнеров поняли, как нужно разрабатывать сайты, чем
когда-либо.
Примеры представленные ниже показывают отличную современную технику
графического дизайна. Они хорошо смотрятся, ясны и просты в использовании.
Примеры:
Я не утверждаю, что это лучшие сайты, просто это типичные современные сайты с хорошим дизайном.
Общие черты этих замечательных сайтов:
Простая разметка
Центральное расположение
Основа дизайна — содержание, а не страница
3D эффекты
Легкие, нейтральные цвета фона
Яркие цвета
Оригинальные иконки
Много пространства
Крупные шрифты
Рассмотрим эти элементы дизайна по отдельности.
Кажется, мы стали видеть больше простой 1 и 2 колоночной разметки, чем
в предыдущие годы.
Общее ощущение такое, что дизайнеры пришли к выводу, что простые страницы
лучше работают.
Эти страницы читаются просто сверху вниз, вам не нужно пропускать много
лишнего и искать глазами, то, что нужно. Это более спокойный и удобный способ
просмотра, чем раньше.
Другой момент, который бросается в глаза на всех сайтах представленных
выше то, что они расположены в центре окна браузера.
Пару лет назад вы могли найти множество примеров сайтов с резиновой версткой
или расположенных слева с фиксированной шириной, теперь содержание переместилось
к центру экрана.
Разметки с выравниванием по левому краю распространены гораздо меньше чем
когда-то.
Также резиновые разметки стали менее популярны.
Всегда считалось полезным показать как можно больше информации на обложке
(видимой на экране без скроллинга), резиновая разметка хорошо подходит для этой
цели.
Тем не менее, сегодня мы видим что наличие скроллинга не критично,
и сознательно идем на его использование получая много пространства и больший
междустрочный интервал.
Хорошие современные веб дизайнеры вкладывают меньше сил в разработку фоновых
элементов, а напротив фокусируются на оформлении содержимого сайта.
Это отражает принцип привлечения внимания пользователя к содержимому. (Этот
вопрос рассмотрен в статье Фила Бриска
Don’t
decorate communicate!
Он выражается в следующем:
Свободная менее сжатая разметка
Легкая, простая фурнитура
Яркие цвета и 3D эффекты используются, чтобы привлечь внимание к содержанию
и бренду.
Все направлено на то чтобы на сайте с лучшей стороны было показано
содержимое, а не дизайнер (что гораздо полезнее для дизайнера в долгосрочной
перспективе).
Какие выводы должны сделать дизайнеры из этой тенденции, то что недостаточно создать пустую страницу которая потом будет заполнена контентом. Как дизайнеры, мы коммуникаторы (не декораторы) и содержание сайта это главная часть вашего сообщения.
Мне нравится центральное выравнивание, и я буду использовать его в своих работах.
Когда контент находится в центре экрана, он выдвигается на передний план.
Также центральное выравнивание придает простоту и сбалансированность.
Чаще всего сайты с центральным выравнивание имеют фиксированную ширину
(заданную в процентах или пикселях), но иногда встречается и масштабируемые
(если размеры заданны в em). Одно из преимуществ ограниченной ширины страницы
(особенно масштабируемой, которая меняется вместе с размером шрифта) это то, что
длина строк не становиться слишком большой на мониторах с высоким разрешением
(очень длинные строки менее удобны при чтении).
Конечно и резиновая разметка, как показывает
Alternative Energy Store site,
имеет право на жизнь.
На этом сайте только центральное расположение логотипа придает дружелюбность
дизайну, ощущение первого плана, а резиновая разметка позволяет большому
количеству контента быть видимым на экране.
Каждый из приведенных примеров использует легкие градиенты, для придания
объема элементам сайта, или для придания ощущения пространства в фоне, или для
выделения иконок с помощью отражений и легких теней.
Отражения с «затуханием»очень распространены. Тени тоже используются,
но с осторожностью.
Часто используются закругленные вспышки.
Мягкий, нейтральный цвет фона
Все представленные сайты имеют простой фон, очень популярны градиенты белого
и серого. Это создает нейтральный и мягкий фон, на котором можно использовать
яркие цвета, чтобы привлечь внимание к содержанию.
Мягкий стильный фон замечательная база для размещения привлекающих внимание
элементов. Яркие цвета и контрасты идеально подходят, чтобы привлечь внимание
к наиболее важным частям страницы.
Iomega
использует более яркий цвет чем другие, с помощью него выделяется темно красная
рекламная зона. Конечно, это не затеняет остальную часть страницы, потому что
цвет последовательный и простой.
Главная тема здесь: Не использовать слишком много отвлекающих элементов
на странице (которые притягивают взгляд и отвлекают пользователя от содержания
сайта).
Яркие, привлекательные иконки с 3D эффектами могут придать сайту некоторый
блеск, произвести впечатление высокого качества дизайна. Но используемые слишком
часто, они дают обратный эффект, засоряют страницу и запутывают
пользователя.
Вашим глазам нужно пространство (guttering на типографском языке) разделяющее
материал чтобы помочь вам ясно и четко отделять объекты.
В идеале, чем больше пространства, тем лучше. Очень редко бывает, что
я смотрю на страницу и думаю: «Боже, им очень нужно немного сжать страницу!»
Конечно, пространство не обязательно должно быть белым. Но оно должно быть
пространством.
Приятно видеть, как много дизайнеров используют широкие границы, чтобы
разделить элементы, и большую высоту строк, чтобы упростить чтение с экрана.
Посмотрите на это прекрасное освежающее пространство!
Я не говорю, что весь текст на вашей странице должен быть огромным. Факт
в том, что в некоторых случаях мелкий текст замечательно подходит (если размер
символов текста чуть меньше, то может казаться что текста больше).
Но дизайн лучших сайтов показывает что:
Наиболее важный текст на странице должен быть больше чем нормальный текст
Как и в случае любой другой техники в дизайне, эта работает только если
используется с умом. Если весь ваш текст крупный то у вас нет крупного
текста.
Используйте крупный текст чтобы показать вашим посетителям о чем ваша
страница, это очень важно, потому что в поисках того что ему нужно пользователь
не задержится на странице если сразу не увидит о чем она.
