Змістовий модуль 7. Основи ВЕБ-дизайну

Вивчення теми №15. “Створення та розміщення ВЕБ-сторінок”

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

Література: [ 4 ], [ 5 ], [ 7 ], [ 10 ].

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

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

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

· Презентаційні,

· корпоративні,

· інформаційні,

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

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

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

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

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

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

Отже - які модулі повинні бути присутніми на головній сторінці сайту? Розглянемо самий типовий варіант для середнього сайту середньої фірми або не самий “запущений” варіант авторської сторінки.

· Назва (сайту або організації)

· Логотип (або будь-який графічний знак, що унікальним образом ідентифікує проект або організацію)

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

· Дані. Властиво втримування першої сторінки.

· Другорядні дані. Це може бути графічний баннер партнерського проекту або текстова інформація про спонсорів...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Людина може бачити мир не тільки таким, яким він існує в дійсності, але й таким, яким він може (або повинен) бути. Таку здатність психологи називають “візуальним мисленням”.

Сьогодні створення сторінки Web є не занадто важким завданням. Багато стандартних програмних пакетів персональних комп’ютерів мають убудовані кошти для перетворення документів текстових процесорів, електронних таблиць, баз даних і т.д. у спеціально кодовані документи, які можуть бути доступні в Web. Спеціальні пакети для створення сторінок Web, такі, як Microsoft FrontPage і Macromedia Dreamweaver, дозволяють легко створювати сторінки Web за допомогою технології буксирування. У більшості таких випадків навіть не потрібно знати про існування спеціальної мови кодування HTML (мова розмітки гіпертексту), що неявно все це забезпечує.

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

Питання для самоконтролю

1. З чого починається розробка Веб – сторінок?

2. Що таке інформаційна модель?

3. Що таке Веб – дизайн?

4. Які головні модулі повинні бути присутніми на головній сторінці сайту?

5. Що таке модульна сітка?

6. Які тири сайтів можуть бути

7. Які спецціальні пакети використовуються для створення Веб – сторінок7