Web-разработка

                                                         АНОТАЦІЯ

Під час виконання курсової роботі було розроблено статичні та динамічні зображення різних форматів, якими було заповнено сторінки веб-сайту також оформлення веб-сйату здійснювалося за допомогою стилів css , та Java скриптів, які написані спеціально для графічного оформлення сайту. Також для оформлення веб-сайту було використане інформаційне забезпечення та анімаційні зображення у форматі gif , що допомогли розкрити тему веб-сайту. У процесі розробки сайту були використані „Adobe Photoshop СS5” , ,, Adobe Dreamweaver CS4” , Microsoft Office Picture Manager, бібліотеки Jquerry, для створення графічних переходів між зображеннями на сайті.

Далі покроково описано  створення веб-сайту , а саме актуальність поставленої задачі на сьогоднішній день, обґрунтування завдання для  виконання, розробка структури веб-сторінок сайту, створення логотипу, підбір кольорової гами для веб-сторінки, створення  логотипу та анімаційних зображень. Представлені, розроблені анімаційні графічні зображення, пояснено роботу java бібліотек та саму структуру сайту.

ВСТУП

На сьогоднішній день прогресує у своєму розвитку галузь комп’ютерних технологій, а зокрема комп’ютерна графіка, яка тепер є не від’ємною частиною нашої роботи з комп’ютером. Зараз багатьом користувачам тяжко навіть уявити як це працювати в системі з комп’ютером не маючи графічної оболонки, так як для цього необхідні певні навики. У наші дні продовжують розвиватися способи та можливості відображення графічної інформації різних типів. Зараз навіть існує таке поняття як ,, Інтерактивна комп’ютерна графіка” за допомогою якої можливо вносити корективи у графічні матеріали безпосередньо піл час їхнього відображення. При обробці інформації, пов'язаної із зображенням на моніторі, прийнято виділяти три основні напрями:

• розпізнавання образів;
• обробку зображень;
• машинну графіку.

Основне завдання розпізнавання образів  полягає в перетворенні вже наявного зображення на формально зрозумілу  мову символів.

Відображення графічної інформації стало можливим у багатьох сферах діяльності, за допомогою різних засобів та не має обмежень по форматам в яких можуть бути графічні матеріали. У свою чергу зросла складність створення графічних додатків, якщо раніше все обмежувалося пензлем та аркушем паперу то зараз на зміну всьому цьому прийшли потужні графічні редактори, за допомогою яких можливо створити не лише двовимірне анімаційне чи статичне зображення, а й повноцінну тривимірну модель .

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

У наш час найпотужнішим джерелом інформації є Інтернет. Зараз уявити більшість роботи чи дозвілля без  Інтернету не можливо. Через Інтернет люди працюють, розважаються і спілкуються. Головною перевагою Інтернету є  постійна доступність інформації та швидкість обміну та доступністю  до неї.  Більшість всієї інформації в Інтернеті є графічною. Саме через ці критерії потрібно вміти  створювати інформаційно цінні веб-сайти  з доцільно розробленими для нього  графічними зображеннями які можуть розкривати тему сайту, навіть після  першого його перегляду і які  будуть правильно поєднані та розміщенні. Так як вся Інтернет статистика говорить про те, що користувач спершу оцінює веб-сайт саме за його графічним оформленням.

При розробці курсової роботи об’єктом виступають використані та оброблені графічним редактором „Adobe Photoshop СS5”, статичні зображення у форматах jpg також розроблені анімаційні зображення у gif форматі за допомогою потужного графічного редактора „Adobe Photoshop СS5”. В подальшому вони використані для оформлення веб-сторінок розробленого сайту.

1 АНАЛІЗ  СТАНУ ПИТАННЯ І ПОСТАНОВКА  ЗАДАЧІ РОЗРОБКИ

Зараз інформація у графічному поданні домінує  над більшістю типів подання  інформації. Це все завдяки розвитку комп’ютерних технологій, завдяки їх розвитку набула розвитку і комп’ютерна графіка, яка присутня в усіх джерелах телекомунікації та інформації. Найінтенсивніше графіку використовують саме у веб-технологіях.

Це зумовлене  тим, що у Інтернеті почали вести  свою комерційну діяльність незліченна кількість підприємств, у кожної компанії світового рівня є власний, якісно графічно оформлений веб-сайт. Саме тому створення веб-сайтів є  досить важливим навиком сучасного  працівника, який зайнятий у сфері комп’ютерних технологій. Комп'ютерна графіка – це наука, предметом вивчення якої є створення, зберігання і обробка моделей та їх зображень за допомогою ЕОМ, тобто це розділ інформатики, який займається проблемами отримання різних зображень (малюнків, креслень, мультиплікації) на комп'ютері.

У комп'ютерній  графіці розглядаються наступні завдання:

• представлення зображення в комп'ютерній графіці;
• підготовка зображення до візуалізації
• створення зображення;
• здійснення дій із зображенням.

Під комп'ютерною  графікою зазвичай розуміють автоматизацію  процесів підготовки, перетворення, зберігання та відтворення графічної інформації за допомогою комп'ютера. Під графічною  інформацією розуміються моделі об'єктів і їх зображення. У випадку, якщо користувач може управляти характеристиками об'єктів, то говорять про інтерактивну комп'ютерну графіку, тобто здатність комп'ютерної системи створювати графіку і вести діалог з людиною. В даний час майже будь-яку програму можна вважати системою інтерактивної комп'ютерної графіки. Інтерактивна комп'ютерна графіка – це так само використання комп'ютерів для підготовки та відтворення зображень, але при цьому користувач має можливість оперативно вносити зміни до зображення безпосередньо в процесі його відтворення, тобто передбачається можливість роботи з графікою в режимі діалогу в реальному масштабі часу. Комп'ютерна графіка налічує у своєму розвитку не більше десятка років, а її комерційним додаткам - і того менше. Андрієс ван Дам вважається одним із батьків комп'ютерної графіки, а його книги - фундаментальними підручниками з усього спектру технологій, покладених в основу машинної графіки. Також в цій області відомий Айвен Сазерленд, чия докторська дисертація з'явилася теоретичною основою машинної графіки. Сьогодні комп’ютерна графіка представлена у багатьох галузях різноманітними способами. Починаючи від графічного оформлення привітань у телевізійних новинах та оформлення веб-сайтів і закінчуючи створенням складних об’ємних моделей, що використовуються у будівництві, бізнес плануванні та у сучасній ігровій індустрії де для відображення такої графічної інформації потрібні спеціальні периферійні пристрої зі своїми власними графічними процесорами, оперативною пам’яттю та спеціальними графічними додатками, такими як DirectX . Разом ії цим розвивається галузь веб-дизайну, на даний момент існує маса програмних додатків та для створення графічного контенту сайту, його кодової HTML чи php частини [1].

Процес створення  сайту містить такі етапи :

• уточнення технічного завдання;
• розробка дизайну;
• верстка дизайну;
• програмування;
• перевірка та здача в експлуатацію.

На етапах розробки та верстки дизайну свою роботу починає  веб-дизайнер, але детально ознайомившись  перед цим з технічними завданням  і для цього їм не потрібно знати  програмування, а на професійному рівні  володіти різними типами графічних  редакторів. Описаній підхід до створення  сайту є дуже професійним, саме тому є актуальним створити власний веб-сайт пройшовши шлях створення та побувавши  у ролі від дизайнера до developer який займається розробкою кодової частини веб-сайту [1].

2 РОЗРОБКА СТРУКТУРИ САЙТУ

При створенні  сайту потрібно відштовхуватись  від технічного завдання та за допомогою цього ми зможемо створити структуру нашого сайту. Кожен сайт має свою унікальну структуру, але більшість компаній при створенні сайту використовують CMS системи , такі як WordPress,Joomla, IP Board, які дають змогу використовувати готові шаблони для швидкого створення сайту. Це вигідно з точки економії часу на створення сайту, але при використанні певного шаблону ми втрачаємо унікальність унікальність створюваного сайту, тому у даному випадку, використання шаблонів CMS системи є не доцільним. Кожен сайт повинен мати так звану логічну схему, тобто певну логічну схему переходів між сторінками, також на схемі показано розміщення елементів на сторінках сайту.

Отже, структура  сайту є індикатором того, яким чином буде виконуватися побудова сторінок всередині ресурсу і як буде розташована  інформація. Залежно від цього  також визначається зручність вивчення проекту. Тому підбирати структуру  необхідно вкрай відповідально. Щоб мати під рукою всі можливі  варіанти, вам слід розглянути кожен  з видів структур сайту, тоді ви точно  зумієте прийняти найбільш раціональне  рішення.

