Исследование основных принципов преподавания основ информационной архитектуры web-сайта для студентов направления дизайн
Саданова В.Н.1, Зябнева О.А.1, Шнейдер Е.М.2
На сегодняшний день в процессе обучения 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.1, Zyabneva O.A.1, Schneider E.M.2
Today, in the process of teaching Web design, the teacher faces an important task - to teach the basics of information architecture and practical modeling, as well as the principles of displaying the developed content on a device of any size qualitatively and correctly. The relevance of this study lies in the fact that despite the emergence of new various platforms and devices, the ways of developing Web design layouts have not yet been systematized and defined. Also, in the process of teaching students, it is necessary to identify the stages of improving the development of projects for website page layouts. This study describes three main types of Web design - responsive, adaptive and mobile. A technical advantage has been determined. The analysis of the principles of pedagogical influence on the process of their design is carried out and the disadvantages of their use are revealed. Various forms of adaptive design layouts are established and their characteristics are briefly carried out, the most optimal form of it at the moment is selected. In the process of metrological research, it was revealed that when performing the design of a website, there is a need to determine the ratios of typefaces to the image. Experimentally, it was noted that the use of no more than two headsets in the space of the site page will be the most optimal. Also, during the metrological analysis, the architectural designs of the website were determined. the architectural designs of the website were determined.
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» с его постепенными улучшениями, охватывающими основные аспекты проектирования интерфейса. Сначала дизайн создается для простых устройств, потом он улучшается для более сложных;