Блог свободен от NOFOLLOW!

16 основных требований к дизайн-макету сайта

Дата: 06-10-2009 | Автор: Yaroslav.CH | Рубрика: Дизайн, Техническое задание
Метки: , ,

38

16 основных требований к дизайн-макету сайта

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

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

Приведу наиболее яркий диалог из собственной практики:

Заказчик: У нас есть макет, мы на его основе хотим сделать сайт.

Я: Ок, давайте посмотрим на макет.

...

Я: Простите, но презентация в PowePoint никак не может быть макетом сайта... Вы уверены? Возможно, это только блок-схема?

Заказчик: Нет, это макет сайта — нам знакомый дизайнер так нарисовал и сказал, что проблем не возникнет!  Он хороший специалист, нам его [...] рекомендовали!

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

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

1.Используйте правильные форматы файлов

Макет представляется только в одном из 2-х форматов — PSD (Photoshop Document)  или TIFF (Tagged Image File Format).

PDF, AI, EPS, BMP, QXD, QXT и прочие, не говоря уже о расширениях файлов пакета программ Microsoft Office — не допускаются.

Обратите внимание — мы говорим именно о макете, миниатюры и превью могут предоставляться в файлах сжатого формата, например JPG.

2. Новый элемент — новый слой

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

3. Размер макета для фиксированного по ширине шаблона

Если планируется фиксированный по ширине шаблон — ширина макета обязательно должна учитывать отступы справа-слева от края экрана. Кроме того, отдельно указывается цвет фона «подложки».

Отступы от края браузера

4. Размер макета для «резинового» шаблона

Если шаблон «резиновый» — в шапке и подвале страницы не менее 20-50 пикселей с правой стороны должны быть отрисованы так, чтобы их без проблем можно было дублировать.

Дублирующийся фон

5. Учитывайте рамки и отступы браузера

Если шаблон рисуется под определенное разрешение, необходимо учитывать, что размер макета создается в соответствии с разрешением окна браузера, а не монитора. Например, при разрешении монитора 1024, размер макета составляет 1002 пикселя.

6. Правильно рисуйте фон

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

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

7. Не используйте фоновые фотографии

Использование в качестве фона «тяжелых» изображений (например, полноразмерных фотографий) — не допускается.

8. Используйте направляющие

Все выравнивания слоев должны делаться по направляющим (rulers), которые не удаляются из макета.

Направляющие (rulers)

9. Используйте стандартные шрифты

Для текстового содержимого должны использоваться стандартные шрифты. В случае использования нестандартного шрифта, он должен прилагаться к макету и в обязательном порядке должен быть указан шрифт-заменитель из стандартного набора.

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

Шрифты

10. Используйте текст по назначению

Любые изменения текста должны проводиться в рамках стандартных действий — уменьшение-увеличение размера, междустрочные интервалы, кернинг и т.д. Выгибание текста «аркой», «рыбьим глазом» и прочие видоизменения в рамках работы с текстом — не допускаются, это прерогатива изображений.

11.Осторожно обращайтесь с формами

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

12. Готовьте сборку дизайна

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

13. Оформляйте внешний вид меню

Выпадающие-выезжающие-разворачивающиеся меню должны быть отображены в двух видах:

  • собранный;
  • разложенный.

14. Оформляйте пункты меню

Пункты меню должны быть отображены в 2 видах:

  • пассивный (курсор не наведен)
  • активный (курсор наведен).

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

15. Оформляйте ссылки

Оформление ссылок должно быть указано в 3 статусах: обычная ссылка (link), ссылка при наведении курсора (hover link), посещенная ссылка (visited link).

16. Оформляйте навигационные цепочки

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

А Вы оставили комментарий? Ваше мнение очень важно!

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