ПРОЕКТНО-КОМПОЗИЦИОННЫЙ РАЗДЕЛ

 

Концепция определяет основные идеи и направления развития, формирует идеологическую базу, единое видение проекта у всех участников. Определение основных идей имеет исключительно прикладное значение для моделирования сайта [12]. Проектная концепция является результатом осмысления проектных ситуаций, содержит выработанные в процессе анализа и синтеза новые существенные свойства сайта, позволяющие осуществить культурную коммуникацию и обеспечить потребительскую функцию как цель дизайн-проекта.

Дизайнерская концепция – это смысловое ядро всего проекта, его основная идея, содержащая основные принципы подачи информации, технической реализации, дизайна экранного интерфейса, системы навигации, структуру разделов сайта и информационного наполнения [11].

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

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

Принципы гармонизации проектируемого сайта:

- повторение свойств целого в его частях делает дизайн унифицированным и передает основную идею его создания, а также подчеркивает логическую связанность (корпоративные цвета, формы, шрифты, графика);

- соподчиненность частей акцентирует внимание пользователей на главных элементах, отражает их важность, и обособляет второстепенные или нейтральные (структура и навигация сайта);

- выравнивание упорядочивает все элементы, максимально унифицируя их (текстовые блоки, таблицы, изображения, навигационные кнопки) [18];

- уравновешенность частей целого приводит к сбалансированному дизайну. Ассиметричный баланс достигается за счет равномерного распределения визуальной нагрузки по той или иной оси, но отдельные элементы двух составляющих дизайна не являются зеркально одинаковыми (все страницы сайта издательства ТюмГНГУ будут ассиметричны);

- удобство восприятия зависит от компоновки всех элементов страницы.

Критерием гармоничности выступает комплекс ощущений от эмоциональной ориентации объекта дизайна. Чем гармоничнее этот комплекс, тем легче будет восприниматься общая картина [8].

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

Итоговый макет сайта представлен в Приложении В.

Огромную роль в разработке дизайна сайта издательства ТюмГНГУ сыграл цвет. Ограниченная цветовая гамма подчеркивает «строгость» и выдержанность. За основу взят синий цвет, который является корпоративным цветом Тюменского государственного нефтегазового университета. В психологии синий цвет традиционно считается цветом уверенных в себе, стабильных, решительных и целеустремленных людей, которым можно поручить важную работу. Он символизирует постоянство, честность, добрую славу, что раскрывает основную дизайн-концепцию сайта [17]. Дополнительными цветами являются белый и красный. Белым цветом представлены текстовые блоки, которые хорошо выделяются на синем фоне, что обеспечивает хорошую читабельность. Некоторые белые элементы (горизонтальные линии, подложки) придают сайту организованный внешний вид. А красный цвет добавляет динамичности, ведь его значение – это сильная энергия, завоевание, активность. Эти три цвета дублируются в логотипе, что делает композицию цельной и логически правильной.

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

Для разрабатываемого сайта выбрано семейство шрифтов Arial (Рисунок 2.1). Это шрифт без засечек и, практически, без контраста между вертикальными и горизонтальными штрихами, что придает уверенное и простое начертание и подходит для удобства читабельности. Разное начертание (обычный, полужирный и очень жирный) позволяет не комбинировать его с другими шрифтами.А его геометричный конструктивизм подчеркивает строгую статику, которая уравновешивает все элементы страницы. Кроме того, Arial является безопасным стандартным шрифтом, так как устанавливается вместе с операционной системой [2]. Акцентирование шрифта производится за счет его окрашивания в светло-желтый цвет, который сочетается с изображенным зданием университета ТюмГНГУ.

 

Рисунок 2.1 – Различные начертания шрифта Arial

Древовидная структура сайта не создает путаницы среди его страниц и логически организовывает весь контент. На сайте предусмотрено навигационное меню, которое располагается в одном и том же месте на всех страницах, что хорошо структурирует всю информацию, делает её легкодоступной и позволяет в любой момент оказаться на нужной странице.

