Исследование основных принципов преподавания основ информационной архитектуры web-сайта для студентов направления дизайн

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Исследование основных принципов преподавания основ информационной архитектуры web-сайта для студентов направления дизайн

Саданова В.Н.¹, Зябнева О.А.¹, Шнейдер Е.М.²

На сегодняшний день в процессе обучения web-дизайну перед педагогом стоит важная задача - обучить основам информационной архитектуры и практического моделирования, а также принципам отображения на устройстве любого размера разрабатываемого контента качественно и корректно. Актуальность данного исследования состоит в том, что, несмотря на появление новых различных платформ и устройств, до сих пор не систематизированы и не определены пути разработки макетов web- дизайна. Также в процессе обучения студентов необходимо обозначить этапы совершенствования разработки проектов макетов страниц сайтов. В данном исследовании описаны три основных вида web- дизайна - отзывчивый, адаптивный и мобильный. Определено техническое преимущество. Проведен анализ принципов педагогического воздействия на процесс их проектирования и выявлены недостатки использования. Установлены различные формы макетов адаптивного дизайна и приведена их краткая характеристика, выбран самый оптимальный его вид на данный момент. В процессе метрологических исследований выявлено, что при выполнении конструкции web-сайта существует необходимость определения соотношений шрифтовых гарнитур к изображению. Экспериментальным путем отмечено, что использование в пространстве страницы сайта не более двух гарнитур будет самым оптимальным. Также при проведении метрологического анализа были определены архитектурные конструкции web- сайта. адаптивный дизайн проектирование

Ключевые слова: web-дизайн, информационная архитектура, дизайн-образование, разработка web-сайта, адаптивный дизайн, мобильный дизайн, преимущества и недостатки, характеристика макета сайта.

RESEARCH OF THE BASIC PRINCIPLES OF TEACHING THE BASICS OF INFORMATION ARCHITECTURE OF A WEB SITE TO STUDENTS OF THE DESIGN DIRECTION

Sadanova V.N.¹, Zyabneva O.A.¹, Schneider E.M.²

Keywords: web design, design education, website development, adaptive design, mobile design, advantages and disadvantages, characteristics of the website layout.

На сегодняшний день одними из востребованных направлений в современной системе дизайн-образования являются задания, связанные с информационными технологиями, в том числе направленные на разработку элементов web-дизайна. И.Ю. Мамедова, Н.Е. Мильчакова,

А.Э. Дрюкова в исследовании элементов web-дизайна как динамичной развивающейся системы проектной деятельности подчеркивали, что будущим специалистам важно обладать профессиональными умениями, быть творческой натурой и иметь определенные знания в сферах визуального искусства и культуры [1].

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

Следовательно, студентам-дизайнерам необходимо первоначально уметь определять наиболее эффективные формы интерфейса сайта для любых устройств, то есть систематизировать способы проектирования макетов web-дизайна.

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

Материалы и методы исследования: эмпирические и теоретические методы исследования, применение различных видов педагогических технологий - предметноориентированных, развивающих, личностно-ориентированных, технологий критического мышления. В ходе исследования были применены основные методы педагогических измерений - опрос, анкетирование, тестирование.

Результаты исследования и их обсуждение

По мнению Осборна Трэйси, одной из первых предпосылок разработки web-дизайна стало увеличение количества устройств, с которых можно выйти в сеть Интернет [2]. В то же время Дакетт Джон в своем исследовании основ дизайна web-сайтов подчеркивает, что при проектировании web-сайта необходимо разработать его архитектуру таким образом, чтобы он, прежде всего, был удобным для пользователя, а также интерактивным и привлекательным [3].

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

1. Определено, что использование принципа визуального акцентирования делает сайты более интерактивными, привлекательными и удобными для пользователя. В исследовании визуальной навигации общественных пространств И.Ю. Мамедова, Д.А. Сивухин рекомендуют придерживаться следующих принципов [4].

• При выполнении таких практических заданий студентам необходимо первоначально правильно выставлять уже на этапе эскизов тональный контраст, то есть определять соотношение темного к светлому. Отметим, что это не только контраст черного и белого, но и контраст, например, теплого и холодного, или по правилу соотношения противоположных цветов - контраст на цветовом круге. В то же время речь идет не только о контрасте форм и цветовом контрасте, но и об использовании различных гарнитур шрифта. Отметим, что обычно в проекте используется не более 2-3 шрифтов. Студентам при выполнении проекта страницы сайта уже на первом этапе необходимо уметь определять и в дальнейшем использовать не только виды и формы применяемых шрифтовых гарнитур, но и их размер. При использовании в проектной деятельности студентами данного принципа возможно также применение декоративных шрифтов.

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

• Возможно использование иллюстраций, анимации, ЗБ-изображений в качестве как декоративных элементов, так и как основных смысловых акцентов страницы сайта.

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

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

3. Стиль. Отметим, что студентам в процессе разработки web-страницы необходимо соблюдать стиль сайта, который должен быть напрямую тесно связан с фирменным стилем компании, для которой разрабатывается данный сайт. Будущему специалисту в области графического дизайна следует четко продумать все элементы брендбука или гайдбука, либо, если им выполняется коммерческое предложение, то необходимо связаться с заказчиком, запросить при наличии всю информацию о разрабатываемом объекте, например попросить прислать логотип в векторном формате, основные и дополнительные используемые шрифты, цвета, другие материалы.

4. Студентам при изучении и выполнении архитектуры станиц сайта следует соблюдать принципы удобства восприятия, а также доступности и читаемости всех элементов конструкции страницы в целом. Данный принцип возможно проверить и подтвердить эффективность художественной ценности и выразительности элементов только подсчетом количества нажатий при эскизных (пробных) вариантах дизайна при навигации.

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

