О дизайне и граблях

Если грабли могут случиться, они случаются.
Закон граблей.

Многие считают, что создание сайта начинается с дизайна (это не так, но об этом поговорим в другой раз). Затем из дизайна волшебным образом получается сайт, который правильно, одинаково и в строгом соответствии с дизайном будет отображаться во всех мыслимых и немыслимых браузерах, быстро загружаться и, что самое главное, работать, радовать и продавать.

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

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

Всех граблей не избежать, но стремиться к этому надо.

Грабля №0. Это буклет, а не сайт.

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

Грабля №1. Ширина.

Макет никогда не может быть шириной в 1024 или 1280 пикселей. У браузера есть границы и полоса прокрутки, которая в зависимости от браузера составляет около 20 пикселей. Разница в 2% по ширине никак не сковывает полёт дизайнерской мысли, если конечно дизайнер понимает, что и для чего он делает.
Отображаемая область часто шире чем макет, если сайт не резиновый, а значит необходимо сразу продумать, как будут выглядеть поля слева и справа от сайта. И это работа дизайнера, а не верстальщика.
Если сайт резиновый, то дизайнер обязан продумать, каким же образом будет заполняться это пространство. Выбрать максимальную ширину и всё равно решить проблему того, что окно браузера может быть ещё больше.

Грабля №2. Высота.

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

Грабля №3. Общие пропорции и размеры.

Если не открывать макет сайта в его естественной среде обитания, в браузере, то можно только получив готовую вёрстку узнать, что размер шрифта в 10 пунктов для основного текста и 8 для вспомогательного - это маловато. Что получилось мелко и некуда вставить крупную иллюстрацию. Что надпись, под которую выделено ограниченное пространство, вдруг оказалась длиной не 12 символов, а вообще занимает 2 строки.

Грабля №4. Нет дизайна.

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

Грабля №5. Разнобой в оформлении и отсутствие единого стиля.

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

Грабля №6. Шрифты.

Покончив с тем, что видно невооружённым глазом каждому, перейдём к тому, что не каждый заметит сразу.
Браузер любой версии далеко не Word, не Excel, не InDesign, не CorelDraw, не Photoshop, не что угодно другое. Это браузер. Достаточно сравнить размеры дистрибутивов и убедиться в этом.
Поэтому текст в браузере нельзя сделать чуть толще, нельзя слегка наклонить, нельзя сжать, нельзя вытянуть, добавить контур, залить текстурой. Нельзя много чего другого.
Быть может года через два в крайних версиях некоторых браузеров это будет можно, но ведь вы сами хотите уже сейчас и во всех основных.
Можно сделать текст картинкой, но кто тогда будет его редактировать, если понадобится?
Можно подключить шрифт, но отображаться он всё равно будет не совсем так, как в вашем макете.

Грабля №7. Текстуры, эффекты и градиенты.

Повторю, сайт не буклет, всю ту красоту, которая нарисована в макете, можно реализовывать либо ограниченными штатными средствами, либо преобразовать в картинки и задать в стилях.
Первое не обеспечит 100% соответствия.
Второе усложнит и увеличит документ, увеличит количество и размер запросов к серверу. А в шубе и с гирей на ногах летать тяжеловато.

Грабля №8. Стандартные элементы.

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

Грабля №9. Грабля.

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

Грабля №последняя, коварная.

Использование любого кроме normal способа наложения в Photoshop приводит к непредсказуемому изменению извлекаемых из макета изображений, заранее это можно увидеть, только если специально искать. В результате работа затягивается, а верстальщик вынужден исправлять не им созданные проблемы.

Работайте с грамотными специалистами, не наступайте на грабли.