Создание дизайна страницы

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

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

Подбор изображения

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

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

Я выбрал для рассказа-примера, который, если Вы помните, называется "Последний лист", вот такую вот фотографию:

Исходная фотография для дизайна

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

Выбор цветовой гаммы

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

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

Палитра оттенков для дизайна

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

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

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

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

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

К оформительским шрифтам относятся различные гарнитуры, которые пытаются имитировать рукописный шрифт или создаются для определенной стилизации под старинные шрифты (скажем, характерный рисунок шрифта под Дикий Запад или древнерусская Ижица). Никогда не набирайте подобными шрифтами большие фрагменты текста - их невозможно будет читать.

Гарнитур шрифтов существует множество, они отличаются рисунком букв, насыщыенностью, презназначением для тех или иных задач. Но у нас при создании web-страничек существует большое ограничение по тем шрифтам, которые можно использовать на сайтах. В первую очередь это связано с тем, что на компьютерах пользователей, которые будут просматривать нашу страничку, с большой долей вероятности будут только те шрифты, которые установлены по умолчанию. А это далеко не такой уж и большой список. Посмотреть список доступных для непосредственного использования шрифтов можно в кратком справочнике по CSS-параметрам.

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

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

В процессе подбора шрифтов для своего дизайна запомните несколько правил, которые сделают Вашу работу более профессиональной:

Определение функциональных областей

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

На них и остановимся при создании дизайна страницы.

Выбор композиции страницы

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

Варианты композиции страницы

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

Создание макета дизайна

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

Чаще всего в качестве макетирующих программ используются графические растровые и векторные редакторы. В качестве растрового наиболее часто используется Adobe PhotoShop, а в качестве векторных - такие программы, как Corel Draw, Xara, Adobe Illustrator. Во многом это дело привычки и конкретного знания той или иной программы. Я при создании графических эскизов использую Adobe PhotoShop.

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

После этого создайте отдельные слои с той информацией, которая Вам уже известна и которую можно взять с ранее сверстанной странички XHTML+CSS2:

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

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

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

У меня получился вот такой вот дизайн странички. Его я и буду использовать в дальнейшем для объяснения принципов стилевой верстки композиции. На страничке примеров Вы можете скачать архив с дизайном, который содержит исходную фотографию, созданный PSD-файл (формат программы PhotoShop), а также полноразмерные эскизы дизайна и пример композиции страницы.

Окончательный макет дизайна страницы

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

Примеры других дизайн-макетов

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

Полезные ссылки

Смотри также