Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн


Дизайн Форум


Про дизайн и web дизайн




Главная     Галереи Дизайна (29)




  Статьи о дизайне





  Галереи дизайна

Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.

  Помощь Дизайнеру!

Советы по дизайну. Философия, психология и трудовые будни дизайнера.



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





Что такое стиль?

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

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

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

  1. Логотип

  2. Модульная сетка

  3. Шрифты

  4. Цвета

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

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

Типы web дизайна

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

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

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

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

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

Логотип

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



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



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



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


пример афиши, книжной обложки

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



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

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

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



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

Виктор Вязьминов (MrDeSign) 1999 г.

Другие статьи Виктора Вязьминова о дизайне, цвете и композиции:
Стиль на веб сайте
Создание логотипов
Физиологические основы восприятия


Читайте также:
Основные стили в дизайне
Стиль web 2.0









  Rambler's Top100  


Web дизайн и создание сайтов       Пользовательское соглашение

Карта сайта      Наверх