Как стать автором
Обновить

5 правил подготовки макетов веб-страниц

Время на прочтение 3 мин
Количество просмотров 7.1K
Приходится ли Вам работать с дизайном, который присылает сам клиент (дизайн выполняется не вашей студией)? Всегда ли получается реализовать тот полёт фантазии, который изображен на PSD? Возможно даже, Вам знакома ситуация, когда, чисто технически, точно сверстать присланный материал не получалось. Припомнили?

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

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

18.11.07.Раньше статья называлась «5 правил хорошего дизайна для web», однако некоторым это название показалось подменой понятий. В этой статье речь идёт не о эстетических аспектах дизайна веб-сайтов, а о технических правилах подготовки дизайна для вёрстки. Спасибо всем, кто поддержал меня и тем, кто понял, что имелось в виду в первоначальном названии.

Правило №1: Учитывать динамическое изменение информации в блоке.



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

Правило №2: Текст должен быть в отдельном слое (не растеризованном).



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

Правило №3: Не использовать сглаживание и размытие на тексте.



К сожалению, не один из браузеров не поддерживает данное свойство. Поэтому, чтобы увидеть на своём сайте действительно то, что нарисовано, не используйте сглаживания текста в Photoshop (значение должно быть выставлено как 'none', т.е. без сглаживания — см. рисунок). Правило не распространяется на элементы дизайна, предпологаемые быть картинками: логотипы, баннеры и т.д.

Правило №4: Использовать нестандартный шрифт только для картинок.



Используя нестандартный шрифт для текста (см. рисунок), вы должны понимать, что он может быть не установлен у посетителя. В таком случае текст будет выводиться стандартным шрифтом (который определяется в настройках браузера). У вас же всё будет отображаться, как вы и планировали (у вас же этот шрифт установлен). Используйте нестандартный шрифт для элементов, которые на сайте будут картинками, в других случаях используйте стандартные шрифты, входящие в поставку ОС Windows.
Существует возможность загрузить шрифт пользователю на компьютер (правда, это может быть заблокированно) и технология sIFR(за ссылку спасибо Льву Эйдинову), однако стабильным оба этих способа назвать я немогу. От этого правило №4 считаю по прежнему актуальным.

Правило №5: Все элементы дизайна должны быть в независимых слоях.



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

Источник: Блог о web-разработке и способах её улучшения
Теги:
Хабы:
+6
Комментарии 96
Комментарии Комментарии 96

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн