Веб-дизайн, друзья мои, —
великое искусство, покоящееся
на двух вселенских принципах:
Красота и Польза.
(Айн Рэнд)

 

В эпиграфе — перефразированная цитата из потрясающей книги Айн Рэнд «Источник» (заменено одно слово — сами догадайтесь, какое). Главный герой романа — талантливый архитектор-новатор.

 

С одной стороны — в данном посте вроде бы не будет особых откровений.

Всё это — известные, и даже прописные истины по поводу дизайна сайтов.

Но мало того, что дизайнеры достаточно часто всё равно делают эти ошибки… Хуже всего то, что некоторые эти ошибки допускают даже веб-студии или фирмы, претендующие на профессионализм в области веб-дизайна.

А некоторые из описанных ниже ошибок допускаются при «редизайне» крупных посещаемых проектов.

И за этот пост я взялась именно потому, что за последнее время встретила несколько кошмарных ошибок — из разряда элементарных. И как раз на таких примерах я буду показывать эти недопустимые ошибки.

 

№1.

Самая распространённая ошибка — мелкий текст в длинной строке.

Такой текст нечитабелен!!

На экране в строчке должно быть ДО 50 знаков. Потому что взгляд устаёт двигаться вдоль длинной срочки и «спрыгивает» при переходе с одной строчки на другую.

Если в строчке много знаков, то тогда расстояние между строчками и абзацами должно быть больше, а абзацы короче.

 

Господа-ведизайнеры, задумайтесь: ЧТО вы экономите?

Раньше в книгах с помощью мелкого шрифта экономили бумагу. А что можно экономить на мониторе?

На сайте мелкий шрифт оправдан только в том случае, если экран забит разной информацией, и совершенно необходимо на первой странице поставить как можно больше анонсов: 20-30 штук. Но кстати, в таком случае, глаза у посетителя «разбегаются» — и совершенно неизвестно, прочитает ли он хоть что-нибудь у вас на таком забитом экране или сразу же закроет такую страницу.

Поэтому естественный совет: если у вас много отказов с такой «мелкой» страницы — то это именно вам «звоночек»: шрифт надо увеличить, а количество анонсов на одном экране — уменьшить до более разумного (6-8).

Кроме того, подумайте о посетителях со слабым зрением. Да и просто о нагрузке на глаза посетителя.

Обязанность веб-дизайнера — облегчать нагрузку на глаза посетителя.

Лучше пусть посетитель прокрутит 1-2 экрана вниз, чем напрягает глаза на мелком шрифте.

 

Примеры мелкого шрифта в длинной срочке будут чуть ниже — в комплекте с другими ошибками.

Но таких сайтов в Инете, к сожалению, множество. 🙁

 

№2

  А если к №1 ещё добавить неконтрастный шрифт (например, серый на черном), то глаза у посетителя в результате вообще полезут на лоб.

Пример: webkeepers.ru/site/sozdanie-saita.htm

 

И это «профессионалы» в области веб-дизайна. О_о

Драть надо таких профессионалов!

 

№3

Курсив (как совершенно правильно сказано в «Ководстве» Артемия Лебедева, параграф 79) служит для выделения. А не для больших кусков текста.

Пример ошибки — рэдызайн (извините за ругательство!) крупного посещаемого ресурса СМИ2:

 

Надо учесть, что этот рэдызайн (прости, Господи!) явно заказывали у какой-то серьезной дизайнерской фирмы.

В результате — «маємо те, що маємо».

 

Насколько был толковый дизайн в старой версии — настолько же бестолковый редизайн заставил меня покинуть этот, в общем-то интересный и посещаемый проект.

Подозреваю — не меня одну.

 

Думаю, что по поводу редизайна — чуть позже сделаю отдельный пост.

 

№4. Nota Bene

 

Это не ошибка, но важный совет.

 

Основной шрифт на сайте — рубленый или с засечками?

Для ответа на этот вопрос надо учесть особенность восприятия шрифта глазом.

На обычной бумаге, в стандартной бумажной книге глаз легче воспринимает шрифт с засечками (то есть шрифты типа TimesNewRoman или SchoolBook).

Потому что на бумаге «разрешение» (если можно употребить этот термин применительно к типографскому тексту) намного выше, чем на мониторе. Соответственно, на бумаге шрифт и засечки — чёткие. И взгляд читателя — как бы «скользит» по строчкам. Таким образом на бумаге засечки помогают читателю.