Шапка и подвал сайта во всех его разделах одинаковые и отображают авторские права, обратную связь и ссылку на главный официальный сайт Тюменского государственного нефтегазового университета.

Контент отражает предназначение сайта и не утомляет пользователей чтением, так как представлена только краткая и основная информация, а более подробную можно скачать. Для этого были разработаны дополнительные макеты прайс-листа, который представлен в Приложении Г на рисунке Г.1, и требованиям к рукописям, изображен в Приложении Г на рисунке Г.2.

 

ТЕХНОЛОГИЧЕСКИЙ РАЗДЕЛ

 

Для формирования сайта, то есть написания его исходного кодаи создания графики, используются специальные языки и программы. Чтобысоздать сайт, необходимо владеть HTML – языком гипертекстовой разметки, но, чтобы сделать его ещё лучше и привлекательнее, потребуютсяразличные графические редакторы (AdobePhotoshop,AdobeIllustrator, CorelDraw и другие) и технология CSS.

Создание обновленного логотипа библиотечно-издательского комплекса, а также верстка макетов страниц сайта издательства ТюмГНГУ были выполнены в программе CorelDrawX7, с использованием Adobe Photoshop CC 2015.

Для того, чтобысайтработал корректно и мог в полной мере функционировать, основная сборка производилась в профессиональной программе для вёрстки веб-страниц – AdobeDreamweaver. Данная программа позволяет писать код, создавать интерактивность, настраивать свойства отображения элементов и имеет визуальную карту сайта, на которой графически отображается его структура, что обеспечивает удобство при работе в программе [20]. Основная функция Adobe Dreamweaver– создание HTML и CSS кода.

Проектируемы сайт имеет семь одинаково оформленных страниц, одна из которых главная. Фон, шапка, подвал и навигационное меню на всех страницах повторяются, меняется остальной контент. CSS код единый для всех страниц, а HTML для каждой индивидуален.

Более 70% информации человек воспринимает через визуальные образы. Изображения на сайте привлекают внимание, а тематические изображения усиливают эффект от текстовой информации. Поэтому стоит учитывать размер изображений, чем он больше – тем больше вес и, соответственно, более долгая загрузка при открытии сайта [21].Эти нюансы были учтены при выборе и обработке изображений для проектируемого сайта. Все необходимые операции по работе с изображениями проводились в программе Adobe Photoshop CC 2015. Каждому изображению и фотографии был задан определенный размер, чтобы загрузка не была долгой, а изображение сохраняло свой вид.

ЗАКЛЮЧЕНИЕ

 

Курсовая работа на тему «Дизайн и разработка сайта Издательского центра ТюмГНГУ» является комплексной научно-практической работой, объединяющей теоретическую и практическую части.

Актуальность выбранной темы раскрывается во введении и научно-исследовательском разделе пояснительной записки, где содержатся основные результаты исследования, ставшего теоретическим основанием выполнения практической творческой работы.

В ходе выполнения курсовой работы были проведены исследования актуальных трендов в веб-дизайне 2016 года, научное исследование развития технологий в веб-дизайне, анализ аналогов проектируемого сайта издательства и разработка предполагаемого контента веб-сайта.

Проектно-композиционный раздел содержит результаты проектирования и обоснование проектных решений (выбор дизайн-концепции сайта, работа над поисковыми эскизами, графическое решение итогового эскиза). Технологический раздел представляет собой дополнение к результатам выполнения основных задач курсовой работы. Практическая часть исследования – разработанный дизайн-проектсайтаиздательского центра ТюмГНГУ.

В процессе выполнения курсовой работы были приобретены новые знания о современных научных разработках в области веб-программирования, изучены новые тренды, а также современное состояние уже существующих сайтов издательств учебных заведений, освоена профессиональная программа версткивеб-страниц – Adobe Dreamweaver, усовершенствована и отточена работа в компьютерных программах CorelDrawX7 и Adobe Photoshop CC 2015.

Представленные результаты позволяют сделать вывод о том, что задачи курсового проекта решены, цель курсового проекта достигнута.