Типичные ошибки веб-дизайнеров

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

Шрифтовое оформление

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

Не используйте слишком много шрифтов

Выберите один шрифт для всех заголовков и другой для основного текста. НЕ ИСПОЛЬЗУЙТЕ более двух шрифтов для текста страницы! Возьмите это за правило! К примеру, можно для заголовков выбрать шрифт ‘’IMPACT’’, а ‘’ARIAL’’ для остального текста. Не забывайте, что каждому шрифту соответствует своя базовая линия, своя высота строчных и прописных букв и т.д. Шрифты можно сравнить с помощью сайта Typetester.

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Не смешивайте рубленый шрифт и шрифт с засечками (sans и serif)

Это, конечно, не правило, но новичкам советую этого не делать. Так как подобрать правильное сочетание этих двух типов шрифта не так просто, как кажется. Отличным примером их правильного использования может послужить сайт A List Apart.

Выбирайте правильный размер шрифта

Мы обычно указываем размер шрифта в коде CSS в следующих единицах измерения: %, em или px. Размеру шрифта основного текста я обычно задаю значение – 62.5%, и уже придерживаясь этой величины, я указываю em. 1em равняется 10px. При выборе размера шрифта, следите за общим равновесием элементов дизайна и его удобочитаемостью. Чтобы текст был более разборчивым, установите для него размер 14px или 1.4em. Некоторым частям вашего дизайна, например, лозунгу и заголовкам, нужно будет установить больший размер шрифта – 18px или даже 24px.

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Настраиваем правильную высоту строк

Высота строк определяет так же расстояние между строками. Когда я проектирую страницу в Photoshop, то размер шрифта у меня обычно равен 12px, высота строк – 16-18 px. Весь текст набирается с отключенной функцией ‘’antialias’’ – что позволяет нам получить предварительное точечное представление о том, как он будет в действительности выглядеть в браузере.

Правильно подбирайте цвет шрифта

Ваш текст должно быть удобно читать на любом фоне – вот самое важное правило. Здесь ключевым аспектом является контрастность.

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Вызывает раздражение и страница с плохо подобранной цветовой гаммой, как показано ниже.

НЕПРАВИЛЬНО

Чтобы избежать подобной проблемы, воспользуйтесь он-лайн программами, которые есть на специализированных сайтах: Adobe Kuler, Colorlovers и т.д.

Выравнивание

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

Используйте системы сеток

Использование рамок и сеток поможет вам гармонично и аккуратно расположить элементы страницы. Я рекомендую вам пользоваться системой 960 Grid System, так как она позволяет и проектировать и верстать шаблоны (поддерживает расширения: .psd, .ai, .css, .html и др.).

Следуйте одному стилю

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

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Интервал и отступ

Согласно спецификации консорциума W3C, CSS свойство padding задает величину отступа между границами элемента и его содержимым. Использование интервалов, отступов или даже пробелов поможет вам создать гармоничный дизайн страницы.

Не располагайте элементы слишком близко друг к другу

Дайте им чуть больше пространства. Пусть будет отступ минимум 10px между текстовыми блоками или отдельными элементами. Примите это на заметку.

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Но также и не удаляйте элементы друг от друга

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

НЕПРАВИЛЬНО

ПРАВИЛЬНО

Делайте все отступы одинаковыми

Если вы приняли решение, что все отступы у вас будут 10px, ну так и следуйте ему. Не стоит делать один отступ 10px, а другой 30px. Снова предлагаю вам воспользоваться 960 grid системой, она автоматически расположит все ваши элементы привлекательным образом. Давайте на последок просмотрим еще ряд примеров.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.blog.themeforest.net
Перевел: Максим Шкурупий
Урок создан: 15 Октября 2009
Просмотров: 65319
Правила перепечатки


5 последних уроков рубрики "Юзабилити"

  • Мифы о почтовом маркетинге

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

  • Когда пользователи оставляют поле поиска пустым...

    Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 404! В то же время, вы когда-то задумывались, что произойдёт, если пользователь оставит поле поиска пустым, а затем нажмёт Enter?

  • Разумная достаточность: что это означает при заполнении форм?

    Термин “разумная достаточность” относится к склонности человека использовать минимальные ресурсы для успешного завершения работы. Это явление, которое осуществляется на подсознательном уровне: чаще всего мы даже не задумываемся о том, что сейчас нам необходимо использовать самый минимум усилий для выполнения определённой задачи.

  • Семёрка дизайнерских тенденций, формирующих будущее UX

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

  • Три устаревших UX подхода и их альтернативы

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

^ Наверх ^