Изучение основ веб-дизайна

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

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

Современный дизайн различает оформление самого сайта и оформление его содержания. Так, к примеру, можно внести изменения в содержание будущего сайта, при этом, не затрагивая дизайн, либо поменять дизайн, не меняя содержание. Система управления контентом (CMS) во многом способствует этому.

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

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

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

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

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

Шаблон, сделанный в графическом редакторе, затем верстается в html-файл. С помощью тегов и таблиц стилей css нужно задать параметры страницы, размер и цвет шрифта, размещение элементов, фон и т.д.

Обязателен также и тест на кросс-браузерность (на совместимость с различными браузерами), поскольку каждый из них по-своему интерпретирует код html, а значит, существует возможность «развала» дизайна.

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