wascade Голосов: 0 Адрес блога: http://wascade.blogspot.com/ Добавлен: 2013-11-10 21:46:47

Основи web-дизайну

2013-09-25 20:07:00 (читать в оригинале)

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

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

Після розробки та затвердження техзавдання починається етап розробки дизайну сайту. І перше, що необхідно зробити - це створити модульну сітку сайту. Модульна сітка описує розташування елементів на сторінках сайту.
Модульна сітка будь-якої web-сторінки містить, як мінімум, два блоки: для основного тесту сайту і для меню. Якщо на сторінці потрібні додаткові елементи, наприклад, ще одне меню, «підвал» («footer») або «хедер» («header»), то модульна сітка розбивається ще на кілька блоків.
Розміри блоків модульної сітки підбираються індивідуально і можуть бути якими завгодно. Проте слід враховувати, що відповідно до вимог юзабіліті, поява горизонтальної смуги прокручування при перегляді сторінки неприпустимо - це негативно позначається на сприйнятті сайту відвідувачами. Тому в сукупності ширина блоків не повинна перевищувати максимальної ширини екранів представників цільової аудиторії сайту.

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

Якщо сайт розрахований для перегляду на екранах з різним дозволом, то web-дизайн, як правило, виконується «гумовим» або ж центрується по горизонталі.
Коли інформаційна модель майбутнього сайту готова, можна братися за художню частину web-дизайну. Зазвичай дизайн сайту виконується у вигляді шаблонів - певних наборів елементів і їх взаємозв'язків. Саме шаблони дозволяють відокремити розробку візуального дизайну сайту від змісту.
Розрізняють шаблон головної і шаблони типових сторінок сайту. Шаблон головної сторінки оформляється, як правило, більш «витіювато», а шаблони решти сторінок сайту лише підтримують основну ідею.
Розроблений в графічному редакторі шаблон верстається у html-файл. За допомогою тегів мови html і таблиць стилів css задаються всі необхідні параметри сторінки: розміщення елементів, колір і розміри шрифтів, колір фону і т.д.
Робота над шаблоном сайту вимагає обов'язкового тесту на крос-браузерності, тобто на сумісність з різними браузерами і їх версіями. Різні браузери можуть по-різному інтерпретувати код html, тому таке тестування необхідне, щоб уникнути можливого «розвалу» дизайну.

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

Матеріал взято з:http://webstudio2u.net/ua/design-web/342-webdesign-start.html