Введение………………………………………………………………………...
Глава 1. Характерные особенности функционала и дизайна адаптивных версий веб-портала…
1.1. Информационный веб-портал - определение и сущность…………...
1.2. Решение функциональных задач веб-портала в адаптивном дизайне..
1.3. Принципы оформления при дизайн-проектировании адаптивных версий веб-порталов
Глава 2. Дизайн-проектирование макета адаптивной версии информационного портала «Первая линия» на основе анализа существующих тенденций в веб-среде
2.1. Анализ профильного сегмента среды: зарубежные и отечественные студенческие веб-порталы
2.2. Основные принципы, используемые при макетировании адаптивной версии
2.3. Визуальная концепция и информационная архитектура адаптивной версии информационного портала «Первая линия»………………………….
Заключение…
Список использованной литературы
Приложение
В век информационных технологий в повседневной жизни человека постепенно появляется все больше возможностей, являвшиеся еще несколько десятков лет труднодостижимыми или недоступными вообще. С развитием интернета, а также различных электронных СМИ, информационное пространство стало находиться в режиме обновления нон-стоп.
В настоящее время для получения доступ к актуальным новостям, достаточно открытия браузера и нескольких нажатий мышкой. С увеличением интенсивности ритма жизни человек привыкает к потреблению информации «на ходу». С появлением смартфонов и планшетов ПК и ноутбуки хоть и не исчезают из пользовательского обихода, но требуют больших энерго- и временных затрат для применения. Значительно более простым и быстрым решением становится использование смартфонов с приложениями социальных сетей или мобильными браузерами, обеспечивающими оперативный и практически бесперебойный доступ к новостным порталам и иным информационным ресурсам, нежели стационарные устройства. К тому же, даже при условии существования легких и тонких ноутбуков, они не так удобны в эксплуатации на улице или в общественном транспорте, в отличие от портативных мобильных гаджетов.
Согласно мировой статистике за 2015 год от компании Internet retailer, примерно 60% пользователей используют для выхода в интернет именно смартфоны. По данным Statista Inc на январь 2017 года, более половины все-го трафика (50,3%) приходится на использование мобильными устройствами. Как показывает их исследование, по состоянию на апрель 2017 года, в мире насчитывается около 3394 миллионов уникальных пользователей мобильного интернета. Данные цифры показывают чрезвычайную актуальность обращения к сфере развития портативных электронных устройств с учетом прогнозируемого аналитиками перманентного роста числа их пользователей: «Предполагается, что к 2018 году более 36% мирового населения будет пользоваться смартфонами, в сравнении с 10 процентами в 2011 году». Также, по результатам мировой статистики за 2015 год от компании Internetretailer, примерно 60% пользователей используют для выхода в интернет именно смартфоны.
Расширение аудитории пользователей мобильных устройств стимулирует развитие дизайна как средство визуальной подачи информации, существующее неотделимо от развития девайсов. Веб-дизайн становится одним из самых популярных направлений, имеющих свои особенности и требования. Внимание обращается не только на внешний вид сайта, но и на удобство его эксплуатации. Пользователь сайта должен получать доступ к информации, не затрудняясь в ориентировании в источнике. Основной целью веб-дизайна, касаемо интерфейса и удобства, является эффективность работы с сайтом, удовлетворение от данной работы и максимально высокая скорость достижения поставленной цели.
Возвращаясь к тому, что большинство пользователей сейчас используют портативные гаджеты для выхода в интернет, перед веб-дизайном становится еще одна задача – умение адаптироваться под разные разрешения, ширины и диагонали экрана. Ведь то, что красиво и понятно на широкомасштабном экране компьютера, уже не так уместно выглядит на экране смарт-фона. Для этого отдельно разрабатываются специальные «гибкие» сетки макетов и шрифты.
К сожалению, адаптивный дизайн существует далеко не на всех сайтах, особенно в рунете. Его наличие часто говорит о том, что сайт имеет обширную аудиторию, которая использует современную технику. Это отдельно важно для интернет-магазинов, интернет-СМИ и информационных порталов, так как их аудитория захватывает обширные возрастные группы. Важно сделать сайт удобным для чтения с любого носителя, включая современные гаджеты, которые в большей степени используются молодежью. К сожалению, существующая статистика формирует картину лишь зарубежной ауди-тории пользователей смартфонов, однако по ней также можно формировать примерную картину и для российского поля. Так, в 2016 году 92% молодых людей в возрасте от 18 до 29 лет в США являются обладателями смартфонов, кроме того, свыше 50% всего населения владеют планшетными компьютерами. Таким образом, можно говорить о том, что для студенческого ин-формационного портала адаптивная версия сайта является необходимой.
Цель данной работы - разработка визуальной концепции адаптивной версии современного информационно-образовательного веб-портала.
В работе мы будем рассматривать особенности адаптивных версий веб-порталов на примере информационно-образовательного портала «Первая Линия», который является студенческим СМИ Санкт-Петербургского государственного университета. Портал функционирует более пяти лет и является частью медиахолдинга «Первая Линия», в который входят также ежемесячная газета «Первая Линия» и международный образовательный студенческий телеканал «МОСТ». Аудитория портала – около двух тысяч пользователей в месяц.
Объектом работы выступает адаптивная версия веб-портала, предметом – особенности дизайна адаптивной версии студенческого веб-портала «Первая линия».
В процессе разработки адаптивной версии нами будет обращено внимание на современные подходы веб-дизайна для различных диагоналей экранов, выявлены основные подходы и проанализированы профильные сегменты российской и зарубежной медиасреды.
Таким образом, задачами работы представляются:
• выявить основные факторы адаптации дизайна веб-порталов к представлению на мобильных носителях;
• охарактеризовать современные подходы к дизайну адаптивных версий сетевых медиапроектов;
• изучить особенности дизайна современных версий информационно-образовательных порталов и выявить ключевые решения в их визуальной организации;
• разработать визуальную концепцию и информационную архитектуру адаптивной версии информационно-образовательного портала «Первая Линия».
Практическая значимость исследования состоит в том, что собранная и систематизированная информация позволит нам вывести основные особенности адаптивных версий, а также применить полученные данные в собственном проекте, который может быть внедрен в использование.
Актуальность обусловлена активным ростом использования смартфонов и планшетов для поиска информации и просмотра новостей. Отдельным фактором является рост числа людей, использующих несколько устройств, соответственно им в первую очередь необходимо пользование адаптивной версией для доступности ее на любой диагонали экрана.
В процессе работы для достижения результата нами будут использоваться следующие методы:
• количественный метод;
• метод конструирования;
• метод визуального анализа.
Научно-теоретической базой работы послужили работы: исследования, статьи и книги Я. Нельсона, труды о дизайне в веб-среде известных мировых авторов, таких как Л. Вроблевски, К. Ньюарк, а также российских исследователей Ю. Я. Герчука, О.В. Пикулевского, А.В. Якунина.
В качестве эмпирической базы для анализа профильного сегмента рынка были отобраны российские и зарубежные студенческие веб-порталы, такие как: Политех (новостной веб-портал Санкт-Петербургского политехнического университета Петра Великого), Cherwell (портал Оксвордовского университета), Stanford News (новостной портал Станфордского университета).
Данная работа состоит из введения, двух глав, заключения, списка ис-пользованной литературы и приложений. Первая глава – теоретическая. В главе рассматривается веб-портал как сегмент медиасреды, сущность, процесс, функциональность проектирования адаптивных версий веб-сайтов, а также их особенности визуального оформления. Вторая глава – практическая, представляющая анализ определенных студенческих порталов с целью выявить основные ошибки и ориентиры, а также собственные решения по адаптивному дизайну портала «Первая линия» и подкрепляемая изображениями итоговых разработок. В заключении подводятся выводы, сделанные в ходе исследования и проектирования. В список литературы включены все книги, статьи и интернет-источники, использовавшиеся в ходе исследования. В приложении представлены дополнительные материалы, к которым делается отсылка в тексте работы, позволяющие более глубоко раскрыть выбранную тему, а также скриншоты разработанного адаптивного сайта.
Мировая статистика показывает возрастающую конкуренцию стацио-нарых и мобильных электронных устройств, обеспечивающих использование Интернета. По данным исследовательских компаний, уже на апрель 2017 года мобильным интернетом пользуется более 3,3 миллиардов человек (с учетом населения Земли, составляющего примерно 7,3 миллиарда). Конечно, эта цифра включает обладателей не только смартфонов, но и обычных телефонов с возможностью выхода в интернет, но компания Statista Inc прогнозирует, что к началу будущего года более 36% населения мира будет пользоваться смартфонами. Это определяет актуальность проектирования веб-страниц та-ким образом, чтобы они были удобны для просмотра как на устройствах с большими диагоналями экранов, так и с маленькими.
Анализ теоретических положений, раскрывающих понятие и задач информационного портала, показал, что в сфере средств массовой информации этот веб-формат может являться удобным инструментом для сосредоточения большого количества разнотематической информации на одном ресурсе без эффекта перегрузки и с логичной информационной архитектурой для легкого доступа к разделам. Объединяя этот тезис с вышесказанным, делаем вывод о важности комфортного отображения информационного портала на портативном устройстве с целью сохранения аудитории, заходящей на него со смартфонов или планшетов.
Среди существующих моделей проектирования мобильного представления сайта (адаптивный дизайн, отдельная мобильная версия сайта; RESS (ResponsiveDesign + ServerSide)) нами был сделан выбор с пользу адаптивной версии, являющейся не только наиболее распространенным решением в медиасреде, но и обладающей рядом преимуществ для пользователя: сохранение индивидуального стиля «родительского» сайта, единый URL, соответствие характеристикам экрана используемого в данный конкретный момент устройства.
Взяв за основу в нашей работе функциональный подход и минимализм в веб-дизайне, мы сформировали ряд критериев, по которым проанализировали конкурирующие порталы в профильной среде (студенческие информационно-образовательные порталы), определив основные тенденции и требования, согласно которым нам следует проектировать макет информационно-образовательного портала «Первая линия». Целесообразность создания для него адаптивной версии определена не только следованием развитию трендов в профильной среде, но и результатами опроса, согласно которому более 23 аудитории сайта пользуется им посредством портативных устройств.
При разработке макета мы обратились к 12-колоночной вертикальной сетке как наиболее эффективному и распространенному методу в веб-дизайне и задействовали блочную вёрстку, сохраняя традиции исходного ресурса и принимая во внимание удобство перемещения блоков в зависимости от границ экрана. Формируя расположение рубрикации сайта, мы опирались на различие в диагоналях используемых устройств (как минимум разницу ширины экрана смартфона и планшета), скрывая ее под кнопкой-символом либо наоборот оставляя отображаемой.
В отношении цветового оформления мы стремились к сохранению корпоративного стиля, вследствие чего остановились на трёх цветах (черный, серый и красный), которые, в свою очередь, обеспечивают хорошее зрительное восприятие, сочетая в своей комбинации и контрастность, и отсутствие резко бросающейся в глаза яркости, которая нередко отвлекает от основного текста на иных порталах.
Для того, чтобы версия действительно являлась адаптивной, мы полностью сохрани и двухуровневую архитектуру сайта, поддерживаемую различными элементами навигации, графическое изображение которых является максимально семантически узнаваемым (кнопки «Меню» и «Поиска»). Кроме того, имеется также фиксированная по функционалу и расположению «сквозная ссылка» в виде логотипа портала, позволяющая из любой глубины просмотра вернуться на главную страницу.
В итоге, мы предполагаем возможность дальнейшего развития и апробации проекта адаптивной версии информационно-образовательного портала «Первая линия» с внедрением предложенных дизайн-разработок.
Помощь студентам и аспирантам в выполнении работ от наших партнеров
