Принципи web-дизайну.

Ключове слово "Користувач"

Почитайте деякий час групи новин і списки розсилки, присвячені web-дизайну. Час від часу ви натраплятимете в них на одні і ті ж слова і ідеї. Питання питань, природно, - "як мені.". Але за питаннями типа "як мені зробити так, щоб мої сторінки однаково виглядали на будь-якій платформі?" і "як мені зробити так, щоб мої шрифти були однаковими і на Макінтоші і в Windows?" ховається головне питання - "як мені управляти броузером користувача?". І справді, слово "управління" трапляється нам в групах новин дивно часто.

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

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

Ключове слово "Гнучкість"

Людина, з'являючись на світ, м'яка і податлива, а коли вмирає - негнучка і тверда.
Всі живі тварюки, дерева і трави, коли народжуються, податливі і ніжні, а коли вмирають, стають сухими і ламкими.
І тому той, хто м'який і податливий, йде дорогою життя, той, хто негнучкий і твердий, йде дорогою смерті.
Дао де дзин; вірш 76. Гнучкість

Може здатися, що неможливість управляти зовнішнім виглядом сторінки є обмеженням, неприємною помилкою Web, створюючи змінні сторінки ви робите їх доступними. Адже самою багатообіцяючою властивістю Web, яка поки що далека від реалізації, є простота доступу до інформації, незалежно від яких-небудь обмежень. Найважливішою ідеєю World Wide Web Consortium (http://www.w3.org/), і ця ідея вже стає фундаментом web-дизайну, є те, що в майбутньому спеціальним законом web-дизайнери будуть зобов'язані забезпечувати універсальний доступ до своїх сторінок, також, як зараз будівельне законодавство в будь-якій країні вимагає обов'язкової наявності під'їзних доріг до будівель.

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

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

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

Ще важливішою темою як і раніше є розмір шрифтів. Ви напевне знаєте, що один і той же шрифт одного і того ж розміру на Макінтошах "виглядає менше", ніж на більшості Windows-машин. Двома словами: це відбувається тому, що "логічний дозвіл" на Макінтоші дорівнює 72 крапкам на дюйм, а на Windows-системах - 96 т/д. Висновки з цього факту вельми значні. По-перше, абсолютно неможливо добитися того, аби текст на Макінтоші виглядав также, як і на Windows-системі. Але якщо ви керуєтеся філософією змінності, для вас це не грає жодної ролі.

За допомогою CSS можна вказати розмір шрифту у відсотках відносно розміру шрифту батьківського елементу. Наприклад, заголовки <H> розташовуються усередині тіла <body> сторінки. Якщо ви явно не задасте розмір шрифту для BODY, тоді шрифт в BODY матиме такий розмір, який користувач встановить для себе за умовчанням.

Ключове слово "Модульність"

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

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

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

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

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

Отже - які модулі мають бути присутніми на головній сторінці сайту?

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

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

· Навігаційне меню.

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

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

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

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

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

Ключове слово "Єдність"

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

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

Ключове слово "Шаблон"

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