Прояв креативності у веб-дизайні

Прояв креативності у веб-дизайні

Вступ

веб дизайн сайт графічний

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

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

Веб-дизайн, як і будь-який вид творчості, спрямований на створення певної моделі зі своєю технічною естетикою (технічна естетика - синоним графічного дизайну, який використовувався в 60-80 рр на території СРСР) і задумом. Сьогодні основною інформаційною базою будь-якого загальнодоступного матеріалу є інтернет, а веб-дизайн - основний інструмент оформлення знань і відомостей, певний конструктор сторінок, здатний не лише красиво оформити веб-сторінку на сайті, а й зробити її максимально зручною та прозорою для користувачів.

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

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

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

Перші інтернет сторінки виконували виключно інформаційну функцію і містили лише текст, розбитий на абзаци і розділяючі позначення. Надалі, з появою наступних версій мови розмітки гипертексту HTML (англ. HyperText Markup Language) стало можливим додавання зображень і таблиць на сторінки. Дизайнери, до цього скуті мінімальними можливостями оформлення інтернет-сторінок, почали активно втілювати свої художні ідеї: різноманітні текстуровані бекграунди, об'ємні деталі, ефекти тіней і світлотінь + анімовані гіфи (GIF-анімація).

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

Обєкт дослідження: креативність у веб-дизайні.

Предмет: креативні засоби та прийоми в веб-дизайні.

Мета: Виявити та систематизувати креативні засоби та прийоми які використовуються в сучасному веб-дизайні.

Завдання:

-вивчити ступінь і якість наукового осмислення творчої індивідуальності у веб-дизайні;

-розробити класифікацію технічних та графічних прийомів оригінальних веб-сайтів;

провести аналіз обраних веб-сайтів на предмет способів створення оригінального дизайну;

виявити найбільш поширені оригінальні прийоми властиві певним періодам веб-дизайну;

Хронологічні та територіальні рамки дослідження: 2002-2011 р.р., Україна, Пн. та Пд. Америка, Європа, Росія, Азія.

Методи: системний метод, комплексно-аналітичний підхід для розгляду обєкта в контексті історико-культурних процесів і технологічних умов, котрі впливають на його формування, тестологічний аналіз, класифікація аналогів у рамках існуючих основних напрямів, компоративний «порівняльний» метод.

Теоретичне значення роботи: полягає в тому, що вона дає цілісне, науково обґрунтоване уявлення про веб-дизайн як про один з нових напрямків сучасного графічного дизайну.

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

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

1. Теоретичні розробки в галузі веб-дизайну. стан питання і методологія дослідження

.1 Історіографія та рівень теоретичного осмислення веб-дизайну

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

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

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

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

Інтернет (англ. Internet, від лат. inter - між і англ. net - мережа) - всесвітня комп'ютерна мережа, що з'єднує разом тисячі мереж, включаючи мережі збройних сил і урядових організацій, освітніх установ, благодійних організацій, індустріальних підприємств і корпорацій всіх видів, а також комерційних підприємств (сервіс-провайдерів), які надають приватним особам доступ до мережі.

Інтернет - це широка, розгалужена (розподілена) мережа, яка вміщує в собі комп'ютерні вузли, що розподілені по усьому світу.

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

Веб-сайт (англ. website, місце, майданчик в інтернеті), також сайт (англ. site, місце, майданчик) - сукупність веб-сторінок, доступних у інтернеті, які об'єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Сайтом також називають вузол мережі інтернет, комп'ютер, за яким закріплена унікальна ІР-адреса, і взагалі будь-який об'єкт в інтернеті, за яким закріплена адреса, що ідентифікує його в мережі (FTP-site, WWW-site тощо).

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

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

Сама суть сайту є розміщення, зберігання та найголовніше розповсюдження різного роду інформації. В цьому значущою є зручність використання сайтів, тобто його навігаційна система. Основні проблеми навігації веб-сайту сформульовані Якобом Нільсеном: «Інтерфейс повинен допомогти відповісти користувачу на три фундаментальні питання навігації: «Де я знаходжусь?», «Де я вже побував?», «Куди я можу піти?» [16]

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

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

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

Олександр Качанов пояснює, що веб-дизайн включає в себе візуальний дизайн (взагалі), дизайн представлення інформації на екрані (специфіка web-дизайну). [10]

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

Веб-дизайн того часу базувався в основному на використанні таблиць з HTML-кодом. Дизайн сайтів не можна було назвати особливо привабливим, в якійсь мірі він навіть заважав користувачам в пошуках тієї чи іншої інформації. Але з появою HCI (від англ. Human Computer Interaction), що в перекладі означає взаємодію людини з комп'ютером, були розроблені свого роду правила або рекомендації до створення веб-дизайну. Набагато пізніше абревіатура HCI перевтілилася в юзабіліті. Одним з основоположників юзабіліті можна назвати Якоба Нільсена.

Юзабіліті (англ. usability - дослівно «зручність користування») - поняття в мікроергономіці, що визначає загальну степінь зручності предмета при використанні; термін схожий з терміном «ергономічність», але має іншу область поширення і відрізняється нюансами визначення. Використовується для комп'ютерної техніки, терміном юзабіліті називають концепцію розробки користувацьких інтерфейсів програмного забезпечення, орієнтовану на максимальне психологічну і зорову зручність для користувача.

Сьогодні термін «юзабіліті» все частіше використовується як синонім слова «ергономіка» в контексті таких продуктів, як побутова електроніка чи засоби зв'язку. В більш широкому значені він може використовуватись для визначення ступеня ефективності виконання дизайну як в механічних об'єктах і інструментах (мишка, стілець, настільна лампа, дистанційний пульт) так і в графічному дизайні (меню телевізора, меню і система навігації сайту, інтерфейс програмного забезпечення). Таким чином, найбільш влучним перекладом слова «usability» буде «зручність і простота використання, застосування», «дружелюбність» і навіть «практичність».

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

В процесі розвитку веб-дизайну розвивались і різні стилі, кожен з яких відзначався певною новизною та креативністю.

Креатив (Creative або Творчий) - це визначення, що характеризує продукт діяльності людини, створеної способом, що відрізняється від аналогічних, новизною підходу, творчим рішенням. Як правило створюється для привертання уваги, в основному за рахунок шокування, пародіювання, легкості сприйняття, яскравості і високою запам'ятованістю образу. Деякі розуміють під креативом творчість, поставлену на потік. Фактично креатив - це синонім слова «творчість». Називаючи визначені, наприклад, рекламні або художні роботи креативом, в більшості випадку просто намагаються пустити пил в очі новомодним словом.

1.2 Рівень теоретичного осмислення веб-дизайну

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

Пошук в інтернеті слова web-design (webdesign, web design) дає нам посилання на інструкції і книги по вказівкам до різних програм. Та ж картина спостерігається в розділах «Web Design» таких сайтів-монстрів, як WebDeveloper і C-Net Builder.com. Плутанина пов'язана з тим, що в українській мові слово «дизайн» придбало інший зміст, ніж воно має в англійській. У строгому сенсі слова дизайн (design) - це розробка, конструювання. Поєднання «machine design» - перекладається як «конструювання верстатів», а не як їх естетичне зовнішнє оформлення.

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

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

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

Серед українських дослідників найпершим хто змістовно висвітлив питання веб-дизайну є Бородаєв Д.В. У своїй монографії «Веб-сайт как объект графического дизайна» [1] автор поетапно розглядає веб-сайт як інформаційний обєкт світової мережі інтернет, його складові частини та морфологічну структуру з урахуванням технологічно-програмного фактора, що безпосередньо впливає на візуальне оформлення та сприйняття веб-сайту як обєкта графічного дизайну. У праці визначено генетичний звязок концептуальної моделі веб-сайту з традиціями книговидавництва. Висвітлено значення інформаційного проектування в процесі створення веб-сайту та його візуального оформлення. Проведено аналіз принципів створення модульних сіток на базі використання таблиць у веб-сторінках, систематизовані основні напрямки в дизайні веб-сайтів, дано визначення веб-дизайну як одного з напрямків графічного дизайну. Розглянута специфіка сприйняття веб-сайту через модель «людина - компютер - інтернет».

Проблематику стилів Бородаєв Д.В. розглядає у своїй статті «Тенденции возникновения и развития стилей в Веб-дизайне» [2]. У статті аналізується основні тенденції, що впливають на виникнення і розвиток стилів у веб-дизайні. Визначаються основні напрямки в розвитку дизайну в інтернеті.

В статті «Особливості формування «етнічної» стильової моделі веб-дизайну в умовах глобалізації» [3] Бородаєв Д.В. розглянув особливості формування стильової моделі «етнічного» дизайну в веб-дизайні в умовах глобалізації, а також визначив його основні ознаки на прикладах веб-сайтів ряду країн Близького Сходу, Південно-Східної Азії та Північної Африки.

У статті «Стилістика Веб 2.0 - нова візуальна естетика, сформована на прийомах традиційних офф-лайн видань» [5] Бородаєв Д.В. розглянув новий напрям вебу і відзначив, що запозичаючи візуальну естетику, друкарські прийоми та ідеї з офф-лайну - Веб 2.0 вперше в історії інтернету створює нову естетику, систему і візуальну мову медіа комунікацій, не орієнтовану на дизайн друкованих видань.

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

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

В його книзі «Веб-дизайн: книга Якоба Нільсена» [16] добре розглянуті всі аспекти взаємодії користувача з web-сайтом або іншим інтерфейсом і розповідається про те, як зробити цю взаємодію найбільш ефективною і зручною для користувача.

Далі слід відзначити Джеффрі Віна, котрий спеціалізується в питаннях інтеграції контенту, графічного дизайну і технологій та адаптціі їх до вимог користувачів. Cлід відзначити його монографію «Мистецтво WEB-дизайну» [6]. В ній автор проводить паралелі між веб-дизайном та дизайном традиційних друкованих періодичних видань.

Багато компаній вже усвідомили, що веб-дизайн - це щось більше, ніж код без помилок і помітна графіка. По-справжньому ефективний сайт служить стратегічним цілям, одночасно задовольняючи потреби користувачів. Навіть найцікавіший контент і передові технології не допоможуть збалансувати ці два завдання без підтримки послідовного і несуперечливого досвіду взаємодії. Проте створення досвіду взаємодії здається неймовірно складною справою. Коли доводиться враховувати масу питань - юзабіліті, ідентичність бренду, інформаційну архітектуру, дизайн взаємодії, - здається, що єдиний спосіб побудувати вдалий сайт - це запросити фахівців, які знаються на всіх тонкощах. Джесс Гарретт [8] розкриває складну тему веб-дизайну, орієнтованого на користувача, за допомогою зрозумілих пояснень та чітких ілюстрацій, зосереджуючись на загальних ідеях, а не на інструментах і технічних прийомах. Автор малює перед читачем повну картину розробки досвіду взаємодії на веб-сайті - від стратегії та вимог до контенту до інформаційної архітектури та візуального дизайну. Ця інформація дозволить будь-якій команді веб-розробників, незалежно від її розміру, спроектувати успішний досвід взаємодії.

Наступним слід відзначити Джеффрі Зельдманана, котрий у книзі «WEB-дизайн по стандартам» [9] послідовно і цілеспрямовано веде читача до розуміння необхідності переходу до Web-стандартів. В дослідженні описуються всі основні технології, необхідні для швидкого та ефективного переходу сайту на новий рівень, - XHTML, CSS, XML. Д. Зельдман переконує інакше поглянути на Web-дизайн зокрема та інтернет в цілому; майбутнє за стандартами W3C.

Дослідник теми веб-дизайну Расс Віклі [28] проаналізовує й сформульовує стандарти, присутні у веб-дизайні. Він відзначає наступне: «Для різних людей термін «веб-стандарти» означає різні речі. Для декого це просто «сторінки без таблиць», для інших - «правильний код». Однак веб-стандарти це щось набагато більше. Сайт, побудованим з веб-стандартами, це сайт, який дотримується стандартів (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG і т.д.) і кращих відпрацьованих рішень (валідний код, доступний код, семантично правильний код, дружні URL-и)

Іншими словами сайт, побудований за стандартами в ідеалі повинен бути легким, чистим, заснованим на CSS, доступним, зручним і дружнім до пошукових серверів».

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

Звязок між веб-дизайном та друкованою продукцією є досить міцним, і це питання дослідив Д. Олсопп [21]. Автор про звязок між веб-дизайном та друкованою продукцією відмітив наступне: «Коли нове середовище переймає щось від вже існуючого, дещо йде йому на користь, але більша частина запозичень відбувається бездумно, за традицією, і найчастіше це позбавляє нове середовище волі. З плином часу нове середовище розробляє свої власні правила, відкидаючи застарілі, що не має сенсу.є новим середовищем, що виросло з видавничого середовища, чиї прийоми, мова та правила справляють на нього величезний вплив. Більш того, батьківська сфера часто аж надто сильно впливає на Web. «Крутими Web-сайтами» зазвичай виявляються ті, де свобода Web приборкана й загнана в рамки сторінок, немов вони готувалися для друку - своєрідна видавнича верстка для Web. Прояв такого консерватизму зрозумілий - від старих звичок і поглядів часом так важко звільнитися. Але прийшов час рухатися далі і освоювати Web на підставі його власних законів. Настав час відкинути стандарти друкованих сторінок, і скористатися нарешті можливостями, притаманними саме Web».

Існуюча література по Web-дизайну є скоріше літературою по Web-програмуванню і проблем, пов'язаних з розробкою зручного для користувача інтерфейсу. Курт Клонінгер у книзі «Свіжі стилі веб-дизайну» [11] висвітлює естетичну сторону дизайну. На прикладі найбільш цікавих, з точки зору автора, стилів сучасного Web-дизайну розглядається, як об'єднання вербальних, зорових і акустичних засобів дозволяє досягти максимального впливу на відвідувача мережі. У кожному розділі описується один з нетрадиційних стилів, приводиться безліч прикладів і посилання на відомі комерційні сайти, створені в цьому стилі, дається докладний аналіз застосовуваних технічних прийомів. Наведено велику кількість практичних порад для тих, хто вирішив скористатися яким-небудь із запропонованих стилів. Детально обговорюються особливості підготовки графіки, розташування матеріалу на Web-сторінці, вибір кольорової гами та багато інших проблем. Щодо нових рішень К. Клонінгер сказав наступне: «Де ж набратися свіжих дизайнерських ідей? Експериментальні домашні сторінки і сайти фірм, ніколи не працювали у видавничій справі. Для них Web - не нове інформаційне середовище, для них Web - єдине середовище. Вони не розглядають журнали в пошуках ідей. Вони милуються медичними картами, інтерфейсами програм 80-х років, кошиками для грибів, мультфільмами та власне самим вікном броузера. Їх експериментальні стилі вже наповнюють Web. У міру того, як мандрівники по Web-у звикнуть до нього, іронія, гумор і насмішка над собою стануть цінними маркетинговими ідеями».

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

Процес роботи над магістерською дисертацією будувався на основі науково-теоретичних пошуків. Методологічною основою даної роботи послугували видатні праці Я. Нільсена, К. Клонінгера, Д. Бородаєва а також ряд публікацій і статтей.

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

У кожному науковому дослідженні можна виділити два рівні: 1) емпіричний, на якому відбувається процес накопичення фактів; 2) теоретичний - досягнення синтезу знань (у формі наукової теорії).

Згідно з цими рівнями, загальні методи пізнання можна поділити на три групи, грані між якими визначені приблизно:

·методи емпіричного дослідження;

·методи, використовувані на емпіричному та теоретичному рівнях;

·методи теоретичного дослідження.

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

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

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

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

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

Абстрагування може застосовуватися до реальних і абстрактних об'єктів. Абстрагування дає змогу замінити у пізнанні складне простим, але таким простим, яке відбиває основне в цьому складному.

Існують такі основні види абстракції:

·ототожнення;

·ізолювання;

·конструктивізацiї;

·актуальної нескінченності;

·потенціальної здійсненності.

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

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

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

Аналіз і синтез бувають:

а) прямим, або емпіричним;

б) зворотним, або елементарно-теоретичним;

в) структурно-генетичним.

Моделювання - метод, який ґрунтується на використанні моделі як засобу дослідження явищ і процесів природи. Під моделями розуміють системи, що замінюють об'єкт пізнання і служать джерелом інформації стосовно нього. Моделі - це такі аналоги, подібність яких до оригіналу суттєва, а розбіжність - несуттєва. Моделі поділяють на два види: матеріальні та ідеальні.

Метод моделювання має таку структуру:

а) постановка завдання;

б) створення або вибір моделі;

в) дослідження моделі;

г) перенесення знань з моделі на оригінал.

2. Напрямки формування візуально-образної мови веб-сайтів

2.1 Інтегративні характеристики веб-дизайну

Інтегрáція (від лат. integrum - ціле, integratio - відновлення) - поєднання, взаємопроникнення. Це процес об'єднання будь-яких елементів (частин) в одне ціле. Процес взаємозближення і утворення взаємозв'язків.

Існує певний конфлікт між фахівцями зі зручності інтерфейсів (usability experts) і дизайнерами-графіками (graphics designers). Курт Клонінгер [11] пояснює, що даний конфлікт полягає у тому, що прибічники юзабіліті вважають сучасний Web покращеним, але погано використовуваним інтерфейсом до баз даних. Прибічники оригінальності й насиченості веб-дизайну вважають, що інтернет - це ще нерозвинена, але вже погано використовувана платформа для мультимедіа. І кожна з сторін просто впевнена, що їхня точка зору зрештою отримає верх. Фахівці з юзабіліті вважають, що дизайнери-графіки занадто сильно покладаються на почуття. «До чого всі ці їхні новаторські експерименти із зовнішнім виглядом сайту? Чому вони не можуть зробити все простіше, без наворотів?» Дизайнери-графіки зі свого боку вважають спеців з юзабіліті занадто тупими, занадто прямолінійними. «Що значить, зовнішній вигляд - лише просто глазур на торті. Без графічного дизайну, сайт - це просто гола схема.»

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

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

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

Натан Шедрофф (Nathan Shedroff) [34] відмітив: «Зваблення - прикметник що в більшості людей не асоціюється з інтерфейсом комп'ютера або ЗМІ, але вони розуміють це чи ні, більшість людей були звабленими майже всіма засобами масової інформації. Успішне зваблювання, однак, це обережне мистецтво, яке не так легко освоїти. Зваблення, по суті, завжди було частиною дизайну, будь то графічний, чи промисловий дизайн.»

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

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

К. Пол вважає, що користувача певного веб сайту в останню чергу цікавить на якій апаратній платформі працює сайт. Перше, на що він звертає увагу в ході ознайомлення з сайтом, - це його зовнішній вигляд. В залежності від того, чи задоволений відвідувач візуально, залежить його подальша поведінка як споживача і формується певна думка про сайт. К. Пол відзначив: «Якщо ви спантеличені тим, що ситуація на сайті не відповідає вашим очікуванням, проблема, можливо, заклечається не в тому, що запропоновані вашою компанією продукти чи послуги не затребувані на ринку, і не в поганому підході до інформаційного наповнення сайту. Може виявитися, що причина заклечається в недостатній увазі до вподобань користувачів. Мало використовувати останні досягнення в області веб-технологій, активно застосовувати системи електронної комерції і розташовуватись на надшвидкісних серверах. Якщо ви хочете закріпити своє місце під сонцем, необхідно ретельно вивчити вподобання користувача ваших послуг. Поняття «вподобання користувачів» можна розглядати як сумарну ступінь задоволення людини від користування вашим сайтом. І зовнішній вигляд тут грає одну із ключових ролей.» [25]

Я. Нільсен висловлює ще більш радикальну позицію: «Веб-дизайн - річ проста. Якщо вам потрібно розробити веб-сайт чи якийсь окремий елемент, то все, що вам потрібно для цього, - подивитись, як це було реалізовано на двох десятках інших, найбільш популярних сайтах». [16]

А. Петюшкін пропонує власний підхід щодо оцінки юзабіліті, називаючи його «альтернативним дизайном». Його суть полягає не в прагненні візуально задовольнити відвідувача і привести розроблюваний сайт до норми відповідно встановленим стандартам сумісності, а в стратегії вмілого маневрування між сталими стандартами й оригінальними розробками. Оперуючи показниками оцінки юзабіліті по відношенню до стандарту, слід не наближатись до нього, залишаючись на певній відстані. Саме таке балансування й дає розробникам можливість створення оригінального дизайну. Таким чином А. Петюшкін [24] виводить три умовних підходи щодо оцінки юзабіліті в дизайні веб-сайтів:

. «Гарний дизайн», основною критерією якого є створення привабливого зовнішнього вигляду веб-сайту, орієнтованого на конкретні візуальні переваги користувачів. Подібний підхід має й негативні сторони: досягнення інформаційних технологій відходять на другий план і мало взаємодіють із загальною концепцією юзабіліті; ступінь задоволеності від візуальної оцінки має тенденцію до різкого пониження за рахунок неопрацьованості в плані сумісності і технічної бази проекту.

. «Зручний дизайн». Його основна задача полягає в досягненні максимального рівня доступності веб-сайту за рахунок усунення барєру несумісності між технічними можливостями розробників і споживачів. При змушеній обмеженості дизайнерських рішень веб-сайт отримує максимальне охоплення користувацької аудиторії, доступність і простоту використання.

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

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

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

«Дизайн приємний настільки, наскільки він зручний» - відзначає Л. Лазаріс (Louis Lazaris). В своїй статтіі [33] він висвітлює взаємозалежність краси і юзабіліті веб-сайтів. Оскільки в індустрії веб-дизайну таланти сьогодні зустрічаються дуже часто, і практично будь-хто може створити «красивий» сайт, то стає все складніше визначити справжні критерії краси у веб-дизайні. Те, що гарно на перший погляд, насправді може лише заважати сприйняттю.

Не варто воювати за загальне повернення до синіх посилань на білому фоні. Скоріше, слід пам'ятати про дві речі при додаванні «прикрас» і удосконалень в своїх роботах, а саме:

інтерактивні та інтуїтивні елементи сторінки,

наслідування бренду і постійність стилю.

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

Інтерактивні та інтуїтивні елементи сторінки роблять дизайн функціональним. Якщо конкретний елемент дизайну робить сайт більш дружнім, або якщо він містить ненав'язливі підказки для користувача, це покращує юзабіліті. Додавайте елемент, тільки якщо він додасть додаткову зручність дизайну. Якщо дизайн не зроблено більш зручним з допомогою спеціальних технік (CSS3, JavaScript або щось ще), то дизайнер повинен переглянути питання, чи варто додавати додатковий код. «Прикраса» дизайну може зайти так далеко, що дасть зворотний ефект.

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

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

.2 Композиційно-пластичні засоби побудови графічної мови веб-сайтів

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

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

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

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

Джеффрі Зельдман [9] відмітив: «Веб дизайн передає певний сенс для певних людей. Це досягається осмисленим змістом в контексті цілеспрямованої цифрової архітектури. Навігація і інтерфейс - це двері в архітектуру».

Дизайн інтерфейсу - це лише частина роботи веб-дизайнера. Веб сайти служать посередником контенту, а інтефейс - посередником контексту.

Інформаційне наповнення, контент (англ. Content) - Будь-яке інформаційно значуще наповнення інформаційної системи (зокрема веб-вузла) - тексти, графіка, мультимедіа.

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

Навігаційний інтерфейс сайту - основа враження користувача. Він або допомагає, або заважає. Якщо він не інтуїтивний, він марний. Одна з причин того, чому так часто зустрічається неоригінальний інтерфейс (visual Muzak), в тому, що звичайність робить його інтуїтивно зрозумілим і допомагає пройти через дозапусковое тестування.

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

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

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

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

Кожен сайт говорить з певною аудиторією. Немає єдиного рецепту по дизайну будь-якого сайту.

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

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

Чітко сформулював усі важливі аспекти побудови сайту Дж. Гарретт [8], він відмітив, що для того, аби створити сайт, дружній для користувача, значить подбати про те, щоб на сайті з користувачем не відбувалося нічого, що заздалегідь не було заплановано розробником сайту. Для цього треба врахувати всі можливі дії, які користувач може зробити на сайті, і передбачити його відчуття на кожному етапі роботи з сайтом. Завдання начебто здається важким, і в деякому сенсі це так. Однак, якщо розділити весь процес розробки сайту на складові елементи, можна краще зрозуміти його вцілому. Дж. Гарретт відмітив важливість розуміння структури веб-сайту при його створенні.

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

Поверхня. На поверхні видно набір веб-сторінок, які складаються з графіки і тексту. За деякими із зображень можна клікнути (англ. click - клацання) і виконати тим самим будь-яку дію. Інші ж зображення є лише ілюстраціями, наприклад, малюнок книги або логотип сайту.

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

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

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

Стратегія. Рамки проекту задаються стратегією сайту. На стратегічному рівні визначається не тільки те, що отримають від сайту його власники, але те, що повинні отримати від сайту його користувачі. У прикладі книжкового магазину, котрий нам приводить Дж. Гаррет, деякі стратегічні цілі видно цілком ясно: користувачі хочуть купити книги, а власники сайту їх продати.

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

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

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

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

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

Набагато краще стежити за тим, щоб робота на наступному рівні закінчувалася завжди після того, як закінчена робота на попередньому.

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

.3 Існуючі системи класифікації стилів у веб-дизайні

Стилі у веб-дизайні, як і будь-яке сучасне культурне явище, базуються на існуючих стилях у мистецтві та напрямках дизайну.

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

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

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

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

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

Перш за все на дизайн сайтів робить величезний вплив апаратне забезпечення всесвітньої мережі. У ті, давно минулі часи, коли до 90% користувачів Інтернет використовували комутований доступ, а швидкість серфінгу визначалася швидкісними можливостями модему, виробилися певні принципи створення веб-сторінок, якими користувалися при розробці дизайну сайтів тих років. Одним з основних показників, що визначають структуру і зовнішній вигляд веб-сайтів, була швидкість завантаження сторінки. І це зрозуміло, тому що реальна швидкість передачі даних в той час становила в середньому на виході 2-5 кб / с. Звідси з'явилися обмеження на обсяг розміщеної на сторінці інформації, використання графіки, flash-анімації та ін.

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

Можна ще згадати про деякі обмеження, які стрімко йдуть у минуле. Наприклад, абсолютно безглуздо оптимізувати дизайн веб-сайту під застарілі монітори з роздільною здатністю екрану 640Х480 і 800Х600, або під браузер Nescape Navigator 1.0.

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

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

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

Гармонійний дизайн сторінки, виконаної в наступному стилі, досягається в основному за рахунок правильного розташування абзаців, стовпців тексту, підбором шрифтів для заголовків і основного тексту. Це «дизайн газетної смуги». Приклади сайтів: www.lenta.ru - новинний портал Lenta. Ru

Наступний виток у розвитку веб-дизайну - це стиль мінімалізму. Сталося певне повернення до академічного стилю, але вже з новими можливостями. Дизайн створюється не тільки за рахунок розташування елементів і тексту на сторінці, а й порожній простір сторінки бере участь в композиції. Для даного стилю характерні великі проміжки між блоками тексту, яскравий, що запам'ятовується, логотип, який є найбільш привертаючим погляд елементом. Так само як і в академічному стилі, велика увага приділяється підбору шрифтів. Використовується, як правило, 2-3 кольори. Приклади сайтів:://useit.com - сайт засновника поняття «юзабіліті» Якоба Нільсена.://www.ya.ru - пошукова система Яндекс

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

Також зароджується корпоративний стиль. У ньому виконано більшість сайтів численних американських бізнес-організацій. Для нього характерні привабливий хедер з колажем і численні блоки інформації. Як правило, немає яскраво виділеного елемента. Приклад: www.ebay.com - інтернет-аукціон, #"justify">Трохи пізніше з'являється стиль clean style. Він перегукується зі стилем мінімалізму. Додається більше елементів, кольорів. Сайти в такому стилі викликають відчуття легкості. Кольори зазвичай використовуються оптимістичні, соковиті: блакитний з зеленим, оранжевий, синій. Для такого сайту характерний головний графічний візуал - яскравий образ, що привертає увагу, що відображає суть сайту - навколо якого і побудована композиція. Так само як і в мінімалізмі, для даного стилю характерні порожній простір між блоками. У даному стилі часто використовують мальовані (мультиплікаційні) картинки і персонажі. Цей стиль одержав широке застосування в останні кілька років і до цих пір користується популярністю.

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

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

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

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

Також ще можна відзначити дизайн в стилі Веб-2.0, наприклад:: / / www.blogger.com - сервіс блогів від Google://memori.ru - мережа соціальних закладок://webdesign.infowind.ru

А також дизайн в стилі флеш, наприклад: www.buzz.ru, www.instinct.ru

Слід розглянути кожен з цих напрямків окремо.

Дизайн в стилі мінімалізму - основи мінімалізму зводяться до мінімуму використовуваних засобів при створенні сайту. Простота і логічність - ось основа мінімалізму.

Що визначає даний напрямок:

. Білий фон, чорний текст.

. Відмова від графіки.

. Присутність обмеженої кількості шрифтів (максимум 2).

. Мінімальне оформлення: піксельні значки, тонкі лінії.

. Текстова навігація.

. Ретельна робота над контентом, так як кількість інформації на сайті величезна.

. Чітка модульна сітка (кожен з блоків розміщений з урахуванням юзабіліті).

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

Бізнес-стиль служить для продажу будь-якого товару чи послуги. Основні риси бізнес-стилю:

. Фіксована ширина сайту.

. Стандартне розташування елементів сайту.

. Звичні образи, що дозволяють відразу визначити стиль сайту.

. Застосування банерної реклами.

Дизайн в стилі Веб-2.0 - новий напрям в дизайні сайтів. В основному дане поняття виникло в результаті виходу статті Тіма О'Рейлі, в якій він описав розвиток великого числа сайтів об'єднаних деякими загальними принципами і технологіями. [32]

Що передувало розвитку Веб-2.0:

Розвиток технології, яка дозволяє моментально додавати і оновлювати контент сайту. Це пов'язано з розвитком CMS (англ. Content management system) і технології RSS (англ. Really Simple Syndication) - потоків.

Набула широкого поширення технологія Ajax (англ. Asynchronous JavaScript And XML). Це призвело до того, що стали створюватися сайти, в яких необхідна інформація не перезавантажувати сайт, а всього лише довантажувати необхідні користувачу дані.

Стали виникати сайти, дані в яких запозичені в інших сайтів і все це наповнюється автоматично.

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

Що визначає дизайн Веб-2.0:

. Злегка збільшений розмір шрифту.

. Шрифт для заголовка Trebuchet MS

. Блоки із закругленими кутами

. Глянцеві відблиски на кнопках

. Логотипи з дзеркальним відображенням

. Відсутність звичної високої шапки

. Нестандартна модульна сітка (шаблон сайту)

. Текстова контекстна реклама, якісні флеш-ролики

. Юзабіліті

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

Промостіль та презентаційний дизайн нерозривно пов'язані.

Що визначає такий дизайн:

. Дуже багато графіки.

. Графіка первинна, контент вторинний.

. Рекламний зміст сайту.

. Відсутність сторонньої реклами.

. Візуальна «багатість» і «глянцевість» сайту.

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

Можна виділити наступні характерні напрями, в яких працюють дизайнери:

Мінімалізм;

Футуризм;

Інтерактивний журнал.

Що стосується взаємодії з відвідувачами, то поділяють флеш-сайти на:

. Статичні

. Сайти більш-менш живі

. Динамічні сайти (живі сайти)

Варто навести ще один приклад класифікації стелей веб-сайтів за Томом Кенні.

. Ілюстрації та мультфільми

Ілюстрації і мультиплікаційні малюнки додають дизайну різних почуттів та емоцій. Малюнок - це вже за визначенням творча і креативна діяльність. Саме тому використання малюнку дизайні - один із самих креативних методів подання інформації в мережі.

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

. Два кольори

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

. Фотореалізм

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

. Прозорість

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

Із зростаючим занепадом Internet Explorer 6 (IE6) і способів створення прозорих файлів PNG працюючих у IE6, ефект прозорості став перспективним стилем у веб дизайні. І навіть настільки, що деякі сайти у великій мірі на нього розраховують.

. Прекрасна типографіка

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

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

. Текстура і патерни

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

. Гранж

Так званий «погляд у стилі гранж» (grunge look) часто виглядає трохи брудним і неохайним. Саме тому дизайн в стилі грандж - це один із способів привернути увагу і не загубитися у всесвітній мережі. Оскільки сучасні тенденції задають більш чисті, акуратні, мінімалістичні стилі, гранж ніколи не залишиться непоміченим. Це відмінний хід «виділитися», але такий дизайн підходить не для всіх брендів.

. Природа

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

. Абстракції

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

