Сегодня:
Блог: "Основы сайтостроения и веб дизайна"
сайтостроение

Переход на: Главная / Макет сайта /

Этапы создания макета сайта. Часть 4. Работа над «шапкой» (хедером) сайта.

АвторАвтор: aklychin

Дата добавленияДата добавления: 10.06.2013

Число просмотровЧисло просмотров: 9089



Здравствуйте уважаемый читатель блога "Основы сайтостроения и web дизайна".


Продолжаем рассмотрение темы «Этапы создания макета сайта». А так же продолжаем создавать свой макет для будущего сайта. В предыдущих статьях мы определись с:


Размерами будущего макета сайта;

Основным фоном для макета сайта;

Разметкой макета сайта.


Сегодня мы начнем создание непосредственно макета и остановимся на создании «шапки» (хедера) сайта.


И так создав разметку макета сайта, вы определили размеры хедера сайта. Именно в пределах этих размеров и необходимо работать. Перед началом работ, советую вам познакомиться с моей статьей «Создание внешней структуры сайта. Часть 3. Создание модульной схемы сайта». В ней указываются принципы подбора размеров хедера. Так же подробно описывается список модулей, которые принято размещать непосредственно в хедере сайта.


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


Шаг №1. Это определение фона хедера. Как и основной фон для макета, фон для хедера может быть простым цветовым фоном, текстурным фоном, фоном из полногабаритного изображения, а так же комбинированным фоном. Подробней об этом читайте «Этапы создания макета сайта. Часть 2 Определение фона для макета сайта».


Работа над хедером сайта


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


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


Шаг №2. Это вставка в хедер отдельных графических элементов. Не забывайте, что хедер – это тот элемент сайта, который посетитель видит в первую очередь. Именно поэтому не ограничивайте визуальное наполнение хедера лишь фоном. Довольно эффективно на функциональность хедера влияет наличие в нем графических элементов, которые позволяют посетителю безошибочно определить тематику сайта.


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


Шаг №3. Это вставка в хедер основного элемента сайта. Как правило, для только разрабатываемого сайта, основным элементом хедера является его название, которое можно дополнить слоганом сайта. Текст при этом можно выделить эффектами тени и зеркального отражения, что придаст тексту объем и выделит его среди остальных объектов хедера.


Работа над хедером сайта


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


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


Шаг №4. Это размещение на хедере запланированных дополнительных модулей. Я не зря написал дополнительных. По своему функционалу – это могут быть основные модули сайта, но в структуре хедера они должны быть все, же дополнительными и не определять дизайн и привлекательность хедера сайта.

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


На этом на сегодня мы прервемся и продолжим рассмотрение темы «Работа над «шапкой» (хедером) сайта» уже в следующей статье.


Поделиться

Добавьте Ваш комментарий и оцените статью:

+ Добавлять комментарии и оценивать статью могут только зарегистрированные пользователи. Если Вы регистрировались, то просто авторизируйте свой аккаунт.


Комментарии к данной статье:


Подписаться на обновления блога

монетизация сайтаРеклама
заработок на сайтеПомощь

Понравился проект?

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

Z255632435111

R174106546724

Деньги пойдут на оплату серверов, зарплату авторам уроков и развитие ресурса.

В примечании к платежу укажите Ваш email или логин на нашем проекте.

Администрация.

Статистика блога:

Статей: 107

Комментариев: 8

Зарегистрировано: 12

Все права защищены сopyright © Блог - "Основы сайтостроения и веб дизайна" 2012 - 2017