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

Спонсор месяца: Бухгалтер в собственном штате стоит дорого. Логос-Аудит - ведение бухучета для малого и среднего бизнеса

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

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

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

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

Спонсор месяца:
Учимся заробатывать в сети или еще один SEO блог

---

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

Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога

Многие люди склонны описывать предоставляемые ими услуги по веб-дизайну как «качественные». Но что означает здесь слово «качество», как определить, является дизайн качественным или нет? Что ж, я вижу несколько способов определить качество применительно к сфере веб-дизайна. Ведь если однажды определить, что позволяет создавать качественный веб-дизайн, можно использовать эти же приемы для оттачивания собственного стиля.

Чтобы объяснить, как я понимаю качество в дизайне веб-сайтов, я собрал несколько рекомендаций и примеров.

01. Расстояние между объектами на странице

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

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

Примеры удачного расположения элементов

Отличное расположение элементов на сайте Good.is

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

Очень удачные расстояния между элементами на сайте Digital Mash

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

Масса свободного места на сайте Creatica Daily

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

Много пространства на сайте Postbox

Если взглянуть на сайт Postbox повнимательнее, можно заметить, какие отступы тут сделаны по краям - на самом деле они по 60 пикселей. Казалось бы, это многовато, но в действии выглядит просто отлично.

Неправильные расстояния между объектами

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

Пример недостаточных расстояний между объектами

В предыдущем разделе мы показали, какие удачные отступы сделаны на сайте PostBox, а ниже мы сами сделали его имитацию, чтобы показать, как бы он выглядел с недостаточными расстояниями между объектами. Теперь вы можете видеть, как сильно неправильное расположение объектов может испортить дизайн. В таком случае веб-страница сильно проигрывает, и ощущение качества пропадает.

Советы по правильному расположению объектов

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

• Использование в дизайне сетки с направляющими линиями
  Использование сетки определенно помогает понять всю важность расстояний между объектами.
• Пытаться снова и снова
  Методом проб и ошибок вы сможете определить, какими должны быть отступы.
• Свободное пространство - не значит потраченное впустую
  Если у вас на странице есть пустое пространство, вовсе необязательно, что его нужно заполнять.
• Лучше меньше, да лучше
  Чем пытаться вместить на страницу побольше, сделайте на ней поменьше содержания, добавьте свободного места и размещайте только жизненно важную информацию.

02. Совершенство до последнего пикселя

Когда дизайн “довели до ума”, это видно сразу. Иногда все зависит от мельчайших деталей, которых многие могут даже не заметить. «Совершенством до последнего пикселя» я называю метод, когда пристальное внимание уделяется линиям, краям и границам. Можно вставить просто линию, а можно добавить небольшие детали, будь то легкие градиенты, простая тень шириной в 1 пиксель или блик - и ваша работа действительно будет выделяться. Некоторые дизайнеры, известные таким подходом: Коллис Таед (Collis Ta’eed), Дэвид Леггетт (David Leggett) и Вольфганг Бартелме (Wolfgang Bartelme).

Примеры «совершенства до пикселя»

Внимание к деталям на сайте Envato

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

Внимание к деталям на сайте Tutorial9.net

Дэвид Леггетт знает толк в сглаживании пикселей. Его недавний редизайн сайта tutorial9.net - это смешение множества методов сглаживания пикселей. В Примере 1 вы можете видеть, как он сделал, чтобы вкладки выглядели чуть более гладкими, всего лишь добавив наверх простой 1-пиксельный блик. В Примере 2 использован ряд методов. Падающая тень на иконке фотоаппарата, использование светотени на белом участке, 1-пиксельный блик наверху панели навигации.

Совершенные до пикселя кнопки и разделители на сайте RedBrick Health

Красивая панель навигации, созданная Райаном Шерфом (Ryan Scherf) - это еще один пример использования пиксельного совершенства для создания качественного веб-дизайна. У розовой кнопки сделан 1-пиксельный блик, а разделительные линии между ссылками проработаны так же качественно и детально: как вы можете видеть, вместо того, чтобы использовать просто серые линии-разделители, Райан добавил вниз 1-пиксельные блики, чтобы все не выглядело плоским и двумерным.

Пиксельное совершенство не чуждо и гранжу: сайт AvalonStar

А вот прекрасный AvalonStar: безбашенный блог, оформленный в стиле гранж. Но даже в неопрятном гранжевом дизайне блики шириной в 1 пиксель выглядят эффектно. Если вы посмотрите на Пример 1, вы увидите, как градиентная тень используется на коричневой верхней панели, а у расположенного ниже зеленого блока, имеется 1-пиксельный блик сверху. Из-за сочетания темного тона вверху и блика шириной в 1 пиксель блоки выглядят слегка блестящими.

Советы по совершенству деталей в дизайне

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

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Не используйте @import

Вольный перевод статьи don't use @import
Автор: Steve Souders

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

LINK vs. @import

Существует 2 способа загрузки файлов стилей. Использовать тег LINK:

<link rel='stylesheet' href='a.css'>

Или импортировать файлы с помощью @import:

<style> @import url('a.css'); </style> 

Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что @import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.

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

@import @import

Я хочу рассказать о различных способах использования LINK и @import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется @import для загрузки обоих файлов стилей. В этом примере, называемом @import @import, HTML документ содержит следующий блок стилей:

<style> @import url('a.css'); @import url('b.css'); </style> 

Если вы всегда будете использовать только @import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать @import внутри файла стилей, либо вместе с LINK.

Рис. 1.

LINK @import

В примере LINK @import используется тег LINK для загрузки a.css, и @import для b.css:

<link rel='stylesheet' type='text/css' href='a.css'> <style> @import url('b.css'); </style> 

В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.

Рис. 2

LINK с @import

В примере LINK с @import, файл  a.css загружается через LINK, и содержит внутри правило @import для b.css:
В документе:

<link rel='stylesheet' type='text/css' href='a.css'> 

в a.css:

@import url('b.css'); 

Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать - все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило @import, начинается загрузка файла b.css.

Рис. 3.

Блоки LINK с @import

Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только @import для b.css.
В коде:

<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'> 

В proxy.css:

@import url('b.css'); 

Результаты эксперимента в IE показаны на рисунке 4. Первый запрос - HTML документ. Второй запрос -  a.css (2 секунды). Третий - proxy.css. Четвертый - b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).

Рис. 4. Результаты в IE.

Рис. 5. Результаты в других браузерах.

Много @imports

Использование сразу нескольких правил @import в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).

<style> @import url('a.css'); @import url('b.css'); @import url('c.css'); @import url('d.css'); @import url('e.css'); @import url('f.css'); </style> <script src='one.js' type='text/javascript'></script> 

На рис. 6 вы увидите, что самый долгий по загрузке - это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.

Рис. 6.

LINK LINK

Проще и безопасней использовать LINK для загрузки стилей:

<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'> 

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

Рис. 7.

Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил @import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование @import и загружать стили только с помощью LINK.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru