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

Переход на: Главная / Веб дизайн /

Каркас сайта. Схемы построения и реализация.

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

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

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


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

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

Классические схемы построения каркаса сайта.

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

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

  • 1. Верхняя часть страницы сайта (хедер, шапка и т.д.);
  • 2. Основная часть, контент сайта;
  • 3. Нижняя часть (футер, подвал и т.д).
Как сделать каркас сайта?

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

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

Построение верхней части каркаса сайта.

Хедер сайта играет очень существенную роль визуального восприятия, поэтому размер верхней части напрямую связан с тематикой. Так высота верхней части информационных сайтов составляет 100 – 200рх, сайтов фирм, компаний в пределах 200 - 300рх, рекламных и развлекательных проектов превышает 300рх иногда очень серьезно. Основными модулями верхней части являются:

  • • Логотип;
  • • Название;
  • • Слоган;
  • • Контактная информация;
  • • Форма авторизации;
  • • Форма поиска по сайту.

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

Построение основной части каркаса сайта.

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

примеры каркаса для сайта

Модулями, которые включают разработчики в основную часть каркаса, являются:

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

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

Построение нижней части каркаса сайта.

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

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

Каркас сайта. Схемы построения и реализация.

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

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

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

Как сделать каркас для сайта?

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

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

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

каркас сайта

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

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

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

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

Поделиться

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

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


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


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

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

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

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

Z255632435111

R174106546724

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

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

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

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

Статей: 107

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

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

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