Данная статья содержит некоторые советы веб-дизайнерам. Именно веб-дизайнерам, а не просто дизайнерам. Сам я не дизайнер, поэтому учить, как создавать дизайн я не собираюсь. Цель этой статьи — обозначить возможности вёрстки для веб.
Подумайте, как ваш дизайн будет смотреться и вести себя, если размер монитора больше или меньше, чем размер макета.
Кстати, размер экрана — не одно и то же, что и размер окна браузера. При использовании разных браузеров дополнительное место занимается различными элементами интерфейса, своими для каждого браузера. К тому же, пользователь может и не разворачивать браузер на весь экран.
Да, упомяну на всякий случай: картинки с изменением размеров окна браузера не увеличиваются и не уменьшаются.
Веб — штука динамичесская, поэтому высота и иногда ширина блока с информацией, число пунктов меню и т.д. меняются. К примеру, если нарисовать круглую менюшку, добавить несколько пунктов впоследствии в неё будет невозможно.
Всё, что в макете написано нестандартным шрифтом в итоге отверстается картинкой.
Бывает, что заказчик хочет изменить некую надпись. Например, с "Статьи" на "Обзоры". При этом оказывается, что надпись сделана нестандартым шрифтом, а взять его негде.
Стандартные шрифты Windows (Р. Чебыкин)
Верстальщику очень неудобно перебивать текст вручную смотря на картинку.
Текст сглаживается отнюдь не во всех браузерах. Во многих (Firefox, Opera) сглаживается только текст начиная с некоторого размера. Поэтому часто получается, что в макете изображено нереализуемое в виде мелкого сглаженного текста.
Если всё же решили показать сглаживание для крупного заголовка — используйте режим сглаживания Sharp.
Во-первых, кроме как картинкой или страшными ухищрениями не реализуется. Во-вторых, текст без тени читается гораздо лучше.
Вместо слития слоёв раскладываем их по группам.
Имена слоёв вида "Layer 1" очень и очень затрудняют работу как верстальщика, так и самого дизайнера. Особенно сильно это ощущается, когда их количество переваливает за 10.
Как правило у верстальщика возникают вопросы о том, как должен вести себя сайт: как растягиваться при увеличении и уменьшении окна браузера, что должно оставаться на месте при прокрутке текста, что нет и т.д. В Adobe позаботились об этом включив в Photoshop такой замечательный инструмент как Notes.
Для большей наглядности можно раскрасить слои разными цветами.
Очень часто дизайнер забывает показать как будут выглядеть списки, ссылки, таблицы и другие элементы.
Обязательно покажите в макете, как будут вести себя динамические элементы. Например, у ссылки есть четыре состояния:
Пример: Ссылка
Если на сайте предполагается вывесить какую-то рекламу — покажите это в макете.
Именно этого ждёт от вас верстальщик.
Ввиду технических особенностий (x)html-вёрстки каждый из элементов сайта представляется в виде прямоугольного блока:
Чем больше отличаются формы элементов от блока, тем труднее приходится верстальщику. А если блоки пересекаются, одни накладывается на другой — работа верстальщика займёт намного больше времени.
Довольно частым приёмом при вёрстке является повтор картинки по горизонали. На рисунке выделенная красной рамкой часть повторяется по горизонтали. Текст и остальные элементы накладываются поверх. Это позволяет сэкономить на размере картинки и тем самым увеличить скорость загрузки сайта.
В данном примере также предусмотрено то, что если высота блока превысит высоту изображения градиента, непокрытая градиентом часть будет заполняться одним цветом. Данная часть выделена на рисунке жёлтой рамкой.
Таким образом достигается достаточная гибкость как при растяжении по горизонтали, так и при растяжении по вертикали.
Также возможен повтор картинки по вертикали.
На картинке справа выделенная область повторяется по вертикали. За счёт этого достигается растяжение блока по вертикали, но при этом блок невозможно растянуть в горизонтальном направлении.
Также используется одновременный повтор по горизонтали и вертикали. Чаще всего делается это для заливки блока однородной текстурой.
Почему? Вы внимательно прочитали об особенностях заполнения блока фоном? ;)
Использование полупрозрачных элементов позволяет добиться довольно интересных эффектов:
Но помните:
Макаров Александр (http://rmcreative.ru/)
Использованы скриншоты с макета faZeful-а, скриншот сайта центра антикризисных технологий «Лист».