Курсовая работа Компьютерная графика Савин И. И. 16. 12. 2008 Работа на тему «Создание сайта и полиграфической рекламной продукции для спортивной организации на базе cms drupal»

Оглавление

Введение и постановка задач

Общие сведения

Теоретическое задание

Техническое задание

• 
  Муай-тай для мужчин. Плакат должен содержать изображения бойцов, быть констрастным, текст плаката простым и популярным. Возможна ориентация на молодеж.
  
• 
  Кунг-фу для детей. Плакат ориентированный на родителей. Яркий, возможно использование персонажа мультфильма «Панда кунг-фу».
  
• 
  Тай-бо для женщин. Акцент делается на поддежание хорошей формы и красивой фигуры. Слоган плаката должен передавать смысл «Тай-бо – новое имя красивой фигуры».
  

Разработка структуры и дизайна сайта

Анализ сайтов конкурентов

Школа Тайского Бокса Москва (www.thai-boxing.ru)

• 
  Быстрая загрузка, малый вес страниц
  
• 
  Цветовая гамма и элементы дизайна полностью соответствуют тематике
  

• 
  Плохо оформлена страница с видео
  

Тайбокс_Ру (www.thaibox.ru)

• 
  Ничем не оправданное сочетание латинских и русских букв в логотипе сайта, возможна путанница с украинским и плохое запоминмание адреса.
  
• 
  Некоторые важные страницы пусты (например, о месте проведения тренировок)
  
• 
  Цветовая гамма не очень удачна: оранжевый в сочетании с серым скорее ассоциируются со спокойствием, чем с боевыми искусствами. Элемент дизайна (боксеры) не интегрирован в дизайн.
  

Московская Федерация Тайского Бокса (www.mtbf.ru)

• 
  Режущий глаза красный фон справа
  
• 
  В шапке фотография плохого качества. Меню закрывает часть фотографии.
  
• 
  Пункт меню «Спонсорам» в непонятном месте
  
• 
  В подвале сайта пустые блоки
  

• 
  Удачное использование рисунка в качестве фона под текстом страницы
  
• 
  В целом удачная цветовая гамма, основанная на контрастах
  

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

Разработка тем для CMS Drupal

Структура файлов темы

• 
  page.tpl.php – основной файл темы, шаблон страницы. Содержит разметку страницы сайта (является скелетом) со вставками дополнительных частей страниц, параметров и ссылками на файлы стилей. Является единственным обязательным файлом.
  
• 
  block.tpl.php – файл шаблона блока темы. Состоит из html-разметки блока с php-вставками параметров, часто также содержит функции для генерации и отображения некоторых параметров. Необязательный файл, используется для задания особых парметров отображения блоков на сайте или перегрузки функций использующих блоки. Этот файл и остальные *.tpl.php схожи по функциям и структуре и различаются только областью применения.
  
• 
  box.tpl.php – файл шаблона общего содержимого. Дает возможность корректировать отображение секции, содержащей контент сайта.
  
• 
  comment.tpl.php – файл шаблона одного комментария. Дает возможность корректировать отображение комментариев. Необязательный файл.
  
• 
  node.tpl.php – шаблон общего содержимого. Дает возможность корректировать отображение материала новости. Необязательный файл.
  
• 
  *.tpl.php- прочие файлы, где * - имя молудя, в отображение которого вы хотите внести правки. Выше рассмотрены лишь наиболее часто употребляемые.
  
• 
  style.css – основной файл каскадных стилей темы. В нем рекомендуется хранить все стили темы. Файл необязательный, но крайне рекомендуемый именно с таким названием.
  
• 
  Прочие *.css файлы – используются редко и в основном для исправления ошибок отображения в различных браузерах. Подключаются в page.tpl.php после проверки браузера пользователя.
  
• 
  screenshot.png – файл превью темы 150х90 пикселей (при необходимости вирируется высота), позволяющий посмотреть тему без ее установки. Необязательный, но крайне рекомендуемый в случае, если вы планируете публиковать свою тему.
  
• 
  /images/ - папка, содержащая все графические элементы дизайна. Крайне рекомендуется. Единственные графические файлы, которые необязательно хранить в этой папке это: файл логотипа – обычно, logo.png и файл иконки – favico.ico.
  

Методы создания и редактирования тем

• 
  Редактирование или создание своего style.css
  
