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

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

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

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

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

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

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

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

http://useit.com - сайт засновника поняття «юзабіліті» Якоба Нільсена.

http://www.ya.ru - пошукова система Яндекс

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

Також зароджується корпоративний стиль. У ньому виконано більшість сайтів численних американських бізнес-організацій. Для нього характерні привабливий хедер з колажем і численні блоки інформації. Як правило, немає яскраво виділеного елемента. Приклад: www.ebay.com - інтернет-аукціон, http://www.pirogov.ru - сайт Бюро Пирогова

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

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

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

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

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

Також ще можна відзначити дизайн в стилі Веб-2.0, наприклад:

https: / / www.blogger.com - сервіс блогів від Google

http://memori.ru - мережа соціальних закладок

http://webdesign.infowind.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Хмара тегів (міток)

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

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

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

10. Юзабіліті

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

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

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

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

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

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

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

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

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

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

- Мінімалізм;

- Футуризм;

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

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

1. Статичні

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

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

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

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

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

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

2. Два кольори

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

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

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

4. Прозорість

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

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

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

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

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

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

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

7. Гранж

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

8. Природа

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

9. Абстракції

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

10. Ретро

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. 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.

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

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

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

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

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

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

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

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

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

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

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

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)

3.2 Класифікація найпоширеніших прийомів та засобів у дизайні веб-сайтів

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15. Акварель

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

17. Стиль ретро

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

19. Бірки

20. Цінники

21. Стрічки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Meomi.com (мал. 60)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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