Как сделать макет для сайта? С чего начать? Чем продолжить? Как оптимизировать работу по созданию макета так, чтобы получающиеся заготовки, можно было легко применить при работе над другими проектами? Этот пост начинает цикл статей, который будет посвящен ответам на эти вопросы. Мы сделаем универсальный шаблон для сайта-визитки. Разберем все основные этапы этой работы, а затем я покажу, как из одной заготовки (из одного шаблона), сделать макеты, оформленные совершенно в разных стилях. Цикл будет интересен прежде всего новичкам, тем кто все еще испытывает страх перед “чистым листом бумаги”.
Каждый сайт должен быть индивидуален, это мое искреннее мнение. Разумеется, мы не говорим о дорвеях, саттелитах и прочем поисковом спаме. Даже если посмотреть на сайты-визитки, которые все, по большому счету, состоят из одного и того же набора блоков, очевидно, что оформления сайта стоматологического кабинета, вряд ли подойдет для сайта конторки, регистрирующей индивидуальных предпринимателей. Однако, создание сайтов, это - прежде всего технология и нужно стремиться по возможности унифицировать основные этапы этого процесса. Во-первых, это позволит вам делать сайты быстрее, а во-вторых, повысит качество вашей работы.
Сразу оговорюсь, я не замахиваюсь далеко и не претендую на то чтобы рассмотреть вопрос создания макета для сайта со всех сторон. Мы совсем не будем говорить о такой вещи как юзабилити. О верстке будем говорить совсем немного. Не будем обсуждать проблему адекватности оформления к содержанию сайта. Я не буду здесь об этом писать не потому что это не важно, а потому что всему свое время и свое место. И еще скажу, я не считаю, что та технология, которая будет описана единственно правильная, это всего лишь один из подходов.
Мы сделаем шаблон для самого простого сайта, для сайта-визитки какой-нибудь придуманной маленькой фирмы, причем только шаблон главной странице. Давайте просто потренируемся, но отнесемся к этой тренировке ответственно, так как будто бы мы делаем большой, основательный сайт для серьезного и щедрого заказчика. Думаю, вступлений хвати– переходим к делу.
ПРОЕКТИРОВАНИЕ
Определяем цель и задачи
Так как у нас все по-настоящему, то этого этапа не миновать. Для какого бы сайта мы не делали макет, прежде всего необходимо определится с целью этого сайта. Надо ответить на вопросы: Зачем он нужен? Какие функции этот сайт должен выполнять? Наш пример учебный, мы знаем только то, что делаем сайт-визитку. Следовательно, сайт должен просто информировать посетителя о том, что есть такая-то фирма, что она занимается вот такой-то деятельностью, и вот ее адрес и реквизиты. Ни каталога товаров, ни прайс-листов, ни форм для заказов – максимально упростим себе задачу. У этого сайта только информационная функция. В реальности же определение цели сайта важный этап, цель не всегда лежит на поверхности и иногда случается, что понимание цели приходит после того, как макет уже практически готов. Это не приятно – приходится переделывать.
Но вспомним еще один момент. Наша задача создать не макет конкретного сайт, а универсальный шаблон, из которого можно будет сделать несколько макетов в разных стилях и под разные проекты. Макеты из шаблона должны получаться красивыми, удобными, современными, рассчитанные на верстку div[ами] – примем эти условия.
Список блоков
Теперь нам необходимо определить из каких блоков будет состоять шаблон.
Блок – это область экранного пространства шаблона, которая имеет свое смысловое содержание и отделена от других областей каким-либо оформительским приемом.
Все просто: логотип - это отдельный блок, меню навигации, основной текст страницы, контактный телефон - это тоже все отдельные блоки. Перед тем как открыть фотошоп у вас должен быть составлен список. Со списком вам будет проще работать, и вы будите острее ощущать пространство. Добавляя какой-либо очередной блок, вы не забудете о том, что надо ещё оставить место вот для этого, этого и вон для того.
Делаем список. Разделим страницу на три большие части: шапка, центр, подвал и при составлении списка, будем сразу вписывать блоки в соответствующие им места.
Получается вот такой список:
- ШАПКА
- 1) Логотип;
- 2) Лид (краткая фраза, указывающая на деятельность фирмы);
-
- 3) Контактный телефон;
- 4) Меню навигации по сайту (На главную, Карта сайта);
- 5) Меню навигации по страницам с информацией о фирме (О фирме, Новости, Партнеры, Контакты);
- 6) Анонс страницы с информацией о фирме с ссылкой “читать далее”;
- 7) Большая фотография или картинка, выполняющая основную оформительскую функцию;
- ЦЕНТР
- 8) Меню навигации по услугам или направлениям деятельности фирмы (Проектирование, Оформление, Утверждение, Реализация, Утилизация);
- 9) Текст описание услуги (основной текст страницы);
- ПОДВАЛ
- 10) Нижнее меню навигации (дублируют меню из пункта №5);
- 11) Юридический адрес фирмы;
- 12) E-mail администратора сайта;
- 13) Копирайт;
- 14) Ссылка на разработчика;
Вроде простой сайт-визитка, а на странице надо уложить 14-ть блоков, с реальными проектами бывает все гораздо сложнее, потому лучше сразу начать приучать себя составлять подобные списки.
Перед тем как сделать эскиз
Список составлен, теперь для наглядности следует набросать эскиз. Просто берем бумагу, карандаш и рисуем. Но есть одна вещь, которую следует сразу разъяснить и понять. Вы не можете нарисовать эскиз, а уж тем более макет просто так, “от балды”. В разработке сайта настанет этап верстки, и если вы сейчас не согласуете эскиз с шаблоном верстки, то создадите кучу проблем верстальщику. Может случиться так, что ваш макет просто невозможно будет заверстать, не внеся в него кучу изменений.
Я руководствуюсь принципом: Сначала определится с шаблоном верстки, а потом садиться за photoshop. (Под шаблоном верстки, следует понимать код – XHTML + CSS то, что на английском языке называется Layout.) Если вы сами верстаете макеты, то этот тезис: “cначала шаблон верстки, а потом дизайн” - для вас очевиден. Если вы только дизайнер, то поговорите с тем, кто обычно верстает ваши макеты. Поставьте ему пиво, он вам многое расскажет. Если вы не знаете, кто их там будет верстать – определитесь хотя бы с тем, какая эта будет верстка – резиновая или с фиксированной шириной.
К слову, этап верстки, это как раз то место, которое, по моему мнению, надо стараться максимально унифицировать. Во-первых, это возможно, во-вторых, это упрощает сразу три этапа: создание макета в photoshop[e], собственно верстку макета, и интеграцию уже заверстоного макета в движок. Если вы от начала и до конца делаете сайты сами, вам необходимо подобрать коллекцию шаблонов верстки и пользоваться ей - это сильно облегчит работу.
Откуда их взять?
Первое, они накапливаются у вас со временем.
Наконец вы можете работать в рамках какого-либо CSS-фреймворка (CSS-framework) или грид системы (Grid System).
Посторайтесь прочитайте эти статьи – так как наш шаблон будет основан на
960 Grid System. Верстка, соответственно будет с фиксированной шириной в 960 px.
Эскиз
Эскиз нужен только для того, чтобы обозначить взаимное расположение блоков на странице. Проще всего его набросать в каком-нибудь векторном редакторе, а можно нарисовать от руки в photoshop[е] или на бумаге. Я вот что накалякал:
На этом пока все. В следующей статье сделаем сам шаблон, а затем сделаем из него уже рабочий макет для сайта-визитки какой-нибудь придуманной фирмы. Постараюсь не затягивать.
