Привет фронтенд-разработчикам! При разработке сайта из PSD-макета мы постоянно сталкиваемся с проблемой реализации некоторых элементов, которые нарисовал дизайнер.
Будь то кнопка или какой-то хитрый градиент. Приходится либо извиваться, тратя на это свое рабочее время, либо просить дизайнера переделать, либо, в крайнем случае, опускать руки и делать что-то более-менее похожее.
Если наш заказчик ужасно внимательный, то часто при принятии последнего решения у нас возникают проблемы с несоответствием того, что было заложено в итоге, и того, что нарисовал дизайнер.
Все эти факторы ставят темное пятно на нас, разработчиков, пока дизайнер получил свою премию и уже пьет коктейли, нас кидают помидорами и обвиняют в некомпетентности, хотя проблема не в нас, а в том, что дизайнер порой даже не знаком с основами верстки и не знает, что некоторые вещи невозможно нарисовать.
Я немного прибавил мозгов и статуса в компании, в какой-то момент понял, что так продолжаться не может и начал собирать свои требования в psd макетах.
Через некоторое время я смог оценить всю выгоду от внедрения этих стандартов и требований: — дизайнер становится более организованным, он помнит, что нужно соблюдать правила и, как следствие, PSD-макеты начинают весить меньше, в них нет неиспользуемых слоев, структура становится понятной не только верстальщику, но и самому дизайнеру.
В дальнейшем, когда ему нужно будет что-то дорисовать, ему не придется искать слои блока по всему psd файлу, а пойдет в папку в блоке и сразу приступит к работе.
Также в этом случае есть возможность создать папку с предыдущей версией блока прямо в файле.
— верстальщик, получив «правильный» макет, может более точно оценить сроки выполнения, так как точно понимает, что ему не придется больше никуда идти и просить что-то переделать, а также можно сократить сроки выполнения добавил сюда.
Так как при соблюдении правил становится возможным использовать такие вещи, как csshat.com + lesshat.com — результат на выходе более идентичен тому, что было нарисовано, поскольку все, что «сделал» дизайнер, можно реализовать в браузере.
Результат: дизайнер доволен (ничего переделывать не надо), верстальщик доволен (все разложено хорошо и ночь уходит на дополнительную работу, чтобы успеть и нервы в порядке), заказчик (планировка соответствует утвержденной планировке), в конечном итоге от введения этих правил выиграют все Ниже приведен список требований: 1) Соблюдайте сетку в макете, если знаете, что это такое и как ее «подготовить».
За что? о_О: - чисто эстетическое удовольствие — возможность быстро собрать фрейм страницы и расположить элементы на страницу в соответствии с представленным макетом, чтобы макет был более честным по отношению к тому, что вы нарисовали.
2) Если к слою применен градиент, используйте обычный режим наложения (режим наложения: нормальный) и его реальные цвета.
Не должно быть полупрозрачных градиентов или сложных режимов наложения, таких как «умножение, экран, наложение и т. д.».
Плохо: joxi.ru/Md6l32D Отлично joxi.ru/M2w9Nwe и еще один пример joxi.ru/11ndBHq 3) Нежелательно использовать «слой на слое» для создания различных эффектов, например градиента; слой должен быть один.
Пример: joxi.ru/AGx4CQy 4) Нет градиентных границ (границ, обводки).
5) Использование сложных режимов наложения применяется к любым свойствам слоя (например, внутренней тени, тени и т. д.).
6) ОБЯЗАТЕЛЬНО прикрепить к макету шрифты, которые использовались в макете, в формате TTF, OTF. 7) По возможности не используйте в верстке более 2-х нестандартных шрифтов, их количество сильно влияет на отрисовку страницы в браузере, что негативно влияет на отношение пользователя к сайту.
8) Обязательно наличие отдельного макета, в котором представлено оформление стандартных типографских элементов веб-страницы (заголовков, абзацев, таблиц, списков, блоков цитат).
joxi.ru/MKnCZQM 9) Если вы нарисовали типичную кнопку, ссылку, элемент, имеющий состояние наведения или клика, не заставляйте нас разбираться, как это должно работать.
Если ссылка есть, покажите ее цвет при наведении; если кнопка есть, покажите ее внешний вид при наведении или нажатии, а также ее «неактивное» состояние.
Это касается любых подобных элементов, стрелок галереи и т. д. и т. п.
joxi.ru/ZSmaLye 10) Каждый блок должен находиться в своей папке и иметь правильное человеческое имя, чтобы не собирать части блока по всему макету.
joxi.ru/Agsfo3L 11) Если есть скрытые слои или папки, показывающие какие-то части сайта (модальные окна, выпадающие панели и т.п.
) - нужно выделить папку/слой - цветом, чтобы не пропустить, так же следует иметь близкое по своему функционалу имя.
joxi.ru/G1h9LbN Заключение: Соблюдение данных рекомендаций поможет реализовать этап создания проекта – макета максимально приближенно к создаваемому макету и поможет избежать: — несоответствие макета версии макета; — проблемы с согласованием макета; — проблемы с кроссбраузерностью и работой верстки в целом.
Спасибо.
Теги: #требования к psd макетам #html верстка #разработка веб-сайта
-
Типология Клиентов
19 Oct, 24
