Дипломный проект, БНТУ

Если говорить о достоинствах сайта – это русско- и англоязычные версии, что открывает доступ к более широкой аудитории.

1.4.2 Сайт «Белорусские цимбалы» - http://cimbaly.com/ (Рисунок 1.3)

Рисунок 1.3 – Сайт «Белорусские цимбалы»

Основные показатели следующие:

сайт создан: в 2007 году;

заголовок: Белорусские цимбалы;

описание: Цимбалы, цимбалы в Белорусcии, история Белорусских цимбал, ноты для цимбал (оригинальные, переложения, партитуры, ансамбли, пособия), и т. д.;

ключевые слова: Цимбалы, цимбалы в белорусии, история цимбал, ноты для цимбал, фото цимбал;

размер страницы: 3,93 КБ (4 027 байт);

PageSpeed: 78 %;

хостер: DataHata Ltd;

вес: 226.3 КВ;

21

последнее изменение 29 ноября 2012 г. 1:25:00;

уникальность текста <10%;

показатели сайта: Яндекс тИЦ 10, GooglePageRank (PR) 1/10;

проверка валидности HTML 22 ошибки;

проверка валидности CSS ошибок не обнаружено.

Данный ресурс представляет собой сайт ассоциации белорусских

цимбалистов, нацелен на предоставление информации о белорусских цимбалах, о конкурсах, которые проходят в нашей стране в номинации «Инструментальное исполнительство – цимбалы». Однако информация на данном ресурсе обновляется крайне редко, очевидное пополнение информационных разделов не наблюдается. Кроме того, в разделе «фотогалерея» находятся фотографии цимбал из разных стран (итальянские, греческие, китайские, чешские и т.д.), но абсолютно отсутствуют фотографии нашего белорусского национального инструмента (Рисунок 1.4).

Разделы «Архив MP3» и «Нотный архив» предоставляют возможность скачать нужный файл, но при скачивании файл не обнаруживается. Это раздражает пользователя и подрывает доверие.

Рисунок 1.4 – Фотогалерея сайта «Белорусские цимбалы»

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

В разделе «Контакты» не указаны контактные номера телефонов. Связаться c нужными людьми можно только по e-mail.

Дизайн не отличается особой оригинальностью, «развалившаяся» вёрстка портит впечатление о сайте. Создаётся образ чего-то незаконченного, недоделанного.

22

1.4.3 Сайт «Белорусские цимбалы: видеоантология» - http://cimbyt.jimdo.com/ (Рисунок 1.5)

Основные показатели следующие:

неизвестно, когда был создан сайт;

заголовок: Белорусские цимбалы;

описание: белорусские цимбалы, сайт для цимбалистов, Катерина Анохина, Михаил Леончик, фестиваль, СЕРЕБРЯНЫЙ ЗВОН ЦИМБАЛ "МОЛОДЕЧНО 2010, конкурс ЖИНОВИЧА 2003, ДУЭТ ,,МИ-ЛЯ" ноты для белорусских цимбал, молоточки, вундеркинд;

ключевые слова: белорусские, цимбалы, видеоантология, ноты, молоточки, исполнители, Катерина, Анохина, Михаил, Леончик, фестиваль, СЕРЕБРЯНЫЙ, ЗВОН, ЦИМБАЛ, МОЛОДЕЧНО, 2010, конкурс, имени, Ж003, ДУЭТ, МИ, ЛЯ, строй;

размер страницы: 28,88 КБ (29 576 байт);

PageSpeed: 90 %;

вес: 297.6 КВ;

сайт создан на Jimdo;

последнее изменение 29 ноября 2012 г. 2:00:37;

количество текста минимальное;

показатели сайта: Яндекс тИЦ 0, GooglePageRank (PR) 3/10;

проверка валидности HTML 1 ошибка;

проверка валидности CSS ошибок не обнаружено.

Рисунок 1.5 – Сайт «Белорусские цимбалы: видеоантология»

23

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

Сайт состоит из 10 разделов. Навигация по сайту 2-го уровня не очень удобна. Она не даёт возможности без лишних кликов перемещаться по внутренним страницам сайта.

Дизайн уступает своё место качественным видео-роликам, изобилию концертных номеров и открытию всё новых и новых имён.

Сайт был создан на Jimdo — конструкторе сайтов. Jimdo предлагает пользователям создать собственный сайт за несколько минут. Пользователю доступны: 11 языковых версий, загрузка картинок, flash- и html-галереи, загрузка youtube-видео, блог, гостевая книга, комментарии, интеграция с социальными сетями, интернет-магазин. Сайт на Jimdo может создать любой пользователь, в том числе и не имеющий навыков программирования. Jimdo

