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

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

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

Примеры

Ash Web Studio Macaroon Design Startup Business School Alternative Energy Store Forecast Advisor Icon Buffet Really Wild Flowerw Save Longstone Edge Iomega LinkedIn Mozilla Plaxo Tony Yoo's Prolotize

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

Общие черты

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

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

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

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

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

Общее ощущение такое, что дизайнеры пришли к выводу, что простые страницы лучше работают.

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

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

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

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

Диаграмма иллюстрирующая страницы выровненные по левому краю, резиновые и центрированные

Разметки с выравниванием по левому краю распространены гораздо меньше чем когда-то.

Также резиновые разметки стали менее популярны.

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

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

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

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

Это отражает принцип привлечения внимания пользователя к содержимому. (Этот вопрос рассмотрен в статье Фила Бриска Don’t decorate communicate!)

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

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

Выводы

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

Почему центральное выравнивание разметки

Мне нравится центральное выравнивание, и я буду использовать его в своих работах.

Когда контент находится в центре экрана, он выдвигается на передний план.

Также центральное выравнивание придает простоту и сбалансированность.

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

Конечно и резиновая разметка, как показывает Alternative Energy Store site, имеет право на жизнь.

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

3D эффекты

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

Отражения с «затуханием» очень распространены. Тени тоже используются, но с осторожностью.

Отражение с Iomega.com Отражение с wishingline.com Градиент с 31Three.com
Отражение с sirruf.com Тень с squarespace.com Тень с Iconbuffet.com

Часто используются закругленные вспышки.

Вспышка с emaginacion Вспышка с 31three Вспышка с www.folieto.at
Вспышка с www.bmf.jugem.cc Вспышка с sirruf.com Вспышка с stylegala

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

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

Яркие цвета

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

Яркая и контрастная цветовая схема с Iomega.com Яркая и контрастная цветовая схема с 31Three.com Яркая и контрастная цветовая схема с LinkedIn.com
Яркая и контрастная цветовая схема с Patrickhaney.com Яркая и контрастная цветовая схема с Stonewall.co.za Яркая и контрастная цветовая схема с Iconbuffet.com

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

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

Главная тема здесь: Не использовать слишком много отвлекающих элементов на странице (которые притягивают взгляд и отвлекают пользователя от содержания сайта).

Яркие, привлекательные иконки с 3D эффектами могут придать сайту некоторый блеск, произвести впечатление высокого качества дизайна. Но используемые слишком часто, они дают обратный эффект, засоряют страницу и запутывают пользователя.

Иконка с Patrickhaney.com Иконка с Patrickhaney.com Иконка с Iconbuffet.com
Иконка с Plaxo.com Иконка с 31Three.com Иконка с Avalonstar.com

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

Вашим глазам нужно пространство (guttering на типографском языке) разделяющее материал чтобы помочь вам ясно и четко отделять объекты.

В идеале, чем больше пространства, тем лучше. Очень редко бывает, что я смотрю на страницу и думаю: «Боже, им очень нужно немного сжать страницу!»

Конечно, пространство не обязательно должно быть белым. Но оно должно быть пространством.

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

Посмотрите на это прекрасное освежающее пространство!

Пространство на LinkedIn Пространство на Mozilla Пространство на Plaxo

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

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

Но дизайн лучших сайтов показывает что:

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

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

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

Ссылки

Здесь представлены ссылки на коллекции сайтов, которые могут быть красивы, совместимы, эффективны или все вместе. Смотрите, но создавайте свой стиль дизайна.

  • Jonathan Nicol picks up the theme… Read this next
  • 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 Creme
  • Web Designers — список личных страниц веб дизайнеров по всему миру.

Статьи по этой теме

Похожие статьи