+3 8(066) 185-39-18
fПредмет:
Тип роботи:
Бакалаврська робота
К-сть сторінок:
60
Мова:
Українська
уявлення відвідувачу, яка тематика у даного сайту. Шапка сайту повинна бути оригінальною і такою, що запам'ятовується, вона повинна бути ефективною для залучення уваги. Як і будь-який інший елемент дизайну, шапки сучасних сайтів також змінюються. Ще кілька років тому шапка являла собою лише логотип і назву сайту. Сьогодні на багатьох сайтах шапка це цілий витвір мистецтва. Хоча часто одна лише шапка являє собою зразок мистецтва, головне завдання для дизайнера органічно вписати таку шапку в решті дизайну. Весь дизайн повинен мати єдиний стиль і колірну гаму. Особливо якщо шапка сайту не статична, а анімована, наприклад на 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)
3. 2 Класифікація найпоширеніших прийомів та засобів у дизайні веб-сайтів
Проаналізувавши певні напрями та стилі, а також проаналізувавши певні сайти із креативним вирішенням дизайну, можемо визначити певні модні сучасні напрямки в веб-дизайні.
Розглянемо деякі з тенденцій, які набули популярності в кінці 2010 – на початку 2011 р. р.
1. Відмова від готових макетів
2. Односторінковий макет
3. Багатостовпцеві макети
4. Насиченість ілюстраціями і високоякісною графікою
5. Великий білий простір
6. Елементи оформлення соціальних мереж
7. «Розмовляюча» навігація
8. Динамічні вкладки
9. Збільшені форми пошуку
10. Іконки розділів
11. Іконки авторів
12. Іконки і графічні підказки
13. Списки теґів (замість хмарки теґів)
14. Ілюстрації в постах для блоґів
15. Акварель
16. Написи від руки
17. Стиль ретро
18. Природничі текстури і фон, що складається з