Отзывчивый web-дизайн, как правило, означает, что он может отреагировать на каждое изменение в кратчайшие сроки, не теряя положительного эффекта. В этом дизайне сайты часто и без проблем меняются из-за любых факторов (к примеру, ширина окна).

Фрейн Бен в исследовании «отзывчивого» web-дизайна определил следующие его особенности [5]:

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

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

• отзывчивая типографика - возможность при помощи медиавыражений изменять шрифт по ширине экрана.

Будущие специалисты, владеющие основами проектной культуры в сфере информационных технологий, должны уметь четко определять разницу между «отзывчивым» дизайном и адаптивным, мобильным, а именно уметь его проектировать по следующим принципам:

• удобство просмотра на любых устройствах;

• легкость в реализации, экономичность;

• соответствие одной версии сайта при выполнении его проекта;

• поддержка системой Google.

В то же время студенты должны владеть знаниями и о достоинствах, и о недостатках «отзывчивого» дизайна перед адаптивным и мобильным. Например, «отзывчивый» дизайн обладает следующими характеристиками:

• нет возможности работы на устаревших браузерах;

• некорректно отображаются рекламные объявления;

• медленно загружается на мобильных устройствах;

• некоторые элементы могут быть сдвинуты ниже на страницу.

Адаптивный дизайн отличается от «отзывчивого» тем, что имеет несколько

спроектированных макетов для разного типа устройств (под разные размеры экранов), при этом могут использоваться и принципы «отзывчивого» дизайна. Адаптивный web-дизайн позволяет приспособиться к новой цели или ситуации, так как имеет предустановленные факторы [6]. Его целью является универсальное отображение на различных устройствах. Данная версия сайта будет стабильно работать при любых разрешениях и платформах.

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

• резиновый - очень прост в реализации: web-страница, которая состоит из блоков, данных, сжимается до ширины устройства;

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

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

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

Основные принципы адаптивного web-дизайна:

• «Mobile first» - подход «mobile first» с его постепенными улучшениями, охватывающими основные аспекты проектирования интерфейса. Сначала дизайн создается для простых устройств, потом он улучшается для более сложных;

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

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

При изучении этапов планирования web-сайтов студенты должны осознавать основные преимущества адаптивного дизайна перед «отзывчивым» и мобильным:

• оптимизация для отдельных устройств;

• довольно быстрая загрузка;

• оптимизация рекламы;

• возможность адаптации к действующим web-сайтам.

Недостатки адаптивного дизайна перед «отзывчивым» и мобильным:

• дорогой и трудный в реализации;

• для корректной работы сайта нужна команда разработчиков;

• нужно внести изменения в дизайн для всех действующих макетов;

• размеры окон появляются регулярно.

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

- это базовый код и корректная работа браузера. Для него нужно выбрать приоритетные элементы, которые будут отображаться пользователям. Частая проблема в мобильных версиях

- непонятная навигация, из-за меньшего размера экрана панель навигации займет непозволительно много места. «Отзывчивый» дизайн позволяет корректно работать сайтам на десктопных устройствах и, если будут какой-либо сбой или ошибка, позволит устранить ее в кратчайшие сроки, но при этом имеет недочет - медленно работает на мобильных устройствах. Мобильный дизайн позволяет изготавливать проекты для мобильной техники, но его минус в том, что большинство из этих проектов больше нигде не выходят, тем более придется произвести затраты на рекламу своего продукта, так как его могут попросту не заметить.

Подводя итог, можно с уверенностью сказать, что адаптивный дизайн является одним из наиболее универсальных и лучшим из разработанных на сегодняшний день [7].

Преимущества мобильного дизайна перед «отзывчивым» и адаптивным:

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

• сайт будет полноценным контентом, при публикации можно не обращать внимания на десктопную версию;

* при любом недоразумении (зависание, смещение строк и т.д.) можно оперировать на десктопной версии.

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

Вывод

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

Данное понимание основных характеристик адаптивного, «отзывчивого» и мобильного дизайна даст студентам возможность овладеть технологиями программирования web-сайтов, а также повысить свою проектную культуру. В то же время багаж знаний, полученных студентами при разработке страниц web-сайтов, повышает эстетическую культуру будущих специалистов графического дизайна, а также художественно-эстетическое восприятие объектов дизайна. Отмечено, что у студентов при изучении этапов проектирования web-сайтов повышается мотивация к обучению, формируются знания, которые соответствуют современным требованиям к специалистам в области графического дизайна, развивается профессиональная самостоятельность.

Список литературы

1. Мамедова И.Ю., Мильчакова Н.Е., Дрюкова А.Э. Концепция юзабилити с позиции универсального дизайна // Russian Technological Journal. 2022. Т. 10. № 3. С. 11-120.

2. Осборн Трэйси. Web-дизайн для недизайнеров. СПб.: издательство «Питер», 2022. 286 с.

3. Дакетт Джон. Html и css. разработка и дизайн Web-сайтов. М.: издательство «Эксмо», 2022. 480 с.

4. Сивухин Д.А., Мамедова И.Ю. Визуальное исследование навигации общественных пространств // Труды академии технической эстетики и дизайна. 2020. № 1. С. 16-18.

5. Фрейн Бен. Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд. СПб.: издательство «Питер», 2022. 336 с.

6. Мильчакова Н.Е., Соколова М.Л., Жигунова А.И. Концепция ответственности как современное мировоззрение дизайнера // Российский технологический журнал. 2020. Т. 8. № 2 (34). С. 109-121.

7. Дрюкова А.Э., Мильчакова Н.Е., Дрюков М.В. Использование нейронных сетей в индустриальном дизайне // Дизайн. Материалы. Технология. 2022. № 2 (66). С. 24-29.

Размещено на Allbest.ru