Основы web-дизайна. С чего начинается web-дизайн?

Как театр начинается с вешалки, так и web-дизайн начинается с определения целей и задач будущего сайта. Зачем нужен сайт? На какую аудиторию рассчитан? Каких результатов позволит добиться?





Ответы на эти и подобные вопросы и должны лечь в формирование основы web-дизайна проекта. Под термином «web-дизайн» принято понимать совокупность работ по разработке логической структуры и художественного оформления веб-страниц. Задачей web-дизайна является обеспечение удобной подачи информации пользователю сайта или web-приложения, удовлетворение эстетического вкуса аудитории.

Современный web-дизайн начинается с разделения оформления и содержания. Благодаря таком подходу вносить изменения в содержание сайта, не затрагивая его дизайн, или же изменять дизайн, не изменяя содержание, стало намного легче. Во многом этому способствуют современные системы управления контентом – CMS.

Основы web-дизайна закладываются на этапе разработки технического задания – документа, описывающего требования относительно визуального представления и структуры сайта. В техническом задании также зачастую описываются пожелания касательно программной реализации сайта.

После разработки и утверждения техзадания начинается этап разработки дизайна. И первое, что необходимо сделать – это создать модульную сетку. Модульная сетка описывает расположение элементов на страницах сайта.

Модульная сетка любой web-страницы содержит, как минимум, два блока: для основного теста сайта и для меню. Если на странице нужны дополнительные элементы, например, еще одно меню, «подвал» («footer») или «хедер» («header»), то модульная сетка разбивается еще на несколько блоков.

Размеры блоков модульной сетки подбираются индивидуально и могут быть какими угодно. Однако следует учитывать, что согласно требованиям юзабилити, появление горизонтальной полосы прокрутки при просмотре страницы недопустимо – это негативно сказывается на восприятии сайта посетителями. Поэтому в совокупности ширина блоков не должна превышать максимальной ширины экранов представителей целевой аудитории сайта.

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

Если сайт рассчитан для просмотра на экранах с разным разрешением, то web-дизайн, как правило, выполняется «резиновым» или же центрируется по горизонтали.

Когда информационная модель будущего сайта готова, можно приниматься за художественную часть web-дизайна. Обычно web-дизайн выполняется в виде шаблонов – определенных наборов элементов и их взаимосвязей. Именно шаблоны позволяют отделить разработку визуального дизайна сайта от содержания.

Различают шаблон главной и шаблоны типовых страниц сайта. Шаблон главной страницы оформляется, как правило, более «затейливо», а шаблоны остальных страниц сайта лишь поддерживают основную идею.

Разработанный в графическом редакторе шаблон верстается в html-файл. При помощи тэгов языка html и таблиц стилей css задаются все необходимые параметры страницы: размещение элементов, цвет и размеры шрифтов, цвет фона и т.д.

Работа над шаблоном требует обязательного теста на кросс-браузерность, т.е. на совместимость с различными браузерами и их версиями. Разные браузеры могут по-разному интерпретировать код html, поэтому такое тестирование необходимо, чтобы избежать возможного «развала» дизайна.

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






Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма




Забавное видео

Этот малыш еще ходит в садик, но играет в баскетбол лучше многих взрослых!