Сейчас уже, наверное, ни у кого нет сомнений, что в сети утвердился новый стиль оформления сайтов. Это стиль оформления Web2.0 ресурсов: блогов, социальных сетей, различных on-line сервисов и приложений. Случается, что если заказчик "продвинут", он так и говорит: - Мне нужен Web2.0 дизайн. Что касается технической стороны Web2.0, с этим вроде все понятно: верстка дивами, оформление всё в CSS'aх, и побольше AJAX'а. А вот по дизайну в стиле Web2.0 я уже давно рыскаю в поисках каких-либо толковых обзоров или свода правил. На днях нашел очень приличную статью по этой теме. Кто читает на английском -
здесь оригинал, а кому не охота сидеть со словарем - ниже мой перевод...
Одну из весьма распространенных тенденций Web2.0 дизайна и верстки я называю: "Чистота и Горизонтальная разбивка" сильно, да :)? Вот к примеру один из Web2.0 ресурсов, который позволяет автоматически организовывать и отслеживать ваши покупки:
Если вы внимательно посмотрите на приведенный скриншот, то вы сможете понять, что я имею ввиду когда говорю "Горизонтальная разбивка". Вы видите, что сайт состоит из несколько сегментов, которые отделены друг от друга цветом и расположением. Каждый сегмент направлен на достижение определенной цели. Можно заметить, что при движении по странице сверху вниз количество "реальной" информации увеличивается, а количество "маркетинговой" информации, наоборот - уменьшается. То есть маркетинговая часть сайта располагается вверху страницы, а функциональная-информационная часть снизу.
Прежде чем мы начнем подробно рассматривать каждый элемент этой тенденции, вот еще несколько сайтов для ее иллюстрации:
Думаю этого вполне достаточно :).
Верхний сегмент/Лого
Посмотрите еще раз на вышеприведенные скриншоты, вы видите, что верхний сегмент и лого у большинства сайтов оформлены достаточно единообразно. Самая верхняя часть сайта обычно выполнена наиболее темным цветом и содержит логотип и очень простой текст, дополняющий название ресурса.
Логотипы могут быть конечно украшены несколькими фишками, но ничего чрезмерного.
В верхнем сегменте логтип - это основное, количество других элементов здесь максимально уменьшено. Топ выглядит чисто и свежо, здесь пользователя не перегружают информацией и навигационными ссылками.
Другие сегменты
Второй сегмент (расположен сразу под топом) обычно выполнен самой большой типографикой. Он содержит несколько броских фраз и (или) "точку продажи" этого сайта (кнопки-ссылки: sing up, downloads и т.п.).
Третий и четвертый сегменты обычно более детально объясняют функции сайта, содержат скриншоты программ, фотографии вещей продаваемых на сайте, список особенностей того или иного продукта. Эти сегменты также содержат точки входа в какие-либо сервисы ресурса.
Цвета
ChurchPlantMedia.com
Corkingdesign.co.uk
Tubatomic.com/revolver/
Shoeboxed.com
Yikesite.com
Цветовые схемы Web2.0 достаточно разнообразны. Градиенты используются достаточно широко, но тонко. Часто используются монотонные темно и светло голубые тона, со всплесками ярких цветов, которыми выполнены иконки и кнопки сайта.
Иконки/Вектор/Персонажи
В Web2.0 дизайне большое значение играют графические элементы. Они во многом определяют то чувство и общее впечатление, которое вызывает у пользователя все оформление в целом.
Графические элементы как правило представлены мультяшными иллюстрациями (cartoons) и яркими броским иконками.
Векторные мультяшные персонажи визуально обращаются к пользователю, они дополняют и расширяют брендинг сайта. Персонажи заставляют почувствовать, что сайт очень удобен и прост в использовании.
Иконки и значки в Web2.0 дизайне играют роль вспышек цвета. Они также могут акцентировать внимание к маркетинговым аспектам продукта/приложения/сервиса.
Навигация
Важной особенностью Web2.0 является простота, эффективность и чистота. Ключом к ощущению чистоты является простая навигация. Посмотрите еще раз на главные страницы тех примеров которые я привел: панели навигаций состоят максимум из семи пунктов. На некоторых сайтах есть всего только три навигационные ссылки: Home, Login, Sign up.
Итак, мы получили достаточно полный анализ таких тенденций оформления Web2.0 ресурсов, как Чистота, Красочность и Горизонтальная разбивка. Я надеюсь, что этот обзор пригодится вам при оформлении Web2.0 сайтов. В будущем я надеюсь сделать обзор других тенденций Web2.0 дизайна.
