Современный стиль в веб-дизайне

Оригинал статьи: http://www.webdesignfromscratch.com/current-style.cfm

Для начала я предлагаю посмотреть на дизайны следующих сайтов, которые считаются в нашими дни типичными модными дизайнами:

» Ash Web Studio


» Macaroon Design


» The Startup Business School


» The Alternative Energy Store


» Forecast Advisor


» iconbuffet.com


» Really Wild Flowers


» Save Longstone Edge


» iomega.com


» linkedin.com


» mozilla.org


» plaxo.com


» Prolotize

Что общего?

Что общего между этими сайтами?

• Простоя разметка
• Центральная ориентация
• Наполненность контентом
• 3D-эффекты иногда
• Мягкие, нейтральные цвета фона
• Контрастные цвета иногда
• Забавные иконки
• Много пустого пространства
• Большой шрифт
  

Давайте рассмотрим эти пункты более детально.

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

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

Центральная ориентация

Пару лет назад можно было найти "жидкие" разметки, выровненные влево. Сегодня же весь дизайн сремятся выровнять по центру.

Дизайны, выровненные влево, уже не пользуются той популярностью, как раньше.

Это же касается и "жидких" дизайнов, то есть занимающих всю ширину страницы. Считалось, что как можно больше информации долно поместиться на страницы без её прокручивания. И жидкие дизайны хорошо справлялись с этой задачей.

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

Наполненность контентом

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

Как это можно сделать?

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

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

Зачем выравнивать по центру?

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

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

Иногда до сих пор можно встретить жидкий дизайн, выровненный по центру (см. Alternative Energy Store). На таких сайтах просто выравнивание логотипа по центру даёт всё тоже ощущение дружественности. К тому же масса полезного контента показывается на странице без прокрутки.

3D эффекты

К ним относятся градиенты, полосатые фоны, закруглённые углы, выступающие иконки, тени вокруг элементов...

Отражение и переход к прозрачности очень распространены. Тени тоже, но должны использоваться с осторожностью.

Круглые звёзды:

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

Наиболее популярные фоны - белые или серые градиенты. В результате мы имеем нейтральную базу, на фоне которой яркие звёзды привлекают к себе внимание.

Контрастные цвета

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

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

Забавные иконки

Общее правило такое: никогда не используйте слишком много элементов, привлекающих внимание, на одной странице. Особенно, если у вас уже присутствуют контрастные цвета и 3D эффекты. Если переборщить, то впечатление от страницы будет противоположным желаемому: пользователь не разберётся с содержимым, разозлится и уйдёт.

Много пустого (белого) пространства

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

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

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

Большие шрифты

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

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

Дополнительные ссылки

• Design Melt Down - различные аспекты веб-дизайна в стиле web 2.0
• Andy Budd's list of "Well designed CSS sites" - Список хороших дизайнов, более 400
• CSS Blast
• Piepmatzel.de
• Web Creme
• Web Designers - Список на сайты различных веб-дизанейров мира