• 
  Редактирование page.tpl.php. А также создание дополнительных .tpl.php файлов.
  

Структура style.css

• 
  Разделы дизайна. Начинаются с # (например, #header, #content) используются для определения параметров основных разделов сайта: шапки, главное меню, панель навигации, колонки новостей и меню, содержание страницы, подвал. В html-коде задаются в атрибуте id. Название всех этих элементов некритичны, но рекомендуется логически правильно называть их:
  
  • 
    #header – для стилей шапки
    
  • 
    #primary, #secondary – для стилей главного меню
    
  • 
    #navbar, #sidebar-right, #sidebar-left – для стилей боковых панелей навигации
    
  • 
    #content – для стилей содержимого страницы
    
  • 
    #footer – для стилей подвала
    

• 
  Элементы дизайна. Начинаются с точки (например, .logo, .slogan) используются для определения параметров элементов дизайна входящих в # разделы. В html-коде задаются в атрибуте class.
  
• 
  Задание стилей для тегов. Обычно применяется для и формирования стилей списка
  ,
  • в меню.
    

  Структура page.tpl.php и прочих *.tpl.php

  
  Как было сказано выше, *.tpl.php файлы содержат html-разметку темы, а page.tpl.php является основным файлом темы. По структуре page.tpl.php напоминает обычную html-страницу со вставками php-кода (для простоты восприятия рекомендуется использовать только переменные и условия). Например так выглядит раздел :
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Здесь в переменных $head, $styles, $scripts хранятся, собираемые другими модулями мета-теги, стили и javascript-коды.
  
  Пример использования php-кода для условий вывода информации:
  
  
  
  
  
  " title="">
  
  
  
  
  
  
  Здесь, в случае, если $site_name (название сайта, которое можно задать в настройках CMS) непустое, то выводится все содержимое тега .
  

  Модуль Theme Settings API

  
  Поскольку очень часто файлы style.css имеют большой объем и достаточно редко – комментарии, изменение темы можно облегчить с помощью популярного модуля Theme Settings API. Этот модуль позволяет в администраторском разделе сайта изменить наиболее важные параметры, такие как: шрифты, ширину сайта, некоторые другие параметры. Для того чтобы пользоваться этим модулем, тема должна его поддерживать. Обычно в папке темы создается отдельный файл theme-settings.php, в котором описываются функции возвращающие выбранные в админке параметры. Эти параметры передаются в модуль Theme Settings API, где генерируется файл, подключаемый в в page.tpl.php.
  
  Этот модуль также желателен в случае последующей публикации темы, так как позволяет администраторам не владеющим css изменить множество параметров темы.
  
  Недостатком модуля является повышение нагрузки на сайт, за счет дополнительной обработки данных и запросов к базе. В данной работе модуль не используется.
  

  Создание и настройка темы для сайта EFLT.ru

  
  За основу темы для сайта была взята тема foundation, представляющая собой только скелет, с прописанными, но пустыми стилями. В ходе работы были выполнены следующие действия:
  
  • 
    Существенно дополнен и местами переписан файл page.tpl.php для корректности отображения темы во всех популярных браузерах. Использовались как div так и таблицы, поскольку не все решения на чем-то одном корректно поддерживаются браузерами, также комбинированость видов верстки обусловлена выбором наиболее емкого решения.
    
  • 
    Заполнены необходимые пустые поля стилей файла style.css.
    
  • 
    Добавлены новые стили.
    
  • 
    Добавлен модуль nice_menus для отображения primary links в виде выпадающего списка. Изменен .css файл модуля.
    
  • 
    Проверена работоспособность сайта при различных разрешениях экрана.
    
  
  
  

  Структура сайта

  
  В связи с особенностями восприятия человеком информации и большим набором разделов сайта, решено использовать вложенную структуру и применять выпадающее меню. Основные разделы выделены следующим образом: главный, в котором содержатся разделы общей направленности, такие как информация о федерации, форум, FAQ; далее идут боевые искусства, обучением которых занимается федерация: тайский бокс, кунг-фу, юдха-йога; затем следует галерея, выделенная в главные разделы по важности. Визуально структура выглядит следующим образом:
  
  
  Главная
  (переход на главную страницу сайта)
  
  Тайский бокс
  (переход на страницу общей информации о тайском боксе)
  
  Кунг-фу
  (переход на страницу общей информации о кунг-фу)
  
  Юдха-йога
  (переход на страницу общей информации о йоге)
  
  Галерея
  (переход в фотогалерею)
  
  О федерации
  
  Частые вопросы
  
  Форум
  
  История
  
  Кунг-фу для детей
  
  Преподаваемые Стили
  
  Фото
  (чтобы не заблудиться)
  
  Видео
  
  
  
  

  Теория и практика дизайна тематических сайтов

  Общие правила дизайна

  
  Существует ряд сформировавшихся правил по дизайну и верстке сайтов. Этим правилам придерживается большинство опытных дизайн-студий.
  
  • 
    Модульная сетка. Наиболее старое правило, суть которого в том, что в дизайне сайта должен существовать единый каркас, элементы, присутствующие на всех страницах. Это по сути и является дизайном сайта. Это правило используется на сайте EFLT.ru. Модульная сетка сайта (цвета использованы для разделения границ разделов):
    
    
  • 
    «Резиновая» верстка. Правило активно продвигавшееся в Рунете, говорящее о том, что размеры сайта должны зависеть от размеров окна браузера и масштабироваться в соответствии с его изменениями. «Резиновая» верстка позволяет рациональнее использовать пространство. Сайт EFLT.ru использует «резиновую» верстку.
    
  • 
    Нерезиновое боковые меню. Обычно западные дизайнеры, привыкшие к фиксированной верстке, забывают при создании резиновых сайтов о ширине меню, и оно масштабируется вместе с шириной окна браузера. На сайт EFLT.ru меню имеет фиксированную ширину.
    
  • 
    Запас на рост сайта. Поскольку не всегда к моменту создания сайта готов весь материал, который необходимо на него поместить, дизайн должен предусматривать расширение. На сайте EFLT.ru именно такая ситуация – достаточно много статей находится в процессе подготовки, но нельзя заполнять сайт пустыми страницами, резервируя для них место, так как это неблагоприятно сказывается на индексации поисковиками. Решение этой проблемы реализовано в иерархии меню (см. структуру сайта). Существует несколько основных разделов, количество которых вряд ли будет меняться, но будет увеличиваться количество их подразделов. Тем не менее, все подразделы будут легко доступны.
    
  • 
    Реакция на пользователя. Это правило позволяет пользователю лучше ориентироваться на сайте, по визуальным стилям элементов интуитивно понимать их функции и свойства. Рекомендуется задавать стили некоторым элементам следующим образом:
    
    • 
      Для пунктов главного меню: нормальный вид, вид при наведении курсора, этот раздел открыт, открыт подраздел этого раздела.
      
    • 
      Ссылки в тексте должны быть подчеркнуты и отличаться по цвету от текста. Псевдо-ссылки, то есть те, которые выполняют какие-то действия на данной странице без переходов на другие или перезагрузки данной, подчеркиваются пунктиром. Но таких ссылок пока на сайте EFLT.ru пока нет. К обычным применено правило оформления.
      
  • 
    Существует ряд логических правил использования html-тегов, например, иерархия заголовков по важности с помощью h1…h7. Все подобные правила применяются в темах CMS Drupal.
    
  • 
    Для удобства навигации логотип сайта должен вести на главную страницу сайта. Реализовано на EFLT.ru.
    

  Цветовая гамма сайта

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

  Шрифтовое решение

  
  Существуют общие правила подбора шрифтов сайта, об их количестве и назначении. Оптимальным количеством шрифтов для большинства сайтов является 2-3 стиля, которые должны выполнять функции:
  
  • 
    Основной шрифт. Тот, которым будет выводиться текст новостей, статей и т.д. Крайне рекомендуется использовать шрифты вида антиква, то есть с засечками, поскольку текст, написанный таким шрифтом, проще воспринимается читателем – в чем и состоит задача шрифта.
    
  • 
    Шрифт заголовков. В задачу этого шрифта входит привлечение внимания читателя, поэтому рекомендуется использовать шрифт вида гротеск, без засечек.
    
  • 
    Шрифт меню. Часто выделяют отдельный шрифт для названий пунктов меню. Поскольку меню должно быть заметно, требования к этому шрифту такие же как к шрифту заголовков.
    
  • 
    Шрифты логотипа. Эти шрифты обычно не являются стандартными, берутся из фирменного стиля организации, если таковой есть, и входят в графические элементы дизайна. Обычно шрифт тематически стилизован и принадлежит виду декор. Тем не менее, шрифт должен быть читабельным.
    
  • 
    Декоративные шрифты. Текст этими шрифтами не так важен, как все остальное, они скорее являются элементами дизайна, чем носителями информацией.
    
  
  На сайте EFLT.ru используется 2 семейства шрифтов: для заголовков гротеск – Verdana – применяется также, в меню и логотипе; и для текста статей антиква - Lucida Grande. Оба шрифта часто используются в настоящее время веб-дизайнерами.
  

  Тематические элементы сайта

  
  Логотип представляет собой коллаж из храма федерации и фотографий учеников и тренера. Храм добавлен в логотип по желанию заказчика. Логотип находится в центре сайта и для соответствия этому месту из фотографий, предоставленных заказчиком, был сделан симметричный монтаж. Изображение храма хорошо дополняет центральную композицию – членов федерации. Все персонажи в логотипе находятся в моменте движения – это придает живость логотипу и сайту в целом и контраст по сравнению с окружающим пространством. Также в логотипе присутствует эмблема федерации – она и является наиболее важной его частью и название. Название написано стандартным узким гротесковым шрифтом Haettenschweiler и окантовано черной рамкой для усиления контрастности изображения и акцентирования внимания.
  
  
  
  Свиток с девизом добавлен также по желанию заказчика, символизирует знания и верность традициям обучения. Также свиток заполняет пустое пространство, которое отвлекало от пространства слева от логотипа – названия сайта.
  
  Главное меню стилизовано под темную породу дерева, имеет неровности. Помимо контраста усиливает символизм свитка.
  

  Полиграфическая часть задания

  Правила создания рекламных плакатов и их практическое применение

  
  В связи с особенностью восприятия человеком рекламы достаточно давно разработан набор правил для более эффективного привлечения к ней внимания. Ниже приведены некоторые базовые правила рекламы:
  
  • 
    Уникальное торговое предложение. Правило, которое гласит: Рекламное объявление должно содержать предложение: «Купи именно этот товар и получишь специфическую выгоду». Предложение должно выглядеть унимальным, вне конкуренции.
    
  • 
    Интенсивность. В печатной рекламе это чаще всего значит заголовки больших размеров. Текст должен быть коротким и намекать на продолжение.
    
  • 
    Движение/динамичность. Реклама не должна выглядеть статичной, в печатной рекламе лучше всего использовать кадры «с продолжением», момент движения.
    
  • 
    Контрастность и размер. Два простых и легких в использовании правила. Тем не менее, весьма эффективны для привлечения внимания.
    
  
  В большинстве случаев самым важным является слоган или заголовок объявления. Существуют следующие рекомендации по их созданию:
  
  • 
    Заголовок должен быть информативным, он должен содержать как минимум 25% всей важной информации, которую надо донести до человека. На объявлениях ЕФЛТ 100% важной информации, а именно наименование предоставляемой услуги, находится в заголовке.
    
  • 
    При формулировке слогана, необходимо помнить, что люди любят, когда говорят с ними о них. Частично реализовано в объявлениях ЕФЛТ: на плакате «Кунг-фу для детей» есть обращение к родителям, предложение, от которого подсознательно невозможно отказаться.
    
  • 
    В рекламном заголовке должны быть только те сведения, которые могут заинтересовать потребителя и больше ничего. Объявления ЕФЛТ полностью придерживаются этого правила.
    
  • 
    Передавайте рекламную идею самым оптимальным способом, без лишних слов. Сведения, не относящиеся к рекламируемому товару, снижают эффективность.
    
  
  Правила иллюстраций печатных объявлений:
  
  • 
    Иллюстрация и текст должны взаимно дополнять друг друга. Если убрав текст, объявление не меняет смысл, значит правило соблюдено. На плакате «Тайский бокс и Кунг-фу для мужчин» правило полностью соблюдается. На плакате «Тай-бо для женщин» при просмотре иллюстрации возникают нужные ассоциации – связь с хорошей фигурой, спортивной формой. На плакате «Кунг-фу для делей» возникают ассоциации с фильмом, но ключевое слово есть в названии фильма – эффект правила действует.
    
  • 
    Иллюстрация должна демонстрировать потребителю будущее, в которое превратится настоящее после приобретения товара. А текст плаката должен разъяснять это. Реализовано на плакате «Тай-бо для женщин».
    
  • 
    Рекламная иллюстрация не допускает художественных приемов, которые могли бы затруднить восприятие товара.
    
  • 
    В иллюстрации должен быть смысловой центр, если на ней присутствует человек, то он и является этим центром. Реализовано на всех плакатах: на объявлении «Тайский бокс и Кунг-фу для мужчин» смысловым центром является композиция дерущихся бойцов, градиент фона придает больше внимания именно композиции, а не отдельным ее частям.
    
  • 
    Формат иллюстрации должен быть таким, чтобы наиболее важные ее детали были видны.
    
  
  
  

  Иллюстрация примененных правил в плакатах ЕФЛТ

  
  Рассмотрим применение вышеописанных правил на практике. Обычно сочетать все эти правила не удается, так как рекламируемому товару или услуге не все подходят.
  

  Плакат Тайский бокс / Кунг-фу для мужчин

  
  
  
  Особенности:
  
  • 
    Только важная информация, очень емко, текст составлен для широкой аудитории
    
  • 
    Контраст, крупный шрифт, гротеск, момент движения – всё для привлечения внимания
    

  Плакат Тай-бо для женщин

  
  
  
  Особенности:
  
  • 
    Плакат насышен символами и цветами жизни и здорового активного образа жизни
    
  • 
    Цветовая гамма в меру контрастна, дружественное, располагающее сочетание
    
  • 
    Текст ориентирован на женщин, которые не собираются заниматься спортом профессионально, но хотят каких-то результатов
    
  
  
  

  Плакат Кунг-фу для детей

  

  
  Особенности:
  
  • 
    Яркие цвета, пестрая расцветка, контраст желтого и черного
    
  • 
    Узнаваемый персонаж (хотя не рекомендуется вешать в очень людных местах из-за возможных проблем с авторскими правами).
    
  • 
    Разделение внимания: персонаж ориентирован на детей, которым обычно лень читать, текст – на родителей, которые не знают панду кунг-фу.
    

  Итоги работы

  
  В ходе работ над сайтом и рекламными плакатами мною были освоены и применены навыки создания тем для популярной CMS Drupal, особенности создания каскадных стилей; правила создания печатной рекламной продукции, создание макетов в Adobe Illustrator. Также в ходе работы над сайтом были проанализированы сайты конкурентов и выявлены ошибки в дизайне – это учитывалось при создании eflt.ru.
  
  Итогом работ стали:
  
  • 
    Свод основных и наиболее частых правил создания печатной рекламной продукции.
    
  • 
    Три полностью векторных рекламных плаката форматом ISO 216 (куда входит А4). Дизайн плакатов выполнен в соответствии с правилами создания печатной рекламной продукции и пожеланиями заказчика.
    
  • 
    Описание всех рациональных способов изменения и создания тем для CMS Drupal. Свод правил создания тем. Небольшое общее руководство по дизайну.
    
  • 
    Дизайн сайта федерации в соответствии со всеми правилами создания тем. Отлаженный во всех популярных и устаревших популярных браузерах. Также при создании сайта использовались общие рекомендации по дизайну сайтов.
    

  Список литературы и ссылок

  1. 
     Современная реклама. Теория и практика Автор: E.Песоцкий Издательство: Феникс ISBN: 5-222-03497-6
     
  2. 
     Искусство убеждать. Русский рекламный плакат 1890-1954 Год выпуска: 2001 Издательство: "Контакт-культура"
     
  3. 
     Веб-дизайн. Автор: Якоб Нильсен Издательство: Символ-Плюс ISBN: 5-93286-004-9, 1-56205-810-X
     
  4. 
     http://drupal.ru/node/10550 - список статей, посвященных созданию и редактированию темы CMS Drupal
     
  5. 
     http://www.xserver.ru/computer/graphic/obsh/80/ - статья о выборе цвета (перечисление цветовых ассоциаций). Истинный автор статьи утерян.
     
  6. 
     http://habrahabr.ru/blogs/web_design/17336/ - памятка веб-дизайнеру одной из опытных студий
     
  7. 
     Веб-дизайн - Элементы опыта взаимодействия. Автор: Дж. Гарретт Издательство: Символ-Плюс ISBN: 978-5-93286-108-0