Практические советы

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

Фоновое изображение

Желательно, чтобы используемые фоновые изображения соответствовали тематике сайта. Так, например, для сайта, имеющего отношение к
биологии, природе или лирике, в качестве фона можно использовать такую картинку:

а для сайта, посвященного детской тематике, такую:

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

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

Далее я попробую показать процесс подбора других элементов дизайна сайта на примере первой фоновой картинки с птицами и цветами.

Выбор основных цветов

Для оформления сайта нам понадобятся 2-3 основных цвета, гармонирующих с выбранной картинкой, которые мы будем использовать при оформлении фона страниц, названия сайта, оформления панелей навигации, заголовков сообщений и др. Их можно попытаться подобрать вручную, используя предлагаемую в меню настроек дизайна цветовую палитру. Но в таком случае подбор этот может оказаться лишь приблизительным. Лучше снять эти цвета с образца точно с помощью инструмента "пипетка", который имеется в наборе известного графического редактора Adobe Photoshop.

Если у вас нет под рукой этой программы, либо вы не умеете ей пользоваться, не огорчайтесь! Есть отличная замена этому редактору - бесплатная облачная программа, работающая в режиме online (т.е. вам не придется ее скачивать и устанавливать, а потом следить за обновлением), содержащая практически все необходимые для работы с растровой графикой инструменты.

Она называется Pixlr Editor и запустить ее можно по ссылке http://pixlr.com/editor/. Интерфейс программы на русском языке, поэтому, обладая первичными знаниями об обработке изображений, освоить ее основные возможности не составит для вас большого труда.

Итак, я открываю в этом редакторе свою фоновую картинку и с помощью пипетки поочередно снимаю с картинки 3 основных цвета, фиксируя себе в текстовом документе их шестнадцатеричные коды. Сначала кликаем пипеткой по цвету,

а затем на образце цвета в нижней части боковой панели, и копируем код цвета:


На последней картинке показаны выбранные мной цвета и их коды (дополненные слева символом #). Теперь я могу задать точный цвет фона или текста при оформлении сайта. Например, я использую темно-серый цвет в названии сайта. Для этого я перехожу в раздел Еще - Управление сайтом - Темы, цвета и шрифты - Заголовок - Цвет и вставляю код темно-серого цвета (первый символ - #) в нижнюю строку палитры цветов. После нажатия клавиши Enter цвет заголовка меняется на заданный:

Таким образом, можно оформить сайт, используя выбранные цвета для разных элементов дизайна.


Если вы начинаете подбирать элементы дизайна с "чистого листа", то, возможно вам пригодится программа - своеобразный цветовой калькулятор http://colorschemedesigner.com/, помогающий подобрать цвета в одной гамме, дополняющие цвета (3 и более), показывающий коды цветов и даже пример оформления страниц сайта.

Выбор шрифтов

Фоновая картинка может быть также отправной точкой при выборе шрифтов. Как вы думаете, какой шрифт текста сайта для данной картинки наиболее уместен?

Подбор картинок

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

Картинки можно найти на многих ресурсах Сети, но не забывайте о необходимости их оптимизации перед вставкой на сайт (кадрирования, изменения размера) и соблюдения авторских прав.