Балмагамбетов А.М., Курмангазиева Л.Т.
СРАВНИТЕЛЬНЫЙ АНАЛИЗ ВЕБ-ДИЗАЙНА ОБРАЗОВАТЕЛЬНЫХ САЙТОВ *
Аннотация:
в статье рассматривается веб-дизайн сайтов образовательных учреждений высшего образования Казахстана, России и Великобритании. Наличие эстетически разработанного сайта, имеющего логически обоснованный доступ и навигацию для поиска необходимой информации влияет на частоту посещений пользователей, что оказывает дополнительное влияние на приобретение привлекательного имиджа и получение финансовой выгоды. Многие тренды реализуются в различных вариантах, нередко смешиваются, современные тенденции творчески обрабатываются для создания запоминающегося дизайна. Выбор комбинаций зависит от направленности веб-ресурса, видения веб-дизайнера, которому необходимо учитывать предполагаемый стиль конечного продукта для получения эффектного результата.
Ключевые слова:
веб-дизайн, веб-сайт, интерактивность, микровзаимодействие, анимация, графический дизайн
DOI 10.24412/2712-8849-2025-687-1591-1605
Введение. В настоящее время стремительное развитие технологий веб-дизайна, вызванное бурным ростом информатизации мирового общества, привело к тому, создание сайтов превратилось в наиболее востребованную услугу на рынке информационных технологий.Веб-разработка варьируется от создания простой статичной страницы с простым текстом до сложных сетевых приложений, электронных предприятий и социальных сетей [1]. Тенденция по созданию интерактивного сайта была озвучена в 2015 году в сводках аналитиков. В статье Jerry Cao на сайте «The Next Web» было заявлено: «Прошедший год принес целую волну новых техник, стилей и трендов, большинство из которых возникли для удовлетворения потребностей растущего рынка мобильных устройств. Технический прогресс изменил ожидания пользователей по поводу эстетики и функциональности сайтов и приложений» [2].Среди интерактивных трендов веб-дизайна анимация, фоновое видео и микро-взаимодействие. Небольшие анимации на веб-сайте, в рекламе или в дизайне приложений могут заставить пользователей больше взаимодействовать с тем, что вы рекламируете. К примеру, чтобы привлечь пользователей, веб-сайты отображают контент с мигающими эффектами, указывающими на функцию интерактивной навигации или рекламу [3]. Эти типы анимаций могут быть интегрированы во все среды дизайна. Анимация должна соответствовать другим трендам дизайна: минимализм, простые линии, яркие цвета, 3D графика, градиенты, естественные фотографии и пр. Видеоролики на веб-сайте могут увеличить коэффициент конверсии, об этом говорят исследования. Видео может сформировать понимание пользователя в считанные секунды, оно может быстро передать ваше сообщение и может задержать пользователя дольше на веб-сайте. На самом деле полноэкранное видео вошло в тренды уже довольно давно, однако потом сошло на нет как ненужный элемент из-за невозможности телефонов загружать большие файлы. Но, в данный момент, производительность гаджетов заметно выросла и возвращает видео в качестве презентабельного фона сайта.Стало популярным включение микро-взаимодействия в веб-дизайн. Микро-взаимодействия — это небольшие анимации, используемые на мобильных платформах для создания тонких визуальных эффектов. Каждый раз, нажимая на кнопки в социальных сетях или пролистывая страницу сайта, посетитель хочет участвовать в микровзаимодействиях. Динамические изображения также привлекают внимание пользователей и повышают частоту кликов на странице. Микровзаимодействия состоят из четырех частей: триггера, правил, обратной связи и циклов/режимов. И хоть они не относятся к функциям продукта, тем не менее они все равно важны [4].Веб-сайт служит объективным средством для частого доступа, и его эстетическая оценка может интуитивно влиять на частоту посещений пользователей, тем самым оказывая дополнительное влияние на экономические и финансовые выгоды [5]. Многие тренды реализуются в различных вариантах, нередко пересекаются, так как каждый из них — самодостаточная идея для разработки концепции проекта. В некоторых случаях смешивание и творческая обработка тенденций помогает создать по-настоящему запоминающийся дизайн. Выбор комбинаций зависит от задумки и направленности веб-ресурса, а также видения веб-дизайнера. Предполагаемый стиль конечного продукта приходится учитывать для получения эффектного результата (при намерении создать конкретный дизайн в эклектичном, авангардном, футуристическом стиле, его структура и компоненты легче выявляются на самом этапе разработки).Основная цель графического дизайна — помочь пользователю быстро интуитивно сориентироваться в интерфейсной среде. Как и дизайн в любой другой области, он должен соответствовать основным правилам, т. е. сделать воздействующий образ красивым, полезным, простым, стильным и запоминающимся и т.д. Для повышения качества пользовательского функционирования конкретного веб-ресурса, необходимо его профессионально технически обеспечить и оптимизировать. Создание сайтов высокого уровня требует усилий со стороны разработчиков, дизайнеров и контент-менеджеров.Представляется интересным изучить графику веб-дизайна известных университетов Казахстана, России, Великобритании и США. Казахский Национальный университет им. аль-Фараби, [6] Московский государственный университет имени М.В. Ломоносова [7], Санкт-Петербургский государственный университет [8], и Оксфордский университет [9] - наиболее известные и привлекательные места учебы для получения престижного образования.Анализ веб-дизайна сайтов будет осуществлен по следующим параметрам: графика и визуальные элементы, логотип, цветовая палитра, типография, навигация и структура, адаптивность и функциональность.Графический дизайн сайта Московского государственного университета имени М.В. Ломоносова (МГУ) отражает статус и традиции одного из лучших вузов России. На сайте МГУ используются такие серьезные цвета, как темно-синий, бордовый и золотой, символизирующие традиции и академическую строгость. Эти цвета соответствуют репутации университета, создающего серьезную атмосферу.Богатая история университета подчеркивается с помощью изображений исторических зданий и кампусов. Однако сайт может быть немного перегружен изображениями, особенно на длинных страницах. Визуальный стиль достаточно строгий и классический, без ярких элементов и перегруженной графики, поддерживающей официальный имидж организации. Визуальные элементы и дизайн веб-сайт МГУ создают атмосферу академического сообщества, используя фотографии кампуса, учебных мероприятий и студентов. Однако в некоторых разделах слишком много информации, что затрудняет понимание содержания.На сайте МГУ используется строгий, классический шрифт, который соответствует общему имиджу университета. Разделение текста на блоки и использование заголовков помогает пользователям быстро ориентироваться.На сайте собрано много информации: новости, исследования, учебные программы. Это делает сайт удобным для студентов и преподавателей, но сложным для абитуриентов, особенно учитывая плотность текста.Графический дизайн сайта МГУ эффективно отражает статус и наследие университета, создавая атмосферу академической строгости и надежности. Для развития сайта можно оптимизировать навигацию и упростить визуальное оформление некоторых разделов, чтобы улучшить пользовательский опыт. С точки зрения адаптивности и функциональности веб-сайт МГУ удобен для использования на различных устройствах и обеспечивает легкий доступ к информации.В дизайне сайта Санкт-Петербургского государственного университета (СПбГУ) учтены как общие принципы современного веб-дизайна, так и особенности, делающие его уникальным. Надо отметить, что сайт СПбГУ - это не только информационная площадка, но и важный инструмент для формирования имиджа университета и общения с абитуриентами, студентами, преподавателями и партнерами. Давайте рассмотрим некоторые примечательные аспекты веб-дизайна сайта СПбГУ.При анализе общего визуального стиля становится ясно, что сайт СПбГУ выполнен в сдержанном, простом визуальном стиле, очень подходящем для учебного заведения с многолетней историей. В его дизайне отражается академическая атмосфера и профессионализм.Для цветовой палитры характерно использование оттенков белого и серого, а также глубокого синего цвета, который традиционно ассоциируется с интеллектом и стабильностью. Все это создает эмоциональное состояние сдержанности и спокойствия, отсутствия суеты. Логотип вуза прост и понятен, отражает академическую направленность и высокую репутацию университета.Типография сайта нацелена на пользователя. Шрифты на сайте СПбГУ читабельны, предоставляемая информация разборчива. При этом шрифты вполне классические и поддерживают академический имидж. Основной шрифт - sans serif, который помогает на различных устройствах. Кроме того, дается четкая иерархия текста: в веб-дизайне используется разграничение между заголовками, подзаголовками и основным текстом. Это помогает пользователям быстро ориентироваться в контенте и понимать, где найти нужную информацию.Навигация сайта СПбГУ - важный аспект, так как университет предлагает большой объем информации для разных категорий пользователей (студентов, преподавателей, абитуриентов и т.д.). Главное меню разделено на такие категории, как "Об университете", "Образование", "Наука", "Новости". Это позволяет пользователям легко найти интересующий их раздел. Подменю и фильтры: Выпадающие меню и фильтры используются для подробных разделов, таких как программы исследований или обучения. Это улучшает навигацию, но иногда может вызвать ненужные сложности для новых пользователей.Графика на сайте СПбГУ играет важную роль в поддержке визуального распознавания и выделении ключевых элементов. Изображения кампуса, студентов, научных мероприятий часто используются на главной странице и в разделе новостей. Эти изображения создают атмосферу университетской жизни и повышают активность посетителей.В целом для сайта характерно минимальное использование графики: в отличие от некоторых динамичных сайтов, на сайте СПбГУ использование графики сведено к минимуму. Это ускоряет загрузку страниц. Несмотря на большой объем контента, сайт загружается быстро, что очень важно для университетского сайта с большим количеством информации.Сайт СПбГУ прекрасно адаптирован к различным устройствам и может быть доступен как с компьютеров, так и с мобильных устройств. Все основные части сайта оптимизированы для мобильных устройств. Меню превращаются в удобные гамбургер-меню, а текст и изображения автоматически подстраиваются под размер экрана.Контент и взаимодействие с пользователями. На сайте СПбГУ широко используется текстовый контент для информирования пользователей о новостях, событиях, учебных программах и научных достижениях. Новости и события: Раздел "Новости и события" часто обновляется, чтобы университет всегда держал студентов и партнеров в курсе событий. Однако в некоторых случаях объем информации может перегрузить пользователей, особенно если они ищут конкретную информацию. На сайте предусмотрена форма обратной связи и встроенная функция поиска по сайту для облегчения взаимодействия с пользователями.Улучшение доступности и пользовательского опыта. Поддержка доступности: хотя сайт в целом удобен для пользователей, следует отметить, что он может быть несколько сложным для людей с ограниченными возможностями. Например, контрастность текста в некоторых разделах может быть улучшена, чтобы облегчить чтение для людей с ослабленным зрением. В целом сайт предлагает хорошие пользовательские возможности, но в некоторых случаях (например, при поиске квитанций или научных работ) структура сайта может быть чрезмерно сложной и не сразу заметной для новых пользователей.Таким образом, анализ дизайна сайта Санкт-Петербургского государственного университета показывает, что он профессионально выполнен в общей интровертной цветовой палитре и соответствует статусу одного из лучших учебных заведений Российской Федерации. Основное внимание уделено информационному разделу, а визуальный стиль подчеркивает академическую атмосферу университета.При рассмотрении веб-дизайн сайта Оксфордского университета. Оксфордский университет обязательно возникает эффект ожидания, ведь это один из самых престижных университетов в мире, и его сайт должен соответствовать этому высокому статусу, быть удобным для пользователей и предоставлять качественную информацию. Сайт должен быть не только эстетически привлекательным, но и функциональным для различных категорий пользователей: студентов, преподавателей, абитуриентов и партнеров.Общий визуальный стиль сайта Оксфордского университета отличается простым и элегантным дизайном, в котором традиции сочетаются с современностью. Это создает уникальную атмосферу, которая гармонирует с академической средой и подчеркивает научную репутацию университета.В цветовой палитре основными цветами стали темно-синий, белый и золотой, которые связаны с историей и научным наследием университета. Темно-синий используется в фоновом режиме и навигации, чтобы создать ощущение стабильности и солидности, а золотой выделяет важные элементы (например, ссылки и кнопки) и акцентирует внимание на ключевых разделах.Шрифты, используемые на сайте, классические и легко читаемые. Сайт Oxford выполнен в классическом стиле, все элементы четко выстроены. Основной шрифт - классический sans-serif (без засечек), который помогает улучшить читабельность. Использование различных стилей и размеров шрифта помогает подчеркнуть важные блоки текста и сделать информацию более понятной. Иерархическая структура: заголовки и подзаголовки выделены жирным шрифтом, а текстовые блоки разделены на абзацы для удобства чтения. В большинстве разделов сайта используется серый или черный текст на белом фоне, что улучшает читаемость, особенно на длинных страницах с большим количеством контента.Навигация и структура сайта. Меню на сайте Оксфорда четко структурировано и позволяет легко находить информацию. Однако из-за большого количества информации и разделов сайт может показаться немного сложным для новых пользователей, особенно для тех, кто не знаком с образовательной терминологией и программами. Главное меню содержит основные категории "Оксфордский университет", "Образование", "Исследования", "Жизнь Оксфорда" и "Приложения". Они хорошо структурированы и позволяют пользователям довольно легко находить нужную информацию. Сайт предлагает подробные фильтры для ускорения поиска информации об учебных программах, факультетах и исследовательских программах. Однако большое количество подменю иногда затрудняет навигацию для неопытных пользователей. Инструмент поиска на сайте помогает пользователям быстро и точно находить информацию по ключевым словам.Графика и визуальные эффекты. Графика минималистична, используется без излишней анимации и динамических элементов. Это соответствует академическому стилю и не отвлекает от содержания. Изображения на сайте Оксфордского университета служат двум основным целям: информировать и вдохновлять. Это достигается благодаря высококачественным изображениям кампуса, студентов и сотрудников. На главной странице часто используются фотографии важных зданий, таких как библиотеки и исторические здания университета, чтобы помочь передать атмосферу учебного заведения. Эти изображения подчеркивают долгую историю и академическое величие университета. Фотографии студентов и сотрудников, а также изображения учебных мероприятий помогают показать активную жизнь университета. Студенты изображены в самых разных ситуациях, что создает ощущение движения и вовлеченности.Мобильные версии и адаптации. Сайт Оксфордского университета прекрасно адаптируется к различным устройствам и экранам. На мобильных устройствах меню сворачивается в компактное гамбургер-меню, а изображения и текст подстраиваются под размер экрана. Все основные функции сайта остаются доступными, а навигация - простой. Несмотря на большое количество изображений и контента, сайт загружается быстро, что является важным фактором для мобильных пользователей.Пользовательский опыт (UX). Сайт Оксфорда предлагает хорошие возможности для пользователей, хотя для того, чтобы освоить его, требуется некоторое время. Информация хорошо организована и подходит для большинства типов пользователей, таких как студенты, преподаватели и абитуриенты. Однако из-за большого объема контента новичкам иногда трудно сразу найти нужный раздел. На сайте можно имеются формы обратной связи, а также контактную информацию для ключевых отделов, таких как регистрационная и административная службы. Сайт Оксфордского университета также стремится быть доступным для людей с ограниченными возможностями. Хороший контраст между текстом и фоном, подходит для людей с ослабленным зрением. Изображения содержат альтернативный текст (теги alt), чтобы помочь пользователям с ослабленным зрением.Сайт Оксфордского университета - пример высококачественного веб-дизайна для образовательных платформ, гармонично сочетающего традиции и инновации. Он создает у пользователей ощущение академической солидности и обеспечивает легкий доступ к широкому спектру контента.Сильные стороны: Сильный, сдержанный стиль, отличная адаптивность, логичная структура и аккуратная типографика. Возможно, будет полезно упростить некоторые элементы навигации для новых пользователей и сделать информацию более доступной для людей с ограниченными возможностями.Рассмотрим ключевые элементы графического дизайна сайта Казахского национального университета имени аль-Фараби (КазНУ). Веб-дизайн призван создать профессиональный и академический имидж вуза. Цвета, используемые на сайте КазНУ, отражают академический стиль и официальный характер учебного заведения. Основные цвета сайта - темно-синий, белый и золотой. Темно-синий цвет символизирует строгость, стабильность и академическую репутацию. Золото используется для подчеркивания ключевых элементов и точек, чтобы создать ощущение престижа и солидности. Белый цвет помогает сбалансировать более насыщенные тона, делая сайт чище и удобнее для просмотра. Основной фон сайта обычно оставляют светлым или белым, а ключевые точки (например, кнопки, заголовки) выделяют золотым и темно-синим цветом, чтобы создать гармоничный и сдержанный вид. Цветовая палитра хорошо сочетается с имиджем известного учебного заведения. Использование золотого цвета выделяет важные элементы (например, кнопки и ссылки) и привлекает внимание к важной информации.На сайте КазНУ используется большое количество высококачественных изображений, включая фотографии кампуса, учебных корпусов, студентов, мероприятий и научных достижений. Графические элементы активно используются как на главной странице, так и в новостном разделе для продвижения различных мероприятий и достижений университета. Фотографии кампуса создают ощущение присутствия и помогают пользователям лучше понять атмосферу университета. Изображения студентов и сотрудников создают ощущение связанности и подчеркивают активную жизнь университета. Использование инфографики в отдельных разделах помогает наглядно представить информацию о научных проектах, образовательных программах и достижениях университета, что улучшает восприятие и облегчает понимание сложного материала.Слишком большое количество изображений на некоторых страницах сайта может затруднить восприятие текста и отвлечь пользователей от важной информации. Иногда слишком большие или неоптимизированные изображения могут замедлять загрузку веб-страниц, особенно для пользователей с медленным интернет-соединением. На главной странице может быть слишком много переходных баннеров и слайдеров с красочными изображениями, которые отвлекают пользователя от основной идеи. На главной странице сайта есть слайдер с большими изображениями, которые быстро меняются. Если пользователи не успевают прочитать необходимую информацию, они могут пропустить важные объявления.На сайте КазНУ существует строгая иерархия содержания, основными категориями которой являются "Университеты", "Новости", "Факультеты", "Научная деятельность" и "Приемная комиссия". Однако в некоторых случаях элементы на главной странице могут быть чрезмерно сложными, и пользователю приходится выбирать нужную информацию из большого количества ссылок.Сайт КазНУ доступен для мобильных устройств. На мобильных устройствах элементы сайта корректно перестраиваются, меню превращается в удобное гамбургер-меню, а изображения автоматически подстраиваются под размер экрана. Удобная навигация на мобильных устройствах. Сайт устроен так, что пользователям не нужно прокручивать страницу по горизонтали, что очень важно для мобильных пользователей. Иногда в мобильной версии могут возникать проблемы с мелким шрифтом в некоторых разделах, что затрудняет восприятие информации на маленьком экране. Баннеры и изображения хорошо смотрятся на мобильной версии сайта, но текст на некоторых страницах (например, в разделе новостей) может быть слишком мелким для чтения.Заключение. Московский государственный университет, Санкт-Петербургский государственный университет и Казахский национальный университет придерживаются более классического подхода с более полным содержанием и более сложными руководствами, что иногда затрудняет быстрый доступ к информации, но в целом соответствует статусу университетов. Некоторым пользователям сайты могут показаться немного строгими и консервативными, особенно если они ожидают более современного и креативного дизайна. Это может создать ощущение излишней официальности, что может не восприниматься более молодой аудиторией. Oxford более элегантен и минималистичен, эффективно использует графику для создания притягательной атмосферы. На этом сайте используются высококачественные изображения знаменитых зданий, кампусов и студенческой жизни, чтобы посетители почувствовали себя в престижном учебном заведении. Фотографии часто представляют исторический интерес и подчеркивают уникальность и величие Оксфорда. Макет сайта СПбГУ также достаточно традиционен, но размер и стиль шрифта варьируется в широких пределах, что помогает подчеркнуть важные моменты. Шрифты четкие и легко читаемые, но иногда могут быть слишком мелкими. Сайт СПбГУ выглядит более "живым" и современным за счет большого количества используемых изображений. Однако некоторые части сайта могут показаться перегруженными информацией. Под графической перегрузкой сайта понимается чрезмерное или ненужное использование графических элементов, которые затрудняют восприятие контента пользователем и снижают удобство навигации. Например, меню сайтов Московского государственного университета (МГУ) и Санкт-Петербургского государственного университета (СПбГУ). логично структурировано, но иногда в некоторых разделах слишком много информации. Пользователям может быть трудно найти подробную информацию об учебных программах или поступлении. Навигация на сайте Оксфорда проста и логична, что позволяет легко находить информацию по основным категориям. Меню организовано по разделам для удобства взаимодействия. Сайт Оксфорда хорошо структурирован и ориентирован на пользователя. Контент представлен четко и последовательно, что делает сайт удобным для всех категорий пользователей. Oxford обладает самым дружелюбным и интуитивно понятным интерфейсом, который облегчает поиск информации и создает лучшие впечатления у пользователей. Все образовательные сайты хорошо адаптируются к мобильным устройствам, иногда мобильные версии могут быть перегружены из-за большого количества информации. Дизайн может быть немного сложным для маленьких экранов.Веб-дизайн КазНУ, МГУ, СПбГУ и Оксфордского сайтов имеет важное значение для формирования положительного имиджа и удобства использования опыта создания сайтов учебных заведений.Дизайн веб-сайтов и веб-приложений регулярно изменяется. Появляются новые технологии, новые методологии создания, решения и тренды, что задают вектор этих изменений. От технологии Flash Macromedia веб-дизайн пришел к глубине страниц, гладкой текстуре материалов, микровзаимодействиям и анимированным переходам. Все это является результатом работы, исследований и экспериментов веб-дизайнеров различных компаний, что в итоге дарит пользователям незабываемый интерактивный опыт взаимодействия со страницей. Простой поиск информации превращается в интерактивное приключение и лучше запоминается. Интерактивность позволяет управлять вниманием и концентрацией пользователя, помогает быстрее найти нужную информацию. В свою очередь интерактивность и анимированные элементы присутствующие на странице без особой цели способный наоборот привести к ухудшению интерфейса и перегруженности, важно сохранить баланс между полезными анимациями и указателями и громоздкими и отвлекающими переходами и скролами. Интерактивный дизайн необязательно должен быть сложным, главная цель – помогать пользователю в выполнении его целей.
Номер журнала Вестник науки №6 (87) том 2
Ссылка для цитирования:
Балмагамбетов А.М., Курмангазиева Л.Т. СРАВНИТЕЛЬНЫЙ АНАЛИЗ ВЕБ-ДИЗАЙНА ОБРАЗОВАТЕЛЬНЫХ САЙТОВ // Вестник науки №6 (87) том 2. С. 1591 - 1605. 2025 г. ISSN 2712-8849 // Электронный ресурс: https://www.вестник-науки.рф/article/24081 (дата обращения: 08.07.2025 г.)
Вестник науки © 2025. 16+