А на экране — совершенно наоборот.

Эти мелкие детали-засечки — плохо «прочитываются». Потому что на мониторе разрешение далеко не такое, как на бумаге.

 

Поэтому для сайта правильных вариантов при выборе шрифта может быть два:

а) Лучше, чтобы основной шрифт на сайте был рубленым (то есть без засечек), типа Arial. Это безошибочный вариант. В блоге «Палю тему» — как раз шрифт Arial.

б) Но если вы так уж сильно хотите использовать шрифт с засечками, типа TimesNewRoman, то его надо делать заметно больше, крупнее — по сравнению с рубленым шрифтом. Можно взять шрифт Georgia. Он более толстенький — по сравнению с TimesNewRoman. И в силу своей сравнительной «жирности» — лучше читается. Но всё равно его надо брать крупнее, чем рубленый шрифт.

Поэтому на сайте шрифт Arial можно использовать 11-12 пунктов (а иногда даже меньше). А TimesNewRoman — от 14 пунктов.

 

№5

Ошибка сейчас уже относительно редкая, но тем не менее — всё равно встречается.

Разноцветный шрифт в одной строчке. Это просто ужас что такое!

Разноцветный шрифт — абсолютно точный признак «школоты».

 

№6

Теперь взглянем на сайт фирмы веб-дизайна.

alterlaba.ru

Здесь видим несколько ошибок — грубых и не очень:

Широкая вёрстка, из-за которой появляется горизонтальная прокрутка даже на мониторе с приличной шириной экрана.

Из-за этого мне пришлось разворачивать окно браузера на весь монитор. А я очень не люблю это делать. Соответственно — из-за этой же широкой вёрстки — очень длинная строка (ошибка №1).

 

Негрубые ошибки я уже не стану перечислять, но они есть.

 

№7  

Через портфолио предыдущей «хвырмы» попадём ещё на один образчик дизайна с ошибками:

a49vto.ru

Тоже относительно редкая ошибка. Но поскольку она мне встретилась недавно, значит — надо упомянуть.

Центрирование основного текста абзаца. Это полный бред и категорически неправильно!

Центральная выключка служит исключительно для выделения текста.

Центрировать можно заголовки и небольшие выделения в рамке. Для основного текста обязательно использовать выключку влево или justify (то есть по формату — ровные границы слева и справа).

Но в этом примере ошибок больше. В том числе №1 (длинный текст в строчке) и №6 (широкая верстка)

 

№8

 

Под этим номером будет не просто ошибка, а нечто невообразимое. 🙂

Сайт Института дизайна и новейших технологий.

«По умолчанию» сайт такого серьезного учебного заведения должен быть самым крутым, самым продвинутым и самым профессиональным.

Но вот посмотрите на результат:

www.idnt-design.ru

 

 

И кстати, можно полюбоваться на это произведение дизайнерского искусства в разных браузерах. Результат будет разным, но каждый раз — впечатляющим.

 

Этот сайт имеет право на существование, если преподаватели:

— обучают на его примере, каким дизайн не должен быть ни в коем случае;

— тестируют студентов на то, сколько они смогут найти ошибок, допущенных при создании сайта. 🙂

 

Палю тему

И на старуху бывает проруха. 🙂

Что в области веб-дизайна означает: если на сайте написано «Мы крутые профессионалы в веб-дизайне», — это совершенно не означает, что на сайте нет грубых ошибок.

регистрация доменов
домен RU - 99 руб
домен РФ - 99 руб
www.

Тут была реклама Google Adsense. Почему я её убрала?

Не забывайте подписываться на rss и/или твиттер блога. Нажимайте на лайки.  Сделала и веду больше 15 сайтов. Точная цифра - всё время меняется. Подробнее - читайте на странице "Мои проекты". DivaDii (ДиваДии)


.

