Блог
Все записи

Дизайн сайта в стиле Web 2.0

04.03.2013

Несмотря на то, что четко определения термина Web 2.0 не существует, это словосочетание уже давно у всех на слуху. Так что же представляет собой этот стиль или чем он отличается от предшествующего, всем известного, стиля Web 1.0?

Немного истории

Само появление термина Web 2.0 обычно связывают с Тимом О'Рейли и его статьей «What is Web 2.0», которая была опубликована в журнале «Компьютерра» в 2005 году. В этом материале Тим О'Рейли связывает появление большого количества сайтов, сходных по определенным общим принципам, с общей тенденцией развития всего интернет сообщества. Именно эту связь, как явление, он и называет Web 2.0. И как у любого другого стиля, у Web 2.0 есть свои основные аспекты.

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

Второй аспект стиля Web 2.0 это довольно большое распространение такой концепции как Asynchronous JavaScript and XML, которая представляет собой определенный подход к построению интерфейсов для пользователей веб-приложений. Эта концепция, которую также называют Ajax, отличается тем, что страница может подгружать необходимые пользователю данные, полностью при этом не перезагружаясь. Использование Ajax при создании сайтов настолько типично, что саму концепцию Asynchronous JavaScript and XML часто считают синонимом Web 2.0.

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

Четвертый аспект подразумевает под собой использование тегов или меток. Метки — ключевые слова, необходимые для описания объекта. На сайтах они визуализируются довольно интересными с точки зрения дизайна решениями: образуется «облако тегов», в котором метки, используемые больше других, выделяются размером или цветом.

И последний, пятый аспект, это социализация интернет-проектов. Наверное, это и есть самый важный признак. Внешне дизайн в стиле Web 2.0 отличают, в первую очередь, яркость и интерактивность. Также отличительными особенностями можно назвать обилие информации и большую «длину» страницы, ведь иногда она достигает до четырех — пяти экранов. Именно все эти качества и присущи сайту, разработка которого берет в свою основу концепцию Web 2.0.

Разработка сайта в стиле Web 2.0

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

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

Естественно, создание дизайна сайта в стиле Web 2.0 не может обойтись без таких элементов, которые могут максимально увеличить привлекательность каждой странички ресурса. Это могут быть тени вокруг элементов, анимация кнопок и пунктов меню, уже упомянутые выше концепция Ajax и облако тегов и многое другое. Помимо различных дизайнерских элементов, некоторые из которых перечислены ниже, также используется обилие сервисной составляющей. В качестве примера можно привести вкладку «онлайн консультант», которая, несмотря на свою простоту, оказывает весьма существенное влияние на создание дизайна, ведь она не просто обращает на себя внимание, а еще и отсылает пользователя к определенному сервису. Важно, что многие элементы дизайна на этих сайтах становятся функциональными.

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

  • «Hичего лишнего». Простота — основной приоритет дизайна. Именно она концентрирует внимание пользователя, поэтому от декоративных элементов можно отказаться;
  • «Внимание в центр». Основной объем информации располагается в центральной части экрана;
  • «Не более трех колонок». Название говорит само за себя — разработчик должен укладываться в минимальное количество колонок, что бы не загромождать экран;
  • «По Сеньке и шапка». Этот прием представляет собой всего лишь отдельную горизонтальную секцию в верхней части страницы, которая отделена от всего остального контента. Далеко не новый прием, однако, в Web 2.0 без него просто не обойтись, он становится основным навигационным ориентиром сайта;
  • «Красный — стой, зеленый — иди». Цветовое разграничение различных функциональных зон, которое помогает посетителю сайта быстрее сориентироваться в содержимом ресурса;
  • «Простая навигация». С этим приемом все понятно без излишних пояснений — чем проще и яснее навигация на каждой странице, тем лучше;
  • «Четкий логотип и оригинальные иконки». Использование яркого, запоминающегося логотипа является весьма эффективным инструментом дизайна Web 2.0. Большое значение имеют и легкоузнаваемые иконки, подобранные для самых значительных элементов сайта;
  • «Пишем прописными». Для простоты восприятия информации пользователем на ресурсах Web 2.0 используется достаточно крупный размер шрифта;
  • «Крупнотекстовые вставки». Возможность использования заголовков и текстовых вставок довольно большого размера;
  • «Яркие цвета». Цвета, используемые на сайте должны быть светлыми и сочными. Такие оттенки позволят Вам обратить внимание посетителя на какие-то наиболее важные и значимые элементы страницы;
  • «3D-эффекты». 3D-эффекты используются для того, чтобы разнообразить простую пиксельную графику, выделив тенями, градиентами, отблесками и отражениями определенные элементы. Таким образом, интерфейс становится более приятным для восприятия;
  • «Вспышки-звездочки». Использование небольших ярлычков, выполненных в виде вспыхивающих звездочек, которые предназначены для того, что бы привлечь внимание посетителя сайта к определенной информации или к определенным разделам.
Заказать звонок
Введите ваш номер телефона и наши сотрудники свяжутся с вами в ближайшее время.