За время работы верстальщиком мне доводилось иметь дело с кучей самых разных макетов, как от новичков в дизайне (а иногда просто левш), так и до профессионалов.
И за это время мне удалось собрать приличную подборку самых типичных ошибок в макетах, избежать которых не под силу даже бывалым специалистам.
Сразу оговорюсь – в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, если дизайн не соответствует этим требованиям, его без вопросов следует отправить на доработку, но на деле зачастую бывает проще.
самостоятельно внести необходимые изменения, чем отправлять документ туда - сюда, на трекер.
Но даже в этих «требованиях» упомянуты не все заведомо возможные «косяки».
Постараюсь дать самые популярные и универсальные (без личного присоединения).
Да, кстати, я привожу все ошибки при использовании Photoshop psd — ну это де-факто стандарт в веб-макетах.
А векторные макеты мне пока не попадались (и надо сказать, слава богу).
1. Маркировка.
Основа страницы, так называемый макет или скелет. а) Самый известный и раздражающий, но не менее популярный – ширина макета всегда должна быть на 20-24 пикселя меньше подразумеваемой ширины устройства отображения (правильно – не менее 24 пикселя).
Те.
Если мы готовим документ для горизонтального разрешения 1024 пикселей, то максимальная ширина макета — 1000 пикселей.
Надеюсь понятно почему — мы учитываем ширину полосы прокрутки и границ окна.
Если кто-то считает, что при небольшой высоте макета полосу прокрутки допустимо игнорировать, то могу отметить, что пользователь всегда может сжать окно по вертикали и.
Это, пожалуй, самый трудоемкий баг, который нужно исправить (если верстальщик приходится с этим бороться) - иногда встроенная графика и/или разметка просто не позволяет сделать это адекватно.
Приходится вырезать куски, масштабировать, корректировать остальной контент и т. д. Ужас, короче! б) Модульная сетка.
Вернее, даже не сетка, а направляющие, нарисованные к основным блокам/картинкам — они позволяют просто один раз провести линейку между ними и ввести полученное значение в css. Не критично, но существенно облегчает жизнь.
Следует отметить, что макеты без направляющих встречаются очень редко.
Но в большинстве случаев дизайнер обходится всего несколькими направляющими для основных колонн.
в) Также известный бич верстки - так называемая «рыба», обычно пишется идеально, и почти никто никогда не вставляет крайние по содержанию примеры.
И вам предстоит догадываться и уточнять поведение того или иного блока, когда он переполнен контентом или ему не хватает (например, пропорции картинки не соответствуют заложенным в макете - посыпьте, если да, то как? ввести? и т. д., либо имя/фамилия пользователя будет длиннее, чем «Иванов Иван» и т. д.) г) «Резина».
Хотите резину? Прикрепите, пожалуйста, 2 макета для минимального и максимального разрешения, чтобы верстальщику не пришлось гадать, какие блоки будут отрисовываться и как они будут растягиваться! 2. Типографика.
а) Гарнитуры.
Существует известный список «безопасных шрифтов».
Большинство людей знают об этом.
Но иногда делают какой-нибудь Myriad Pro и понеслось.
Начинаешь объяснять, что он не входит в стандартную поставку вместе с ОС, несмотря на то, что он бешено популярен.
В большинстве случаев дизайнер идет навстречу и заменяет шрифт, но есть и те, кто начинает учить.
Мол, а вы не в курсе свойства @font-face. Да я в курсе, но 1 - дайте мне нормальный, качественный шрифт, чтобы я его конвертировал (всякие шрифты-белки очень противны в отрисовке нетипичных шрифтов), 2 - и мы не нарушая чьи-либо авторские права? В большинстве случаев оказывается да — шрифт платный.
Короче говоря, проблем много.
б) Сглаживание шрифтов всегда должно быть отключено! И не надо меня «лечить» тем, что некоторые браузеры там что-то умеют. Ну IE это умеет, например, и что? Он понятия не имеет о фотошопе «резкий», «гладкий» и т. д. А по факту получается, что менеджер утверждает один макет, а на выходе макет — корявая, нечитаемая фигня.
И кто виноват? в) Ведущий.
Всегда следует вводить как минимум «авто» (обычно это означает следующее «стандартное» значение после точки, но не точно — придется выбирать вручную), а еще лучше конкретное значение.
Потому что css всегда требует как размера шрифта, так и интерлиньяжа.
И вы не поверите — за свою карьеру я, наверное, видел все возможные значения в окне ведущих значений в принципе.
г) Межбуквенный/словный интервал, отличный от стандартного (100%), тоже заставляет напрягаться - что это? Остатки «старых настроек»? Прихоть дизайнера? Или действительно осознанная техника – предстоит уточнить.
д) Из текстовых эффектов разрешена только тень, а все, что можно эмулировать ее способностью (свечение и обводка), внутренняя тень и градиент через CSS не поддерживаются (и даже через js — это еще одно «удовольствие»).
3. Эффекты и графика.
а) Эффекты для слоев лучше не уменьшать — так как некоторые эффекты можно реализовать через CSS, а это оптимизация.
б) В слоях и эффектах НИКОГДА не используйте какой-либо режим наложения слоев, кроме «Нормального», поскольку он зависит от нижележащих слоев — и это относится даже к сглаживанию слоев и вставке с использованием графики.
Это совершенно эпично! Раз уж поставили какой-то наложение, то выход один - соединить все слои и вытравить элемент, а это, надо отметить, иногда сродни рисованию в векторе - особенно если есть какие-то свечения/ тени с большим радиусом.
в) Используйте эффекты с умом - зачем ставить надписи одним цветом, а потом использовать эффект «наложение цвета»??? Зачем использовать внешнюю и внутреннюю тень одновременно? и так далее.
Градиент - окей, обсуждается отдельно.
г) Для реализованной графики (значки, кнопки и другой декор) слои желательно объединять, чтобы верстальщик не рылся в макете в поисках нужных слоев.
Вставлять его лучше смарт-объектом — внедренное изображение создается очень быстро и при необходимости в него можно внести изменения.
4. Другой.
а) Было бы неплохо иметь готовый CSS-спрайт со всеми элементами дизайна и направляющими — но это из области научной фантастики! б) Планировку желательно сопроводить пояснительной запиской, в которой указываются: — используемые шрифты (чтобы иметь возможность сразу прописать основное семейство шрифтов для страницы и менять его только в отдельных блоках); — блоки с использованием «неавтоматического» интерлиньяжа и интервала; - цветовая схема - сразу задаются цвета для основных текстовых блоков (нет смысла перечислять все используемые цвета), цвета ссылок - по умолчанию, при наведении, посещенных; эталонные цвета используемых градиентов и т. д. Это, наверное, главное.
Как видите, учесть эти моменты дизайнеру не так уж и сложно.
Но время верстки сокращается вдвое точно! Буду рад, если кто-то воспримет это как руководство к действию и хотя бы частично улучшит свои макеты — а вдруг они будут работать вместе.
P.S. Я не публикую иллюстрированные примеры по, знаете ли, причинам.
Если у вас есть вопросы, спрашивайте.
П.
П.
С.
Спасибо, НЛО! Теги: #веб-дизайн #html-верстка
-
Обзор Принтера Canon Imageclass Mf8380Cdw
19 Oct, 24 -
Обновление Часового Пояса В Java
19 Oct, 24 -
Счетчик Просмотров На Ютубе
19 Oct, 24
