Не забудьте почитать: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1. (или здесь).
А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.
Хотя реальные тексты для сайта будет писать не дизайнер, они играют такую же важную роль, как и общее качество контента. Дизайнер должен потрудиться, чтобы тексты легко читались и удерживали внимание. Существует множество способов сделать текст легко читаемым и приятным глазу. По мере перечисления правил и норм того, что следует и чего не следует делать, я приведу несколько примеров сайтов, где рациональная типографика действительно работает.
Большие и красивые заголовки на сайте The Netsetter
Заголовки очень важны в веб-дизайне, особенно в дизайне блогов. Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках. Этот тренд имеет ряд положительных последствий — при этом не только выделяются блоки, важные с точки зрения юзабилити, но и создается пространство и определяется структура страницы. Это замечательно иллюстрирует следующий пример с Netsetter — здесь видно, как вокруг заголовка создается много пространства, и, естественно, он очень хорошо читается.
Интерлиньяж и разрядка в тексте
Сайт Viget является очень красивым примером того, как важна типографика в веб-дизайне. На примере, приведенном ниже (взято из их портфолио), видно, как использование более крупного шрифта помогает создать свободное пространство. Даже при тонком, хрупком шрифте, который здесь используется, вы можете видеть, сколько пространства создается в этой области страницы. В самом деле, эта шрифтовая гарнитура очень изящна, и это отличный выбор. Еще одна вещь, которая бросается здесь в глаза — это внимание к высоте строки (интерлиньяжу). Расстояние между строками было увеличено по сравнению со значением по умолчанию, чтобы создать больше свободного пространства и сделать текст более удобочитаемым. Эту хитрость вы можете использовать в своей следующей работе.
Web Design Ledger — шрифты под настроение
Найти подходящий шрифт можно методом проб и ошибок, а можно выбрать шрифт на основании разных настроений, которые шрифты помогают привнести в дизайн страницы. Например, ресурс Web Design Ledger, обладая довольно невзрачным ретро-дизайном, при этом создает ощущение открытости и современности, так что выбор шрифта, вызывающего сходные эмоции, может стать залогом успеха сайта. Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia, который очень хорошо соответствует «потертому» виду сайта. Современное звучание сайту придает еще один шрифт, в корне отличный от шрифта заголовков — основное содержание страницы напечатано шрифтом Helvetica, гарнитурой без засечек с очень плавными и открытыми очертаниями. Выбор гарнитуры в этом примере был очень разумным и, по сути, помог задать настроение всего сайта.
Краткий список требований по типографике в веб-дизайне
Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта??
Тут можно дать еще тысячу советов, но я не считаю себя экспертом в это области, я всего лишь научился ценить эффект хорошей типографики. Если вы хотите узнать о предмете больше и увидеть еще лучшие примеры, я настоятельно рекомендую почитать соответствующую статью в Smashing Magazine.
Дизайнерская деятельность многим кажется привлекательной из-за ее творческой составляющей, да и скучать тут, безусловно, не приходится. Сейчас я знаю, что слово «организация» звучит совсем не творчески и не весело, но если у вас сформируется привычка к хорошей организации, все будет не так уныло, как кажется на первый взгляд. Организация элементов веб-страницы всегда происходит по-разному, зависит от типа сайта и от того, насколько конкретные элементы важны для его содержания.
Несмотря на то, что размещение элементов контента варьируется от случая к случаю, есть несколько приемов, помогающих значительно облегчить эту задачу. Во-первых, нужно решить, какую цель преследует данный дизайн. Например, вы создаете сайт, призванный повысить продажи, либо наполненный какой-либо информацией, либо создаете службу подписки или каталог ссылок и т.п.
Дизайн коммерческого сайта: 37 signals
Глядя на популярный сайт 37 signals, легко заметить, что их продукция продается так хорошо неспроста. Создатели сайта сделали все возможное, чтобы вы увидели, что они продают, и помочь вам принять решение о покупке. Тут есть все, что требуется от сайта, предназначенного для продаж.
На картинке примера видно, что сайт обладает 4 ключевыми характеристиками, которые делают его идеальным для совершения покупок. Внимание привлекает первая деталь: они сделали очень темный блок с кратким содержанием и крупными заголовками, набранными жирным кеглем. Затем, они возбуждают интерес покупателя, перечисляя некоторые преимущества каждого продукта с симпатичной иллюстрацией. Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями, даже приводится несколько видеороликов из серии «Нашим покупателям есть что сказать». И последняя характеристика — это динамичность. На сайте 37Signals имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.
Дизайн ради содержимого (блог): Well Medicated
Создание дизайна блога — это совсем другая сказка. Вам нет нужды тратить время на убеждение и переубеждение пользователей относительно продукции, ваша «продукция» уже на виду, ваш контент — вот ваша продукция. Сделайте так, чтобы пользователям было удобно просматривать и читать ваши записи, а также писать вам или в ваш блог.
Содержимое должно быть главной или одной из главных вещей, которые есть в блоге. В данном примере симпатичный розовый заголовок в жирном начертании привлекает внимание прямо к контенту. Тут есть хорошего размера картинка для предварительного просмотра и добрых 2/3 абзаца текста, за которым следует ссылка «Читать дальше». Также имеется стандартная информация о том, когда и кем была сделана запись. По мне, это один из самых лучших примеров того, что я назвал бы качественным «дизайном ради содержимого». Внимание может быть привлечено ко всему, что вызывает интерес, здесь в фокусе находятся приятные крупные иконки оформления подписки, которые помогают пользователям следить за записями в вашем блоге. Кроме того, это несомненно увеличит количество подписчиков, так что этот прием работает на двух уровнях. Очень просто призвать пользователей просматривать другие разделы блога — для этого можно использовать все, от вкладки «недавние записи» или вывода популярных тем в боковое меню до организации выпадающих меню или простых и эффективных списков. Это легко осуществимо, но очень эффективно, особенно в блоге. Блоги обычно касаются личных вопросов, поэтому дать посетителям возможность связаться с вами различными способами будет очень полезно и поощрит людей узнать вас поближе и посетить ваш блог снова.
Конечно, бывает так, что приходится делать все иначе и ломать стандарты. Но есть несколько простых советов, которым вы можете следовать для создания прозрачной структуры и упорядоченного дизайна.
Читайте в следующей статье: «Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3.» и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.
А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.
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.» и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.