предлагает 3 пакета: Jimdo Free, Jimdo Pro и JimdoBusiness. Jimdo Free -

бесплатная версия конструктора. Отлично подходит для начинающих интернетпользователей. Преимущества: пользование конструктором бесплатно, включает в себя 500 МБ памяти, разнообразные шаблоны, интернет-магазин с 5 товарами, блог, гостевую книгу, галереи и т.д. Недостатки: реклама компании Jimdo на сайте, отсутствие почты, домена и единственный способ оплаты в интернет-магазине - Paypal. Jimdo Pro - платная версия, стоимость 60 евро в год. Преимущества: собственный домен и Email-адрес, 15 товаров в магазине, нет рекламы Jimdo, более быстрая тех. поддержка. Jimdo Business - платная версия, стоимость пакета 180 евро в год. Преимущества: 2 собственных домена и возможность создать 20 Email-адресов, ответы службы тех. поддержки в течение суток и неограниченное количество товаров в интернет магазине.

24

2. ДИЗАЙН И ЮЗАБИЛИТИ – ТЕСТИРОВАНИЕ САЙТА

2.1 Концепция разработки веб-сайта

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

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

И так, приступим к разрабатываемому сайту. Основной замысел сайтавизитки ансамбля цимбалистов «Золотая струна» - заявить о данном коллективе в интернет-пространстве, занять для него почётное место в виртуальной среде. Сайт обязательно должен быть не таким как все: он должен быть творческим, свежим и жизнерадостным. Каждая деталь (навигация, декор) должна соответствовать музыкальной тематике и всё должно отражать творческую природу. Но при всём при этом сайт обязательно должен быть серъёзным и профессиональным.

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

элегантность и простота;

округлые формы (использование контейнера с округлыми формами, при этом элементы интерфейса прямоугольные);

тени;

"лакированные" элементы интерфейса;

внимание в центр;

25

простая навигация;

яркие цвета;

3D-эффекты;

вспышки-звёздочки;

шрифт без засечек;

размер шрифта: больше обычного размера;

нижний колонтитул (Footer).

Таким образом, на всех этапах разработки данного веб-сайта будет

учитываться выстроенная концепция.

А теперь приступим к технической части композиционного построения страниц.

2.2 Композиционное построение страниц

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

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

Вфутере будут располагаться дополнительное меню, копирайт и

баннеры.

На главной странице в центральном блоке будут расположены фото ансамбля «Золотая струна», перечень его участников, блок с краткой историей

оданном коллективе, а также блок новостей.

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

26

2.3 Цветовое решение

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

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

Цветовая схема может не только визуально сделать сайт привлекательнее

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

«Золотая струна», первое, на что случилось обратить внимание – это само название коллектива. "Золотая струна" – это, в первую очередь, золото, блеск.

При последующий ходе размышлений возник ряд вопросов:

есть ли у ансамбля «фирменный цвета»?

какие цвета использованы в дизайне национального костюма данного коллектива?

Ответ был очевиден: в цветовой гамме национального костюма ансамбля

цимбалистов «Золотая струна» заложена узнаваемость данного коллектива, его авторитет, наработанный годами, а также весьма актуален тот факт, что данный костюм является своего рода подарком Президента Республики Беларусь (Рисунок 2.2). Учитывая этот факт, невозможно было идти иным путём при выборе цветовой гаммы для сайта.

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

Именно поэтому выбор был остановлен на следующей цветовой гамме:

жёлтый (монохромия: два тёплых, один холодный цвет) и синий;

белый/чёрный.

Данные цвета будут также использоваться в заголовках и ссылках.

28

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

Рисунок 2.2 – Национальный костюм ансамбля цимбалистов «Золотая струна»

А теперь рассмотрим характеристику каждого цвета в отдельности (Таблица 2.1).

Таблица 2.1 – Цветовое решение

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

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

#oc41ab

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

#ffffff

Белый – чистый, открытый, благородный, солидность, доверие, профессионализм, качество, лёгкий, прозрачность.

#000000

Чёрный – таинственность, элегантность, мистика, любопытство, символизирует изящество, стиль, классика.

29

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

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

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

Фон центрального блока сайта будет выполнен в жёлтых тонах. На главной странице цвет будет самым насыщенным, на внутренних – более приглушённым. Это позволит пользователям расслабиться и обратить внимание на содержимое.

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

2.4 Выбор шрифтов

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

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

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

Times New Roman (шрифт с засечками – шапка сайта, навигация);

30