Оригинал сообщения
Комментарии: [показать]

Спонсор месяца:

Бухгалтер в штате стоит недешево! Логос-Аудит - бухгалтерское сопровождение предприятий для тех, кто понимает.

---

Перевод статьи How to Spot Quality within Web Design: Examples & Tips

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

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

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

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

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

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

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

[490x360]

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

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

[490x360]

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

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

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

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

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


• А вы подумали о разрядке?
  
  Хорошая разрядка сильно улучшает читаемость текста.


• Соответствуют ли ваши шрифты настроению?
  
  Убедитесь, что шрифт дополняет дизайнерскую идею.

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

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

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

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

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

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

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

[490x725]

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

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

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

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

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

• Какую цель преследует дизайн?
  
  Как мы показали выше, определите цель вашего дизайна.


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


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


• Удалите ненужные элементы
  
  Все, что неважно, следует удалить или убрать подальше.


• Баланс внимания
  
  Некоторые вещи должны быть оформлены просто, чтобы акцентировать внимание на других.

Читайте в следующей статье: “Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3.” и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.

[показать]LIci WP - WordPress crossposting plugin