Дорога в совершенство

Отрыл в просторах интернета.

1) Для статичных сайтов (относится и к минимальному разрешению для резины): если вы хотите оптимизировать дизайн для разрешения 1024 на ххх пикселов, то следует делать макет шириной 980 пикселов; если хотите оптимизировать для разрешения 1280 на ххх пикселов, то следует делать макет шириной 1200 пикселов и т.п.!!!(рекомендуется отнимать 50px от ширины выбранного расширения экрана);

2) Если дизайн фиксированный – нарисовать в отдельном файле (можно не PSD) внешний вид страницы с фоном на мониторе с бОльшим разрешением. Если будет <клонироваться> изображение – учесть совпадение(если необходимо) текстуры слева и справа от фиксированного блока сайта;

3) Для "резиновых" сайтов: необходимо ответственно подходить к выбору фона страницы. Если в нём нет горизонтальных участков хотя бы в несколько пикселей, которые можно повторить по горизонтали, то резина из него не получится. Например, нельзя использовать диагональные элементы (диагональный градиент и т.п.). Вышесказанное относится к любым "тянущимся" элементам. Таким образом, если используется «резиновый» дизайн – предусмотреть элемент, который должен «клонироваться» при увеличении ширины страницы;

4) При сипользовании вертикального градиента для фона сайта следует учесть, что изменять размеры фоновой картинки невозможно, то есть, чтобы переход от верха до низа был плавным, придется установить минимальную высоту сайта в размер вертикального градиента. Совет: либо градиент делать небольшим по высоте, либо сразу принять во внимание, как будет выглядеть сайт при большой минимальной высоте (если градиент по высоте большой) и малом количестве контента;

5) Отдельные страницы сайта выкладывать в отдельных файлах;

6) Группировать наборы элементов и обязательно исходя из их семантики (н-р: все элементы шапки должны входить в блок "шапка" и т.д.);

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

8) Графические изображения не стоит раскладывать по слоям. Во-первых, верстальщик их может неправильно склеить, а во-вторых, это уменьшает объём макета, что особенно актуально для макетов большой площади;

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

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

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

12) Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13;

13) Не применять сглаживание шрифтов к текстовым элементам страницы для элементов, размер шрифта которых менее 18 пикселей;

14) Так же текстовые элементы должны быть написаны стандартными шрифтами. Полный список допустимых шрифтов для текстовых элементов смотри здесь - http://web-tehnolog.ru/2010/04/13/web-safe-fonts/ ;

15) К текстовым элементам страницы не должно применяться масштабирование (вытягиевание/сжатие), как по горизонтали, так и по вертикали;

16) Если же при создании макета были употреблены рукописные, готические и другие экзотические шрифты, тогда эти шрифты должны пересылаться верстальщику вместе с файлом самого psd-макета и, при необходимости, пояснительной запиской;

17) Для пунктов меню необходимо показать, как выглядят пункты меню обычные, при наведении и в активном разделе;

18) Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы);

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

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

Вам это будет интересно!

Последние новости