ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
Разработка графического дизайна для сайта Всероссийского общества инвалидов
Аннотация
В данной работе рассмотрен процесс разработки графического дизайна сайта Всероссийского общества инвалидов.
Структура работы выглядит следующим образом.
Первый раздел отражает особенности современного графического дизайна.
Во втором разделе рассматривается проектирование сайта Всероссийского общества инвалидов, где изложены процессы создания логотипа, выбора цветовой гаммы, выбора подходящего шрифта, а также представлена логическая структура сайта.
В третьем разделе сформулированы этапы разработки сайта.
Выпускная квалификационная работа выполнена печатным способом на 32 странице с использованием 10 источников, 5 рисунков и одного приложения.
Содержание
|
Введение……………………………………………………………………….. |
5 |
|
1 Особенности современного графического дизайна для разработки сайтов ………………………………………………………………………… |
9 |
|
1.1 Общие понятия и направления в графическом дизайне ……………... |
9 |
|
1.2 Основные понятия и требования для логотипов сайтов……………… |
11 |
|
1.3 Выбор цветовой гаммы при разработке графического дизайна……. |
13 |
|
1.4 Выбор размера и стиля шрифта при разработке графического дизайна |
14 |
|
2 Проектирование сайта Всероссийского общества инвалидов…........... |
17 |
|
2.1 Основные требования к проектированию сайта……….……………… |
17 |
|
2.2 Создание логотипа сайта Всероссийского общества инвалидов……… |
18 |
|
2.3Выбор цветовой гаммы для сайта Всероссийского общества инвалидов…………………………………………………………………….. |
19 |
|
2.4 Выбор размера и стиля шрифта для сайта Всероссийского общества инвалидов…………………………………………………………………….. 2.5 Оформление внешней ссылки в качестве графического рисунка……. 2.6 Логическая структура сайта Всероссийского общества инвалидов…. |
19 19 21 |
|
3 Разработка сайта Всероссийского общества инвалидов……………….. |
23 |
|
Заключение……………………………………………………………………. |
27 |
|
Список использованных источников……………………………………….. Приложение А Код главной страницы сайта Всероссийского общества инвалидов……………………………………………………………………… |
29
30 |
Введение
Графический дизайн - самый универсальный вид искусства. С произведениями графики - объясняющими, украшающими, представляющими - мы сталкиваемся всю свою жизнь.
Графика присутствует буквально везде - на улице, в книгах, а подчас и на нашем собственном теле. Мы познаем дизайнерское искусство через дорожные знаки, рекламные объявления, иллюстрации в журналах, упаковки для разнообразных товаров, включая сигареты и таблетки от головной боли, логотипы фирм-производителей на футболках и даже ярлыки с инструкциями по стирке тех или иных видов изделий. И это отнюдь не феномен современного мира. По улицам, заполненным указателями, эмблемами, вывесками магазинов, лозунгами и объявлениями, ходили и древние египтяне, и средневековые итальянцы, и советские граждане.
Графическому дизайну присущ целый ряд функций. И первая из них - различительная. Дизайн сортирует и дифференцирует: он помогает отличить одну компанию, организацию и даже целую отрасль от другой.
Вторая функция дизайна - информативная. Многие дизайнерские продукты призваны разъяснять потребителю самые различные вопросы.
Наконец, третьей функцией графического дизайна является эмоциональное воздействие. Дизайнерские работы вызывают у нас определенные чувства, помогают нам осознать свою причастность к окружающему предметному миру и сформировать определенное мнение о нем.
Среди графических дизайнеров бытует старая шутка: «Плохая графика еще никого не убивала». Под этим подразумевается, что дизайн выполняет, прежде всего, декоративную функцию, а дизайнерский процесс - это скорее вопрос правильного выбора шрифта и цвета во имя главной цели: чтобы конечный продукт получился удачным и приобрел «художественный» характер.
Представьте теперь на минуту, что дизайн запретят или он попросту исчезнет за одну ночь из нашей жизни. Исчезнет реклама, web дизайн, не будет газет и журналов, не будет Интернета, не будет науки - всего того, что служит нам пищей для обсуждения. Останутся книги, доступные только богатым людям, ракушки и скорлупки вместо денег, толика произведений литературы, горстка университетов и лишь самые простые лекарства, не требующие инструкций к применению.
И мы вернемся к кропотливому рукописанию. Без дизайнерского процесса конструирования предметного мира и его составляющих - структуры и организации, слова и образа, дифференцирования предметов и понятий - единственным средством передачи информации для нас останется устная речь. Если бы все это случилось, то мы вступили бы в новое «смутное время»: мрачные годы невежества, предрассудков, суеверий и низкой продолжительности жизни.
Главной особенностью графики в Web-дизайне является то, что обычно она соседствует с текстовой информацией и элементами интерфейса (кнопками, переключателями и т. п.), и это соседство приходится учитывать при создании изображений. Основное назначение графики в том, чтобы привлечь внимание к Web-странице в целом или к отдельным ее фрагментам, а также представить информацию, которую словами не опишешь. Иначе говоря, графика используется и для оформления страницы, и для представления информации (иллюстраций). Она может как существенно помочь посетителю понять информацию, так и наоборот, сбить его с толку, сделать тексты трудночитаемыми. Графический дизайн Web-сайта - дело тонкое, требующее вкуса и чувства меры. Плохое графическое оформление сайта может просто отпугнуть посетителей. В то же время нужно помнить, что посетители возвращаются к сайту снова и снова благодаря, прежде всего, его информативности, а не красоте. Таким образом, разработчик графического дизайна сайта не просто свободный художник. Ближе всего он к архитектору.
Другая немаловажная особенность графики для Web заключается в довольно жестких ограничениях, накладываемых на объем файлов. И это связано не столько с экономией дискового пространства компьютера, сколько с пропускной способностью каналов связи. В настоящее время немало посетителей интернета используют подключение к серверу через модем. Сегодня наиболее производительные модемы обеспечивают скорость передачи данных 57600 бит/с (около6 Кбайт/с). Некоторые используют модемы производительностью 33600 бит/с и ниже. Если Web-страница загружается в браузер дольше 10 с, это раздражает посетителей, которые могут уйти по другому адресу, так и не дождавшись окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы Web-страница не превышала по объему 50-60 Кбайт. Для графических изображений это довольно серьезное ограничение, требующее от дизайнеров особых знаний и умения. В частности, нужно хорошо разбираться в форматах файлов и способах монтирования изображений в Web - страницу.
Третья особенность графики состоит в том, что В мире встречаются компьютеры, построенные, как говорится, на различных платформах. Так, существуют компьютеры на платформе РС и на платформе Macintosh. Мониторы этих компьютеров имеют различную яркость. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе. может потерять свою выразительность на другом. Поэтому художник, занимающийся Web-дизайном или просто публикующий свои произведения в Интернете, должен учитывать это обстоятельство и уметь настраивать свой монитор.
Графика в web дизайне играют важную роль, нарушая монотонность длинных текстовых страниц. В то же время, графика захватывает значительную долю полосы пропускания линия связи, соединяющей посетителей вашего сайта с Интернетом. Если изображение слишком велико, то его загрузка может длиться нескончаемо долго, и вы рискуете потерять заказчиков, которые вынуждены томиться, ожидая загрузки изображения. Поэтому в отношении графики следуйте таким правилам:
- Сводите использование графики к минимуму. Помимо проблем с полосой пропускания, есть еще несколько причин соблюдать это правило. Графические изображения могут отвлекать внимание, если их слишком много, или они слишком велики, или анимированы. С точки зрения информатики, они намного крупнее текста, поэтому загрузка графики занимает большее время. Разумеется, пока загружается графика, посетители могут просматривать информацию на сайте. Однако если графика играет важную роль или даже необходима для обсуждения или представления данных, это ожидание крайне раздражает.
- По тем же причинам с осторожностью вставляйте любую анимированную графику. Анимации отвлекают внимание, а поскольку они, фактически, представляют собой несколько изображений в одном, анимации значительно замедляют загрузку.
- Проверяйте дважды все изображения и другие файлы, которые используете на своих страницах. Если файлы некоторых изображений, используемых на страницах сайта, будут отсутствовать в соответствующих каталогах Web-сервера, ваш сайт будет выглядеть непрофессионально.
Целью моей работы является создание графического дизайна сайта Всероссийского общества инвалидов.
Выделены следующие задачи:
- подобрать подходящую тематике сайта цветовую гамму, шрифт;
- разработать логотип сайта;
- проанализировать похожие сайты;
- создать удобный и понятный интерфейс сайта для пользователей.
Актуальность моей работы объясняется необходимостью создания сайта с удобным и понятным интерфейсом для Орловской областной организации Всероссийского общества инвалидов.
1 Особенности современного графического дизайна для разработки сайтов
1.1 Общие понятия и направления в графическом дизайне
В любое время веб-дизайнера будет интересовать, насколько соответствует современным требованиям разработанный им дизайн сайта.
Приходится согласиться с мнением, что созданный веб-мастером сайт должен сочетать в себе не только правильную его функциональность, но и привлекающий посетителей дизайн. Для внедрения в дизайнерскую жизнь этого сочетания, существует всё необходимое.
Остановимся более детально на графическом дизайне и программах для создания дизайна и придания ему нужного вида современности. В принципе, нарисовать в графическом редакторе можно абсолютно всё. Главное иметь нужные навыки, терпение, влюбленность в веб-дизайн и хорошую фантазию. Конечно умение придумывать гениальное дано не каждому нынешнему веб-мастеру и фантазия у всех разная, с чем сложно что-либо поделать, но для развития графических навыков существуют нужные программы и уроки.
Рассмотрим лучшие программы для создания современного дизайна сайта.
Adobe Photoshop –это лучший редактор изображений, многофункционален. Им могут пользовать как новички, так и профессионалы, всё зависит от целей и уровня сложности выполняемой задачи.
Изучая фотошоп мы узнаем, что изображения, которые используют в технологиях связанных с веб-дизайном и вёрсткой делятся на растровые и векторные.
Что же такое векторный и растровый рисунок?
Векторные изображения состоят из контуров, рисунок в векторе похож на мультик. Несмотря на то, что Photoshop работает изначально с растровой графикой, но и векторная графика представлена в нем достойно.
Преимущество векторного изображения в том, что как бы мы не изменяли размер рисунка, качество изображения страдать не будет. Хоть превратим в логотип, хоть развернем на весь экран – неизменное качество рисунка останется. Для более углубленного изучения векторной графики существует замечательная программа Corel Draw.
Растровые изображения состоят из точек – пикселов (англ. picture element - элемент изображения). Человеческим глазом растровое изображение воспринимается обманчиво – он не воспринимает эти точки по отдельности, а видит картинку целиком.
Преимущество растровой графики является реалистичность полученного изображения. Adobe Photoshop является в современном дизайне самым мощным средством обработки именно растровой графики.
Подведем итог: для обучения графическому дизайну на начальном этапе нам нужны две программы Adobe Photoshop и Corel Draw.
Конечно, самостоятельное изучение photoshop потребует массу времени и усилий, а главное желания. Поэтому стоит воспользоваться существующими самоучителями по изучению графического дизайна, обучающими курсами сетевыми, так и в бумажном виде книжных магазинов, где весь материал детализирован и наполнен инструкциями по шагам, а также большим количеством иллюстраций.
Любые из найденных в интернете или магазине уроки будут полезны как новичкам, так и более опытным пользователям, ведь затрагивают все сферы возможностей photoshop, от самых простых и понятных до самых сложных.
Что нам дают уроки? Они учат пользоваться конкретной функцией и возможностью программы, а это является хорошим фактором для понимания материала. Плюс самостоятельных уроков ещё и в том, что в любой момент вы можете его прервать их и заняться тем, что для вас более срочно.
Вот мы и подошли к еще одной возможности современного веб-дизайна – интерактивность сайта, наличие анимаций. Все чаще и чаще flash оформляют шапки сайта, используют различные заставки на веб-страницах. А вы встречали сайты с первой входной страницей, состоящей из анимированного приглашения войти на сайт? Это все чудо нам предоставляет flash.
Лучшей на сегодняшний день программой для создания flash является Macromedia Flash.
Macromedia Flash попросту не заменима для веб-мастеров, так как позволяет создавать красивые динамические формы. Она создает и редактирует анимацию, без которой не обходится не один достойный внимания современный сайт. Все чаще заказчик просит использовать при создании сайта возможности flash.
Программа Macromedia Flash, как и фотошоп способна работать как с векторными, так и с растровыми объектами. Мы нашли общее между этими двумя монстрами для создания современного дизайна.
С помощью flash можно создавать игры и презентации, сделать сайт интерактивным, а что более важно, есть возможность создавать, необходимые на сегодняшний день анимационные баннеры и заставки. Казалось бы, что статичные элементы дизайна по весу гораздо меньше анимационных, но при помощи Macromedia Flash есть возможность избежать эту проблему с размерами и создавать анимацию не превышающую размер картинки, а это очень важно для веб-мастеров. Порой, делая самую простую анимацию ужасаешься ее новым размерам.
Учитывая всё выше написанное не сложно догадаться, что уроки по использованию flash не менее популярны, чем уроки по photoshop. Наверное, каждому из нас приятнее видеть анимационные картинки вместо статичных. И, кстати таковы требования для современного веб-дизайнера.
Чтобы досконально владеть данной техникой вам помогут уроки, которых в сети интернет публикуется в огромном количестве. При кропотливом отношении к самообразованию дегко овладеете всеми возможностями работы с flash. Будь вы новичок или профессионал, вы сможете почерпнуть много интересного из уроков и будете постепенно овладевать необходимыми для вас знаниями и навыками.
1.2 Основные понятия и требования для логотипов сайтов
Логотип, лого, logo – это важнейший элемент для любого сайта, а особенно блога! Если у вас нет собственного лого – скорее создавайте, а то ваш интернет-проект вряд ли будут воспринимать всерьез.
Изначально логотипы использовались большими компаниями-разработчиками продукции для того, чтобы выделить их товар на рынке. Сейчас же лого – это не только торговая марка, но и лицо любого сайта в интернете. Без logo ваш блог всегда будет серым и ничем не выделяющимся из общей массы сайтов.
Логотипы бывают трех типов:
- Текстовые. Как правило, в этом случае в качестве лого используется графическое начертание названия блога.
- Символьные. В качестве logo выступает какая-то картинка или изображение, а порой и какой-нибудь зверек (котенок, собака и т.д.). Также в некоторых случаях логотипом может стать «оживший» предмет (например, как в ворде – скрепка-помощник с глазами). В этом случае выбранный символ должен отражать характер блога.
- Комбинированные. В этом случае logo комбинированный, он состоит и из графического текста, и из символа.
К лого предъявляется множество требований (по степени важности):
Во-первых, он должен быть легко запоминаемым. Слишком перемудренный logo никак не поможет блогу развиваться.
Во-вторых, он должен быть уникальным. Не стоит копировать чужие логотипы – толку от этого не будет. Более того, сразу соберется куча борцов с плагиатом, жаждущих справедливости.
В-третьих, он должен быть оригинальным. Если вы попытаетесь использовать обычный лого, то вряд ли посещаемость вашего блога будет расти. Посетителей надо чем-то удивить, логотип должен остаться в памяти.
В-четвертых, он должен быть ассоциативным. Ну хоть немного, но должен!
И в-пятых, он не должен раздражать посетителей.
1.3 Выбор цветовой гаммы при разработке графического дизайна
Дизайн сайта, его цветовая гамма, играют большую роль в успешном развитии вашего проекта. Пользователь, впервые попав на ваш сайт, видит прежде всего дизайн – цвета сайта, и от первого впечатления зависит, останется ли он для получения информации или уйдет навсегда. Поэтому цветовая гамма должна быть привлекательной, красивой и гармоничной.
Как подобрать цвета? Цветовая гамма должна соответствовать тематике вашего ресурса. В большинстве случаев это приглушенные тона разных оттенков, которые подчеркивают информацию размещенную на сайте, но ни в коей мере не отвлекают внимания посетителя.
Определить и подобрать правильную цветовую гамму без специального инструмента очень непросто. Здесь нужно знание законов цвета, их сочетаемости, чтобы получить гамму, радующую глаз и ненавязчивую.
К счастью, такие инструменты в Интернете есть. И их достаточно много. Перечислю некоторые из них:
http://kuler.adobe.com/ - Огромный набор готовых цветовых шаблонов (более 17 тысяч!), возможность их корректировки, создание темы из имеющегося изображения. Масса настроек и возможностей. Этот сайт от компании Adobe предоставляет мощный прецизионный инструментарий для разработчика.
http://www.colorotate.org/ - Готовые шаблоны (около 1000), возможность подбора по рисунку.
http://colorexplorer.com/- Подбор цветов, цветовые библиотеки, подбор по рисунку.
http://colorschemedesigner.com/ - Полезный конструктор цветовых схем.
Но мне больше нравится простой и эффективный инструмент Color Wizard, который находится по адресу http://www.colorsontheweb.com/colorwizard.asp.
С помощью ползунков можно подобрать основной цвет шаблона, в данном случае выбран ярко-оранжевый. И к нему автоматически подбирается оптимальная цветовая гамма по одному из 6 возможных вариантов цветовых схем: монохроматическая, аналоговая (на рисунке), триада (3-х цветная схема), тетрада (4-х цветная), комплементарные (дополняющие) цвета и разделенные комплементарные.
В результате получаем красивую гамму, построенную по всем правилам науки, которую смело можно закладывать в разрабатываемый шаблон сайта. Я неоднократно пользовался этим инструментом и получал прекрасные результаты.
Нужно помнить, что помимо чисто визуальной привлекательности, цвет также влияет на психику человека. И это нужно учитывать при выборе цвета сайта. Какие же эмоции ассоциируются у людей с определенным цветом?
Красный – любовь, страсть, угроза, предупреждение, волнение, питание, импульс, действие, приключение.
Синий - надежность, успех, серьезность, спокойствие, власть, профессионализм.
Зеленый - деньги, природа, животные, здоровье, лечение, жизнь, гармония.
Оранжевый - комфорт, творчество, праздник, веселье, молодежь, доступность.
Фиолетовый - справедливость, двусмысленность, неопределенность, роскошь, фантазия, мечты.
Белый - невинность, чистота, простота.
Желтый - любопытство, игривость, веселье, развлечение.
Розовый - мягкость, сладость, невинность, молодость, нежность.
Коричневый - земля, природа, семейственность, простота.
Серый - нейтральность, безразличие, защищенность.
Черный - серьезность, тьма, тайна.
1.4 Выбор размера и стиля шрифта при разработке графического дизайна
Несмотря на то, что дизайнеры разрабатывают страницы, надеясь на то, что люди будут скрупулезно вчитываться в текст, посетители просто пробегают по страницам глазами.
Поэтому, когда к тому же текст не является удобочитаемым, ситуация усугубляется в разы. Ведь если посетителю нужно напрягаться, чтобы прочесть текст, то все остальное (навигация, графический дизайн и т. д.) оказывается не нужным.
Основной текст на страницах обычно имеет небольшой размер.
Такой текст воспринимается значительно лучше, если используются рубленые шрифты, например, Arial, Verdana, а не шрифты с засечками (например, Times New Roman).
Это происходит от того, что современные мониторы имеют сравнительно низкую разрешающую способность, и поэтому для того, чтобы четко отобразить засечки шрифта размером 10 пунктов попросту не хватает пикселов.
С другой стороны, большинство людей предпочитает читать на бумаге текст, набранный именно шрифтами с засечками (не зря же в подавляющим большинстве книг используется именно такие шрифты). Поэтому мы оказываемся перед лицом своеобразного парадокса.
Скорее всего, этот парадокс разрешится сам собой, когда мониторы будут улучшены настолько, чтобы чтение с экрана стало бы таким же быстрым и приятным, как чтение книги.
Вообще говоря, на то, что большинство пользователей Интернет предпочитают беглое ознакомление внимательному чтению, во многом влияет именно качество современных мониторов.
Чтение с экрана оказывает повышенную нагрузку на зрение и приблизительно на 25% медленнее, чем чтение текста с бумаги.
Поэтому нет ничего удивительного в том, что люди пытаются свести к минимуму объем читаемой информации.
Но вернемся к проблеме выбора шрифта.
Если бы мы с вами обсуждали печатные документы, разговор затянулся на многие десятки килобайт из-за неимоверного количества шрифтов, которые можно было бы использовать. Но в Internet все проще и сложнее одновременно.
2 Проектирование сайта Всероссийского общества инвалидов
2.1 Основные требования к проектированию сайта
Сайт «Орловская областная организация «Всероссийское Общество Инвалидов»» разработан в результате технического задания на курсовое проектирование. Предназначен для получения интересующей информации через Internet.
Тема разработки: создание графического дизайна для сайта «Орловская областная организация Всероссийского Общества Инвалидов».
Назначение разработки: графический дизайн является основой для сайта, и включает в себя подбор цветовой гаммы, шрифта текста, помещенного на сайте, разработка логотипа, формирование панели навигации.
Требования к функциональным характеристикам:
Разработанный сайт должен осуществлять переход по гиперссылкам от одной странице к другой. Целевая аудитория сайта – это прежде всего люди с ограниченными возможностями, а значит при масштабировании на сайте текст должен оставаться читабельным.
- Разделы
- Главная страница: содержание сайта.
- Страница «о нас» должна содержать сведения об организации Всероссийского общества инвалидов.
- Страница «наши новости» должна включать в себя: новости о произошедших мероприятиях в рамках ВОИ, открытие новых центров и многое другое.
- Страница «руководящие органы» должна содержать информацию об управляющих органах в ВОИ.
- Страница «законодательство» должна содержать законы Конституции РФ, имеющие отношение к ВОИ.
- Страница «контакты» должна содержать сведения о том, где можно проконсультироваться или получить помощь в рамках ВОИ.
Требования к надежности
Пользователь не должен вносить какую-либо информацию в программу, которая бы повлекла порчу программы или потерю достоверности информации.
Стадии и этапы разработки:
Сайт разрабатывается несколько этапами:
1 этап - Определение назначения и функций сайта;
2 этап - Выбор цветового и стилистического оформления;
3 этап - Определение страниц и содержание;
4 этап - Выбор языка программирования, удовлетворяющего функциям и назначениям сайта;
5 этап - Создание графических элементов сайта;
6 этап - Верстка сайта.
Сайт разработан на WordPress. Для интерфейса выбрана тема Build 1.13, которая в дальнейшем была модернизирована.
Сайт расположен на сервере startfree.ru, имеет доменное имя voi56.ru.
2.2 Создание логотипа сайта Всероссийского общества инвалидов
Логотип для данного сайта является комбинированным, так как он включает в себя как текст, так и символьное выражение.
Логотип включает в себя аббревиатуру «Всероссийского Общества Инвалидов», где буква «О» символически изображена в роли человека с ограниченными возможностями.
Рисунок 1 – Логотип сайта Всероссийского общества инвалидов
2.3 Выбор цветовой гаммы для сайта Всероссийского общества инвалидов
Для графического дизайна сайта Всероссийского общества инвалидов была использована монохроматическая цветовая гамма (зеленый и его оттенки).
- Фон белого цвета;
- Разделительные линии зеленого цвета, которые используются для отделения текстов и облегчения их восприятия;
- Панель меню выполнена в зеленом цвете;
- Поиск также выполнен при помощи разделительных зеленых линий;
- Форум и регистрация выполнены в бело – синей гамме, с целью переноса внимания посетителей на общение.
Зеленый цвет выступает как символ толерантности, надежды, и является общепризнанным для областных организаций Всероссийского общества инвалидов по всей стране.
2.4 Выбор размера и стиля шрифта для сайта Всероссийского общества инвалидов
В Сети лучше использовать только 3 основных шрифта с достаточно высокой степенью уверенности, что они отобразятся у всех посетителей одинаково. Это Arial, Verdana и Times New Roman.
Мне больше нравится Times New Roman. По этой причине и текст на сайте выполнен с использованием этого шрифта. Размер варьируется от 14 и выше.
2.5 Оформление внешней ссылки в качестве графического рисунка
На сайте Всероссийского общества инвалидов в разделе новостей будет находится внешняя ссылка на рисунки детей – инвалидов. Гиперссылка выполнена в виде рисунка, но котором изображен мальчик-инвалид, держащий в руке воздушные шары, символизирующие доступность, права, понимание.
Рисунок создавался при помощи программы Adobe Illustrator.
Adobe Illustrator — векторный графический редактор, разработанный и распространяемый фирмой Adobe Systems.
Adobe Illustrator был задуман как редактор векторной графики, однако дизайнеры используют его в самых разных целях, в том числе и в виде иллюстратора. Он очень удобен для быстрой разметки страницы с логотипом и графикой — простого одностраничного документа. Программа обладает интуитивно понятным интерфейсом, легким доступом ко многим функциям, широким набором инструментов для рисования и продвинутыми возможностями управления цветом, текстом, что позволяет создавать векторные изображения любого уровня сложности. Adobe Illustrator является одним из наиболее удобных редакторов для создания различных макетов для прессы или наружной рекламы.
Рисунок, сделанный при помощи Adobe Illustrator, будет являться внешней ссылкой на сайт рисунков детей – инвалидов Орловской области. Пока этот проект находится в разработке.
Получившийся рисунок представлен ниже:
Рисунок 2 – Графический рисунок для оформления внешней ссылки
2.6 Логическая структура сайта Всероссийского общества инвалидов
Логическая структура сайта позволяет нам увидеть, как связаны страницы между собой, как совершается переход от одной к другой странице.
Логическая структура сайта представлена на рис.3.
Рисунок 3 – Логическая структура сайта
3 Разработка сайта Всероссийского общества инвалидов
Согласно техническому заданию на дипломное проектирование необходимо разработать сайт «Всероссийского Общества Инвалидов». Он предназначен для размещения текущей информации, для автоматизации поиска данных, а также вывода результатов.
Автоматизация процесса поиска данных позволяет решать множество проблем, связанных с поиском необходимой информации.
Данный сайт позволяет размещать информацию и производить поиск информации по различным критериям.
Основные возможности программы:
- выбор необходимой информации;
- переход по гиперссылкам и кнопкам;
- простой и удобный интерфейс для работы пользователя.
Сайт «Всероссийского Общества Инвалидов» был выполнен на WordPress , язык веб-программирования – php.
WordPress является одной из самых популярных CMS для создания блогов и сайтов. Она бесплатна, многофункциональна и проста в использовании, что делает ее идеальным вариантом для тех, кто ищет легкой реализации сложных решений.
Установка и настройка WordPress совершенно не сложная, к тому же WordPress является мультиязычной CMS, что делает ее использование еще более удобным.
Wordpress относится к системам управления контентом, имеющим открытый исходный код. Она написана на PHP и использует БД MySQL.
Существует большое количество плагинов для WordPress, которые могут добавить в сайт самую разную функциональность.
Дизайн сайта на WordPress зависит от выбранной темы. Нужно заметить, что на сегодняшний день существует огромное количество различных тем WordPress – как бесплатных, так и платных, к тому же всегда можно заказать эксклюзивный дизайн.
Благодаря удобству работы WordPress – изменить тему, подключить какой-нибудь плагин или добавить раздел на сайт можно меньше, чем за минуту. Чтобы работать с данной CMS, пользователю не нужно иметь никаких специальных знаний, WordPress интуитивно понятна и очень комфортна в работе.
Нужно заметить, что благодаря удачной архитектуре и встроенной системы плагинов и тем, на WordPress можно сконструировать практически любой проект – от сайта-визитки до интернет-магазина. К положительным особенностям WordPress относится: поддержка pingback, RSS, trackback, Atom, наличие человеко-понятных ссылок, гибкая настройка, огромные библиотеки разнообразных плагинов и тем.
Теперь рассмотрим интерфейс получившегося сайта.
Выражаясь научным языком, интерфейс - это совокупность средств и методов, при помощи которых пользователь взаимодействует с сайтом.
Иными словами, интерфейс сайта - это его внешний вид. Сюда входят панель навигации, заголовки блоков и разделов, шапка сайта, разметка страницы, рекламные баннеры, информеры, счетчики- - т.е все визуальные элементы сайта. Взаимодействие этих элементов и есть интерфейс сайта.
Существует три основных правила, которых желательно придерживаться при создании интерфейса сайта:
1) Не стремитесь к нестандартным решениям. Как это ни печально звучит, но излишняя оригинальность и нестандартный вид страницы затрудняет восприятие страницы пользователем. Пользователь теряется и не понимает куда ему следовать за нужной ему информацией.
2) Изучайте посетителей. С помощью статистики на сервере, вы можете отследить, какие страницы являются наиболее популярными. На основе этих данных старайтесь вынести эти страницы на передний план и установить прямые ссылки на них с главной страницы.
3) Простая навигация. Попавший на сайт посетитель, на какой странице он бы не находился, должен представлять себе структуру сайта. Обеспечьте пользователю свободное перемещение по разделам и страницам сайта.
При создании сайта, в первую очередь надо уделять внимание посетителям, а не собственным вкусам.
Оформление Web-сайта.
Цвет и фон страницы выбирается по желанию Web-мастера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не нужно все чрезмерно затемнять, текст удобно читать, если его хорошо видно. Не применяйте черный цвет, мотивируя это продлением срока службы мониторов пользователей. По статистическим данным посещаемость «черных» сайтов не очень высока.
Подбирая цвет фона, необходимо учитывать, как он будет гармонировать со всеми остальными элементами: цветом текста, цветом гиперссылок. Крайне необходимо обеспечить достаточный цветовой и яркостный контраст между навигационными элементами на странице и фоном. Если в качестве фона используется изображение, то оно должно быть едва заметным. Это изображение должно содержать только нейтральные, неконтрастирующие друг с другом цвета.
Не желательно создавать очень большие таблицы, можно разделить таблицу на несколько более мелких.
Использование стилей: технология таблиц каскадных стилей (CSS) – это набор правил оформления и формирования, которых может быть применен к различным элементам Web-страницы. В стандартном языке HTML для присвоения какому-либо элементу определенных свойств, - таких как цвет, размер и тому подобное – приходится каждый раз их заново описывать. Применяя технологию CSS, достаточно будет один раз описать свойства элементов и определить это описание как стиль.
Всегда необходимо выдерживать принятый стиль. Если сайт с разветвленной структурой, необходимо оформить его страницы одинаково, т.е. выдержанными в рамках одного стиля. На всех страницах должны быть одни и те же управляющие элементы, одинаковые интервалы и подобные шрифты.
Применяя текстовые фильтры, можно добиться хорошего дизайна сайта даже без использования «навороченных» изображений. К тому же, в отличие от изображений, эти фильтры не усложняют загрузку страниц.
Интерфейс получившегося сайта имеет вид, представленный на рис.4 и рис.5.
Рисунок 4 – Главная страница сайта Всероссийского общества инвалидов
Рисунок 5 – Страница форума сайта Всероссийского общества инвалидов
Заключение
Созданный мною сайт отвечает всем представленным требованиям, содержит удобный и понятный интерфейс, пользователь всегда может найти необходимую информацию с помощью поиска и гиперссылок.
Структура сайта довольно проста и понятна в использовании. От главной страницы можно легко перейти на другие страницы сайта. Контент сайта выполнен в соответствии с его тематикой.
Сайт дополнен новостной лентой и архивом, что повышает интерес посетителей сайта.
При масштабировании на сайте шрифт остается читабельным, что играет очень важную роль для просмотра текста инвалидами.
Форум, удобная и понятная регистрация позволяют пользователям обменяться мнениями, а также получить ответы на интересующие их вопросы.
Таким образом, цель практической работы выполнена.
Список использованных источников
- Альберт Д., Альберт Е Macromedia Flash Professional 8. Справочник дизайнера / Д. Альберт, Е. Альберт. – БХВ – Петербург, 2006. - 544 с.
- Борисенко А. А. Web-дизайн. Просто как дважды два / А. А. Борисенко. – Эксмо, 2008. – 320 с.
- Глазычев В. Проблемы дизайна – 2 / В. Глазычев. – Архитектура-С, 2004.
- Джоел Скляр Актуальные принципы Web-дизайна / Джоел Скляр. – Эксмо, 2007. – 464 с.
- Дунаев В. Web-графика. Нужные программы / В. Дунаев. - БХВ – Петербург, 2006. - 608 с.
- Кирсанов Д. Веб-дизайн / Д. Кирсанов. – Символ-плюс, 2003. – 368 с.
- Клименко С., Уразметов В. Internet – среда обитания информационного общества / С. Клименко, В. Уразметов. – М: 1996, 238 с.
- Тимофеев Г., Тимофеева Е. Графический дизайн / Г. Тимофеев, Е. Тимофеева. – М: Феникс, 2002. – 299 с.
- Шапошников И. В. Web-сайт своими руками / И. Шапошников. – BHV- СПб, 2000. - 224 с.
- Якоб Нильсен Веб-дизайн. Книга Якоба Нильсена / Якоб Нильсен. – Символ-Плюс, 2006. – 512 с.
Скачать: