Веб-дизайнеру на заметку
Данная статья содержит некоторые советы веб-дизайнерам. Именно веб-дизайнерам, а не просто дизайнерам. Сам я не дизайнер, поэтому учить, как создавать дизайн я не собираюсь. Цель этой статьи — обозначить возможности вёрстки для веб.
Учитывайте, что у всех пользователей разные мониторы
Подумайте, как ваш дизайн будет смотреться и вести себя, если размер монитора больше или меньше, чем размер макета.
Кстати, размер экрана — не одно и то же, что и размер окна браузера. При использовании разных браузеров дополнительное место занимается различными элементами интерфейса, своими для каждого браузера. К тому же, пользователь может и не разворачивать браузер на весь экран.
Да, упомяну на всякий случай: картинки с изменением размеров окна браузера не увеличиваются и не уменьшаются.
Учитывайте, что информации может стать больше или меньше
Веб — штука динамичесская, поэтому высота и иногда ширина блока с информацией, число пунктов меню и т.д. меняются. К примеру, если нарисовать круглую менюшку, добавить несколько пунктов впоследствии в неё будет невозможно.
Если используются нестандартные шрифты — приложите их к макету
Всё, что в макете написано нестандартным шрифтом в итоге отверстается картинкой.
Бывает, что заказчик хочет изменить некую надпись. Например, с "Статьи" на "Обзоры". При этом оказывается, что надпись сделана нестандартым шрифтом, а взять его негде.
Список стандартных для Windows шрифтов
<br />
'Arial', sans-serif;<br />
'Arial Black', sans-serif;<br />
'Comic Sans MS', fantasy;<br />
'Courier New', monospace<br />
'Franklin Gothic Medium', sans-serif<br />
'Garamond', serif<br />
'Georgia', serif<br />
'Impact', sans-serif<br />
'Lucida Console', monospace<br />
'Lucida Sans Unicode', sans-serif<br />
'Microsoft Sans Serif', sans-serif<br />
'Palatino Linotype', serif<br />
'Sylfaen', serif<br />
'Tahoma', sans-serif<br />
'Times New Roman', serif<br />
'Trebuchet MS', sans-serif<br />
'Verdana', sans-serif
Стандартные шрифты Windows (Р. Чебыкин)
Никогда не растеризуйте текст
Верстальщику очень неудобно перебивать текст вручную смотря на картинку.
Не используйте сглаживание и размытие на тексте до 18px
Текст сглаживается отнюдь не во всех браузерах. Во многих (Firefox, Opera) сглаживается только текст начиная с некоторого размера. Поэтому часто получается, что в макете изображено нереализуемое в виде мелкого сглаженного текста.
Не используйте тени у текста
Во-первых, кроме как картинкой или страшными ухищрениями не реализуется. Во-вторых, текст без тени читается гораздо лучше.
Не стоит сливать все элементы дизайна в один слой
Вместо слития слоёв раскладываем их по группам.
Давайте слоям и группам нормальные осмысленные названия
Имена слоёв вида "Layer 1" очень и очень затрудняют работу как верстальщика, так и самого дизайнера. Особенно сильно это ощущается, когда их количество переваливает за 10.
Используйте заметки (Notes) для описания не показанного на макете поведения
Как правило у верстальщика возникают вопросы о том, как должен вести себя сайт: как растягиваться при увеличении и уменьшении окна браузера, что должно оставаться на месте при прокрутке текста, что нет и т.д. В Adobe позаботились об этом включив в Photoshop такой замечательный инструмент как Notes.
Раскрашивайте слои
Для большей наглядности можно раскрасить слои разными цветами.
Обязательно показывайте как будут оформляться элементы содержимого
Очень часто дизайнер забывает показать как будут выглядеть списки, ссылки, таблицы и другие элементы.
Элементы, которые желательно изобразить на макете
Заголовки различного уровня вложенности.
Ссылки.
Списки.
Таблицы.
Картинки.
Формы (тут возможности не так велики, поэтому стоит ограничится размерами, фоном и обводкой):
Поля ввода текста с подписями.
Многострочные поля для ввода текста.
Кнопки.
…
Обязательно показывайте как будут вести себя динамические элементы
Обязательно покажите в макете, как будут вести себя динамические элементы. Например, у ссылки есть четыре состояния:
Неактивная ссылка.
Ссылка, которую пользователь уже посетил.
Ссылка, на которую наведён указатель.
Активная в данный момент ссылка (при клике).
Можно увидеть, как это работает на адамас каталог
Обозначьте место под баннеры
Если на сайте предполагается вывесить какую-то рекламу — покажите это в макете.
Сохраните макет в формате PSD
Именно этого ждёт от вас верстальщик.
Для верстальщика всё есть блок
Ввиду технических особенностий (x)html-вёрстки каждый из элементов сайта представляется в виде прямоугольного блока:
Чем больше отличаются формы элементов от блока, тем труднее приходится верстальщику. А если блоки пересекаются, одни накладывается на другой — работа верстальщика займёт намного больше времени.
О возможностях заполнения блока фоном при вёрстке
Повтор изображения по горизонтали и заполнение цветом
Довольно частым приёмом при вёрстке является повтор картинки по горизонали. На рисунке выделенная красной рамкой часть повторяется по горизонтали. Текст и остальные элементы накладываются поверх. Это позволяет сэкономить на размере картинки и тем самым увеличить скорость загрузки сайта.
В данном примере также предусмотрено то, что если высота блока превысит высоту изображения градиента, непокрытая градиентом часть будет заполняться одним цветом. Данная часть выделена на рисунке жёлтой рамкой.
Таким образом достигается достаточная гибкость как при растяжении по горизонтали, так и при растяжении по вертикали.
Повтор изображения по вертикали
Также возможен повтор картинки по вертикали.
На картинке справа выделенная область повторяется по вертикали. За счёт этого достигается растяжение блока по вертикали, но при этом блок невозможно растянуть в горизонтальном направлении.
Разное Дизайнер (designer)