3.1 Правила Web-дизайна

 

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

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

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

 

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

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

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

Логотип  
Шрифты  
Цвета

Иллюстративный  ряд (приемы обработки  изображений)

 

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

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

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

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

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

     5. «смешанные» типы - обычно комбинация всех этих типов.

3.3 Цветовые ассоциативные и эмоциональные модели

 

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

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

«Пастельные»- нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие... 

«Природные»- близкие к естественным органическим, природным компонентам...

 

Как вариант  использования цвета - «растяжки»- обычно тональные оттенки одного цвета, и как акцент - более активный цвет.

3.4 Браузеры

 

     Многие Web-дизайнеры сходятся во мнении, что  одна из главных проблем Web-дизайна  – многообразие браузеров и платформ, каждая из которых по-разному поддерживает HTML. С выпуском каждого нового браузера улучшаются их характеристики и возможности, но это не означает, что более ранние версии при этом исчезают. В большинстве своем люди не склонны гнаться за новейшим и лучшим. Одни довольствуются тем, что у них имеется, а другие, вероятнее всего, работают на компьютерах фирм или учреждений, которые выбрали браузеры за них.

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

     В Web-дизайне нет жестких правил. Поскольку главная задача – сделать  содержимое страницы доступным для  максимального количества пользователей, то для продвижения вперед одинаково важны и эксперимент, и использование новых технологий с учетом существующих реалий. Залог успеха дизайнерского решения лежит в понимании потребностей аудитории и в четком представлении, как сайт будет использован.

     Браузеры  Netscape Navigator и Microsoft Internet Explorer. На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer.

     Эти два браузера конкурируют между  собой за господство на рынке. Результатом  их борьбы стала коллекция фирменных HTML-тегов. Конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web.

     Большинство Web-авторов в своей работе ориентируются  на Navigator и Internet Explorer, поскольку они  занимают львиную долю рынка. Тем  не менее, существует ряд других браузеров, которые вы можете принимать во внимание.

     В версии Internet Explorer 4.0 для компьютеров Macintosh отсутствует значительная часть  функциональных возможностей версии, созданной для Windows, поэтому использование  ряда особых возможностей версии 4.0 может исключить из игры некоторых пользователей.

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

     Opera. Opera – это маленький и простенький браузер, созданный норвежской компанией Opera Software в Осло. Этот браузер обладает исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML. Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera поддерживает Java и каскадные таблицы стилей.

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

       Mozilla Firefox. Быстро работающий браузер. Позволяет просматривать все веб-страницы в одном многовкладочном окне, а также обладает множеством других полезных опций, включая способность значительного расширения возможностей подключением плагинов⁹. Сейчас количество пользователей выбирающих этот браузер стремительно растет. 

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

 

     4. Инструменты для создания сайта.

 

     Программного  обеспечения для создания сайта  на данный момент огромное множество. Рассмотреть весь софт в реферате физически невозможно, поэтому проанализируем те программы, которыми пользуюсь на практике я сам.¹⁰ 

     Каждый  выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver или AllaireHomeSite. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует «подсветка» текста, следовательно работать крайне неудобно. Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одну страничку одного вида, а в окне браузера – она выглядит совсем по другому (особенно это касается Netscape Navigator). Странички получаются «кривыми», поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

     Начнем  мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области. Последняя версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю). Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста). 

     Следующий редактор «HomeSite 4» для создания страниц вручную,

т. е. для  знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera). HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).  

     Теперь  рассмотрим некоторые редакторы графики. 

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

     Пакет предлагает, например, средства для  восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady, предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, «разрезание» картинок на более мелкие и т.д.). - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.