У каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.
1
НЕ делайте того, чего не смог бы потом реализовать верстальщик. И, хотя современные методы позволяют в HTML-вёрстке добиться практически любых результатов, следует всегда помнить о том, что вы создаёте сайт, а не рекламный постер. Ваша задумка должна без трудностей и проблем несовместимости переносится в код, который можно будет с одинаковым результатом отобразить на любых системах.2
НЕ используйте подмену стандартных элементов форм изображениями-скриншотами аналогичных элементов из вашей операционной системы. Поверьте, насильно внедрённая вами кнопка в духе Windows 98 вряд ли понравится пользователям MacOS.3
НЕ мельчите текст. Кегли меньше 9 pt использовать крайне не рекомендуется. Кегли 9 и 10 pt используйте только для незначительных блоков, сносок и подписей. Основной текст публикуйте кеглем не менее 11 pt.4
НЕ полагайтесь на стандартные значения интерлиньяжа (+120% к кеглю). Нередко следует добавить 1–4 пункта к установленным по умолчанию величинам, это может существенно улучшить восприятие текста. Чаще всего удачным может быть значение 140–160% от кегля. Подберите оптимальное на ваш взгляд. Я использую значения кегль/интерлиньяж следующие: 11/14, 12/16, 13/18.5
НЕ полагайтесь вообще на какие бы то ни было значения по умолчанию. Помните, что подавляющее большинство из них было придумано на заре зарождения стандартов, и плохо вписываются в современные понятия эстетичности и эргономики. Тщательно проверьте все отступы и положения буллетов в списках, величины сдвига над- и подстрочных символов, размеры элементов форм, шрифты и цвета для определённых тэгов (например,code или cite). И затем опишите новые свойства всех без исключения элементов в каскадных таблицах стилей.6
НЕ используйте абсолютных единиц при указании кегля шрифта. Размер в пикселях (px) — наиболее жёсткий и опасный метод. Лучше, но не намного — указание в пунктах (pt), т.к. это зависит от разрешения монитора. Совсем хорошо — использовать относительные величины, например, Em. Но, придётся привыкнуть и правильно рассчитывать такие величины.7
НЕ используйте ничем не мотивированные величины отступов, подобранные «на глазок». Например, 21 или 17 пикселей. Замените их на округлённые значения или кратные 5 (или даже 10), если нет строгой необходимости использовать именно такие «некруглые» величины. Это облегчит задачу вам и кодерам, когда потребуется высчитывать координаты и комбинировать блоки при вёрстке.8
НЕ делайте колонки с текстом слишком широкими и слишком узкими. Если у вас фиксированные колонки с текстом мелкого кегля, то минимальная ширина — 140–160 пикселей. Если у вас «резиновая вёрстка», следите за тем, чтобы наиболее широкая колонка не занимала больше половины всей ширины сайта. Оптимальный размер колонки при кегле 11–12 пунктов: 50–80 символов на строку.9
НЕ позволяйте тексту близко прилегать к другим текстовым блокам, рамкам или границам плашки, на фоне которой размещён текстовый блок. Убедите себя в том, что минимальный отступ всего, связанного с текстом — 10 пикселей, а оптимальный — 15–20 пикселей. Не жалейте давать вашим текстам больше пространства для жизни, не бойтесь пожертвовать вашей драгоценной графикой ради улучшенной читаемости и гармоничности текстовых блоков.10
НЕ используйте большого количества жирных или курсивных начертаний, подчёркиваний, выделений прописными буквами. Помните, что для наилучшего восприятия текста у него должна быть ровная динамика, а все методы выделения служат лишь для подчёркивания наиболее значимых фрагментов.11
НЕ делайте «полной выключки» (align=«justify»). Это хорошо работает в книгах и газетах (благодаря переносам), но на сайтах вызывает лишь недоумение. Кроме того, нередко следует воздержаться от применения «красных строк», поскольку этот способ выделения абзаца лучше всего работает как раз в комбинации с «полной выключкой», а при стандартном значении align=«left» «красная строка» выглядит несколько нелепо.12
НЕ забывайте о «висячих» строках, «сиротах» и «вдовах», о предлогах в конце строк, о неразрывных пробелах (в названиях или именах собственных) и корректных типографских знаках (например, тире и кавычках). Выверенная типографика даже на предварительном наброске макета — признак профессионализма. Можно воспользоваться, например, «Типографом».13
НЕ используйте на макете сайта какие-либо шрифты помимо общеупотребимых веб-гарнитур за исключением тех случаев, когда предполагается использование изображений в качестве заголовков или подписей, или если экзотический шрифт является необходимым компонентом фирменного стиля. О шрифтах, которые можно использовать для отображения HTML-текста в макетах см. цикл статей Веб-типографика сегодня. Следует также воздержаться от употребления сразу нескольких веб-шрифтов, достаточно ограничиться двумя-тремя гарнитурами.14
НЕ помещайте в ваш макет чрезмерно длинных и монотонных блоков текста. Разбивайте их на абзацы, по возможности перемежайте подзаголовками. Это придаст тексту стройности и логичности. Стремитесь к тому, чтобы любая текстовая информация в пределах одного блока выглядела ровно, но не уныло.15
НЕ используйте в качестве «рыбы» одно и тоже предложение, размноженное несколько раз («Здесь будут новости. Здесь будут новости. Здесь будут новости»). Для вас не составит труда найти любой подходящий текст для демонстрации того, как будет смотреться текстовый блок.16
НЕ копируйте несколько раз схожие блоки рядом друг с другом (например, анонсы новостей). Не поленитесь всякий раз поменять текст, чтобы блоки выглядели как на настоящем сайте, а не как на спешно собранном черновике, даже если это и есть черновик. То же самое относится к изображениям. Если вы скопировали блоки событий несколько раз и поменяли текст, поменяйте и картинки рядом с текстом. Ведь в интернете полным-полно изображений на любой вкус. А поскольку чаще всего все тексты в вашем макете — «рыба», то и картинки подойдут любые.17
НЕ показывайте вашему заказчику незаконченные блоки или места, где вы оставили надпись вроде «А здесь будут новости». Выделите несколько минут времени и хотя бы в общих чертах набросайте этот блок. Ведь это не сложно. Проще всего — скопировать текст или изображения с сайтов конкурентов или партнёров вашего клиента, для пущей безопасности убрав все упоминания об этих конкурентах. Но помните, что это лишь временная мера и предназначена только для демонстрации клиенту. См. правило №20.18
НЕ оставляйте на местах предполагаемых рекламных баннеров пустые места или закрашенные прямоугольники. Не поленитесь и найдите в Сети реальные баннеры нужного размера. Можно даже потрудиться и найти баннеры подходящей цветовой гаммы. В случае чего, их легко потом можно будет отключить. Зато у заказчика не возникнет сомнений относительно того, что «макет выглядит как-то пусто», если в нём зияют унылые дыры, заполненные одним и тем же цветом и едва заметной надписью «Здесь баннер».19
НЕ используйте изображений с несглаженным текстом, если это не часть вашей гениальной задумки и не укладывается в стилистику pixel art. Тогда пользователи, включившие сглаживание, не заметят режущих глаз элементов. А те, у кого антиалиасинг выключен, воспримут сглаженный текст на картинке как должное. Просто подберите удачный шрифт и метод сглаживания. Несглаженный текст — анахронизм, и если при отображении HTML-текста использование антиалиасинга может быть спорным, то несглаженный текст в изображениях выглядит просто уродливо. Помните и посетителях ваших сайтов! О сглаживании шрифта можно почитать в моих предыдущих статьях.20
НЕ забудьте по завершении работы над сайтом заменить все «рыбные» тексты и изображения на реальные. Помните, что использованные вами в качестве «рыбы» материалы — чья-то интеллектуальная собственность.Надеюсь, что два десятка этих нехитрых правил пригодятся при подготовке макета для заказчика. Другие важные аспекты подготовки макетов для заказчика рассмотрены в циклах статей Готовим макет для клиента и Веб-типографика сегодня.
UPD 1. Спасибо equeny за правило №21: НЕ следуйте слепо всем этим правилам, думайте своей головой. Я присоединяюсь к этому правилу: всегда основательно думайте и не спешите в своих действиях, и тогда ваши труды будут оценены по заслугам.
UPD 2. По совету хабраюзеров некоторые правила поменялись местами. Спасибо!
