Графика на сайте

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

Преимущества

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

Недостатки

  • Если изображение слишком велико, то его загрузка, с точки зрения пользователя, может длиться нескончаемо долго, и вы рискуете потерять посетителя, который может не дождаться окончания загрузки и уйдет с сайта. Разумеется, пока загружается графика, посетители могуг просматривать текстовую информацию на странице. Однако это ожидание крайне раздражает, особенно если графика играет важную роль или даже необходима для понимания представленных данных.
    Не рекомендуется размещать на сайте графический файл объемом более 300кБ, поскольку это приведет к тому, что пользователи низкоскоростного Интернета устанут ждать загрузки Интернет-страницы и просто закроют окно браузера.
  • При неграмотном использовании графика может сбивать посетителя с толку, сделать тексты трудночитаемыми.

Из всего сказанного следует такой вывод: графический дизайн веб-сайта - дело тонкое, требующее вкуса и чувства меры.

Применение анимации на сайте

Относительно применения на сайте анимированных картинок следует подумать отдельно. Пока что могу только порекомендовать вам прочитать следующую статью.

Флеш-анимация

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

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

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

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

О форматах графических файлов

Существует огромное количество различных форматов графических файлов. В веб-дизайне используются только несколько: gif, png, jpeg. В зависимости от целей вставки графического файла в текст следует выбирать наиболее подходящий. Преимущества и недостатки различных форматов мы рассмотрим на отдельной странице.

Логотип

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

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

Разработка логотипа основывается на перечисленных фундаментальных понятиях. И насколько верно удастся воплотить все эти требования, настолько успешным будет логотип. Через логотип происходит первый контакт посетителя с сайтом. А первое впечатление нельзя произвести дважды. Поэтому логотип должен на 100% попадать в цель: создавать нужный образ и связи, не вызывать у посетителя никакого сомнения и чувства дискомфорта.

Правила и рекомендации

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

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

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

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

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

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

И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.

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

Где взять графику для сайта

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

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

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

Видео на сайте

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

Полезные ресурсы

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100