Пользователь
0,0
рейтинг
18 апреля 2009 в 12:01

Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2 перевод

Не забудьте почитать: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1. (или здесь).

А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.

03. Хорошо продуманная типографика


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

Примеры хорошо продуманной типографики


Большие и красивые заголовки на сайте The Netsetter

Заголовки очень важны в веб-дизайне, особенно в дизайне блогов. Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках. Этот тренд имеет ряд положительных последствий — при этом не только выделяются блоки, важные с точки зрения юзабилити, но и создается пространство и определяется структура страницы. Это замечательно иллюстрирует следующий пример с Netsetter — здесь видно, как вокруг заголовка создается много пространства, и, естественно, он очень хорошо читается.

quality_10

Интерлиньяж и разрядка в тексте

Сайт Viget является очень красивым примером того, как важна типографика в веб-дизайне. На примере, приведенном ниже (взято из их портфолио), видно, как использование более крупного шрифта помогает создать свободное пространство. Даже при тонком, хрупком шрифте, который здесь используется, вы можете видеть, сколько пространства создается в этой области страницы. В самом деле, эта шрифтовая гарнитура очень изящна, и это отличный выбор. Еще одна вещь, которая бросается здесь в глаза — это внимание к высоте строки (интерлиньяжу). Расстояние между строками было увеличено по сравнению со значением по умолчанию, чтобы создать больше свободного пространства и сделать текст более удобочитаемым. Эту хитрость вы можете использовать в своей следующей работе.

quality_11

Web Design Ledger — шрифты под настроение

Найти подходящий шрифт можно методом проб и ошибок, а можно выбрать шрифт на основании разных настроений, которые шрифты помогают привнести в дизайн страницы. Например, ресурс Web Design Ledger, обладая довольно невзрачным ретро-дизайном, при этом создает ощущение открытости и современности, так что выбор шрифта, вызывающего сходные эмоции, может стать залогом успеха сайта. Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia, который очень хорошо соответствует «потертому» виду сайта. Современное звучание сайту придает еще один шрифт, в корне отличный от шрифта заголовков — основное содержание страницы напечатано шрифтом Helvetica, гарнитурой без засечек с очень плавными и открытыми очертаниями. Выбор гарнитуры в этом примере был очень разумным и, по сути, помог задать настроение всего сайта. quality_12

Краткий список требований по типографике в веб-дизайне

Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта??
  • Текст читается?
    Не бойтесь придавать заголовкам крупное и жирное начертание.
  • А вы подумали о разрядке?
    Хорошая разрядка сильно улучшает читаемость текста.
  • Соответствуют ли ваши шрифты настроению?
    Убедитесь, что шрифт дополняет дизайнерскую идею.

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

04. Организация элементов


Дизайнерская деятельность многим кажется привлекательной из-за ее творческой составляющей, да и скучать тут, безусловно, не приходится. Сейчас я знаю, что слово «организация» звучит совсем не творчески и не весело, но если у вас сформируется привычка к хорошей организации, все будет не так уныло, как кажется на первый взгляд. Организация элементов веб-страницы всегда происходит по-разному, зависит от типа сайта и от того, насколько конкретные элементы важны для его содержания.

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

Дизайн коммерческого сайта: 37 signals

Глядя на популярный сайт 37 signals, легко заметить, что их продукция продается так хорошо неспроста. Создатели сайта сделали все возможное, чтобы вы увидели, что они продают, и помочь вам принять решение о покупке. Тут есть все, что требуется от сайта, предназначенного для продаж.

На картинке примера видно, что сайт обладает 4 ключевыми характеристиками, которые делают его идеальным для совершения покупок. Внимание привлекает первая деталь: они сделали очень темный блок с кратким содержанием и крупными заголовками, набранными жирным кеглем. Затем, они возбуждают интерес покупателя, перечисляя некоторые преимущества каждого продукта с симпатичной иллюстрацией. Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями, даже приводится несколько видеороликов из серии «Нашим покупателям есть что сказать». И последняя характеристика — это динамичность. На сайте 37Signals имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.

quality_13

Дизайн ради содержимого (блог): Well Medicated

Создание дизайна блога — это совсем другая сказка. Вам нет нужды тратить время на убеждение и переубеждение пользователей относительно продукции, ваша «продукция» уже на виду, ваш контент — вот ваша продукция. Сделайте так, чтобы пользователям было удобно просматривать и читать ваши записи, а также писать вам или в ваш блог.

