`

polymer:ru[251317@o@1604211-b-c]

Профессия - "ДИЗАЙНЕР"

Рекомендации по вёрстке макета веб-сайта (в Photoshop)

Веб-мастер не должен быть ограничен в выборе графической программы для разработки и верстки макета веб-сайта. Это может быть Adobe Photoshop, Corel Photo-Paint, Ulead Photoimpact или любая другая программа или даже online-сервис по обработке изображений в сети интернет. Однако, для групповой работы в команде дизайнеров, первостепенным является вопрос  совместимости графических форматов приложений и дальнейшая работа с макетом веб-сайта в плане масштабирования графических объектов, соответствия цветового профиля, экспорта и вёрстки для различных устройств.

Понятно, что для мобильных устройств, такие как iPhone, SmartPhone, говорить о макете не приходится. Здесь мы говорим о структуре  - в общем, и о стиле веб-сайта  -  в частности.

Обычно обсуждается вид веб-сайта на стандартных ЛСД- или ЭЛТ-мониторах стандартного или HD-разрешения. При этом подразумевается, что размер самого окна браузера может меняться, в противном случае мы будем иметь «проектор» - обычную веб-презентацию, пускай даже интерактивную.

Итак, минимальная рекомендуемая ширина макета — 900 px, в идеальном случае рекомендуемая высота – 600px. Дизайн должен учитывать возможность комфортного просмотра сайта на большинстве мониторов с возможностью доступа пользователя ко всем элементам навигации, если специально не оговорено другое. В случае 14” мониторов пропорции 900х600px оптимальны, хотя существуют ещё такие устройства, как «нетбуки» и различные терминалы, для которых особо не «подизайничаешь».

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

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

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

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

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

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

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

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

Направляющие (guides) необходимо использовать только в тех случаях, если требуется:

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

• для обозначения полей (margins) и отступов (paddings ) элементов оформления и/или контента сайта;

Следует отметить, что при масштабируемой HTML-вёрстке любой макет будет представлять собой только один из множества вариантов вида веб-сайта. В этом случае использование направляющих вообще теряет смысл или даже мешает увидеть конечный результат. Вместо выровненных раз и навсегда объектов следует задуматься о взаимном расположении частей макета. Не стоит «измерять алгеброй гармонию». Что вы знаете, к примеру, о золотом сечении, в котором «отношение большей части к меньшей в этой пропорции выражается квадратичной иррациональностью»:

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

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

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

К макету прилагается пояснительная записка, в которой содержится следующая информация:

• тип верстки сайта (масштабируемый, фиксированный, смешанный) с указанием абсолютных и/или относительных размеров функциональных блоков сайта;

• желательность или нежелательность скроллинга (полосы прокрутки) для случая если объем контента не будет умещаться в отведенную ему область (т. е. скрыть не уместившийся контент либо добавить скроллинг);

• поведение динамических элементов и элементов управления контентом с отсылкой на соответствующие слои макета. В том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);

• любая иная информация, не очевидная из самого макета.

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

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

æèñ

Максим Савенков

Веб-программист

KZ, Алматы

Тел: +7 (777) 138-11-13

E-mail: iqart_terminal@mail.ru

Страница контактов:

Веб-мастер, контент-менеджер, опыт работы 15 лет, создание веб-сайтов с системой управления.

 
Регистрация на сайте
 
Ваше имя:
Ваш адрес электронной почты:
Создайте пароль:
Подтвердите пароль:
Введите в поле цифры с картинки:
 
 
 
 
 
Изменение регистрационных данных
 
Ваше имя:
Ваш адрес электронной почты:
Создайте пароль:
Подтвердите пароль:
Введите в поле цифры с картинки:
 
 
 
Ваш заказ:
 
 
Заказ на сумму: 0 тенге.
Доставка:
Фамилия, Имя, Отчество
Контактный телефон:
Адрес доставки:
Дополнительная информация:
сброс набранных полей
Ваш адрес электронной почты:
Введите в поле цифры с картинки:
 
Скидка: 0 %.
Итого к оплате: 0 тенге.
 
 
 
[x]

Действия с объектами

все

Блоки на странице

[ x ]
www.000webhost.com