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

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

Бизнес блог Хабиба Омарова - Как нарисовать макет для сайта

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

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

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

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

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

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

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

 

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

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

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

Виды макетов

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

Схема макета

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

Comment
Name
Email

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