Требования к PSD макетам

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

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

Например: верстальщик забыл указать отступы у картинок в контенте, а клиент, когда ему сдали работу, через полгода решил добавить на сайт несколько изображений и видит, что они «прилипают к тексту», а где-то даже залазят на него.

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

Требования к макету:

1. Макет предоставляется в формате «PSD» и «JPG» (нужно для сравнения, так как возможно наш «PHOTOSHOP» или «GIMP» откроет макет по-другому).

2. Размер макета 1920 на 1080 пикселей. Минимальная ширина макета - 1000 пикселей. Дизайн должен учитывать возможность комфортного просмотра сайта при разрешении от 1024 на 768 пикселей с возможностью доступа пользователя ко всем элементам навигации.

3. На макете должно быть ясно показано, как будет выглядеть сайт при разрешении 1024 на 768 пикселей, либо прикрепить еще один файл с размером 1024 на 768 пикселей, особенно это касается «резиновых макетов».

4. Макет должен просматриваться без горизонтальной прокрутки при разрешении 1024 на 768 пикселей, то есть ширину сайта делать 960 на 1000 пикселей.

5. Для обеспечения корректного масштабирования блоков сайта на мониторах с разным разрешением, не желательно использование крупных фоновых изображений, суммарная ширина которых будет превышать 1000 пикселей. Разумеется, если фоновое изображение можно без видимых искажений размножить (repeat-x, repeat-y), то это ограничение не действует.

6. Если не был предоставлен текст и названия элементов меню, тогда необходимо вставить стандартные названия в меню «Главная», «Наши услуги», «Контакты», «Карта проезда», «Каталог продукции», «Форум» и текст который выложен. В записке к макету может, размещена любая полезная информация, так сказать на Ваше усмотрение, используя при этом персональный контент сайта. Главное чтобы в нем было несколько абзацев с красной строкой, между абзацами интервал, между строк свой интервал, маркированный и нумерованный списки, таблица, картинка в тексте с полями (отступами), заголовки от 1 до 6 уровня (H1-H6).

7. Рекомендуется использовать стандартные шрифты, такие как: Verdana, Arial, Times new Roman, Georgia, Trebuchet MS, Sans, Comic Sans, Courier New, Garamond, Helvetica. Если Вы желаете использовать любой другой нестандартный шрифт, обязательно укажите в записке к макету. Но мы рекомендуем в редких случаях использовать нестандартные шрифты, например в логотипе, лозунге компании, иногда в адресном блоке, на баннере, то есть в тех местах, где изменения будут проходить очень редко или вообще не происходить. А в основном тексте, названии страницы, в меню - настоятельно рекомендуется использовать стандартные шрифты. При использовании нестандартных шрифтов - приложить их к макету PSD. Кроме этого все нестандартные шрифты должны быть бесплатными, а бесплатные шрифты можно скачать у поисковика «Google». Также необходимо обеспечить возможность корректного отображения интерактивного контента сайта любым из системных шрифтов внутри указанного для этого контента семейства (serif, sans-serif, monospace), и все это, конечно же, без ущерба самого дизайна.

8. В макете обязательно показать, как будут выглядеть элементы меню при наведении мышкой (для этого добавляется «ладонь»).

9. Все слои в PSD рассортировать по общепринятым группам (папкам) - фон сайта, шапка, подвал, контент (можно центральный блок + правый блок, левый блок), верхнее меню, главное меню, левое меню, правое меню для удобства поиска верстальщику.

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

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

12. Корректирующие слои также не желательны, так как не имеют самостоятельного значения. Их следует объединять с основными слоями.

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

14. Именование слоев должно быть логичным и отражать суть содержащегося на слое изображения. Слои желательно называть английскими словами или транслитерацией русских слов латинскими символами.

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

16. При разработке макетов для страниц с группой элементов (список товаров в каталоге, список новостей, список отзывов, список фотографий, требуется данные элементы выполнить разными группами.

17. Большие изображения можно использовать на главной странице. Хорошим последним решением и примером может служить корпоративный сайт по адресу www.btwin.com/en/home - но помните, что эта концепция не всегда удачна и правильна, тем более что подобное решение всегда обходится дороже. Кроме этого не рекомендовано использовать большие картинки для фона сайта, размер которого более 80% от общей площади. Для фона лучше использоваться повторяющиеся элементы, смешанный переходящий фон в спектре и конечно комбинированные элементы дизайна фона и блока вывода контента.

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

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

20. К макету прилагается пояснительная записка, в которой содержится следующая информация:
- тип верстки сайта (резиновый, фиксированный, смешанный) с указанием абсолютных и относительных размеров функциональных блоков сайта;
- желательность или нежелательность скроллинга (полосы прокрутки) для случая, если объем контента не будет умещаться в отведенную ему область;
- поведение динамических элементов и элементов управления контентом с отсылкой на соответствующие слои макета. В том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
- любая иная информация, не очевидная из самого макета.

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


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