Drug and Drop конфигурации

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

Рисунок 12 - Пример использования Drug and Drop конфигурации

Надписи внутри поля

Стремление упростить интерфейс, может повлечь за собой усложнение форм. Таким образом необходимо сделать проще и сами формы. Этим целям может послужить расположение названий полей непосредственно внутрь этих полей. Таким образом название поля будет располагаться уже не рядом с полем а прямо в нём, что позволит освободить дополнительное пространство и уменьшить визуальный вес формы. Благодаря этому форма будет выглядеть проще и компактнее и заполнить её не составит труда. Такой вариант очень хорошо подходит для форм авторизации на сайте или подписки на рассылку. При этом следует реализовать этот механизм так, чтобы описание, при нажатии на поле, не пропадало, а становилось светлее с целью напоминания, что пользователь собирается ввести в поле. И только после того как начнётся ввод данных, описание пропадёт окончательно (рис. 13).

Рисунок 13 - Пример использования надписей внутри поля

Использование иконок вместо текста в интерфейсе сайта

Для приобретения сайтом менее запутанного вида, нужно убрать из него все ненужные элементы, которые довольно редко используются. Здесь имеются ввиду, как различные кнопки действий, так и разнообразные текстовые поля. Такие картинки предоставляют массу преимуществ:

охватывают меньшее пространство по сравнению с текстом;

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

Создание управления, основываясь на контексте.

Есть два возможных способа разгрузить интерфейс сайта:

формирование интерфейса на основе контекста;

формирование интерфейса на порядке, последовательности.

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

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

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

3. Разработка веб-сайта для факультета архитектуры и дизайна

3.1 Постановка задачи

Задачей является создание сайта факультета архитектуры и дизайна Кубанского государственного университета. Сайт должен нести информационно-коммуникационную и презентационную функции, то есть предоставлять посетителям сайта возможность найти интересующую их информацию и производить на них благоприятное впечатление. Сайт факультета должен удовлетворять такому критерию как usability, то есть сайт должен быть удобным для использования. Это требование подразумевает обеспечение быстрого и лёгкого доступа к информации, содержащейся на сайте, а так же понятность интерфейса и простоту навигации. Так же предоставление возможности лёгкой оптимизации сайта. Возможность быстрого обновления содержания сайта, так как от этого зависит его актуальность и посещаемость.

Ещё одно требование, которому должен отвечать сайт - это имиджевый компонент факультета. Создаваемый сайт должен стать визитной карточкой, то есть отвечать таким критериям как узнаваемость и уникальность с точки зрения дизайна. В результате уже на этапе планирование были получены довольно жесткие рамки, принимая во внимание, что создаваемый сайт должен удовлетворять большому количеству требований. В итоге задачей является создание уникального сайта, который гармонично будет объединять в себе вышеуказанные компоненты.

3.2 Анализ целевой аудитории

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

абитуриенты факультета;

студенты факультета;

родители абитуриентов;

партнеры факультета.

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

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

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

3.3 Выравнивание и построение модульной сетки

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

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

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

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

Веб-дизайнеры относительно недавно начали применять модульные сетки в проектировании интерфейсов веб-сайтов. Этот метод значительно упрощает как проектирование интерфейса, так и последующую вёрстку макета.

3.4 Анализ аналогов

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

Первый рассмотренный сайт - itid.ru (рис. 14).

Рисунок 14 - Сайт института телевидения, бизнеса и дизайна

Сайт имеет структурированный вид, не имеет четко выраженной модульной сетки. Общий визуальный образ на очень низком уровне. Изображение представленные на сайте низкого качества. Но рассматриваемый сайт не лишен преимуществ. Цветовая гамма подобранна грамотно. Сайт не перегружен элементами. Текстовый блок короткий, что улучшает его восприятие. Навигация по сайту довольно проста в освоении.

Далее был проанализирован сайт design. synergy.edu.ru (рис. 15).

дизайн сайт структура страница

Рисунок 15 - Сайт факультета рекламы и дизайна

Сайт хорошего качества. Цветовая гамма подобрана хорошо. Выдержана модульная сетка. Навигация по сайту довольно проста в освоении. Текстовые блоки не большие и не перегружают страницу за счет чего она легко воспринимается. Главный недостаток этого сайта факультета в том что он не является самостоятельным и выполнен в стиле основного сайта, что лишает его индивидуальности и креативности, так как выдержан в стиле основного сайта ВУЗа.