Самим першим в  історії видом структур сайту  був лінійний. Якщо підбирати йому порівняння, то не можна придумати  нічого кращого, ніж книга. Адже уявлення тут будується таким чином, що користувач може переходити з однієї сторінки на іншу, які розташовані  у вигляді ланцюжка.

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

Якщо говорити про сам сучасному вигляді  структур сайту, то тут слід відзначити саме деревоподібний. Завдяки її широкому профілю ви можете укласти в структурі дерева безліч розділів, підрозділів і сторінок, які розміщуватимуться у довільній або фіксованій послідовності. Приклади структури сайтів розміщені на рисунку 2.1 [2].

Рисунок 2.1 – Різні структури сайту

Якщо ми створюємо  свою структуру сайту, то необхідно  пам’ятати, що структура повинна  бути зручною для відвідувачів веб-сайту, та підходити до тематики сайту. Лінійна  структура сайту краще всього підходить для сайтів для опитувань  та сайтів миттєвих новин або для  сайту візитки. Сайти які створені за лінійною структурою з відгалуженнями більше підходять до Інтернет магазинів  та сайтів підприємств. На головній сторінці такого сайту, користувачам пропонується вибір, вони можуть піти у будь-якому необхідному напрямку. Наприклад, на корпоративному сайті запропонована інформація для партнерів, клієнтів і постачальників.

Для створеного сайту краще всього підходить деревоподібна структура. 
Завдяки її широкому профілю можливо укласти в структурі дерева безліч розділів, підрозділів і сторінок, які розміщуватимуться у довільній або фіксованій послідовності. Ні для кого тут немає ніяких обмежень і можливо реалізувати проект так, як вважаєте за потрібне, самостійно визначивши його ієрархію. Але тут слід правильно розподіляти всі матеріали, щоб у майбутньому не допустити плутанини. Особливо треба стежити за навігацією, адже якщо всередині сайту буде безліч «перехресть» і поділів, то вам потрібно продумати такі умови, щоб навіть гість який вперше потрапив тут не заблукав. Тому потрібно намагатися чітко ділити всю інформацію, щоб не відбувалося ,,засмічення” , вчасно видаляти неактуальні відомості та непотрібні архіви.

Структура розробленого сайту представлена на рисунку 2.2.

Рисунок 2.2 – Структура  сайту ,,Озброєння української армії ”

З головної сторінки сайту можна потрапити на три інші заголовні сторінки, з кожної заголовної сторінки є переходи на під сторінки, на яких міститься повна інформація по озброєнню кожного підрозділу. Також с головної сторінки є перехід у галерею веб-сайту. На трьох заголовних сторінках містяться посилання на новини, по натисканню на які здійснюється перехід на сторінку з обраною новиною.  
Схема розміщення елементів на сайті зображена на рисунку 2.3.

Рисунок 2.3 – Розміщення елементів сайту

Розмістивши елементи на веб-сайті таким чином можливо забезпечити комфортну роботу та сприйняття інформації на сторінці. Розроблена схема сторінки є досить простою, так як має всього чотири блоки, але кожен блок має свій функціонал. Наприклад у логотипу сайту є можливість по натисненню на нього повернутися на головну сторінку сайту, у допоміжному блоці містяться гіперпосилання на основну інформацію. Якщо натиснути на ці посилання відбувається перехід на сторінку з повною інформацією, це є способом виведення основної інформації на головну сторінку не загромаджуючи її великою кількістю інформації. Оцінюючи розміщення сторінок сайту можливо зробити висновок, що головним блоком є ,, Головній блок відображення інформації “ потім іде меню вибору розділів , не менш важливим елементом сайту є його логотип, так як він графічно розкриває тему сайту. Останнім по важливості елементом сайту є допоміжний інформаційний блок.

Отже, зробимо висновок, що вибір структурної схеми сайту та розміщення елементів є доцільним для розробки сайту.

3 РОЗРОБКА ІНФОРМАЦІЙНОГО ЗАБЕЗПЕЧЕННЯ  САЙТУ

Інформаційне забезпечення сайту – це невід'ємна складова підтримки сайту. 
Для ефективної роботи сайту потрібен постійний його розвиток і оновлення, яке досягається інформаційним забезпеченням сайту в комплексі з іншими методами підтримки, сайту. Інформаційне забезпечення сайту — це забезпечення його актуальною свіжою інформацією, ведення новинних сторінок, періодичної розсилки з інформацією про його оновлення, створення форумів, блогів, FAQ розділів та інших інтерактивних систем, які привертають увагу відвідувачів, дає їм цікаву та актуальну інформацію та спонукає повертатися на сайт [2].

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

Отже, використовуючи лише інформацію доступну для всіх, ми все одно зможемо розкрити тему даної курсової роботи у повному обсязі.   При відкритті сайту потрапляємо на головну його сторінку , де розміщена коротка інформація про історю українського війська , також є можливість прочитати повну історію , так як на цій сторінці міститься кнопка при натисканні на яку буде здійснений перехід на сторінку з повною історією створення української армії. Також у верхній частині сторінки знаходиться логотип сайту, це емблема Збройних Сил України, яка у повній мірі говорить за тематику сайту. З головної сторінки можливо здійснити перехід у той роздій сайту який зацікавить користувача. Також у додатковому блоці буде можливість проглядати події які трапилися у армії, тобто цей додатковий блок відіграє роль стрічки з новинами. Також сайт включає в себе не менш важливі підрозділи, які знаходяться у кожному з основних розділів сайту. У цих підрозділах міститься інформація про самі зразки озброєння, які знаходяться на озброєнні діючої української армії, самі ці підрозділи ставлять остаточну крапку у розкритті теми сайту. Для того щоб повністю розкрити тему сайту, було створено статті у яких міститься інформація починаючи з історії армії України і завершуючи детальним описом та зображеннями зразків озброєння. Також на сайті присутній розділ ,, Галерея “ де представлені зображення зразків діючого озброєння, перегляд їх відбувається за допомогою створеного для сайту слайдера з графічним переходом. При відборі інформації, а саме текстової інформації, було прийняте рішення помістити досить великий об’єм інформації на окремій сторінці, а основну статтю розмістити на головній сторінці. Тобто, таким чином буде досягнено не загромадження головної сторінки зайвою текстовою інформацією статті, при цьому не втративши розкриття головної теми цієї статті. Доступ до повної інформації забезпечили через окрему сторінку, яка викликається при натисненні на відповідну кнопку на сторінці. Щоб статті не були суцільним текстом було їх оформлено графічними додатками, до яких входили статичні та анімаційні зображення.

Головним інформаційним  ресурсом розробленого веб-сайту став сайт Міністерства оборони України, та “Біла книга – 2012. Збройні Сили України” . Інформація на сторінках сайту розміщена поблоково, тобто кожний блок сайту на одній сторінці містить відповідну йому інформацію. Це є зручним для користувача, так як є можливість вибрати інформацію того розділу у якому зацікавлений користувач затративши на це мінімальну кількість часу.

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

4 РОЗРОБКА ГРАФІЧНОГО ЗАБЕЗПЕЧЕННЯ  САЙТУ

Розробка графічної частини  сайту є дуже важливим етапом у  його створенні, так як користувач зпершу оцінює сайт за його графічним оформленням, а потім починає ознайомлюватись з текстовою інформацією веб-сайту. 99% усіх сайтів що розміщені у мережі Інтернет мостять графічну інформацію, яка супроводжує текстову. На деяких сайтах саме графічний контент на 80% розкриває його тему з мінімальною кількістю текстової інформації розміщеної на ньому, що приваблює користувачів. Графічне оформлення сайту потрібно використовувати тому що інколи просто зручніше все описати одним або декількома зображеннями. При застосуванні графічного контенту необхідно чітко усвідомлювати поєднання та синхронізацію графіки з текстом щоб графічний контент був розміщений доцільно.

Розміщуючи на веб-сторінці графічні зображення та оформлюючи її фон, потрібно чітко розуміти та знати  правила зіставлення кольорів. Тому що деякі кольори мають властивість  міняти свій відтінок при зіставленні  його з іншим кольором чи викликати напруження зору, прикладом цього може бути текст жовтого кольору на білому фоні. Також необхідно розуміти що кольорове оформлення сайту має відповідати його тематиці, тобто повинне бути гармонійне поєднання кольорів [2]. Отже, для початку важливо обрати основний колір сайту, так як сайт у нас на військову тематику, то при виборі для нього основного кольору ми не стали зупинятися на якомусь одному, ідеальним фоновим зображенням для сайту став ,,захисний” колір, який називається деформуючим. Є таке поняття як деформуюче фарбування. Це багатокольоровий малюнок з кольоровими плямами різної форми. Таким чином основній колір сайту сформований із двох основних кольорів, а саме зеленого і його відтінків та коричневого. Пояснимо як ці кольори будуть сприйматися людиною.

Зелений колір символізує природу, здоров'я, свіжість, спокій, медицину. Сприяє розслабленню, тонізує і заспокоює. Зелений - це колір новачків. У великій  кількості може викликати відчуття млявості і одноманітності.

Коричневий може означати дружбу, заходи, події, землю, шоколад, матеріалізм, надійність, світ, продуктивність праці, практику, важку працю. З негативу – брудний, і нудний [3].

При створенні сайту  потрібно дотримуватися одного важливого  критерію, що стосується кольору, у  жодному разі не використовувати  велику кількість кольорів, це тільки спотворює сторінки сайту. Але все  таки дизайнеру не можливо підібрати на сто відсотків вірну кольорову гаму для сайту яка б повністю задовольняла його тематику. Так як у однієї людини певний колір може викликати одні почуття та асоціації, а у другої зовсім інші. Але все ж таки при підборі кольору слід орієнтуватися на те, що сайт буде переглянутий великою кількістю користувачів, тому до підбору кольору потрібно віднестися серйозно. Наведемо приклади основних кольорових моделей.

Кольорова модель RGB – це найбільш поширена в веб-дизайні  модель. Абревіатура RGB означає назви  трьох кольорів: Red (червоний), Green (зелений), Blue (синій). Його вихідним кольором є  чорний , екран монітора. Всі інші кольори на ньому виходять шляхом комбінації трьох кольорів, які у  своїй суміші повинні утворити білий  колір [3]. У HTML документах кольори задаються символами від 00 до FF в шістнадцятковому коді перед якими ставиться символ #. Схема кольорової моделі зображена на рисунку 4.1.

Рисунок 4.1 – Кольорова  модель RGB

Кольорова модель CMYK. Ця модель характерна для поліграфії та друку. Абревіатура CMYK означає назви чотирьох кольорів: Cyan (блакитний), Magenta (пурпурний), Yellow (жовтий), Key (чорний). Його вихідним кольором є білий (аркуш паперу). Всі інші кольори на ньому виходять шляхом комбінації трьох кольорів, які у своїй суміші повинні  утворити чорний колір. Оскільки модель RGB охоплює більший колірний діапазон, ніж модель CMYK, то всі зображення, призначені для друку і поліграфії, повинні бути переведені з системи RGB в CMYK . Так, створюючи логотип для  сайту, використовується одна система (RGB). А для друку візиток і  фірмових бланків, використовується CMYK модель. Схема кольорової моделі зображена  на рисунку 4.2.

Рисунок 4.2 – Кольорова  модель CMYK

Також при кольоровому  оформленні сайту дизайнери використовують палітру кольорів. Як правило, дизайнери  користуються традиційним колірним кругом для визначення кольорової палітри  для сайту. Колірний круг з 12 кольорів був винайдений Ісааком Ньютоном ще в 1666 році. Існує ряд колірних комбінацій, обираних за допомогою  кола, які практично завжди виглядають гармонійно. У такій палітрі використовується тільки один колір, але з різними  значеннями насиченості і яскравості. Такі схеми акуратні і діють заспокійливо [3].

Рисунок 4.3 – Стандартна кольорова  палітра

Рисунок 4.4 – Приклад різної насиченості  кольору

Окрім цієї палітри існує ще шість різних видів палітр для поєднання кольорів. Що стоcується тексту, то він повинен виділятись з основної палітри кольорів сайту, але не бути дуже яскравим. Тобто колір фону і тексту повинні бути контрастними.

Чим контрастніше текст  тим він краще сприймається. Важливо  вибирати кольори, які забезпечать  хороший контраст між текстом, зображеннями і фоном. Наприклад, кольори, найбільш зручні для читання – це чорний і білий або білий та чорний. А ось оранжевий текст на коричневому тлі недостатньо контрастний, і швидше за все, створить незручності для читачів. Для нашого сайту, оптимальним варіантом є захисний колір з деформуючим фарбуванням. Колір тексту ми обрали світло сірий який міститься у напівпрозорому чорному фоні. Колір тексту таким чином не є сильно яскравим який напружує зір при читанні і не зливається з основним фоновим кольором. Також при виборі кольору було обрано комплементарну палітру, яка використовує два контрастні кольори, тобто це зелений і всі його відтінки та коричневий [3]. Це зображено на рисунку 4.5.

Рисунок 4.5 – Комплементарна палітра

Проте досягти ідеального відображення кольорів в усіх типах браузерів та типах дисплеїв не можливо, так як різні дисплеї використовують різні схеми передачі кольору. Проте якщо зміни в кольоровій гамі сайту і відбудуться то незначні, і не суттєво будуть впливати на його відображення.

При додаванні  статичних зображень на сайт потрібно підбирати їх таким чином щоб вони компонували з кольоровим оформленням сайту, тобто так щоб зображення не дуже різко виділялося своїм кольором та той самий час не зливалося з фоновим кольором сайту. Зображення повинні відповідати тематиці розділу у який вони додані на сайт і водночас не відходили від основної тематики веб-сайту. Також існує такий критерій як вага зображення, тобто чим більше воно буде у розмірі тим його інформаційна вага буде більша. Для зменшення ваги фотографій був використаний Microsoft Office Picture Manager, який дозволяе зменшити вагу фотографії з 6 мб до 30 кб , за допомогою спеціальної функції для підготовки фотографії для використання у веб-ресурсах. Таким чином ми зменшили час відгуку сайту при відкритті його користувачем, звісно вага фотографій буде відігравати негативну роль якщо сайт буде розміщенний на сервері, а при роботі сайту з локального хоста це не впливає на швидкість його роботи, так як запити до нього не оброблюються веб-сервером. 

На сайт додані зображення з форматом jpg, gif ці формати  найоптимальніше підходять до розміщення на веб-сатйі до тогож ще й оброблені  у  Microsoft Office Picture Manager. Усі статичні зображення на сайті мають рамку по контуру, і таким чином усі статичні зображення мають свою чітку границю і не зливаються з основним кольоровим фоном сайту. Приклад такого зображення наведено на малюнку 4.6, статичні зображення рисунок 4.7 і 4.8. Це зображення було оброблено у графічному редакторі Adobe Photoshop CS 5 , з допомогою необхідного пензля ми відредагували зображення та в результаті отримали блакитну рамку.

Рисунок 4.6 – Статичне зображення з рамкою

Рисунок 4.7 – Статичне зображення з рамкою

Рисунок 4.8 – Статичне зображення з рамкою

Також статичні зображення на веб-сайті у більшості розділів мають функцію графічного переходу між ними при перегляді, такий  візуальний ефект створений за допомогою  спеціальних Java скриптів у бібліотеці jQuery [4]. На сайті у окремому розділі розроблена галерея із створеним у ній сладйдером, з відео переходом при перегляді зображень. 

Логотип – це найважливіший елемент іміджу компанії. Він служить, в першу чергу, для ідентифікації компанії на ринку. Логотипи з'явилися для того, щоб відрізняти продукцію різних фірм в рамках однієї галузі. Зареєстрована торгова марка захищає компанію від недобросовісної конкуренції і дозволяє захистити її права в суді. У сприйнятті споживача наявність логотипу або товарного знака фірми, що має усталену репутацію, є гарантією якості товару [4].

Отже з описання терміну  логотип видно, що в першу чергу  він є ідентифікатором компанії , у нашому випадку сайту, та відрізняє  її від інших. До створення логотипу потрібно підійти з не меншою серйозністю  ніж до вибору кольорової гами сайту. При створенні логотипу сайту  потрібно притримуватись таких критеріїв  :

• індивідуальність – це властивість дозволяє виділитися на ринку і стати конкурентно-здатним, що є основним при розробці логотипу, емблеми і забезпечує можливість реєстрації знака, а також його подальше використання без порушення прав інших суб'єктів господарювання;
• функціональність ;
• асоціативність як властивість товарного знака позначає присутність зв'язків, асоціацій між товарним знаком і особливостями товару, що ним маркується [5].