Содержимое должно быть главной или одной из главных вещей, которые есть в блоге. В данном примере симпатичный розовый заголовок в жирном начертании привлекает внимание прямо к контенту. Тут есть хорошего размера картинка для предварительного просмотра и добрых 2/3 абзаца текста, за которым следует ссылка «Читать дальше». Также имеется стандартная информация о том, когда и кем была сделана запись. По мне, это один из самых лучших примеров того, что я назвал бы качественным «дизайном ради содержимого». Внимание может быть привлечено ко всему, что вызывает интерес, здесь в фокусе находятся приятные крупные иконки оформления подписки, которые помогают пользователям следить за записями в вашем блоге. Кроме того, это несомненно увеличит количество подписчиков, так что этот прием работает на двух уровнях. Очень просто призвать пользователей просматривать другие разделы блога — для этого можно использовать все, от вкладки «недавние записи» или вывода популярных тем в боковое меню до организации выпадающих меню или простых и эффективных списков. Это легко осуществимо, но очень эффективно, особенно в блоге. Блоги обычно касаются личных вопросов, поэтому дать посетителям возможность связаться с вами различными способами будет очень полезно и поощрит людей узнать вас поближе и посетить ваш блог снова.

quality_14

Советы по организации вашего контента


Конечно, бывает так, что приходится делать все иначе и ломать стандарты. Но есть несколько простых советов, которым вы можете следовать для создания прозрачной структуры и упорядоченного дизайна.
  • Какую цель преследует дизайн?
    Как мы показали выше, определите цель вашего дизайна.
  • Проектируйте с использованием сетки направляющих
    Сетка позволит выжать максимум из имеющегося пространства.
  • Испытайте на себе расположение элементов
    Побудьте на месте посетителя, легко ли пользоваться сайтом?
  • Удалите ненужные элементы
    Все, что неважно, следует удалить или убрать подальше.
  • Баланс внимания
    Некоторые вещи должны быть оформлены просто, чтобы акцентировать внимание на других.

Читайте в следующей статье: «Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3.» и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.
Перевод: Liam
Ольга @habratchanka
карма
91,6
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (24)

  • НЛО прилетело и опубликовало эту надпись здесь
    • –2
      переводы это всегда хорошо
      но вот полный текст (http://wefunction.com/2009/04/quality-within-web-design/)
      пс: автор не понимаю, зачем дробить материал на столько частей?
      имхо: хабрачитатель справиться и за раз с усвоением подобного материала
      • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        чтобы потом не было комментов «многа букофф, не осилил» ;)

        материал осваивается лучше, если его «принимать» по частям.
  • 0
    Приведены образчики дизайна. Между прочим, к вчерашнему обсуждению, ссылки НИГДЕ не подчеркнуты!
    • 0
      Не совсем поняла. О каких ссылках речь?
      • 0
        Да это я бубню на тему вчерашнего голосования о необходимости подчеркивать ссылки… habrahabr.ru/blogs/web_design/57491/
        • 0
          ну если внимательнее полазиете по приведенным сайтам, ссылки там подчеркнуты ;)
          • 0
            я имею ввиду не все подряд, а которые дейтсвительно интуитивно не понятны, что эта ссылки, если бы они не были подчеркнуты
          • +1
            Согласен, поправлюсь: «кое-где подчеркнуты, а в основном выделение цветом и пр.». Собственно, это как раз тот вариант, которого я придерживаюсь.
  • 0
    Опять спасибо, прямо вчера прочитав первую часть, бросился править сайт :)
  • +2
    Ух ты-ы-ы! Стрелочки-плашки стали ещё качественнее! Теперь с клёвой полупрозрачностью!


    Первая часть статьи уже давно на слуху (кроме разве что шрифтонастроений), а вот компоновка была интересна. Сами примеры ещё хорошие, вдохновляют.
  • +1
    Подредактируйте, пожалуйста текст.
    Есть повторы вроде «приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов. имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.»
    • +1
      Спасибо, исправила.
  • 0
    Спасибо за перевод!

    Вообще многим вебдизайнерам надо посоветовать изучать типографику и особенно вчитываться в Рудера.
  • +1
    Замечательнейшая статья. Спасибо большое за перевод. Первая часть тоже очень понравилась. По мотивам статьи я вдохновился написать небольшой мануальчик по рисованию этих самых пиксельных плашек. Не уверен только будет ли это востребовано. Если есть кто-то кого это заинтересует пожалуйста отпишитесь и завтра я напишу статейку. Автору ещё раз спасибо за перевод.
  • +7
    Весьма интересная в оригинале статья здесь несколько подпорчена неуклюжим переводом и путаницей в профессиональной терминологии. Позволю себе указать на основные ошибки переводчика:

    Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках.
    — Начертание не может быть крупным, это свойство применимо к терминам «кегль» и (с некоторой натяжкой) и «шрифт». Автор оригинального текста совершенно справедливо употребил второй термин, font, а вовсе не typeface, как можно было бы подумать, прочитав ваш перевод.

    — Также нельзя не отметить, что принятое в англосаксонской типографской традиции обозначение степени насыщенности начертания bold соответствует в отечественной типографике полужирному.

    Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia
    — Выделенный англоязычный типографский термин соответствует нашей классицистической или новой антикве.

    использование более крупного шрифта помогает создать свободное пространство
    — В оригинале автор пишет о том, что такой шрифт помогает создавать и расширять свободное пространство. В полиграфии словом space в аналогичном контексте обычно называют незапечатываемые области, или, иными словами, то самое свободное пространство (на экране).

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

    — Дополнительно подчеркну, что упомянутая далее «высота строки» не является общепринятым термином и ошибочно используется веб-верстальщиками как простая калька с англоязычного наименования соответствующего css-свойства. В данном случае рекомендуется использовать термин «интерлиньяж».

    Не бойтесь придавать заголовкам крупное и жирное начертание.
    — Заголовкам нельзя придать начертание, их можно набрать крупным кеглем и жирным шрифтом. В отношении термина «шрифт» не будет ошибочным употреблять характеристику «жирный».

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

    Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями...
    — Здесь testimonials принимает значения «рекомендации». Аналогичные огрехи перевода нескоько раз встречаются в тексте.

    Проектируйте с использованием сетки направляющих.
    — Здесь имеется ввиду модульная сетка, на основе которой строится макет. Направляющие — это элементы интерфейса графического редактора или издательского пакета.

    Спасибо за внимание.
    • +3
      ну хоть кто то отреагировал на оригинал (+1)
  • 0
    И все таки, дизайн — это искусство!!!
    Как мне кажется искусство не описать технически, это надо либо видеть, либо не заниматься этим!!!
    Можно прочитать тысячу таких статей, а толку будет 0!!!
    • 0
      Как нет крылатых животных без ног, так нет и настоящего искусства без техники.
  • 0
    Спасибо, очень интересный материал… И примеры подобранны очень качественно… и переводите вы хорошо :)
  • 0
    Спасибо, материалы о веб-типографике всегда интересны!
  • 0
    Добавлю свою копеечку в копилку огрехов перевода.

    Речь идет о блоке «Дизайн коммерческого сайта: 37 signals», в оригинале автор указывает четыре классических составляющих рекламной коммуникации, соответствующих модели поведения потребителя: Attention — Interest — Desire — Action (AIDA). Последний пункт имеет смысл «действие», то есть сообщение должно заканчиваться позывом к действию («Позвоните прямо сейчас!», «Закажите бесплатный каталог!», «Сделайте заказ в течение ближайшего часа и получите бонус!»).
    http://en.wikipedia.org/wiki/AIDA_(marketing)

    В приведенном примере автор, конечно же, говорит об элементах дизайна, призванных заставить посетителя совершить дополнительное действие: «Подпишитесь на нашу рассылку новостей!», «Зайдите в наш блог!»
    Приведенный вами перевод «динамические элементы» не верен. Скорее всего, вас сбила с толку приведенная автором иллюстрация, на ней действительно расположен совершенно не тот элемент, который призывает к непосредственному действию.
    Вот более правильный, на мой взгляд, перевод фрагмента текста:
    И последняя характеристика — Действие; на сайте 37Signals размещены несколько различных точек призыва к действию. Приятно отметить, что поскольку страница достаточно велика по высоте, они разместили несколько точек действия в подвале страницы.


    И еще один момент — в следующем блоке «Дизайн ради содержимого (блог): Well Medicated» лично мне очень режет глаз термин Содержимое вместо Содержание (Content).

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.