Советы по web дизайну

Сделать сайт для компании В статье использованы некоторые советы по web дизайну. Хотите прислушивайтесь, хотите нет, но, как говорится: дурак учится на своих ошибках, а умный на чужих )). Цель материалов - обозначить возможности вёрстки для веб.

У всех пользователей разные мониторы

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

Добавление пунктов меню

Web - штука динамичная, поэтому высота и иногда ширина блока с информацией, число пунктов меню и т.д. меняются. К примеру, если нарисовать круглую менюшку, добавить несколько пунктов впоследствии в неё будет невозможно.

Нестандартные шрифты приложите их к макету

Всё, что в макете написано нестандартным шрифтом в итоге отверстается картинкой. Бывает, что заказчик хочет изменить некую надпись. Например, с "Статьи" на "Обзоры". При этом оказывается, что надпись сделана нестандартым шрифтом, а взять его негде.

Список стандартных для Windows шрифтов:

  1. Arial, sans-serif.
  2. Arial Black, sans-serif.
  3. Comic Sans MS, fantasy.
  4. Courier New, monospace.
  5. Franklin Gothic Medium, sans-serif.
  6. Garamond, serif.
  7. Georgia, serif.
  8. Impact, sans-serif.
  9. Lucida Console, monospace.
  10. Lucida Sans Unicode, sans-serif.
  11. Microsoft Sans Serif, sans-serif.
  12. Palatino Linotype, serif.
  13. Sylfaen, serif.
  14. Tahoma, sans-serif.
  15. Times New Roman, serif.
  16. Trebuchet MS, sans-serif.
  17. Verdana, sans-serif.

Подготовьте текст

Верстальщику очень неудобно перебивать текст вручную смотря на картинку.

Не используйте сглаживание и размытие на тексте до 18px

Текст сглаживается отнюдь не во всех браузерах. Во многих (Firefox, Opera) он сглаживается, начиная с некоторого размера. Поэтому часто получается, что в макете изображено нереализуемое, в виде мелкого сглаженного текста.

Сглаживание и размытие

Если всё же решили показать сглаживание для крупного заголовка, то используйте режим сглаживания Sharp.

Sharp

Не используйте тени у текста

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

Тень у картинки

Не "сливайте" все элементы дизайна в один слой

Вместо слития слоёв раскладываем их по группам.

Раскладываем по группам

Давайте слоям и группам нормальные осмысленные названия

Имена слоёв вида "Layer 1" очень и очень затрудняют работу, как верстальщика, так и самого дизайнера. Особенно сильно это ощущается, когда их количество переваливает за 10.

Используйте заметки (Notes) для описания не показанного на макете поведения

Как правило, у верстальщика возникают вопросы о том, как должен вести себя сайт: как растягиваться при увеличении и уменьшении окна браузера, что должно оставаться на месте при прокрутке текста, что нет и т.д. В Adobe позаботились об этом, включив в Photoshop такой замечательный инструмент как Notes.

Notes Tool Область растягивания

Раскрашивайте слои

Для большей наглядности можно раскрасить слои разными цветами.

Обязательно показывайте оформление элементов содержимого

Очень часто дизайнер забывает показать, как будут выглядеть списки, ссылки, таблицы и другие элементы.

Элементы, которые желательно изобразить на макете

  • Заголовки различного уровня вложенности.
  • Ссылки.
  • Списки.
  • Таблицы.
  • Картинки.
  • Формы (тут возможности не так велики, поэтому стоит ограничится размерами, фоном и обводкой):
    • Поля ввода текста с подписями.
    • Многострочные поля для ввода текста.
    • Кнопки.

Покажите, как будут вести себя динамические элементы

Обязательно покажите в макете, как будут вести себя динамические элементы. Например, у ссылки есть четыре состояния:

  • Неактивная ссылка.
  • Ссылка, которую пользователь уже посетил.
  • Ссылка, на которую наведён указатель.
  • Активная в данный момент ссылка (при клике).

Пример: Ссылка

Обозначьте место под возможные баннеры

Если на сайте предполагается вывесить какую-то рекламу, то покажите это в макете.

Сохраните макет в формате PSD

Именно этого ждёт от Вас верстальщик.

Для верстальщика всё есть блок

Ввиду технических особенностий (x)html-вёрстки, каждый из элементов сайта представляется в виде прямоугольного блока:

Блок

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

О возможностях заполнения блока фоном при вёрстке

Повтор по горизонталиПовтор изображения по горизонтали и заполнение цветом

Довольно частым приёмом при вёрстке является повтор картинки по горизонали. На рисунке выделенная красной рамкой часть повторяется по горизонтали. Текст и остальные элементы накладываются поверх. Это позволяет сэкономить на размере картинки и тем самым увеличить скорость загрузки сайта.

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

Таким образом достигается достаточная гибкость, как при растяжении по горизонтали, так и при растяжении по вертикали.

Повтор изображения по вертикали

Повтор по вертикалиТак же возможен повтор картинки по вертикали.

На картинке справа выделенная область повторяется по вертикали. За счёт этого достигается растяжение блока по вертикали, но при этом блок невозможно растянуть в горизонтальном направлении.

Заливка блока

Также используется одновременный повтор по горизонтали и вертикали. Чаще всего делается это для заливки блока однородной текстурой.

Никогда не используйте диагональный градиент

Почему? Вы внимательно прочитали об особенностях заполнения блока фоном? ;)

О прозрачности

ПрозрачностьИспользование полупрозрачных элементов позволяет добиться довольно интересных эффектов:

Но помните:

  1. Полупрозрачность нельзя сочетать с повтором как по вертикали, так и по горизонтали. Уже можно.
  2. Могут возникнуть проблемы с старыми браузерами, телефонами и КПК.

Использованы скриншоты с сайта центра антикризисных технологий «Лист».