10 комментариев: Так нельзя!

  • Diz9No Gravatar (1 comments):

    Иногда, после того, как исполнитель отдал сайт заказчику, последний может менять как расположение текста, так и другие ключевые моменты верстки и дизайна. Поэтому винить веб студии минимум глупо.

    • DivaDiiNo Gravatar (647 comments):

      Да, согласна.
      Только среди выше приведенных примеров — несколько сайтов вебстудий. 🙂
      И энтот, как его… супер-пупер-институт дизайна. 🙂

      Так вот пост — о грубых ошибках именно на сайтах «профессионалов» в вебдизайне (во всяком случае — они сами себя величают профессионалами).

  • VarErequeharyNo Gravatar (1 comments):

    На сайте alldrawings.ru вы сможете скачать бесплатно чертежи в формате Компас и AutoCAD. Почти все из них можно скачать без регистрации. Некоторые из них встречаются на других сайтах. Большинство же оригинальны, и больше вы их нигде не найдете. База постоянно пополняется и почти каждый день появляются новые проекты. Вы также можете добавить свой чертеж на сайт или заказать выполнение чертежа.
    Сделана удобная навигация по базе с предпросмотром, поэтому вы всегда сможете легко найти интересующий вас проект или техническое решение.
    Чертежи сохранены в программах Компас 10 и Автокад 2007, поэтому рекомендуется использовать для просмотра эти, либо более поздние версии.
    Существует также деление на рабочие и учебные проекты.

    • DivaDiiNo Gravatar (647 comments):

      VarErequehary, С одной стороны, этот Ваш комментарий — это, конечно, явный спам.
      С другой стороны — Ваш сайт вполне полезный.
      Поэтому я слегка подредактировала Ваш коммент, сократила количество внешних ссылок.

      И попутно (воспользуюсь случаем) — покажу несколько ошибок в дизайне и управлении. На примере Вашего сайта.

      1) Небольшая ошибка в дизайне. Неконтрастный, достаточно мелкий шрифт в шапке. Вот эта фраза:

      Любое строительство, любое производство — от шариковой …..

      Серенький шрифт на сереньком фоне — малочитабельно. Явно шрифт надо сделать более тёмным.

      2) У Вас на сайте я несколько раз встретилась со страницей 404 (приблизительно в 50% просмотренных страниц). Вероятно, Вы меняли структуру сайта. Надо с этим что-то делать!

      3) URLы записей лучше делать латиницей. В этом могут помочь специальные плагины для ВордПресса. Например, RusToLat.
      (а я не пользуюсь этим плагином, и просто вручную прописываю нужный урл латиницей).

  • цветы розаNo Gravatar (1 comments):

    Здравствуй! Спасибо за подаренные хорошие эмоции…

    • DivaDiiNo Gravatar (647 comments):

      э-э-эмоции?! О_о
      ну, пожалуйста. 😀
      Я почему-то думала, что в этой статье главное — не эмоции.

  • букетыNo Gravatar (1 comments):

    я бы кое-что добавила, но по сути сказано все

    • DivaDiiNo Gravatar (647 comments):

      Даже по сути можно добавлять ещё довольно много ошибок.

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

      А в статьях — явно просится шрифт побольше. Потому что в том виде, как у Вас сейчас — не очень читабельно.

  • МаздайщикNo Gravatar (26 comments):

    Не согласен с 50 символами. То, что вы не справляетесь с чтением длинных строк, вовсе не значит, что не справляется большинство посетителей сайтов. Строки длиной 100 символов читаются без проблем.

    • DivaDiiNo Gravatar (647 comments):

      Вы будете спорить по поводу типографики и удобочитаемости текстов с библиотекарем-библиографом высшей квалификации и полиграфистом, печатающим книжки уже более 10 лет? 😉

      Вы не крутите головой перед экраном, когда строка длинная?
      У Вас не спрыгивает взгляд при чтении длинных текстов — когда длинные строчки (больше 50-ти символов)?

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

      А почему тексты (документы, приказы…) распечатывают на вертикальных листах, а? По той же причине.

      В принципе, совершенно не играет роли, кто соглашается или кто не соглашается с принципом «короткой строки» на экране монитора. Кому нравится / не нравится узкий дизайн. Есть эргономика «листа», есть определенные параметры читабельности… И дизайн должен им соответствовать. Дизайн сайта, в том числе. Или даже больше, чем при разработке дизайна книги / е-ридера) — чтобы снижать нагрузку на глаза посетителя.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сколько будет? *



DivaDii, aka Надежда Лях на Google+  Вверх
Плюсани!

Интересная тема!

Записи по месяцам:

Подпишись!


Читать Палю Тему в Твиттере




Введите Ваш email-адрес:



с помощью FeedBurner

Рассылки Subscribe.Ru
Лента "Палю тему"

Наш опрос:

Труднее сайт загнать в индекс:

Результаты опроса

Загрузка ... Загрузка ...

Цифирь: