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

Приведены образчики дизайна. Между прочим, к вчерашнему обсуждению, ссылки НИГДЕ не подчеркнуты!

Опять спасибо, прямо вчера прочитав первую часть, бросился править сайт :)

Ух ты-ы-ы! Стрелочки-плашки стали ещё качественнее! Теперь с клёвой полупрозрачностью!


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

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

Спасибо за перевод!

Вообще многим вебдизайнерам надо посоветовать изучать типографику и особенно вчитываться в Рудера.

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

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

Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках.

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

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

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

— Выделенный англоязычный типографский термин соответствует нашей классицистической или новой антикве.

использование более крупного шрифта помогает создать свободное пространство

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

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

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

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

Не бойтесь придавать заголовкам крупное и жирное начертание.

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

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

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

Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями...

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

Проектируйте с использованием сетки направляющих.

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

Спасибо за внимание.

И все таки, дизайн — это искусство!!!
Как мне кажется искусство не описать технически, это надо либо видеть, либо не заниматься этим!!!
Можно прочитать тысячу таких статей, а толку будет 0!!!

Спасибо, очень интересный материал… И примеры подобранны очень качественно… и переводите вы хорошо :)

Спасибо, материалы о веб-типографике всегда интересны!

Добавлю свою копеечку в копилку огрехов перевода.

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

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

И последняя характеристика — Действие; на сайте 37Signals размещены несколько различных точек призыва к действию. Приятно отметить, что поскольку страница достаточно велика по высоте, они разместили несколько точек действия в подвале страницы.

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