5 common designer's mistakes (in Russian)

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

Эффекты Multiply, Screen, Overlay

И прочие «накладывающие» один слой на другой. Это одна из самых частых и наиболее раздражающих ошибок. В верстке нет взаимодействия слоев, как в фотошопе. Попробуйте вырезать изображение с Multiply эффектом в отдельный файл — оно будет выглядеть как в оригинале. То есть, если в оригинале фон белый, в исходнике (откуда мы вырезаем) фон серый + Multiply и изображение смотрится как родное, то в отдельном файле фон будет ни серый, ни прозрачный, а белый. Как без эффекта.

Если фон страницы в исходнике монотонный — это еще полбеды и, на крайний случай, можно вырезать вместе с фоном (хоть это и не по фен-шую). В случае с неоднородным фоном вариантов просто нет.

Fill вместо Opacity

Fill не равно Opacity. Это было обращение не к дизайнерам, а к верстальщикам. Не все это знают. И уж очень немногие дизайнеры знают, что передать эффект Opacity в верстку можно, а Fill — нет.

Для наглядности, создайте рядом пустой слой и объедините с тем, у которого Fill меньше 100%. Вы увидите, какой результат будет на сайте.

Нестандартные шрифты

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

Сэкономите время разработчику на поиск шрифта. Причем стоит заметить, что далеко не каждый девелопер будет искать шрифт на просторах веба. Многие, не увидев шрифта в аттаче, мигом отправят письмо с запросом «Пришлите шрифт» и пальцем не пошевелят. Все равно придется его высылать.
При верстке гарантированно будет использован именно этот шрифт, а не приближенные к нему модификации (к примеру, если у вас одна из сотен гельветик).

Opacity на тексте

Зачем? Сейчас в нормальных браузерах есть возможность сделать цвет текста с помощью альфа-канала. Но этим никто никогда не пользуется, ибо полупрозрачный текст… Хм… Ну, это гон. А еще есть старенькие IE, с которыми пока что тоже приходится иметь дело.

В результате, тыкаем пипеткой. А текст, естественно, не простой, а с эффектами. И ткнуть так просто не получается. А получается гадание на кофейной гуще.

К тому же, очень часто верстальщик просто не замечает Opacity на тексте и берет тот цвет, который подскажет ему верхняя (или боковая) панелька фотошопа.

Фон-картинка на всю ширину

Периодически в качестве фона на странице используется большая (может быть, даже красивая) картинка. Само по себе это неплохо. Неприятности начинаются, когда ширина экрана больше ширины фонового изображения — и в дизайне это никаким образом не предусмотрено. Обычно в таких случаях верстальщики поступают одним из следующих способов:

Пытаются растянуть крайние части изображения. Проще говоря, «прорепитить». Получается такое далеко не всегда.
Меняют размеры изображения пропорционально ширине экрана. Страдает качество. Как при увеличении, так и при уменьшении картинки.
Оставляют по центру (метод «и x#@ с ним»). По бокам остается пустое место. Не здато.

Посему было бы круто учитывать подобные нестыковки еще на стадии дизайна, к примеру, делать плавный переход в монотонный фон. Ну или заранее выбирать один из трех вариантов выше.

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