Структура и особенности графического оформления электронного учебного пособия

Содержание:

Введение

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

1. Образовательные порталы и ресурсы

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

1.1. История и сущность образовательных порталов

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

На данный момент современная структура образования диктует свои правила и требует от преподавателей и студентов изучать и осваивать новые подходы к преподаванию и обучению, система постоянно меняется и с каждым скачком интернет технологий предоставляет более новые и сложные задачи на освоение которых требуется время, однако это вполне возможно упростить за счет создания единого портала в одну направленность образования и объединить там всё что связано будет с выбранной специальность, в итоге предложить и студенту и преподавателю решение в рамках одного Интернет-ресурса с уклоном на образовательную систему, сам процесс разработки концептуального макета будет разбит на 6 стадий с учетом поиска информации и сбора данных:

1. Изучение похожих ресурсов
2. Изучение функций портала
3. Отличие портала от обычного сайта
4. Смысл портала и его роль в образовании
5. Идейно-эскизная часть
6. Финальная работа и презентация выполненных макетов по проектированию

1.2. Эффективность образовательных порталов

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

2.Подготовка к разработке

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

2.1. Функции образовательного портала

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

2.2. План образовательного портала

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

2.3. Роль дизайнера при разработке макета

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

2.4. Техническая сторона портала

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

3. Разработка прототипа образовательного портала и элементов навигации

3.1. Создание ментальной карты перед разработкой

Перед работой над эскизной частью проекта я решил создать для себя структуру моего проекта (ментальную карту) с ней мне будет проще работать и делать организацию рабочего пространства при проектировании графических прототипов образовательного портала, для того чтобы ментальная паутина соответствовала структуре моей задумки в целом я опишу здесь пункты по которым она была она составлена и разработана
Портал – интернет пространство с уклоном на образование и дальнейшие ветки ментальной паутины пойдут именно от него, направление – вид деятельности в которой применяется портал, особенность – отличие от других подобных ресурсов, функционал – демонстрация функционала интернет ресурса, необходимость – суть портала и для кого он предназначен изначально, я не буду расписывать здесь в таком ключе полную последовательность создания ментальной карты а просто покажу основные ключевые моменты и саму карту приложу ниже под этим текстом, также я в ментально карте покажу такие вещи как целевая аудитория и возможные причины для создания подобного ресурса, в заключении хочу сказать что сама по себе «ментальная паутина» предназначена больше для меня и как я уже писал выше существенно облегчит мне работу, однако несмотря на все это другим людям которые просто планируют использовать портал как студент или преподаватель, полезно её изучить чтобы на ранних этапах формирования проекта/прототипа представить его детальную структуру и то как он будет на самом деле выглядеть и функционировать

3.2. Выполнение эскизной части скелета портала

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

Рис. 1.

3.3 Эскизирование элементов навигации

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

Рис.1.2

4. Разработка(верстка) макета в специализированном по

К этому вопросу всегда следует подходить очень тщательно, и я в качестве программы (в которой я буду делать финальный макет и в дальнейшем его дорабатывать) выбрал Adobe Experience Design – специализированный графический редактор и конструктор UI/UX интерфейсов, основная особенность и уникальность этой программы заключается в том что она со всем своим комплексом инструментов заточена только под создание макетов сайтов, приложений и так далее, а также довольно-таки легка в освоении и проста в работе, как работает сама программа я здесь это описывать естественно не буду и будет достаточно того что это пожалуй единственный нормальный(для меня) вариант в котором я смогу воплотить всё что было изначально изображено в эскизных частях и показано в ментальной карте

4.1. Сводка­ макета без наполнения

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

Рис. 2.

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

4.2. Подбор и обоснование цветового решения

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

4.3. Подготовка информации и контента

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

1) Это формат – должен быть png либо jpeg с сжатием
2) Цветопередача должна быть только в rgb
3) Качество векторных изображений от 150 ppi

4.4. Подготовка элементов навигации

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

Рис.3.

