Министерство образования и науки российской федерации фгбоу впо «алтайский государственный университет»

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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