Помощь студентам в учебе
ДИЗАЙН-ПРОЕКТ КОРПОРАТИВНОГО САЙТА ПОЛИТЕХНИЧЕСКОГО ИНСТИТУТА ЮУрГУ
|
АННОТАЦИЯ 2
ВВЕДЕНИЕ 5
1. ТЕОРЕТИЧЕСКИЙ РАЗДЕЛ
1.1. Анализ аналогов 8
1.2. Анализ предпроектной ситуации 13
2. ПРАКТИЧЕСКИЙ РАЗДЕЛ
2.1. Проектно-художественные решения 23
2.2. Функционально-технологические и эргономические решения 28
ЗАКЛЮЧЕНИЕ 36
БИБЛИОГРАФИЧЕСКИЙ СПИСОК 38
ПРИЛОЖЕНИЯ
Приложение 1. Аналоги 40
Приложение 2. Эскизы 47
Приложение 3. Дизайн макет сайта 51
Приложение 4. Макет общей компоновки графической подачи ВКР 56
ВВЕДЕНИЕ 5
1. ТЕОРЕТИЧЕСКИЙ РАЗДЕЛ
1.1. Анализ аналогов 8
1.2. Анализ предпроектной ситуации 13
2. ПРАКТИЧЕСКИЙ РАЗДЕЛ
2.1. Проектно-художественные решения 23
2.2. Функционально-технологические и эргономические решения 28
ЗАКЛЮЧЕНИЕ 36
БИБЛИОГРАФИЧЕСКИЙ СПИСОК 38
ПРИЛОЖЕНИЯ
Приложение 1. Аналоги 40
Приложение 2. Эскизы 47
Приложение 3. Дизайн макет сайта 51
Приложение 4. Макет общей компоновки графической подачи ВКР 56
Актуальность темы исследования. Сегодня трудно представить компанию без собственного представительства в сети Интернет. Как правило таким представительством становится веб-сайт. C его помощью компания получает новый канал привлечения клиентов к своим товарам или услугам.
В создании сайта принимают участие не только программисты, но и дизайнеры, которые понимают тонкости подачи информации и её потребления посетителями сайта. Именно на основе визуального восприятия страницы осуществляется первый контакт посетителя с сайтом. Дизайн сайта и его качественное оформление
- это показатель имиджа, выражение отношения к посетителям сайта. Он играет большое значение в процессе его продвижения и раскрутки. Используя современные технологии можно создать качественный сайт, аккуратно и красиво оформленный, приятный для глаз. При оформлении дизайна необходимо правильно сочетать цвета, следить за цветовым балансом, грамотно подбирать пропорции, освещение и объем графических элементов. Дизайн сайта должен разрабатываться с учетом тематики и целей функционирования веб-ресурса [19].
Задача дизайнера сделать сайт индивидуальным, характерным для его темы и легкоузнаваемым. Однако дизайн, в полном смысле этого слова, никогда не заканчивается на внешнем виде и эстетической части. Нельзя чтобы хороший дизайн страдал функционально. «Хороший дизайн - это настолько мало дизайна, на сколько это возможно» как говорил Дитер Рамс, ведущий промышленный дизайнер фирмы Braun. Функциональность дизайна всегда стоит на первом месте, если это вещь, которой нужно в первую очередь пользоваться, а уж потом смотреть на неё. Сайт - это именно вещь, которым люди пользуются, пусть и в интернете [14].
В мире информационных технологий, где один щелчок мышью решает всё, результатом переизбытка информации, множественного выбора и легкости ухода со страницы сайта в другое место становится то, что пользователи в Сети выражают заметное нетерпение и настойчивость в мгновенном удовлетворении своих потребностей. Из этого вытекает следующее, современный веб-дизайн как объект
- это не только графическое оформление сайта, которое включает в себя разработку структуры и навигации сайта, но и разработку логики сайта с учетом удобства пользования (юзабилити).
Основной задачей при проектировании веб-сайта является максимальное упрощение навигации по страницам, грубо говоря, нужно чтобы опыт взаимодействия с сайтом был положительным. Необходимо сделать так, чтобы интерфейс сайта располагал пользователей к многократному посещению.
В современном мире мобильных устройств больше, чем компьютеров. Поэтому большинство людей даже не думает о том, как сайты могли бы выглядеть на нормальных экранах, а просто открывают их с мобильных устройств [11]. Они проводят много времени в социальных сетях, где интерфейс максимально упрощен для удобства. Из этого можно сделать вывод, что такое оформление и привлекает пользователей: простое, понятное и без лишних наворотов, с возможностью мгновенного поиска для быстрого перехода и навигации по страницам [20].
Степень разработанности проблемы. Инфраструктура сетевых ресурсов все больше развивается в сторону улучшения пользовательского опыта и повышения важности веб-среды для общества в целом. Это справедливо по отношению ко всем составляющим данной инфраструктуры. Вместе с тем, конечные пользователи вебсайтов оказывают наибольшее влияние на развитие именно визуального дизайна веб-сайтов. Сегодня развитие веб-дизайна в большей степени связано с бурным развитием инновационных пользовательских устройств, таких как планшеты и смартфоны, где управление производится с помощью небольшого сенсорного дисплея, разрешение которых значительно уступает экрану персонального компьютера. Благодаря этому возникает некорректного отображения множества веб-сайтов на подобных устройствах [4].
Создание корпоративного интерфейса и его адаптация для разных устройств — является одним из ключевых инструментов разработки современных веб-сайтов, соответствующих актуальным тенденциям изменения взаимодействия пользователя с контентом сайта. Глобальное развитие мобильных устройств просто обязывает дизайнеров и разработчиков изменять подход к созданию подобного рода ресурсов. Веб-сайт должен не только быть удобным и адаптивным, но еще и привлекать внимание, бросаться в глаза, быть узнаваемым. Огромную роль в этом играют небольшие элементы дизайна, на которые сразу обращают внимание. Грамотный дизайнер обязан учитывать эти факты, а также то, что любой интерфейс должен быть интуитивно понятным для пользователя, который моментально представляет, какой следующий шаг он может совершить.
Объект исследования - веб-дизайн сайта
Предмет исследования - дизайн корпоративного сайта Политехнического института ЮУрГУ
Цель исследования - разработать дизайн-макет корпоративного сайта Политехнического института ЮУрГУ в соответствии с современными требованиями к сайтам высших образовательных учреждений в целях улучшения имиджевой составляющей и повышения удобства пользования сайтом на всех типах устройств для всех категорий пользователей сайта.
Данная цель определила необходимость постановки и решения основных задач.
1. Рассмотреть аналоги веб-сайтов высших учебных заведений, изучить их классификацию, выявить актуальные приёмы и принципы в дизайне корпоративного сайта.
2. Разработать логотип, фирменную графику и интерактивные элементы для веб-сайта, опираясь на корпоративный стиль ЮУрГУ. Составить карту сайта, чтобы упростить разработку структуры и навигации. Сформировать совокупность проектно-художественных решений для дизайна интерфейса сайта.
3. Разработать дизайн-макет корпоративного сайта для разных устройств, сделать его функционально полезным для студентов, их родителей и администрации института.
Новизна исследования. Создан адаптивный веб-интерфейс, способствующий повышению юзабилити сайта (степень эффективности, продуктивности и удобства взаимодействия человека с интерфейсом). Разработаны интерактивные элементы, которые выражаются в мелких деталях, они делают ресурс интереснее и привлекают внимание посетителей.
Практическая значимость. Спроектированный сайт улучшает имидж Политехнического института, становится его визитной карточкой и повышает удобство пользования сайтом для всех категорий пользователей: студенты, абитуриенты и их родители, преподаватели и сотрудники вуза, представители контролирующих ведомств и конкурентов. Учтены эргономические особенности проектируемого сайта, благодаря чему созданы комфортные условия для получения необходимой информации об образовательной организации, её структуре, направлениях подготовки и т. д. Он может автоматизировать приём заявлений от абитуриентов и повысить количество заявок на обучение с сайта .
В создании сайта принимают участие не только программисты, но и дизайнеры, которые понимают тонкости подачи информации и её потребления посетителями сайта. Именно на основе визуального восприятия страницы осуществляется первый контакт посетителя с сайтом. Дизайн сайта и его качественное оформление
- это показатель имиджа, выражение отношения к посетителям сайта. Он играет большое значение в процессе его продвижения и раскрутки. Используя современные технологии можно создать качественный сайт, аккуратно и красиво оформленный, приятный для глаз. При оформлении дизайна необходимо правильно сочетать цвета, следить за цветовым балансом, грамотно подбирать пропорции, освещение и объем графических элементов. Дизайн сайта должен разрабатываться с учетом тематики и целей функционирования веб-ресурса [19].
Задача дизайнера сделать сайт индивидуальным, характерным для его темы и легкоузнаваемым. Однако дизайн, в полном смысле этого слова, никогда не заканчивается на внешнем виде и эстетической части. Нельзя чтобы хороший дизайн страдал функционально. «Хороший дизайн - это настолько мало дизайна, на сколько это возможно» как говорил Дитер Рамс, ведущий промышленный дизайнер фирмы Braun. Функциональность дизайна всегда стоит на первом месте, если это вещь, которой нужно в первую очередь пользоваться, а уж потом смотреть на неё. Сайт - это именно вещь, которым люди пользуются, пусть и в интернете [14].
В мире информационных технологий, где один щелчок мышью решает всё, результатом переизбытка информации, множественного выбора и легкости ухода со страницы сайта в другое место становится то, что пользователи в Сети выражают заметное нетерпение и настойчивость в мгновенном удовлетворении своих потребностей. Из этого вытекает следующее, современный веб-дизайн как объект
- это не только графическое оформление сайта, которое включает в себя разработку структуры и навигации сайта, но и разработку логики сайта с учетом удобства пользования (юзабилити).
Основной задачей при проектировании веб-сайта является максимальное упрощение навигации по страницам, грубо говоря, нужно чтобы опыт взаимодействия с сайтом был положительным. Необходимо сделать так, чтобы интерфейс сайта располагал пользователей к многократному посещению.
В современном мире мобильных устройств больше, чем компьютеров. Поэтому большинство людей даже не думает о том, как сайты могли бы выглядеть на нормальных экранах, а просто открывают их с мобильных устройств [11]. Они проводят много времени в социальных сетях, где интерфейс максимально упрощен для удобства. Из этого можно сделать вывод, что такое оформление и привлекает пользователей: простое, понятное и без лишних наворотов, с возможностью мгновенного поиска для быстрого перехода и навигации по страницам [20].
Степень разработанности проблемы. Инфраструктура сетевых ресурсов все больше развивается в сторону улучшения пользовательского опыта и повышения важности веб-среды для общества в целом. Это справедливо по отношению ко всем составляющим данной инфраструктуры. Вместе с тем, конечные пользователи вебсайтов оказывают наибольшее влияние на развитие именно визуального дизайна веб-сайтов. Сегодня развитие веб-дизайна в большей степени связано с бурным развитием инновационных пользовательских устройств, таких как планшеты и смартфоны, где управление производится с помощью небольшого сенсорного дисплея, разрешение которых значительно уступает экрану персонального компьютера. Благодаря этому возникает некорректного отображения множества веб-сайтов на подобных устройствах [4].
Создание корпоративного интерфейса и его адаптация для разных устройств — является одним из ключевых инструментов разработки современных веб-сайтов, соответствующих актуальным тенденциям изменения взаимодействия пользователя с контентом сайта. Глобальное развитие мобильных устройств просто обязывает дизайнеров и разработчиков изменять подход к созданию подобного рода ресурсов. Веб-сайт должен не только быть удобным и адаптивным, но еще и привлекать внимание, бросаться в глаза, быть узнаваемым. Огромную роль в этом играют небольшие элементы дизайна, на которые сразу обращают внимание. Грамотный дизайнер обязан учитывать эти факты, а также то, что любой интерфейс должен быть интуитивно понятным для пользователя, который моментально представляет, какой следующий шаг он может совершить.
Объект исследования - веб-дизайн сайта
Предмет исследования - дизайн корпоративного сайта Политехнического института ЮУрГУ
Цель исследования - разработать дизайн-макет корпоративного сайта Политехнического института ЮУрГУ в соответствии с современными требованиями к сайтам высших образовательных учреждений в целях улучшения имиджевой составляющей и повышения удобства пользования сайтом на всех типах устройств для всех категорий пользователей сайта.
Данная цель определила необходимость постановки и решения основных задач.
1. Рассмотреть аналоги веб-сайтов высших учебных заведений, изучить их классификацию, выявить актуальные приёмы и принципы в дизайне корпоративного сайта.
2. Разработать логотип, фирменную графику и интерактивные элементы для веб-сайта, опираясь на корпоративный стиль ЮУрГУ. Составить карту сайта, чтобы упростить разработку структуры и навигации. Сформировать совокупность проектно-художественных решений для дизайна интерфейса сайта.
3. Разработать дизайн-макет корпоративного сайта для разных устройств, сделать его функционально полезным для студентов, их родителей и администрации института.
Новизна исследования. Создан адаптивный веб-интерфейс, способствующий повышению юзабилити сайта (степень эффективности, продуктивности и удобства взаимодействия человека с интерфейсом). Разработаны интерактивные элементы, которые выражаются в мелких деталях, они делают ресурс интереснее и привлекают внимание посетителей.
Практическая значимость. Спроектированный сайт улучшает имидж Политехнического института, становится его визитной карточкой и повышает удобство пользования сайтом для всех категорий пользователей: студенты, абитуриенты и их родители, преподаватели и сотрудники вуза, представители контролирующих ведомств и конкурентов. Учтены эргономические особенности проектируемого сайта, благодаря чему созданы комфортные условия для получения необходимой информации об образовательной организации, её структуре, направлениях подготовки и т. д. Он может автоматизировать приём заявлений от абитуриентов и повысить количество заявок на обучение с сайта .
Заказчик данного проекта - Политехнический институт, одно из крупнейших подразделений ЮУрГУ, который на момент проектирования не имел собственного сайта. Информацию об учебной организации можно было найти на главном сайте ЮУрГУ, а также на сайтах некоторых факультетов или страницах в социальных сетях. Все эти ресурсы имеют разные стили и никак не связаны между собой. Поэтому создание корпоративного веб-сайта было актуально для Политехнического института. Кроме того, в последнее время наблюдается обострение конкуренции между высшими учебными заведениями. И корпоративный сайт позволяет выглядеть достойно в этой конкурентной борьбе.
В связи с большим объемом исследовательских и проектных задач, работа была поделена на этапы.
Сначала были рассмотрены аналоги веб-сайтов высших учебных заведений, изучена их классификация, и выявлены актуальные приёмы и принципы в дизайне корпоративного сайта. Например, плюсом в его разработке является максимальное упрощение навигации по страницам, грубо говоря, нужно чтобы опыт взаимодействия с сайтом был положительным. Необходимо сделать так, чтобы интерфейс сайта располагал пользователей к многократному посещению.
При изучении аналогов было выявлено, что пользователя привлекает простое, понятное оформление, без лишних наворотов, с возможностью мгновенного поиска для быстрого перехода и навигации по страницам [20].
Второй этап работы - разработка логотипа, фирменной графики и интерактивных элементов для веб-сайта, с опорой на корпоративный стиль ЮУрГУ. Следует отметить значимость создания и интеграции корпоративного стиля в оформление веб-сайта для современного высшего учебного заведения. Он помогает в решении ряда задач, таких как: создание образа института в глазах потребителей (целевой аудитории); выделение института в ряду других учебных заведений с похожим набором специальностей, вызывает эмоциональную реакцию целевой аудитории, гарантирующую визуальные ассоциации в будущем; повышает эффективность рекламы и участвует в формировании благоприятного имиджа института [17].
Разработанный веб-сайт выполняет много функций, так как имеет большую целевую аудиторию. Я выделила пять аудиторных групп, на которые направлен сайт: абитуриенты, их родители, студенты, сотрудники института и партнеры .
Каждый из них преследует свои цели, посещая сайт. Например, абитуриентам необходимо найти актуальную информации о поступлении, студентам и сотрудникам учебные материалы и новости института. Мне как дизайнеру нужно было создать благоприятное впечатления от работы с сайтом для всех категорий пользователей, тогда с большой долей вероятности оно будет способствовать успешному и долгосрочному взаимодействию с институтом.
В процессе работы была создана карта сайта, продумана логическая структура веб-страниц, выявлены наиболее удобные решения подачи информации, а также сформирована совокупность проектно-художественных решений для дизайна вебсайта, соответствующих разработанной структуре и навигации.
Последним этапом создания корпоративного веб-сайта была адаптация созданного интерфейса под разные устройства. Мобильная версия сайта по стилистике, цвету и содержанию полностью соответствует основному сайту. Но интерфейс упрощается с помощью нескольких приёмов, таких как:
- все информационные блоки собираются в одну колонку, а в верхней части страницы располагаются элементы навигации;
- приём «гармошка», когда контент скрывается под заголовками в виде кнопок;
- меню складывается в одну кнопку, называемую бургер-меню, это обеспечивает удобство поиска и экономит пространство;
- дизайн содержит минимум графики, чтобы не перегружать скорость загрузки страницы.
Таким образом, в целях улучшения имиджевой составляющей и повышения удобства пользования сайтом на всех типах устройств для всех категорий пользователей, был разработан дизайн-макет корпоративного сайта Политехнического института ЮУрГУ в соответствии с современными требованиями к сайтам высших образовательных учреждений.
На основе дизайна сайта был создан ролик, демонстрирующий работу прототипа. Для демонстрации дизайн-проекта разработана серия из пяти графических планшетов, содержащих результаты проектной деятельности (рис. 4.1), а также многостраничная презентация проекта в электронном виде.
В связи с большим объемом исследовательских и проектных задач, работа была поделена на этапы.
Сначала были рассмотрены аналоги веб-сайтов высших учебных заведений, изучена их классификация, и выявлены актуальные приёмы и принципы в дизайне корпоративного сайта. Например, плюсом в его разработке является максимальное упрощение навигации по страницам, грубо говоря, нужно чтобы опыт взаимодействия с сайтом был положительным. Необходимо сделать так, чтобы интерфейс сайта располагал пользователей к многократному посещению.
При изучении аналогов было выявлено, что пользователя привлекает простое, понятное оформление, без лишних наворотов, с возможностью мгновенного поиска для быстрого перехода и навигации по страницам [20].
Второй этап работы - разработка логотипа, фирменной графики и интерактивных элементов для веб-сайта, с опорой на корпоративный стиль ЮУрГУ. Следует отметить значимость создания и интеграции корпоративного стиля в оформление веб-сайта для современного высшего учебного заведения. Он помогает в решении ряда задач, таких как: создание образа института в глазах потребителей (целевой аудитории); выделение института в ряду других учебных заведений с похожим набором специальностей, вызывает эмоциональную реакцию целевой аудитории, гарантирующую визуальные ассоциации в будущем; повышает эффективность рекламы и участвует в формировании благоприятного имиджа института [17].
Разработанный веб-сайт выполняет много функций, так как имеет большую целевую аудиторию. Я выделила пять аудиторных групп, на которые направлен сайт: абитуриенты, их родители, студенты, сотрудники института и партнеры .
Каждый из них преследует свои цели, посещая сайт. Например, абитуриентам необходимо найти актуальную информации о поступлении, студентам и сотрудникам учебные материалы и новости института. Мне как дизайнеру нужно было создать благоприятное впечатления от работы с сайтом для всех категорий пользователей, тогда с большой долей вероятности оно будет способствовать успешному и долгосрочному взаимодействию с институтом.
В процессе работы была создана карта сайта, продумана логическая структура веб-страниц, выявлены наиболее удобные решения подачи информации, а также сформирована совокупность проектно-художественных решений для дизайна вебсайта, соответствующих разработанной структуре и навигации.
Последним этапом создания корпоративного веб-сайта была адаптация созданного интерфейса под разные устройства. Мобильная версия сайта по стилистике, цвету и содержанию полностью соответствует основному сайту. Но интерфейс упрощается с помощью нескольких приёмов, таких как:
- все информационные блоки собираются в одну колонку, а в верхней части страницы располагаются элементы навигации;
- приём «гармошка», когда контент скрывается под заголовками в виде кнопок;
- меню складывается в одну кнопку, называемую бургер-меню, это обеспечивает удобство поиска и экономит пространство;
- дизайн содержит минимум графики, чтобы не перегружать скорость загрузки страницы.
Таким образом, в целях улучшения имиджевой составляющей и повышения удобства пользования сайтом на всех типах устройств для всех категорий пользователей, был разработан дизайн-макет корпоративного сайта Политехнического института ЮУрГУ в соответствии с современными требованиями к сайтам высших образовательных учреждений.
На основе дизайна сайта был создан ролик, демонстрирующий работу прототипа. Для демонстрации дизайн-проекта разработана серия из пяти графических планшетов, содержащих результаты проектной деятельности (рис. 4.1), а также многостраничная презентация проекта в электронном виде.
