2.4 Висновки другого розділу

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

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

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

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

РОЗДІЛ 3. ТВОРЧА ІНДИВІДУАЛЬНІСТЬ ДИЗАЙНЕРА У ВЕБ-ПРОЕКТУВАННІ НА ПРИКЛАДІ РЕАЛІЗОВАНИХ ВЕБ-САЙТІВ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А також цей прийом можна прослідкувати в наступних сайтах: http://yuruinspires.com/index.php/blog/, http://www.designbombs.com/, http://www.markforrester.co.za/. (мал. 37, 59, 107)

2. Контент і футер чітко розмежовуються кольором

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

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

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

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

На сайті Lukasz Tyrala зображено кілька скетчів намальованих від руки. А сайт Hicksdesign виділяється ретро-дизайном і невеликою кількістю контактних даних. Nicolas Le Bas представляє футер зовсім по-іншому. Три інфо-боксу розташовуються поруч один з одним, з одним і тим же фоном, але під різними кутами. Також ілюстративні футери можна побачити на сайтах http://www.livingdesign.info/, http://ma.tt/, http://www.markforrester.co.za/. (мал. 52, 56, 59)

4. Футери з удосконаленим функціоналом

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

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

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

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

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

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

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

Для створення яскравої і оригінальної шапки найпоширенішим способом є спосіб використання ілюстрації. Це здебільшого сайти дизайн-агенств, сайти-портфоліо, сайти для дітей. Цей спосіб організації шапки веб-сайту можна прослідкувати у наступних сайтах: blackmoondev.com, badhealth.nhs.uk, deborahcavenaugh.com, http://www.thepeachdesign.com/, http://pralinenschachtel.de/, http://oldloft.com/, http://douglasmenezes.com/wp/, http://www.meomi.com/, http://ma.tt/, http://www.pigeonandpigeonette.com/, http://www.newtoyork.com/, http://carsonified.com/mission/, http://www.creativespark.co.uk/, http://ndesign-studio.com/, http://demainjarrete.stpo.fr, http://www.treehouseediting.com/, http://www.paravelinc.com/, http://cubeclub-chemnitz.de/, http://www.camellie.com/, http://www.katherine-designs.com/, http://www.markforrester.co.za/, http://www.attackoftheweb.co.uk/, http://blog.artcore-illustrations.de/. (мал. 9, 12, 13, 14, 21, 25, 33, 35, 46, 54,55, 59, 60, 65, 69, 71, 73, 79, 98)

2. Колаж

Також досить популярним є колаж, в якому зачасту поєднують фото, типографічні і ілюстративні елементи. Це сайти-портфоліо, сайти дизайн-студій, музичних виконавців: http://www.racket.net.au/, http://ayakaito.com/log/, http://www.livingdesign.info/, http://www.fabricadecaricaturas.com/, http://www.clever-craft.com/, http://www.coleweber.com/, http://zachhendricks.net/. (мал. 11, 23, 29, 41, 51, 80, 108)

3. Типографічне вирішення

Потрібно окремо відзначити і типографічні шапки, котрі також займають своє стійке місце у модних тенденціях сучасного веб-дизайну. Такий дизайн-прийом ми можемо побачити у наступних сайтах: http://feedstitch.com/, http://lordlikely.com/, http://www.gapmedics.co.uk/, http://adaptd.com/, http://yaronschoen.com/, http://www.keanrichmond.com/, http://www.madewithlove.be/, http://www.element-gallery.com/coming-soon.php, http://posterninjas.com/, http://www.lapatisserie.in/, http://www.oliverkavanagh.com/, http://teamfannypack.com/ . (мал. 1, 40, 43, 44, 47, 50, 53, 57, 70, 75, 77, 91, 103)

Контактні сторінки

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

1. Імітація справжнього матеріалу

У веб-дизайні часто прослідковується спроба імітування справжнього матеріалу для візуально взаємопроникнення зображення на екрані в реальний світ користувача. Таким чином створюється більш тонка взаємодія вебу і юзера. Так в дизайні контактних сторінок одним із найпопулярнішим вирішенням є імітування справжнього матеріалу, здебільшого паперу, конверту чи робочого столу. Таке вирішення прослідковується у наступних сайтах: http://www.aw-industries.com/contact, http://www.respiromedia.com/contact, http://www.fabricadecaricaturas.com/contacta/. (мал. 10, 42, 82)

2. Типографічний мінімалізм

Досить часто для дизайну контактних сторінок використовують лише типографіку з мінімальною інформацією, котра лише дає нам змогу зв’язатися із власником сайту, тобто виконує пряму функцію даної сторінки і не відволікає зайвими елементами. Використаний він є у наступних сайтах: http://www.madewithlove.be/contact, http://www.catalytic-design.com/#contact_us, http://www.keanrichmond.com/contact.html. (мал. 24, 49, 58)

3. Ілюстративні контактні сторінки

Зазвичай ілюстрації в контактній сторінці використовуються тоді, якщо весь сайт оформлений ілюстративно і ілюстрація є основним елементом дизайну веб-сайту, таким чином підтримується цілісність ілюстративного дизайну сайту. Приклад ми можемо побачити на таких сайтах як http://www.creativespark.co.uk/contact/, http://www.treehouseediting.com/, http://ndesign-studio.com/contact, http://carsonified.com/contact/, http://www.paravelinc.com/contact, http://www.arbel-designs.com/. (мал. 8, 22, 34, 66, 72, 100)