Графика (картинки) является неотъемлемой частью практически любого веб-сайта. Хотя основу содержания сайта всегда составляет текстовая информация, но она в большинстве случаев сопровождается иллюстрациями. И даже если сайт содержит только текстовую информацию, без каких-либо иллюстраций, на нем обычно присутствует графический логотип, баннеры, кнопки, флажки, эмблемки. Но нужно понимать (и помнить!) что использовать графику надо очень осторожно, понимая все преимущества и недостатки ее применения на сайте, поскольку неумеренное количество графических элементов на странице приводит к некоторым неприятным последствиям с точки зрения пользователя. В результате вместо ожидаемого положительного эффекта можно получить отрицательный.
Преимущества
- Графика позволяет представить информацию, которую словами не опишешь. Часто одна небольшая картинка может заменить целую страницу текста.
- Грамотно использованная графика может привлечь внимание к веб-странице в целом или к отдельным ее фрагментам. Это позволяет повысить привлекательность страницы для посетителя, нарушая монотонность длинных текстовых страниц.
- Каждый сайт просто мечтает иметь на своих страницах некую изюминку. Такой изюминкой может быть оригинальная графика, выполненная именно для данного сайта.
Недостатки
- Если изображение слишком велико, то его загрузка, с точки зрения пользователя, может длиться нескончаемо долго, и вы рискуете потерять посетителя, который вынужден томиться, ожидая загрузки изображения, может не дождаться окончания загрузки и уйдет с сайта. Разумеется, пока загружается графика, посетители могуг просматривать текстовую информацию на странице. Однако это ожидание крайне раздражает, особенно если графика играет важную роль или даже необходима для понимания представленных данных.
- При неграмотном использовании графика может сбивать посетителя с толку, сделать тексты трудночитаемыми.
Из всего сказанного следует такой вывод: графический дизайн веб-сайта - дело тонкое, требуюшее вкуса и чувства меры.
Применение анимации на сайте
Относительно применения на сайте анимированных картинок следует подумать отдельно. Пока что могу только порекомендовать вам прочитать следующую статью.
Флеш-анимация
Ситуация с флэш-роликами аналогична ситуации с анимацией. Флэш-ролики - это та же анимация, но выполненная на современном уровне. Это очень мощный инструмент, позволяющий делать веб-сайты, которые не только великолепно выглядят, но и удобны для пользователя. Безусловно, все это смотрится очень эффектно. И для создания презентационных сайтов, рассчитанных на пользователей с качественными линиями связи, флэш-анимация в веб-дизайне просто незаменима. Но:
Ни одна русская поисковая система пока не индексирует текст в флэш-роликах веб-сайтов (а значит, содержание такого флэш-сайта будет недоступно для поиска). Яндекс делает только первые шаги в этом направлении.
Значительное количество посетителей веб-сайтов все еще пользуются низкоскоростным модемным входом. А значит, вся эта красота вашего веб-сайта им будет просто недоступна. Вариант изготовления веб-сайта в двух версиях - обычной и флэш - обходится слишком дорого.
Поэтому увлекаться флэш пока не следует. Но применение флеш в ограниченных размерах может быть вполне оправдано, а когда поисковые системы объявят о начале индексации флэш-роликов, настанет время более активного использования этой технологии в разработке веб-сайтов.
Разработка графики для сайта
О форматах графических файлов
Логотип
Логотип - это графический или шрифтовой элемент, который служит символом вашего сайта. Логотип должен хорошо запоминаться, сам по себе создавать ассоциации с общим обликом вашего сайта, гармонично вписываться в его общую концепцию. Хороший логотип должен обладать следующими качествами:
- Индивидуальность. Это требование основополагающее при разработке логотипа. Оригинальность логотипа позволяет сайту уже только за счёт логотипа выделиться на фоне бесконечного множества других сайтов.
- Лаконичность. При разработке логотипа не следует перегружать его многочисленными деталями и излишней детализацией. Лаконичность и простота (но не примитивность) логотипа обеспечивают лёгкость его восприятия, быструю запоминаемость и мгновенную узнаваемость.
- Функциональность. При создании логотипа важно учитывать способность знака к масштабированию и возможность его воспроизведения в различного рода рекламных материалах, визитках, бланках, факсах, сувенирной продукции, возможность использования логотипа в электронных рассылках, RSS и т.п.
- Ассоциативность. Логотип должен вызывать ассоциации с основной тематикой сайта, создавать его эмоциональный образ. Высший класс - создание логотипа, который вызывает не только прямые ассоциации, а несет в себе загадку и интригу - чтобы уловить эти связи требуется глубокое вовлечение человека, работа его ума и воображения. Таким образом, логотип запоминается не только на сознательном, но и на подсознательном уровне.
Разработка логотипа основывается на перечисленных фундаментальных понятиях. И насколько верно удастся воплотить все эти требования, настолько успешным будет логотип. Через логотип происходит первый контакт посетителя с сайтом. А первое впечатление нельзя произвести дважды. Поэтому логотип должен на 100% попадать в цель: создавать нужный образ и связи, не вызывать у посетителя никакого сомнения и чувства дискомфорта.
Выбор шрифтового оформления для сайта
Один из очень важных моментов в проектировании и разработке сайта - это выбор шрифтового оформления для страниц сайта или отдельных блоков. Помните, что главное - какую информацию сайт содержит и насколько доходчиво она преподносится, а изощрённый шрифт и обилие графики на страницах только отвлекают и раздражают посетителей.
Стандартные шрифты, которые можно использовать: Times, Times New Roman, Arial, Helvetica, Courier, Verdana, Tahoma, Cosmic Sans, Garamond. Вы, конечно, вправе на свой страх и риск использовать и другие шрифты, но их может не оказаться у посетителей вашего сайта, и они не поймут, что вы написали. Если всё-таки возникает жгучая необходимость написать какое-то слово особенным шрифтом, используйте изображение в формате .gif. Но не забывайте, что большое количество таких изображений приведёт к потере скорости загрузки с сервера.
Чтобы не прибегать к использованию графики, можно использовать каскадные таблицы стилей (CSS).
Например, буквицу для оформления сказок можно задать следующим образом:
P: first-letter {font-family: ‘GothicRus Medium’; font-size: 250 %}
Более подробные рекомендации по использованию шрифтов для сайта вы найдете в статье Jim Byrne "Введение в оформление текстов для веб" (смотри локальную копию в переводе Ю.Земскова).
Источники и ссылки
Правила и рекомендации
Попробуем сформулировать некоторые общие рекомендации относительно использования графики на страницах вашего сайта.
Во-первых, графическое оформление должно укладываться в общую цветовую схему.
Во-вторых, Вы должны продумать общую концепцию графического оформления.
Сводите использование графики к минимуму. Помимо проблем с полосой пропускания, есть еще несколько причин соблюдать это правило. Графические изображения могуг отвлекать внимание, если их слишком много, или они слишком велики.
С осторожностью вставляйте любую анимированную графику. Анимации отвлекают внимание, а поскольку они, фактически, представляют собой несколько изображений в одном, анимации значительно замедляют загрузку.
Проверяйте дважды все изображения и другие файлы, которые используете на своих страницах. Если файлы некоторых изображений, используемых на страницах сайта, будут отсугствовать в соответствующих каталогах веб-сервера, ваш сайт будет выглядеть непрофессионально.
Все графические элементы можно разделить на два больших класса: рисованные и фотореалистические. Постарайтесь не смешивать эти два типа в оформлении. Кроме этого, в случае, если Вы используете на сайте фотографии в качестве иллюстраций, то перед использованием обработайте их - сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации, найдите способ обработать края фотографии. А потом используйте данное оформление по всей публикации.
И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.
Следует помнить, что пользователи будут просматривать вашу страницу на самых разных мониторах. Во-первых, существуют компьютеры, построенные на различных платформах. Так, сушествуют компьютеры на платформе РС и на платформе Macintosh. Мониторы этих компьютеров имеют различную яркость. Во-вторых, даже компьютеры, построенные на одной и той же платформе, оснащаются мониторами с разным размером экрана и разным разрешением. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе, может потерять свою выразительность на другом. Поэтому веб-дизайнер и веб-мастер должны учитывать это обстоятельство и проверять результаты своей работы на разнотипном оборудовании.
Источники и ссылки
| Назад | Оглавление | Вперед |