Веб-дизайн прошёл пока ещё совсем небольшой жизненный путь. Как отрасль дизайна он вообще ещё очень молод. Да что там! Веб-дизайн молод даже по меркам человека (ему едва перевалило за 20). Но всё же, за этот короткий промежуток времени в нём сложились определенные традиции, случилось своего рода разделение на направления.

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

 

Что такое жанр и форма в принципе?

Форма художественного произведения определяет то, каким будет объем произведения и с помощью какой техники будет воплощаться мысль автора. Ведь можно одну и ту же идею подать и в форме стиха, и в форме рассказа, и в форме, скажем, эссе. Выбирая ту или иную форму, автор определяет и какие приёмы он будет использовать для изложения своей мысли, и какой объём ему понадобится, чтоб её выразить.

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

Обложки книг Иногда взгляд на обложку книги всё-таки полезен! Зная, какой жанр нам нравится, мы легко выберем среди этих трёх книг ту, которая нам будет интереснее.

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

 

Многие авторы любят говорить, что они работают вне жанров, что жанр — это вопрос вторичный и вообще, настоящий художник не должен себя ограничивать никакими рамками. Но в жанровой систематизации есть безусловная польза! Мне, например, нравится научная фантастика. Понимая это, я нахожу интересных мне авторов, таких как братья Стругацкие, Гарри Гаррисон, Рэй Бредбери, Фрэнк Герберт, Филип Дик, Станислав Лем или Айзек Азимов. И хотя каждый из этих авторов пишет в собственной, неповторимой манере, я знаю, что темы их произведений будут мне интересны. Потому что мне в принципе нравится, как люди представляют себе будущее, развитие технологий через столетия, как решают проблемы путешествий на расстояния сотен световых лет.

 

Какие бывают формы веб-дизайна

Хотя, как я уже говорил, единой системы определения формы и жанра в веб-дизайне нет (её просто никто и не думал централизованно систематизировать), мы можем вычленить характерные черты, и на их основе выстроить достаточно понятную и простую систему для определения формы и жанра.

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

Таким образом, в качестве формы можно выделить:

1. Презентационный сайт — как правило, небольшой ресурс, состоящий из 5-10 статических страниц или разделов. В 1990-е такие веб-сайты создавались просто на основе нескольких статических HTML-страниц. По мере развития разнообразных движков, такие сайты стали содержать помимо статических разделов («О компании», «Услуги и цены», «Контакты»), ещё и динамические разделы («Новости», «Фотогалерея»). Правда, довольно часто раздел новости на таком сайте содержит в себе только одну новость, в духе «Ура! У нас открылся сайт!». В большинстве случаев, цель такого проекта — предоставление общей информации о компании или человеке.

Примеры таких сайтов:

http://sukharevband.ru

http://nfcmobilekey.com

http://pgprix.com

 

2. Блог — это личный или коллективный онлайн-журнал, в котором человек или группа людей публикует материалы оговоренной направленности. Цель такого ресурса — освещение какой-либо темы и её обсуждение.

 

Примеры таких сайтов:

http://habrahabr.ru

http://spasiboeva.ru

 

3. Портал — это ресурс состоящий из 10 и более разделов, внутри которых подразумевается публикация разнообразных материалов на заданную тему. От презентационного сайта отличается в первую очередь масштабом (количество статей на сайте-портале достигает порой сотен тысяч), а также тем, что материалы на сайтах-порталах обновляются более регулярно. Цель портала — собирание материалов на заданную тему, формирование вокруг неё сообщества, регулярное её освещение. Именно в формате порталов как правило существуют, к примеру, новостные сайты.

 

Примеры таких сайтов:

http://david-lynch.info

http://kino-govno.com

http://lenta.ru

 

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

 

Примеры таких сайтов:

http://rozetka.ua

http://yakaboo.ua

http://petrovka.ua

 

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

 

Примеры таких сайтов:

http://vk.com

http://facebook.com

http://odnoklassniki.ru

 

6. Сервис — это особая категория веб-сайтов, они могут иметь самое разное назначение и вследствие этого — абсолютно индивидуальные черты. К сервисам можно отнести поисковые сайты, почтовые службы, различные стартап-проекты, скидочные сервисы и т.д. Цели у таких сайтов могут быть разными, но суть их сводится к предоставлению тех или иных услуг пользователю на платной или бесплатной основе.

http://interkassa.com

http://groupon.com

 

 

Какие бывают жанры веб-дизайна

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

1. Реклама — такие сайты разрабатываются из расчёта короткого срока жизни. Их задача — оставить по себе яркие впечатления. На таких сайтах часто можно услышать звуковое сопровождение. Они могут долго грузиться даже у тех, кто выходит в интернет через высокоскоростные каналы. А всё потому, что основной упор здесь делается на графическое оформление. Именно в рекламных сайтах до сих пор активно используют технологию Flash. Здесь мы, как правило, находим очень мало текстовой информации, и вообще, по сути своей эти сайты очень напоминают рекламный ролик.

Акционный сайт Miller
Акционный сайт компании Miller, посвященный теме Хэллоуина. Разработан студией Freeger.

 

2. Бизнес — такие сайты имеют куда более сдержанный вид, чем рекламные. Очень часто они выполняются в сдержанной манере. Оформление такого сайта выглядит довольно чопорно. Отдалённо они напоминают служащего в деловом костюме. И это не удивительно, ведь сайт компании демонстрирует самопозиционирование компании. Поэтому они и должны выглядеть серьёзными, деловыми, аккуратными.

Сайт компании Киевстар Сайт компании Киевстар. Разработан Студией Артемия Лебедева.

 

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

Сайт Dropbox Сайт сервиса Dropbox. В выноске показан характерный подход к оформлению кнопок.

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

4. Глянец — коль скоро существуют глянцевые журналы, неминуемо должны были возникнуть и «глянцевые» сайты. И хотя в случае веб-сайта термин «глянец» кажется совершенно некорректным (ведь само понятие происходит от характерных для глянцевых журналов материалов, которые используются для их изготовления), именно такое обозначение наилучшим образом демонстрирует их сходство с прародителями дизайн-трендов, используемых в «глянцевых» сайтах. Это и характерные фотографии, и особый подбор шрифтов. Чаще всего дизайнеры пытаются прибегать к такому жанру, когда разрабатывают сайт для звёзд или для моделей.

Сайт модели Маши Новоселовой Сайт модели Маши Новоселовой. Разработан Всеволодом Кузнецовым.

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

Сайт Бориса Акунина Сайт писателя Бориса Акунина. Стилизован под книжное издание. Разработан Студией Артемия Лебедева.

 

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

 

Что даёт определение формы и жанра для веб-дизайна?

Если с пользой от понимания формы и жанра литературного произведения всё более или менее понятно, то какова же польза от понимания формы и жанра веб-сайта? Самая что ни на есть практическая! Понимая, к какой форме и к какому жанру относится веб-сайт, который необходимо разработать (не важно, выступаете ли вы в роли клиента, или в роли исполнителя), вы гораздо лучше осознаёте и цель его создания, и объем работы, который предстоит выполнить.

Так, к примеру, если стоит задача разработать так называемый «сайт-визитку», то очевидно, что речь идёт о презентационном сайте, задаче довольно типовой. И к какому бы жанру она не относилась, объём работы будет сравнительно небольшой. Понимая это, можно и трезво оценить необходимый срок выполнения, и реальную стоимость работы.

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

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