Статьи / Веб-Дизайн / С чем едят web 2.0

  2008-11-03 20:59

Всё больше набирает обороты и становиться популярной тема WEB 2.0 или «веб второго поколения». В Интернете всё чаще появляются сервисы и технологии, которые относятся к web 2.0. Что же такого грандиозного и полезного содержит это самое веяние и что полезного нам может принести web 2.0?


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

Рассмотрим некоторые моменты, применимые к web 2.0:
Простота
Центральное выравнивание
Небольшое количество колонок
Отдельная шапка
Выделение областей цветом
Простая навигация
Четкие логотипы
Крупный текст
Яркие цвета
3D Эффекты
Градиенты
Отражения
Оригинальные иконки
Вспышки звездочки

Теперь рассмотрим всё подробнее:

Простота
Пожалуй одно из самых важных отличий web 2.0 от «доисторического» течения. Используйте в дизайне столько элементов, сколько будет необходимо для достижения цели сайта: звонок в фирму, заказ товара, получение определенной информации пользователем.

Помните, что сам дизайн в стиле 2.0 простой и чистый, я не говорю о минимализме, я говорю о максимальном удобстве для пользователя и простоте! Принцип, который всегда использует разработчик сервиса в стиле web 2.0: если у проблемы есть несколько решений, выбирается самое простое, оно и будет лучшим.
Вот несколько примеров. В данных дизайнах нет лишних эллиментов. Они могли быть, но стало ли лучше от этого? Сомневаюсь…

Как сделать сайт проще?
Удалять все необязательные компоненты на страницах
Изменять и упрощать решения, чтобы достичь цели более простым путем

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



Это не значит, что на сайте не должно быть красивой графики и вообще красоты в дизайне, скорее наоборот. Сделать сайт простым, значит использовать столько графики, сколько необходимо и не переборщить.

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

Стиль web 2.0 простой и чёткий, а сайты, размещённые по центру окна создают именно такое впечатление.




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

Небольшое количество колонок
Совсем недавно сайты с тремя колонками были нормой, не редкостью были и проекты, использующие четыре колонки. Сегодня наиболее распространены сайты использующие 2 колонки, а три колонки стали уже максимумом. Сейчас раздерём чем это плохо и что «советует» web 2.0…

Меньше колонок - проще дизайн сайта, а это значит и информацию до пользователя донести проще;
Если мы не пытаемся заполнить экран максимально возможным количеством информации, которая станет полезна пользователю, нам и не нужно много колонок. Сайты с центральным выравниваем тому подтвержение.

Когда это правило следует отменять?
Как и любом правиле, всегда есть исключения, где более трех колонок в стиле web 2.0 используются очень удачно:




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

Обратите внимание, как четко выделяются шапки на этих 6 примерах.

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

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



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

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

Выделение областей цветом
Рассматривая примеры раздела о шапке сайта, вы могли заметить, что многие сайты используют цвет, чтобы обозначить свои функциональные зоны, такие как:
Навигация
Фон
Основной контент
Ссылки
Прочий материал


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

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

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

Чтобы сохранить навигацию простой и понятной, нужно:
Разместить постоянную навигацию отдельно от остального контента;
Выделить навигацию, используя цвет, тон или форму;
Сделать элементы навигации крупными и четкими;
Использовать понятные надписи, чтобы сделать назначение каждой ссылки очевидным и однозначным.


Как сохранить вашу навигацию простой
1. Запомните ключевой принцип: навигация должна четко отличаться от не навигации.
2. Следуйте вышеуказанным правилам относительно позиции, цвета и ясности.
3. Дополнительно рекомендую прочесть мою статью о навигации.
4. Ссылки должны выделятся на фоне текста, в котором они находятся.


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



Крупный текст
Масса сайтов в стиле 2.0 используют крупные шрифты, похожие на те, что были в сайтах старого стиля.

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

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



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

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

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

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

К тому же нужна причина, чтобы сделать какой-то текст крупнее остального, он должен быть осмысленным и полезным. Не нужно добавлять крупный текст только потому, что это в стиле Web 2.0.

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

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

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



3d эффекты
Большинство сайтов в стиле Web 2.0 используют легкие 3d эффекты, чтобы придать дизайну более качественный вид. Тени, градиенты и различные отражения помогут сделать интерфейс сайта более законченным и привлекательным.





Как использовать 3d эффекты
Золотое правило здесь использовать их с осторожностью и не переборщить.

Не пытайтесь сделать дизайн полностью трехмерным, потому что:
Это потребует много сил, средств и времени на разработку сайта;
Увеличит значительно размер страницы;
3D эффекты привлекают внимание пользователей.

Градиенты
В Web 2.0 дизайне больше градиентов, чем склонов в Альпах.
Почему градиенты столь полезны



Градиенты смягчают области, которым иначе пришлось бы сделать однотонным

Отражения и другие эффекты
Иллюзия отражения одно из наиболее распространенных применений градиентов, наиболее распространены 2 типа отражений:
Блики созданные отражением света на полированных поверхностях
Эффект полированного стола
Блики

Реалистичные эффекты в виде капель воды, стеклянных и пластиковых кнопок, очень популярны в последние пару лет.

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

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

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

Некоторые примеры различных стилей для иконок, которые будут красиво смотреться на Вашем сайте:





Вспышки и звездочки
Ярлыки и звёздочки, которые приклеены к странице, чтобы привлечь внимание посетителя к чему-либо важному. Чаще всего они используются для ценников со скидками.