Простота вебдванольности

Давным давно в далекой галактике… А точнее в 2005 году один чувак под именем Тим О’Рейли мягко говоря ввел )), в словарный запас веб веб-разработчиков, новый термин WEB 2.0.

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

Попробуем с вами рассмотреть основные приемы дизайнеров используемый при создани современных сайтов в стиле web 2.0

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

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

3. Многоколоночность (о как сказал 🙂 ) — это не для нас. Пару лет назад люди умудрялись делать сайты и в четыре, и пять, и даже шесть колонок в ширину — это был просто зрительный шок, а особенно когда в них еще гора текста и разделено цветом. Теперь же предельно допустимый максимум это три. Причем все тенденции ведут к уменьшению, и задаче уложится в как можно меньшее количество колонок. Не забивая экран во всю ширину, и оставляя свободные зоны, для отдыха можно сказать.

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

5. Цветоразделение (опять че то новое придумал 🙂 ) — цветонавигация, проще говоря разделение цветом, сайта на функциональные зоны. Упрощая тем самым его использование за счет выделение цветом отдельных блоков, то есть контента, навигации, блоков ссылок и другого материала.
И пользователь, переходя по страницам, уже знает точно где находится тот или иной элемент, и определяя по цвету, а не вчитываясь, переходит сразу же на нужный ему функциональный блок.
Использование так же ярких и мягких цветов, таких как зеленый, светло розовый, голубой, мягкие оттенки желтого/оранжевого позволяют обратить внимание пользователя на важные элементы страницы.

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

7. Логотип и иконки — куда же в web 2.0 без логотипа. Логотип теперь стал основным элементом вебдванольного дизайна. Потому что красивый и яркий логотип, на фоне минималистичности и простоты, смотрится очень хорошо и эффектно, а так же способствует узнаваемости и запоминаемости сайта (или бренда).
Иконки являются серьезным подспорьем в навигации современных сайтов. Яркая картинка легкоузнаваемого предмета позволяет легче сориентироваться на сайте, находя необходимый раздел по изображению на иконке, которая так же является заметной при минимализме. Что так же улучшает удобство использования сайта юзером.

8. Шрифты — На вебдванольных сайтах как вы наверное замечали. стараются использовать крупные шрифты. А все потому что мелкий шрифт воспринимать сложнее, а еще он напрягает при быстром прокручивании или на LCD мониторе при ярком падающем на него свете.
А использование крупнотекстовых вставок в заголовках и других элементах позволяет легче завладеть вниманием пользователя, даже при беглом просмотре страницы.
А возможность их использовать, появилась как раз после того, как мы минимализировали дизайн и убрали всякие ненужные декоративные элементы, освободив тем самым место.

9. Придание псевдообъемности/псевдореалистичности — так как вебдванольные сайты используют мало графики. Дизайнеры стали использовать легкие тени, градиенты, блики, отражения, пиксельную графику. Что сразу же стало одним из трендов в веб 2.0 . Такие эффекты придают странице реалистичность, делают ее более приятной для восприятия, и при этом выглядят красиво. Все сразу же вспомнили тени типо от листочков бумаги, отражения логотипов, градиенты блоков.

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

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

Надеюсь я вам помог, снова вспомнить или узнать, что такое дизайн в стиле web 2.0. Ибо он сейчас очень модный и надо обязательно его использовать.

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

Сейчас в интернете можно найти много вебдванольных и дизайнов и сервисов, ярким примером кстати является Twitter. Некоторая часть таких сервисов и сайтов кстати собрана в блоге «Вебдванольные Заметки«, так что можете в принципе сходить туда глянуть, а я прощаюсь с вами и до новых встречь друзья )))