Оглавление

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

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

Европейская Федерация  Лао-Тайских боевых искусств предоставляет  услуги по обучению восточным видам  спорта таким как тайский бокс (муай-тай, тай-бо), кунг-фу и юдха-йога (боевая йога). Московское представительство федерации желает заняться рекламой своих услуг посредством печатной продукции и созданием информационного сайта (далее eflt.ru) своей федерации.

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

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

Провести анализ сайтов конкурентов, выделить их недостатки. Освоить создание тем для CMS Drupal. Собрать информацию о правилах и рекомендациях создания тематических сайтов.

Освоить теорию создания рекламных плакатов.

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

Разработать сайт федерации. На сайте должны быть: форум, фотогаллерея, новостная лента и возможность добавления своих статических страниц. Дизайн сайта должен соответствовать тематике ресурса, быть негромоздским в светлых тонах. Провести SEO.

В шапке сайта  должны присутствовать фотографии членов федерации, храма федерации и  цитата или мудрый совет. Меню должно быть выпадающим. Должна быть возможность вставить видеоролики с youtube.com в новости сайта.

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

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

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

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

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

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

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

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

Недостатки:

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

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

Также достаточно хорошо сделанный сайт, однако, имеющий больше недостатков, чем предыдущий.

Недостатки:

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

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

Недостатки:

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

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

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

Клуб «Барс» (muay-thai-kickboxing.com)

Ужасно оформленный сайт, сделанный исключительно для лучшей индексации в поисковиках, однако, концентрация ключевых слов зашкаливает, сайт занимает 5-7 позиции по запросу «тайский бокс москва».

Недостатки:

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

CMS Drupal является открытой и бесплатной системой менеджмента контента сайта. Основными преимуществами Drupal являются гибкая настройка, многофункциональность (за счет дополнительных модулей), низкая нагрузка на сервер, широкие возможности поисковой оптимизации и управления контентом. CMS Drupal второй год подряд является лучше CMS по версии конкурсов Webware 100 и Packt Publishing, сместив с этого места старейшую и популярную CMS «Joomla!».

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

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

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

Все темы в CMS Drupal располагаются в папке /themes/[название_темы]. Эта папка может содержать разное количество файлов, однако, есть набор основных, необходимых и рекомендованных к использованию:

• 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 файлов.

Первый случай является наиболее популярным и простым, не требует знаний программирования php. Чтобы изменить до неузнаваемости тему, достаточно переписать или добавить новых стилей в файл style.css.Однако, не всегда простое редактирование позволяет решить задачу и реализовать весь потенциал гибкости настройки CMS Drupal. Второй прием подходит для перегрузки функций отображения объектов темы. Каждый модуль может иметь свой .tpl.php файл, в нем можно оперировать всеми локальными переменными модуля, глобальными и тем самым добиться полного изменения отображения для конкретной темы, не внося изменений в код движка.

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

Файл style.css является стандартным основным файлом стилей любого сайта. В CMS Drupal в этом файле разделяются три типа стилей:

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

Часто в файле  можно встретить стили #wrapper[цифра]. Они используются в основном в темах с составным разделом контента.

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

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

Как было сказано  выше, *.tpl.php файлы содержат html-разметку темы, а page.tpl.php является основным файлом темы. По структуре page.tpl.php напоминает обычную html-страницу со вставками php-кода (для простоты восприятия рекомендуется использовать только переменные и условия). Например так выглядит раздел <head>:

<head>

<title><?php print $head_title; ?></title>

<?php print $head; ?>

<?php print $styles; ?>

<?php print $scripts; ?>

<?php print _sky_conditional_stylesheets(); ?>

</head>

Здесь в переменных $head, $styles, $scripts хранятся, собираемые другими модулями мета-теги, стили и javascript-коды.

Пример использования  php-кода для условий вывода информации:

<?php if ($site_name): ?>

<span id="site-name">

<a href="<?php print $base_path; ?>" title="<?php print $site_name; ?>">

<?php print $site_name; ?></a>

</span>

<?php endif; ?> 

Здесь, в случае, если $site_name (название сайта, которое можно задать в настройках CMS) непустое, то выводится все содержимое тега <span>.

Модуль  Theme Settings API

Поскольку очень  часто файлы style.css имеют большой объем и достаточно редко – комментарии, изменение темы можно облегчить с помощью популярного модуля Theme Settings API. Этот модуль позволяет в администраторском разделе сайта изменить наиболее важные параметры, такие как: шрифты, ширину сайта, некоторые другие параметры. Для того чтобы пользоваться этим модулем, тема должна его поддерживать. Обычно в папке темы создается отдельный файл theme-settings.php, в котором описываются функции возвращающие выбранные в админке параметры. Эти параметры передаются в модуль Theme Settings API, где генерируется файл, подключаемый в <head> в 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. Свод правил создания тем. Небольшое общее руководство по дизайну.
• Дизайн сайта федерации в соответствии со всеми правилами создания тем. Отлаженный во всех популярных и устаревших популярных браузерах. Также при создании сайта использовались общие рекомендации по дизайну сайтов.