Каждая часть сайта (иконка, логотип, полоса разделения или сам текст) является элементом его навигации, ввиду того что у нас стоит задача сделать как можно более простой и интуитивно понятный образовательный портал, то и сама навигация должна быть простая

4.5. Компиляция в единый макет и презентация

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

Рис.4.

Но конкретно в этой версии есть своего рода недочеты и концепция нарушена, дело в цветовом решении которое сбивает с толку и неправильное, необходимо поменять цвета иконок которые обозначают направленность и деятельность/сферу портала чтобы видимость и восприятие главной страницы портала изменилось в лучшую сторону и в итоге вышло так:
Рис.5.

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

Рис.6.

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

5.

Заключение

В итоге было спроектировано два макета предполагаемого образовательного портала, были учтены все возможные нюансы при создании прототипа включая эскизные части (которые были заранее выполнены в том же программном обеспечении что и финальная версия) исходя и полученных результатов следует вывод что образовательный интернет ресурс (портал) действительно может выполнять роль как основного образовательного ресурса, так и вспомогательного, однако для того чтобы он действительно таковым являлся предстоит еще много работы по улучшению структуры макета и доработки дизайн концепций, лишь только потом всё это начнет оживать в совместной работе программиста и дизайнера, из дальнейших улучшений необходимо доработать скелет прототипа, выбрать один из двух вариантов продолжить наполнение контентом и лишь потом начать построение кодовой части, на этом задачи дизайнера заканчиваются и вероятнее всего еще потребуется его участие потому что при работе программиста постоянно происходят какие-либо правки и дополнения но дизайнерская часть может не соответствовать, в принципе были изучены основные программы в которых будет происходит деятельность студента в рамках образовательного портала и в первую очередь это полный пакет от Adobe и лишь потому пойду такие программы как Affinity designer и photo, autodesk maya и 3ds мах, я не стал расписывать принцип работы в этих программах а уделил внимание самой концептуальной части портала и его дополняющих частей, эскизов от руки не было потому что изначально идея планировалась к выполнению только в рабочей среде Adobe Experience Design

Список использованной литературы и интернет источников

1. Книги по веб-дизайну [Электронный ресурс]. – URL: https://habr.com/post/245737/
2. Образовательные порталы как средство обучения [Электронный ресурс]. – URL: http://5fan.ru/wievjob.php?id=8431
3. Образовательный портал и его функции [Электронный ресурс]. – URL: https://studfiles.net/preview/6379182/
4. Подготовка макета сайта к верстке [Электронный ресурс]. – URL: https://afonico.ru/podgotovka-maketa-sayta-k-verstke/
5. Анализ и подготовка контента при создании макета сайта [Электронный ресурс]. – URL: http://tilda.education/articles-content-first
6. Правила написания и подготовки контента [Электронный ресурс]. – URL: http://seop.ru/publications/regulations.html
7. Квентин Н. Что такое графический дизайн? : Астрель, 2014. – 256. - режим доступа http:// booksgid.com
8. Майк, В. Лин. Современный дизайн. Пошаговое руководство – Учебное пособие Издательство: АСТ, 2010. – То же [Электронный ресурс]. – URL:http://booksgid.com
9. Графический дизайн – Учебный курс / Г. Тимофеев, Е. Тимофеева Феникс, 2002. – 288 с. (URL:http://booksgid.com)
10. Натали Ратковски. Профессия - Иллюстратор. Манн, Иванов и Фербер, 2015. – 328 с.
11. Обручев, В. А. Adobe Illustrator CC. Официальный учебный курс: Издательство: Эксмо, 2014.
12. Туэмлоу Э. Графический дизайн. Фирменный стиль, новейшие технологии и креативные идеи. – М.: АСТ, Астрель, 2014. – 256 с.
13. Электронные ресурсы:
14. Самоучитель по Adobe Illustrator. [электронный ресурс] ‒ Режим доступа: ‒ URL: illustrator.demiart.ru/book10/ (дата обращения: 25.10.18).
15. Самоучитель по Adobe. [электронный ресурс] ‒ Режим доступа: ‒ URL: samoychiteli.ru/document5001.html (дата обращения: 23.10.18).