. Ретро

Ретро-дизайн - займає особливе місце серед стилів і є відносно недавньою тенденцією у веб дизайні. Він звичайно використовується, щоб представити продукт або послуги зі стилями, зібраними звідусіль у період починаючи з 1920-их до 1970-их. Цікаво бачити сучасні інтерпретації того, що було популярне в ту епоху, відчути настрій того часу і ненадовго повернутися в минуле.

Питанням стилістики веб-сайтів займався і Курт Клонінгер [11], в своєму дослідженні він описує ряд стильових особливостей й виділяє десять авторських стилей.

. Готична органічна школа

Джерело натхнення: людське тіло/арабський алфавіт.

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

Домашні сторінки/дизайнерські фірми: Entropy8, Greyscale, SmokeymonkeyS.

Приклади комерційних сайтів: Conscience Records, Janet Jackson.

. Школа дротяного стилю

Джерело натхнення: інтерфейси старого програмного забезпечення і відеоігор.

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

Домашні сторінки / дизайнерські фірми: Test Pilot Collective (pre-5/00), mike cina, hoggorm, Hel13, zx26, Prototype 19.

Приклади комерційних сайтів: levi's europe, adidas, Fusion banner ads, Wired logo.

. «Низькопробний» сміттєвий дизайн

Джерело натхнення: бруд, плями, накладення, піктограми старої школи.

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

Домашні сторінки / дизайнерські фірми: sueellen, jump into the light, smallprint.

Приклади комерційних сайтів: Nokian Tyres, Skate'n Fun.

. «Пакувальна» школа

Джерело натхнення: комікси середини століття, паперові пакети.

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

Домашні сторінки / дизайнерські фірми: Funny Garbage, p2, stereomedia.

Приклади комерційних сайтів: levi's vintage, Ka-Ching.

. Стиль a la Піт Мондріан

Джерело натхнення: Піт Мондріан, Роберт Лонго. Постери, виконані в їх техніці.

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

Домашні сторінки / дизайнерські фірми: 617, Once Upon a Forest.

. Піксельний панківський дизайн

Джерело натхнення: хаос, незвичайна поведінка машин, програмний код, Жорж Сіро (George Seraut), дадаїзм.

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

Домашні сторінки / дизайнерські фірми: Day-Dream, Titler, soulbath's requiem for a dream, e13, dream7, ShaG, pixeljam.

. Стиль «Hello Kitty» 1950-х років

Джерело натхнення: комікси для дівчат, різдвяні сувеніри, атрибути будинків-причепів 50-их років.

Прийоми: 3-вимірні об'єкти / текст, округлені правильні краї, яскраві кольори на світлому фоні, курсивний шрифт, підлітковий гумор.

Домашні сторінки / дизайнерські фірми: Future Farmers, Atlas Magazine, Post Tool, Milky Elephant, You Grow Girl.

Приклади комерційних сайтів: California College of Arts and Crafts, Avant Card.

. HTMінімаLізм

Джерело натхнення: HTML-код, мозок Якоба Нільсена (Jakob Neilsen).

Прийоми: ігри зі шрифтом за допомогою CSS, акцент на колір для виділення сенсу, швидко завантажувані логотипи у вигляді гіфів, html і текст - елементи дизайну.

Домашні сторінки / дизайнерські фірми: 37signals, jovino, test pilot collective (post-5/00), dreamless, a list apart, suffocate, endquote, mesa.beta.font.

Приклади комерційних сайтів: gettyone.

. Стиль креслярської дошки, інструкцій та настанов

Джерело натхнення: Архітектурні кальки Захи Хадід (Zaha Hadid), технічні керівництва, іграшки роботи-трансформери, штрих-код, міліметрівка, тексти дрібним шрифтом.

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

Домашні сторінки / дизайнерські фірми: DFORM1, Vir2L, chapter3, mr. eel.

Приклади комерційних сайтів: mtv2.

. Надтонкий дизайн в стилі SimCity

Джерело натхнення: гра SimCity, ігри для Commodore 64, обгортки японських цукерок.

Прийоми: тонкі згладжені шрифти, зайве дроблення і деталізація, дрібні піксельні зображення людей / будівель / об'єктів.

Домашні сторінки / дизайнерські фірми: kaliber 10000, the icon factory, flipflopflyin, hi-res.

Приклади комерційних сайтів: iTurf.

Всі вищенаведені приклади розподілу за стилями є досить відносними і носять в більшості випадків глибоко субєктивне бачення авторів.

3. Творча індивідуальність дизайнера у веб-проектуванні на прикладі реалізованих веб-сайтів

.1 Аналіз структури, образних рішень та графічної мови обраних веб-сайтів

Аналіз дизайну сайту.

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

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

Аналіз дизайну сайту включає в себе:

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

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

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

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

·Дизайн сайту повинен бути незабутнім і оригінальним. Якісний, дизайн, що запам'ятовується, що містить елементи корпоративного стилю компанії, сприяє формуванню позитивного іміджу компанії, підвищення лояльності з боку клієнтів, а також викликає довіру у покупців і партнерів фірми.

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

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

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

Дизайн футерів

Футер (від англ. foot-підніжжя) - елемент сайту, що поміщається зазвичай внизу сторінки. Зазвичай містить деякі дані про сайт або про дану сторінку. Може бути постійним (мертвим) - в якому текст не змінюється, змінним (мінливим) і ковзаючим (мінливим на кожній сторінці).

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

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

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

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

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

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

Типовим зразком може служити DesignShack, де все меню навігації розташоване внизу сайту.

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

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

. Імітація земної поверхні

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

На сайті YoDiv крихітні бульбашки влаштували перегони. У футері сайту Volll живе сім'я восьминогів з парасолькою. На Vimeo можна побачити маленьких чоловічків в перспективі користувача. Сайт Kulturbanause.de здивує нас водоспадом і футером, створеним з води. Прекрасний і дійсно незвичайний дизайн на двигуні WordPress. На сайті The Rissington Podcast ми бачимо літак готовий до зльоту. У наявності використання прийомів з коміксів. На сайті Rapidweaver подбали навіть про дрібниці, чудова панель вибору мов дуже підходить до загального дизайну сайту. Творець сайту MB Dragan обожнює малюнки виконані від руки, все просто і зі смаком. Miloslav Leseticky є одним з ілюстраторів, тому ми бачимо його ілюстрацію прямо в футері. На сайті Paul Otaneda роль футера виконує світло зелена тема, з іконками, деревом, і трьома пташками.

А також цей прийом можна прослідкувати в наступних сайтах: #"justify">. Контент і футер чітко розмежовуються кольором

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

Наприклад, на сайті Billy Hughes at War в футер зображений Біллі Хьюджес (Billy Hughes). На сайті HEBAtec футер включає достатнього багато різного, серед іншого тут можна знайти і RSS розсилку і пошукову форму. На сайті Freelenz.at однозначно знають, як добре мати дописи з блоґу, коментарі, іконку RSS розсилки та піктограми Flickr. На сайті Viget.com пропонується навігація по категоріях і архівів. На сайті Ungarbage дуже багато посилань. На сайті Bits & Pixels футер теж досить різнобарвний з невеликою кількістю іконок. Він відмінно підходить до загального дизайну сайту, який і сам володіє достатньою великою кольровою гамою. Як би там не було, кольору лейаута і футера дуже часто схожі. Наприклад: City of Grace Mesa.

. Використання ілюстрацій

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

На сайті Lukasz Tyrala зображено кілька скетчів намальованих від руки. А сайт Hicksdesign виділяється ретро-дизайном і невеликою кількістю контактних даних. Nicolas Le Bas представляє футер зовсім по-іншому. Три інфо-боксу розташовуються поруч один з одним, з одним і тим же фоном, але під різними кутами. Також ілюстративні футери можна побачити на сайтах #"justify">. Футери з удосконаленим функціоналом

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

Наприклад, на сайті Ten Thousand Things там розташована контактна інформація, реклама і найбільш популярні теги. На сайті The Greg Brady Project контактна форма і футер об'єднані разом. На сайті Rahul Joshi ви можете побачити 4 колонки: одну для картинок Flickr, другу для решти сторінок, третю для інформації про авторські права і четверту для контактної інформації. А на сайті у Lucy Blackmore можна побачити стікер, який веде на домашню сторінку. У свою чергу у Paul Wallas в футер розташована хмарка тегів. На сайті Arrival Design відразу переходять до справи, у футері розміщена інформація про те, чим вони займаються і контактна інформація.

Дизайн шапки (хідера) веб-сайту

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

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

Розглянемо деякі оригінальні та дієві, популярні в наш час, вирішення шапок сайтів.

. Ілюстративна шапка

Для створення яскравої і оригінальної шапки найпоширенішим способом є спосіб використання ілюстрації. Це здебільшого сайти дизайн-агенств, сайти-портфоліо, сайти для дітей. Цей спосіб організації шапки веб-сайту можна прослідкувати у наступних сайтах: blackmoondev.com, badhealth.nhs.uk, deborahcavenaugh.com, #"justify">. Колаж

Також досить популярним є колаж, в якому зачасту поєднують фото, типографічні і ілюстративні елементи. Це сайти-портфоліо, сайти дизайн-студій, музичних виконавців: #"justify">. Типографічне вирішення

Потрібно окремо відзначити і типографічні шапки, котрі також займають своє стійке місце у модних тенденціях сучасного веб-дизайну. Такий дизайн-прийом ми можемо побачити у наступних сайтах: #"justify">Контактні сторінки

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

У веб-дизайні часто прослідковується спроба імітування справжнього матеріалу для візуально взаємопроникнення зображення на екрані в реальний світ користувача. Таким чином створюється більш тонка взаємодія вебу і юзера. Так в дизайні контактних сторінок одним із найпопулярнішим вирішенням є імітування справжнього матеріалу, здебільшого паперу, конверту чи робочого столу. Таке вирішення прослідковується у наступних сайтах: #"justify">. Типографічний мінімалізм

Досить часто для дизайну контактних сторінок використовують лише типографіку з мінімальною інформацією, котра лише дає нам змогу звязатися із власником сайту, тобто виконує пряму функцію даної сторінки і не відволікає зайвими елементами. Використаний він є у наступних сайтах: #"justify">. Ілюстративні контактні сторінки

Зазвичай ілюстрації в контактній сторінці використовуються тоді, якщо весь сайт оформлений ілюстративно і ілюстрація є основним елементом дизайну веб-сайту, таким чином підтримується цілісність ілюстративного дизайну сайту. Приклад ми можемо побачити на таких сайтах як #"justify">.2 Класифікація найпоширеніших прийомів та засобів у дизайні веб-сайтів

Проаналізувавши певні напрями та стилі, а також проаналізувавши певні сайти із креативним вирішенням дизайну, можемо визначити певні модні сучасні напрямки в веб-дизайні.

Розглянемо деякі з тенденцій, які набули популярності в кінці 2010 - на початку 2011 р.р.

. Відмова від готових макетів

. Односторінковий макет

. Багатостовпцеві макети

. Насиченість ілюстраціями і високоякісною графікою

. Великий білий простір

. Елементи оформлення соціальних мереж

. «Розмовляюча» навігація

. Динамічні вкладки

. Збільшені форми пошуку

. Іконки розділів

. Іконки авторів

. Іконки і графічні підказки

. Списки теґів (замість хмарки теґів)

. Ілюстрації в постах для блоґів

. Акварель

. Написи від руки

. Стиль ретро

. Природничі текстури і фон, що складається з фото-знімків

. Бірки

. Цінники

. Стрічки

Розглянемо детальніше найяскравіші із прийомів:

. Відмова від стандартних макетів

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

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

. Односторінковий макет

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

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

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

. Багатостовпцеві макети

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

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

Одним із способів досягти цього, є використання макетів з декількома колонками, розташованими один за одним. Рішення цілком відповідне. В останні кілька років, роздільна здатність моніторів постійно зростає (хоча, широке розповсюдження нетбуків типу Eee PC компанії Asus може і вплинути на ситуацію), відкриваючи користувачам додатковий горизонтальний простір, а дизайнерам додатковий простір для роботи.

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

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

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

Часто в цих цілях дизайнери вдаються до правила шнейдерман - «спершу, визнач загальну картинку, а потім обговори її подробиці» - насамперед пропонуючи користувачеві короткий огляд можливостей сайту, а подробиці надаючи щодо подальшого вимогу (яскравим прикладом подібного підходу можна назвати Mozilla Labs).

. Насиченість ілюстраціями і високоякісної графікою

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

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

. Більше білого простору

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

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

. Елементи «соціального» дизайну

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

Соціальні іконки часто розміщуються в правому верхньому кутку сторінки або ж в кінці статті. Соціальні блоки зазвичай знаходяться в кінці посту і іноді розміщуються перед списком статей на цю ж тему. Часто можна спостерігати, що блоґ або портфоліо якимось чином поєднані з функціоналом Twitter, Flickr і Last.FM.

. «Розмовляюча» навігація

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

Саме тому, часто назви розділів не обмежуються простим списком назв («мовчазна» навігація). Замість цього, дизайнери намагаються більш докладно пояснити, чого саме користувачеві варто очікувати, клацнувши по відповідній посиланням.

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

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

. Динамічні вкладки

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

.3 Творча індивідуальність дизайнера у веб-дизайні в контексті загальносвітової масової культури

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

Тому для детального аналізу творчої індивідуальності дизайнера у веб-дизайні в контексті загальносвітової масової культури я обрала власні сайти дизайнерів, котрі втілили у своїх сайтах свої креативні ідеї, відкрили індивідуальне бачення.

Для аналізу і виявлення творчої індивідуальності дизайнера у веб-дизайні я обрала сайти meomi.com (США / Канада), bowtieperiod.com (Мексика), а також проаналізую сайт розроблений мною, в якому відображене моє власне бачення і креативні рішення.

Meomi.com (мал. 60)

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

На головній сторінці ми бачимо меню, новини сайту, посилання на дружні сайти, а також кнопки посилання на соціальні мережі та блоги.

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

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

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

bowtieperiod.com (мал. 15-20)

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

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

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

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

Мій сайт-портфоліо (мал. 109-111)

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

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

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

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

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

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

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

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

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

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

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

Загальні висновки

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

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

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

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

Визначено, що зручність, та естетичні якості веб-сайту впливають на якісне сприйняття інформації інтернет користувачами.

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

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

Було детально розглянуто та проаналізовано структуру найбільш креативних веб-сайтів та їх дизайн, на базі чого було визначено креативні рішення найбільш поширені серед веб-дизайнерів на протязі 2010-2011 рр.

Структуризовано сучасні креативні вирішення дизайну веб-сайтів, визначені модні напрямки та тенденції в розвитку сучасних стилів веб-дизайну.

Нами було підсумовано рівень творчої індивідуальності дизайнера у веб-проектуванні на прикладі реалізованих веб-сайтів.

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

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

Використані джерела

1.Бородаев Д.В. Веб-сайт как объект графического дизайна / Д. Бородаев. - Х.: Септима ЛТД, 2006. - 288 с.

2.Бородаев Д. Тенденции возникновения и развития стилей в Веб-дизайне / Д. Бородаев // Вісник Харківської Державної академії дизайну і мистецтв. - Х.: ХДАДМ, 2005. - №1. - частина 1. - С. 79-85.

.Бородаев Д. Особенности формирования «этнической» стилевой модели веб-дизайна в условиях глобализации / Д. Бородаев // Вісник Харківської Державної академії дизайну і мистецтв. - Х.: ХДАДМ, 2005. - №9.

.Бородаев Д. Место веб-сайта в системе корпоративной идентификации / Д. Бородаев // Вісник Харківської Державної академії дизайну і мистецтв. - Х.: ХДАДМ, 2006. - №10. - С. 13-19.

.Бородаев Д. Стилистика веб 2.0 - новая визуальная эстетика, сформированная на приемах традиционных офф-лайн изданий/ Д. Бородаев // Вісник Харківської Державної академії дизайну і мистецтв. - Х.: ХДАДМ, 2010.

.Вин Д. Искусство WEB-дизайна: Самоучитель /Д. Вин; Пер. с англ. - СПб.: Питер, 2002. - 224 с.

.Вролебски Л. Природные цвета в дизайне интерфейсов

.Гарретт Дж. Веб-дизайн. Элементы опыта взаимодействия / Джесс Гарретт; Пер. с англ. - СПб.: БВХ-Петербург, 2008. - 182 с.

.Зельдман Дж. Web-дизайн по стандартам / Джеффри Зельдман; Пер. с англ. - М.: НТ Пресс, 2005. - 440 с.

.Качанов А. Стиль против дизайна / А. Качанов, 2006.

.Клонингер К. Свежие стили Web-дизайна. Как сделать из вашего сайта «конфетку»/ К. Клонингер; Пер. с англ. - М.: ДМК Пресс, 2002. - 224 с.

.Круг С. Веб-дизайн или «не заставляйте меня думать» / С. Круг; Пер. с англ. - СПб.: Символ-Плюс, 2001. - 200 с.

.Ляхов В. Очерки теории искусства книги / В. Ляхов. - М.: Книга, 1971. - 256 с.

.Мандел Т. Разработка пользовательского интерфейса /Т. Мандел; Пер. с англ. - М.: ДМК Пресс, 2001. - 416 с.

.Миллер Д. В начале было… информационное проектирование / Д. Миллер // Publish. - М.: Открытые системы, 1999. - №2. - С. 45-52.

.Нильсен Я. Веб-дизайн: Книга Якоба Нильсена / Я. Нильсен; Пер. с англ. - СПб: Символ-Плюс, 2001. - 512 с.

.Нильсен Я. Дизайн Web-страниц: Анализ удобства и простоты использования 50 узлов / Я. Нильсен, М. Тахир; Пер. с англ. -
М.: Издательский дом «Вильямс», 2002. - 336 с.
.Нильсен Я. Юзабилити: наука или идеология

.Нильсен Я. 10 главных ошибок веб-дизайна, 2005.

.Нильсен Я. Амазон больше не может быть примером для подражания

.Олсопп Д. Дао Web-дизайна / Д. Олсопп, 2001.

.Пауэл Т. Веб-дизайн: Наиболее полное руководство / Т. Пауэлл; Пер. с англ. - СПб.: БВХ-Петербург, 2003. - 1072 с.

.Пенстон Дж. Юзабилити и дизайн / Дж. Пенстон, 2002.

.Петюшкин А. HTML. Экспресс-курс / А. Петюшкин - СПб.: БХВ-Петербург, 2003. - 256 с.

.Пол К.

.Прайс Дж. Текст для Web: Доступность и привлекательность / Дж. Прайс, Л. Прайс; Пер. с англ. - М.: Вильямс, 2003. - 464 с.

.Серов С.И. Типографика виртуальной коммуникации / С. Серов. - М.: Линия График, 2004. - 32 с.

.Уикли Р. Освой самостоятельно CSS. 10 минут на урок / Р. Уикли; пер. с англ. - М.: Вильямс, 2006. - 256 с.

.Уодтке К. Информационная архитектура: чертежи для сайта / К. Уодтке; Пер. с англ. - М.: Кудиц-Образ, 2004. - 320 с.

.Файола Э. Шрифты для печати и Web-дизайна / Э. Файола - СПб.: БХВ-Петербург, 2003. - 288 с.

.Elliot Jay Stocks Sexy web design/ Canada, 2009. - 152 pages.

32.OReilly Tim. What Is Web 2.0. Design Patterns and Business Models for the Next Generation of Software / Tim OReilly, 2005.

33.Lazaris Louis A design is only as deep as it is usable / L. Lazaris / Canada, 2010.

34.Nathan Shedroff Design is the Problem: The Future of Design Must Be Sustainable / USA, 2009. - 352 pages.

.#"justify">.http://www.i2r.ru/