3.5 Разработка концепции дизайна веб-сайта

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

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

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

Восприятие зависит от нескольких факторов:

восприятие сайта целиком;

форма элементов дизайна;

как выглядят мелкие детали;

как читается информация.

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

Основные цвета в дизайне сайта должны положительно восприниматься визуально аудиторией сайта. Была выбрана цветовая гамма, состоящая из белого, тёмно-синего, серого и оранжевого цветов.

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

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

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

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

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

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

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

3.6 Разработка логотипа

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

Рисунок 16 - Логотип веб-сайта факультета архитектуры и дизайна

3.7 Оформление планшетов

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

Все страницы имеют общие элементы. Это верхняя часть сайта (header), рабочая область (work area) и нижняя часть (footer).

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

В рабочей области содержится непосредственное наполнение страницы.

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

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

Далее представлена страница на которой расположена информация о кафедре дизайна костюма. Под этим блоком находится декоративный блок составленных из элементов напоминающих стикеры.

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

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

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

На втором планшете страницы расположены в два ряда по три страницы в ряду (рис. А.2). Первая страница слева сверху представляет информацию об истории развития факультета.

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

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

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

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

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

Заключение

В ходе данного проекта были проведены следующие мероприятия:

исследована история мирового веб-дизайна и современные тенденции дизайна сайтов;

проведен анализ аналогов сайтов университетов;

проанализирована целевая аудитория сайта;

разработана структура и прототип сайта;

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

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

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

В процессе разработки веб-сайта факультета архитектуры и дизайна КубГУ была достигнута поставленная цель: разработан удобный, современный сайт в минималистском стиле. Сайт выполняет все поставленные перед ним задачи: рекламную, информационную, коммуникативную и имиджевую.

Список использованных источников

1. Ажгихин С.Г., Марченко М.Н. Проектирование фирменного стиля. Учебное пособие. Краснодар: Кубан. гос. ун-т, 2010.

2. Боровикова Р.И. Окно в мир искусства. М., 2004.

3. Бородаев Д. Веб-сайт как объект графического дизайна. Дис. канд. искусствоведения ХГАДИ. Харьков, 2004.

4. Видгорчик В.А. Ручной набор. М., 1985.

5. Декор. URL: http://www.westwedding.ru/style/decor/7774.html. Март 2012.

6. Инькова Н.А. Создание Web-сайтов: Учебно-методическое пособие. [Электронный ресурс] Режим доступа: http://club-edu. tambov.ru/methodic/fio/p5. doc

7. Итан Маркотт. Отзывчивый веб-дизайн. М., 2012.

8. Лаврентьев А.Н. История дизайна. Учебное пособие. М., 2006.

9. Лебедев А. Ководство. Изд. Студия Артемия Лебедева. М., 2007.

10. Михайлов С.М., Кулеева Л.М. Основы дизайна. Учебник для вузов. М., 2002.

11. М. Тимоти Самара. Дизайн Публикации. Практикум. М., 2007.

12. Панксенов Г.И. Живопись. Форма, цвет, изображение. Учебное пособие для студ. высш. худ. учебных заведений. М., 2007.

13. Патернотт Ж. Разработка и создание логотипов и графических концепций. М., 2007.

14. Патрик Макнейл. Веб-дизайн. М., 2012.

15. Робин Уильямс. Принципы верстки и типографики для начинающих М., 2005.

16. Рогачева Г.И. Современные информационные образовательные ресурсы. М., 2009.

17. Рунге В.Ф. Основы теории и методологии дизайна. Учебное пособие (конспект лекций). М., 2001.

18. Раскин Дж. Интерфейс: новые направления в проектировании компьютерных систем. М., 2005.

19. Тлеукеева Р. Традиционные и электронные ресурсы: состояние, проблемы, эффективность использования. М., 2008.

20. Туэмлоу Э. Графический дизайн: фирменный стиль. М., 2006.

21. Уильямс Джозеф М. Стиль. Десять уроков для начинающих авторов. М., 2005.

22. Эмиль Рудер. Типографика. М., 1982.

23. Энциклопедия творчества,http://www.artworldcenter.com/abstracioni/

24. Ян В. Уайт. Редактируем дизайном. М., 2009.

25. Статья "Анализ дизайна сайтов"; http://www.agima.ru

26. Статья "История развития CSS"; http://www.xiper.net/learn/css/css-history.html

27. Статья "Веб-дизайн и основные стили сайтов"; http://www.webmarketinglist.ru/view_article.html

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