Файл: Описание проекта (Графическое оформление электронного учебного пособия).pdf

Рис. 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

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