Графическое обоснование на разработку Web-сайта

"Графическое обоснование  на разработку Web-сайта"

2010

1. Выбор интерфейса

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

Разработка usability - это методологический подход к созданию сайта или любого другого пользовательского интерфейса. Прежде, чем приступить к разработке usability, необходимо определить цели сайта, его аудиторию.

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

Характеристики, которые определяют успешность пользовательского интерфейса:

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

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

Если панель внизу - это удобно, так как чтение страницы обычно заканчивается именно там. Однако эта область остается невидимой пока страницу не прокрутят до конца вниз.

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

Навигационная система может состоять из:

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

2. Графических ссылок, которые делятся  на две категории: графические  карты (image maps) и кнопки.

1. Графические карты - отдельный  графический элемент, разделенный  на несколько участков, которые, в свою очередь, являются гиперссылками. Карты могут выглядеть достаточно эффектно. Они удобны для установки одного графического элемента вместо нескольких. Служат довольно сильным средством коммуникации с пользователем.

2. Графические кнопки. Их преимущество в том, что привлекают внимание пользователя. Могут быть более описательными (визуально), нежели простые текстовые ссылки. Более гибки, чем графические карты. Более быстрая загрузка, чем у карты. К недостаткам можно отнести следующее. Часто, кнопки менее наглядны, чем простой текст. Необходимость делать новую кнопку для любых дополнительных разделов сайта. Плохо применимо для больших сайтов.

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

Удобству сайта служит также  размещение на каждой его странице традиционных элементов интерфейса. Заголовок и (или) логотип сайта, являющийся, кроме того, ссылкой  на главную страницу. Благодаря этому  заголовку посетитель всегда будет знать, на каком сайте он находится, а также сможет при желании в любой момент переместиться на главную страницу.

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

Основной текст на страницах  обычно имеет небольшой размер. Такой  текст воспринимается значительно  лучше, если используются рубленые шрифты, например, Arial, Verdana, а не шрифты с засечками (например, Times New Roman). Текст должен быть достаточно крупным, чтобы его было удобно читать всем. Размер шрифта должен быть маштабируемым. Его размер в листах стилей (или непосредственно в коде страницы) нужно задать в относительных единицах измерения.

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

2. Графический дизайн. Выбор цветовой схемы

Графический дизайн - это  художественно-проектная деятельность. От того, как оформлен сайт, как он предстает перед аудиторией, во многом зависит и его популярность.

Считается, что графическое  наполнение web-страницы должно быть выполнено  в едином стиле. Нет ничего важнее правильного подбора цветов для  оживления веб-страницы.

Выбор цветовой гаммы  сайта - важный аспект успеха сайта.

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

 

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

 

Цвета фона и основного  текста должны быть контрастными. Чем  контрастнее, тем удобнее будет  читать текст.

 

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

 

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

 

Веб-страница, кроме текстовой  информации содержит еще и графическую. На сегодняшний день самым основным графическим форматом в Internet является GIF (Graphics Interchange Format). Обусловлено это тем, что файлы картинок, сохраненные в формате GIF, весьма компактны. GIF очень плотно сжимает графический файл, при этом на качестве самой картинки подобное сжатие практически не отражается. В формате JPEG имеется только одно очевидное преимущество: JPEG способен работать не только с 256 цветами (количество цветов в GIF может быть от 2 до 256), а с полноцветными картинками с 16 миллионами цветов. Кроме того, для стандартных рисунков формат JPEG вообще противопоказан, так как этот формат не способен сохранять всю насыщенность гаммы. GIF обладает еще одной необыкновенной возможность. Этот графический формат позволяет определять в исходной картинке прозрачные цвета, т.е. части картинки при ее просмотре в обозревателе становятся невидимыми. Таким образом, в формате GIF сохраняют рисунки, а в формате JPEG фотографии.

 

3. Техническая реализация

 

Весь процесс создания веб-сайта я разделила на несколько  этапов. Это разработка дизайна и  подготовка графики, создание навигации, наполнение контента.

 

Дизайн веб-сайта разрабатывался в программе Photoshop. Для решения  выбора цветовой схемы мой выбор  пал в пользу оранжевых и нежно-зеленых  тонов. Я использовала три основных цвета: оранжевый (#e7834f), белый(#FFFFFF) и  нежно-зеленый (#9be28e). Для создания связности и целостности была соблюдена верность одной цветовой схеме.

 

Были прорисованы кнопки, созданы различные состояния  кнопок.

 

интерфейс пользовательский навигационный сайт

 

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

 

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

 

Для форматирования текста применялись каскадные таблицы  стилей. Как наиболее удобочитаемый  использовался шрифт «Courier New», темный на светлом фоне (правило контраста).

 

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

 

 

 

 

 

 

 

Библиография

 

1. Нильсен Я. Веб-дизайн: книга  Якоба Нильсена - Пер. с англ. - СПб: Символ-Плюс, 2003 -512 с:

 

2. Леонтьев Б. Web-дизайн: Тонкости, хитрости  и секреты. - М.: Познавательная книга  плюс, 1999. - 192 с.

 

3. Кирсанов Д. Веб-дизайн: 2006 г.