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

Большинство дизайнерских шаблонов страдают одними и теми же болезнями, касающимися шрифтового оформления (вид шрифта, высота строк, интервал между знаками, цвет), выравнивания (сетка), и интервалов (отступ). В этом уроке мы поговорим о самых распространенных ошибках 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
Просмотров: 61971
Правила перепечатки


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

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

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

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

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

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

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

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

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

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

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Октября 2009 21:12
    Кальяныч
    Урок отличный! Многие моменты мне известны! За ссылки спасибо!
  • 15 Октября 2009 21:49
    Денисов
    Побольше бы таких статей) Неплохо бы отдельный отдел посвящённый исключительно дизайну сайта и статьи про SEO
  • 15 Октября 2009 23:40
    Cheiz
    и все это ЮЗАБИЛИТИ а проще (сделать удобно) . Максим Шкурупий давай поддай ))) молодец
  • 16 Октября 2009 01:01
    zyma
    Я новичок в сайтостроении, поэтому из этого урока почерпнул много интересного и полезного! Спасибо!
  • 16 Октября 2009 18:43
    Владимир
    Прекрасный дополнительный материал, вникающим в тему создания сайта. Эти тонкости очень важны для комфортного восприятия содержимого сайта. Спасибо!
  • 20 Ноября 2009 00:29
    Дарья
    хе хе ))) век живи век учись)
  • 3 Марта 2010 12:06
    demon
    Азик купи обучающий курс там всё подробно написанно
  • 16 Августа 2010 23:33
    Влад
    да, для новичка этот материал очень полезен. для себя нечего нового не открыл, но ведь повторение - мать м... учения
  • 1 Марта 2011 17:50
    Ygreec
    полезно даже опытным, чтобы не было соблазна делать неудобоваримое - даже если попросят...
  • 17 Июня 2011 20:02
    nick_200987
    Нормальная статья, если автор добавил бы немножко своих замечаний, было бы еще лучше.
  • 23 Ноября 2011 12:18
    maxmas
    Хорошая статья. Придется елки-палки переделывать свой сайт, ато после прочитанного мой сайт выглядит полным УГ
  • 12 Апреля 2012 19:46
    iKNG
    Спасибо. Статья понравилась. Так держать!
  • 7 Ноября 2013 23:32
    asdon146
    Отличная статья, как раз то что надо!
  • 12 Октября 2016 14:47
    Иван Краевед
    На этом сайте шрифт мелковат, приходится увеличивать шрифт колёсиком - в итоге третья колонка уходит за монитор и приходится елозит прокрутку.
^ Наверх ^