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

В связи с особенностями  восприятия человеком информации и большим набором разделов сайта, решено использовать вложенную структуру и применять выпадающее меню. Основные разделы выделены следующим образом: главный, в котором содержатся разделы общей направленности, такие как информация о федерации, форум, 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. Свод правил создания тем. Небольшое общее руководство по дизайну.
• Дизайн сайта федерации в соответствии со всеми правилами создания тем. Отлаженный во всех популярных и устаревших популярных браузерах. Также при создании сайта использовались общие рекомендации по дизайну сайтов.