Как нарисовать макет для сайта

Как нарисовать макет для сайта
Как нарисовать макет для сайта

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

Макет — это разметка документа, характеризующая его структуру, т.е. скелет дизайна сайта. Ещё проще говоря это то как будет выглядит ваш сайт.

Типы макетов:

  • Резиновый — ширина такого макета зависит от ширины окна браузера. Есть несколько способов сделать его: все структурные элементы задать в процентах или задать боковым колонкам фиксированные ширины, а центральная часть будет разъезжаться. Такой макет позволяет использовать больше пространства. Использовать его можно для создания сайтов с большим количеством специфической информации, требующей много места, для размещения больших таблиц с данными, для страниц с двумя боковыми колонками и так далее. Для мониторов с большим разрешением можно установить максимально возможную ширину, чтобы «сильно не разъезжалось», если вы используете резиновый макет для небольшого контента.
  • Адаптивный — такие макеты более универсальны из-за своей адаптации под любое разрешение монитора, в том числе и мобильных устройств. Адаптивным может быть любой из рассматриваемых макетов.
  • Фиксированный — задается определенная ширина обычно 960-1000 пикселей (пример). Ширина макета ни от чего не зависит, ничего не разъезжается. На всех разрешениях выглядит одинаково, прост в верстке, соблюдается правильная типографика. К недостаткам можно отнести то, что на мониторах с широким разрешением сайт будет визуально выглядеть узким, в распространенном варианте верстки не подгоняется под мобильные устройства, картинки и таблицы ограниченных размеров. Для адаптации такого макета под все разрешения стоит опираться на максимальную ширину абсолютно всех элементов, определенные скрипты и плагины. Из-за этого очень сложно верстать такой макет под IE6 и IE7.
  • Эластичный — при таком макете дизайн уменьшается или увеличивается пропорционально. Из-за того, что все величины задаются не px (пикселях), а в em (относительная единица), дизайн увеличивается или уменьшается в зависимости от разрешения так, как если бы вы зажали Ctrl и покрутили колесико мышки.

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

Разрешения мониторов:

По данным GoStats мы имеем следующее положение дел:

 

Статистика мониторов

Статистика мониторов

1024×768 — 6,4%
800×600 — 1,7%
Таким образом, большинство имеет разрешение от 1024 и выше, поэтому задумайтесь, стоит ли для 1,7% людей с разрешением 800 жертвовать нужным пространством в 200 пикселей. Однако, не забывайте про возрастающую потребность адаптивного дизайна.
Рассмотрим некоторые варианты макетов:
Виды макетов

Виды макетов

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

Схема макета

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

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.