Как создать сайт в стиле Web 2.0?

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

Простота

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

Стиль web 2.0

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

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

Большие объекты

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

Крупный текст

На многих старых сайтах часто можно было увидеть текст в 10-12 px. В web 2.0 14 px — это практически минимум. Часто можно увидеть текст для чтения в 16-18 px. Однако тут очень внимательно нужно подходить к выбору размеров шрифта. Для чтения не рекомендуется ставить шрифт больше 14 px. Хотя, если вы будите делать промо-сайт или сайт визитку, где будет мало текста, а больше графики, то можете поставить размер и побольше. В этом случае лучше ориентироваться по ситуации и не придерживаться каких-то шаблонов и стандартов.

Простая навигация

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

Простая навигация на сайте

Простая структура сайта

Веб-дизайн таких сайтов, не будет содержать 5-10 блоков с информацией. Обычно весь сайт делится на три основных блока:

  • header — шапка сайта;
  • контент — информация для посетителей сайта;
  • footer — подвал (он обычно содержит контакты, дублированное меню и прочее).

Да, header может содержать как шапку, так и меню. Контент часто делится на два или три блока — это информация для чтения (статьи) и боковой блок меню. Однако структура многих сайтов в этом стиле идентична. Благодаря тому, что с каждым днем сайтов с такой структурой создается все больше, человеку становится намного легче ориентироваться на таких новых сайтах. Это очень удобно!

Логотип

Сейчас практически каждый сайт в стиле web 2.0 не обходится без логотипа. Это своего рода отличительная особенность от старых сайтов (на них практически не встречаются логотипы). Конечно, если не брать в счет крупные компании.

Яркие и сочные цвета

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

Градиенты

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

Мягкая подсветка

Очень часто для того, чтобы привлечь внимание посетителя сайта к какому-то объекту, в дизайне web 2.0 используют мягкую подсветку. Это не только привлекает внимание, но и делает дизайн сайта на много привлекательнее. Блоки без подсветки, на вид, кажутся менее приятны, чем блоки с подсветкой.

Тени и отраженияТени и отражения в веб-дизайне

Тени и отражения — это часто встречающиеся особенности дизайна сайта в таком стиле. Тень способна придать естественность и реалистичность. Если ее не будет, то объект будет казаться плоским или будет парить где-то в воздухе. Отражение придает как красоту, так и гламур различным объектам сайта. Оно используется не только для картинок, но и для всяких кнопок или меню. Не стоит злоупотреблять отражением, иначе информация будет восприниматься очень трудно. Все должно быть в меру!

Закругленные углы

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

Красивые иконки в web 2.0

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

Проработка мелочей

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

Это были 14 основных пунктов, по которым можно определить стиль web 2.0. Не нужно при разработке своего дизайна сайта впихивать все то, что я описал. Скорее всего, это будет смотреться некрасиво и даже убого. Всегда при разработке сайта, когда вы собираетесь создавать его в таком стиле, то обязательно задавайте себе простые вопросы:

  • сделает ли это данный сайт лучше?
  • станет ли комфортно и приятнее находиться на таком сайте, и пользоваться его услугами?

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

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

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

Комментарии 5

  • Спасибо, хороший обзор. А то встречал выражение: сайт в стиле web.2.0, а что это такое — непонятно. Интересно, откуда пошло такое название?

    • Название web 2.0 было придумано Тимом О’Рэйли в сентябре 2005 года. Под web 2.0 подразумеваются сайты с более развитым или развивающимся веб-дизайном и различными техническими возможностями. Это также продолжение web 1.0 — более старых и простеньких сайтов. Вообщем старые сайты, которые перешли на новый уровень своего развития и продолжают развиваться, получили название web 2.0

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

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

    • Наверное не плохо вставить пару картинок, но я думаю, что здесь и в тексте все и так понятно.

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку «Отправить», вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.