24 ноября 2009

20 правил веб-дизайна

Статьи

20_web-design_rules
Обращаю ваше внимание, что эти правила относятся именно к веб-дизайну!

1. Учитывайте возможности HTML-вёрстки

НЕ делайте того, чего не смог бы потом реализовать верстальщик. И, хотя современные методы позволяют в HTML-вёрстке добиться практически любых результатов, следует всегда помнить о том, что вы создаёте сайт, а не рекламный постер. Ваша задумка должна без трудностей и проблем несовместимости переносится в код, который можно будет с одинаковым результатом отобразить на любых системах. (отсюда вывод: занимаетесь веб-дизайном – изучите HTML и CSS и не сводите программистов с ума!)

2. Стандартная кнопка = input type=button

НЕ используйте подмену стандартных элементов форм изображениями-скриншотами аналогичных элементов из вашей операционной системы. Поверьте, насильно внедрённая вами кнопка в духе 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. em лучше, чем px. Чем лучше? Чем px

НЕ используйте абсолютных единиц при указании кегля шрифта. Размер в пикселях (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. Не оставляйте «рыбу» без присмотра

НЕ забудьте по завершении работы над сайтом заменить все «рыбные» тексты и изображения на реальные. Помните, что использованные вами в качестве «рыбы» материалы — чья-то интеллектуальная собственность.

Источник:
20 “НЕ” для веб-дизайнеров

Интересное на эту тему:
Секреты хорошего веб-дизайна
Гид по веб-типографике
15 примеров отличной веб-типографики
Правила удобочитаемости
Всё о веб-разработке


Рубрики: ,

[ Написать комментарий ]

Написать комментарий