Основы web-дизайна
Как театр начинается с вешалки, так и web-дизайн начинается с определения целей и задач будущего сайта. Зачем нужен сайт На какую аудиторию рассчитан Каких результатов позволит добиться
Ответы на эти и подобные вопросы и должны лечь в основу web-дизайна проекта. Под термином «web-дизайн» принято понимать совокупность работ по разработке логической структуры и художественного оформления веб-страниц. Задачей web-дизайна является обеспечение удобной подачи информации пользователю web-сайта или web-приложения, удовлетворение эстетического вкуса аудитории сайта.
Современный web-дизайн начинается с разделения оформления сайта и содержания. Благодаря такому подходу вносить изменения в содержание сайта, не затрагивая его дизайн, или же менять дизайн, не изменяя содержание, стало намного легче. Во многом этому способствуют современные системы управления контентом - CMS.
Основы web-дизайна сайта закладываются на этапе разработки технического задания - документа, описывающего требования относительно визуального представления и структуры сайта. В техническом задании также зачастую описываются пожелания относительно программной реализации сайта.
После разработки и утверждения техзадания начинается этап разработки дизайна сайта. И первое, что необходимо сделать - это создать модульную сетку сайта. Модульная сетка описывает расположение элементов на страницах сайта.
Модульная сетка любой web-страницы содержит, как минимум, два блока для основного теста сайта и для меню. Если на странице требуются дополнительные элементы, например, еще одно меню, «подвал» («footer») или «хедер» («header»), то модульная сетка разбивается еще на несколько блоков.
Размеры блоков модульной сетки подбираются индивидуально и могут быть какими угодно. Однако следует учитывать, что согласно требованиям юзабилити, появление горизонтальной полосы прокрутки при просмотре страницы недопустимо - это негативно сказывается на восприятии сайта посетителями. Поэтому в совокупности ширина блоков не должна превышать максимальной ширины экранов представителей целевой аудитории сайта.
В блоке «хедер» принято указывать название сайта, которое может быть выбрано в соответствии с названием компании или именем автора сайта, а также при необходимости логотип сайта. Основной блок меню в европейских сайтах традиционно расположен слева, согласно направлению письменности (слева направо). Также основное меню может быть расположено сверху, под «хедером».
Если сайт рассчитан для просмотра на экранах с различным разрешением, то web-дизайн, как правило, выполняется «резиновым» или же центрируется по горизонтали.
Когда информационная модель будущего сайта готова, можно приступать художественную часть web-дизайна. Обычно дизайн сайта выполняется в виде шаблонов - определенных наборов элементов и их взаимосвязей. Именно шаблоны позволяют отделить разработку визуального дизайна сайта от содержания.
Различают шаблон главной и шаблоны типовых страниц сайта. Шаблон главной страницы оформляется, как правило, более «витиевато», а шаблоны остальных страниц сайта только поддерживают основную идею.
Разработанный в графическом редакторе шаблон верстается в html-файл. С помощью тегов языка html и таблиц стилей css задаются все необходимые параметры страницы размещение элементов, цвет и размер шрифта, цвет фона и т.д.
Работа над шаблоном сайта требует обязательного теста на кросс-браузерности, т.е. на совместимость с различными браузерами и их версиями. Разные браузеры могут по-разному интерпретировать код html, поэтому такое тестирование необходимо, чтобы избежать возможного «развала» дизайна.
Протестирован и полностью готов к работе дизайн сайта «прикрепляется» к функциональной «канве», созданной веб-программистами. При использовании CMS, разработанные шаблоны «закачиваются» в соответствующую папку на сервере - и все, сайт готов для наполнения.