На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-дизайн

Стиль на веб-сайте

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

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

Основные элементы стиля сайта

Логотип
Модульная сетка
Шрифты
Цвета
Иллюстративный ряд (приемы обработки изображений)

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

Изначально общим сетевым принципом дизайна как такового был текстовый дизайн, разумеется, отличающийся от нынешнего как небо и земля. К сожалению (а может, к счастью) я уже не застал чисто клавишную работу в DOS. Эстетика шрифтового экрана там была весьма своеобразной. Шрифт был единым, и дизайнерские изыски исходили от работы с символами. Надо сказать, программисты умудрялись исполнять поистине оригинальные вещи, до сих пор поражающие воображение (нынешние смайлики родом оттуда же). Я до сих пор не понимаю, как им удавалось распечатать полутоновый портрет Джоконды на матричном принтере символами разной степени плотности.

, ,
(o,o)
/\ \///
^ ^

Изобретение GIFа как такового дало возможность сетевикам обмениваться картинками (ума не приложу, как они это делали на тогдашних 2400-модемах). Затем был HTML, а потом и прочее.

На данный момент можно определить как типы:

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

"полиграфический" дизайн - тот вариант, когда веб-страничка изо всех своих сил стремится имитировать печатное издание (особенно буклетные типы). Такой дизайн распространен на корпоративных сайтах, сайтах с рекламным уклоном, и там, где особо необходимо образно-эмоциональное наполнение основного содержания. Ставка делается на классические дизайнерские приемы по принципу - общий дизайн, а потом нарезать и собрать. Как правило, основное впечатление пользователь получает за счет пиксельной графики.

"интерфейсный" дизайн - сейчас его еще кличут usability. Стиль, призванный максимально облегчить жизнь пользователю во всех ее проявлениях: от загрузки странички (минимизирование кода и предельная оптимизация изображений) до особого, доведенного до религиозного поклонения, тщательного исполнения каждого элемента. В качестве примера можно привести сайт студии "Лакмус". Досконально продуманная (как правило) навигация, изначально доступная схема пользования сайтом, - такой подход к веб-дизайну вызывает только глубокое почтение и уважение. И даже если с точки зрения изобразительной эстетики на таком сайте окажется не все гладко, то и этот недостаток с лихвой окупится остальными достоинствами.

"динамический" дизайн - в примитивном варианте бегающие по экрану или просто шевелящиеся изображения (в основном - флеш, но сюда же можно отнести и DHTML, и какие-то штучки на Java и даже анимационный GIF). В хорошо продуманном сценарии это может быть целое произведение искусства, последовательно разорачивающее перед зрителем мысль автора или какой-то художественный образ. Интерфейсы на флешах часто поражают наше воображение в самом хорошем смысле этого слова.

"смешанные" типы - суть понятна и так. Обычно комбинация всех этих типов.

Логотип.

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

logo.gif (4834 bytes)

Второй пример - логотип сайта имени газеты "ВСЕМ! ВСЕМ! ВСЕМ!". Более навороченный логотип издательского дома, дополненный графическими элементами. По ходу развития сайта он трижды меняет свое дополнение, но основная его часть остается без изменений, что в общем-то и обеспечивает его узнаваемость. В какой-то мере реклама (а стили, логотипы и пр. - это все рекламные штучки) использует педагогический принцип: - "Повторение - мать учения!" © Ушинский (отец русской педагогики).

LOG3.gif (32533 bytes)

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

michael.gif (3451 bytes)

А вот так можно распорядиться изобразительным материалом и логотипом в рамках стиля

0109.jpg (6525 bytes)0117.jpg (7343 bytes)
пример афиши, книжной обложки.

или же просто визитной карточки. Можете сами убедиться, что при разной компоновке и даже цвете фона стиль выдержан.

viza.gif (5327 bytes)

Какими же качествами должен обладать логотип?

Индивидуальность. Ну это как раз понятно. Неинтересно, когда у вас "как у всех".

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

Logos.gif (3700 bytes)Mgicli.gif (1696 bytes)

Также можете проследить методику применения логотипов на сайтах известных фирм и агентств: Ford, Toyota, Sony, CNN, Microsoft... и многих других.

MrDeSign
Виктор Вязьминов

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100