Блог студии 77

Отличие современного сайта от сайтов 90-х

5 июля 2011

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

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

…—2000 гг.

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

  • фреймы. Если ты не разделил свой сайт на 3 фрейма, которые отвратительно смотрятся на мониторе с разрешением 800?600 – ты не постарался. Вспоминается случай с университетской олимпиады по веб-программированию, где добавляли дополнительные баллы за использование фреймов;
  • анимированные картинки, например, в виде прыгающего зайчика в шапке сайта серьезной компании;
  • выделение заголовков и «важных» отрывков текста цветом. Здесь важно, чтобы каждый заголовок имел свой цвет, по крайней мере, пока не закончатся цвета радуги. В особых случаях цвета поочередно назначались каждой букве заголовка;
  • обычным делом была надпись «Добро пожаловать на сайт!» или «Заходите к нам почаще!»;
  • характерные элементы сайта деловой тематики – иллюстрации рукопожатия или глобуса;
  • мерцающий текст. Браузер Internet Explorer изначально отказался от поддержки тега blink. Тем не менее, пользователи другого популярного браузера Netscape Navigator вовсю наслаждались мерцанием заголовков и, зачастую, всего текста;
  • «бегущая строка» – сама по себе весьма раздражающий элемент, а если в ней еще и важная ссылка, за которой приходится гнаться – раздражение достигает апогея;
  • фон, состоящий из повторяющегося цветастого узора;
  • на видном месте каждого уважающего себя сайта обязательно размещались приглашения «добавить сайт в избранное» или «сделать стартовой страницей».
Сайт с использованием фреймов
Иллюстрация с рукопожатием

2000—2004 гг.

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

Очень популярно четкое разделение элементов страницы – блок шапки сайта, блок меню, блок рекламы, информация и «подвал» с копирайтом.

Из-за медленного модемного доступа в интернет по-прежнему очень важным качественным критерием сайта является скорость его загрузки. Сейчас при создании сайта стараются учесть его правильное отображение iPad’ом в горизонтальном и вертикальном положениях. А раньше разработчики волновались, чтобы сайт корректно смотрелся в браузерах как с включенными, так и с отключенными картинками. Также было не принято брезговать картинками очень плохого качества, такое качество было нормой даже в основных элементах дизайна.

Иллюстрация плохого качества

2005—2008 гг.

Появляется понятие «веб 2.0». Функционально оно подразумевает возможность взаимодействия с посетителями путем предоставления им доступа к публикации материалов (форумы, блоги, добавление комментариев и статей). Ярким примером является «Википедия» – огромная многоязычная веб-энциклопедия, контент которой создан силами веб-сообщества разных стран.

Стали популярны такие понятия как AJAX, «теги» и captcha. Визуально для веб 2.0 свойственно использование эффектов «мокрый пол» и характерных глянцевых кнопок и градиентов. Количество иллюстраций в дизайне сведено к минимуму – это логотип, большие кнопки RSS и подписки на новости.

Повальный интерес к такому стилю оформления довольно быстро перевел его в статус набивших оскомину шаблонов.

Дизайн Web 2.0

2008—2009 гг.

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

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

Карамельные иллюстрации

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

2010—...

В современных разработках большой упор делается на удобство использования (юзабилити) сайта. Пересматривается подход к уже привычным элементам.

Форма регистрации на сайте

Дизайн – это не только красивое меню и «шапка». Не менее важно качественное иллюстрирование материалов, их полнота и наглядность. В иллюстрациях, помимо «карамельности», ценится высокая четкость и детализация. Очень большое влияние на дизайн и функционал сейчас оказывают мобильные устройства. Появилось много новых стандартов, под которые разработчикам приходится оптимизировать свои проекты. Веб два-нольные кнопочки сменились на эппловские с закругленными краями, а Rss-подписка уступила кнопкам социальных сетей.

Помимо активного развития текущих тенденций уже в самом ближайшем будущем планируется повальный переход на свежие технологии HTML5 и CSS3, что наверняка приведет к новым веяниям в области сайтостроения. Ждем, готовимся! ;)

Отличие современного сайта от сайтов 90-х

Другие статьи автора: