Основные правила дизайна новостных веб-сайтов

Веб дизайн 6 289 просмотров 1 0
Основные правила дизайна новостных веб-сайтов

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

Тренды

1. Цветовые гаммы

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

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

The L.A. Times является отличным примером стандартной цветовой схемы.

lacolors1

2. Шапка и боковые баннеры

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

Если блоги обычно используют баннеры 125 на 125 пикселей, то новостные сайты обычно тратят на баннер 300 на 250 пикселей или же используют длинные боковые баннеры.

Telegraph, к примеру, отводит 730 на 90 пикселей на баннер в области шапки.

teleheader

3. Верхняя навигация

Хоть здесь и есть несколько исключений, но в большинстве своем новостные сайты используют место сразу под шапкой для основного навигационного меню. The New York Times и MSNBC — яркие примеры исключений из этого правила, они оба используют левую боковую панель для меню навигации.

А вот Times Online использует двойную панель навигации.

times

4. Области со вкладками контента

Многие новостные веб-сайты используют вкладки с контентом, которые позволяют посетителям видеть популярные статьи, недавние статьи и так далее. Для таких вкладок иногда отводится место на боковой панели, иногда — в области с основным контентом, как на Wired. Это позволяет дать пользователям больше контроля над тем контентом, который они хотят видеть. Также это может сэкономить пространство.

wired

5. Обложки, основанные на сетке

Такое сайты обычно строятся с помощью сеток. Такой дизайн популярен не только из-за четкого и строгого вида, но и из-за того, что так удобнее всего управлять контентом и организовывать его. У The New York Times самая лучшая обложка, основанная на сетке.

nytimes

Различия между блогами и новостными сайтами

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

Интеграция с соцмедиа

Социальные виджеты или кнопки на блогах довольно часто встречаются. Новостные же сайты не используют социальные кнопки везде, где только можно. Вы часто встретите кнопку «Поделиться» на таки сайтах, как на ABC News. Но встретить кнопку, с помощью которой можно поучаствовать в голосовании, интегрированным с соцсетями, довольно сложно.

Конечно, новостные веб-сайты не отрицают важность соцмедиа, но они и не перебарщивают с использованием социальных сетей. Довольно часто вы можете встретить кнопку «digg it», как на Huffington Post.

huff

RSS фид

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

gfeed

Комментарии

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

ABC News — один из редко попадающихся примеров новостных веб-сайтов, которые показывают количество комментариев.

abc

Примеры лучших новостных сайтов

The Onion

Сатиричный новостной сайт основан на сеточном дизайне, который помогает эффективно использовать место. На сайте происходит очень много активностей. Главная навигационная панель разделяет контент на темы.

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

onion

New York Times

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

Дизайн веб-сайта состоит из приятных синих и черных заголовков и ссылок, с небольшим добавлением красного в некоторых местах.

nytimes-large

Chicago Tribune

Этот сайт использует только маленький баннер на шапке главной страницы. Также баннеры есть на страницах статей.

Стиль очень похож на NY Times, повторяется использование синего для ссылок и заголовков и немного красного для других элементов.

tribune

Times Online

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

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

timesonline

Главное фото взято с сайта Depositphotos

Больше по веб-дизайну:

20 шагов к созданию идеального веб-сайта

Свежая подборка бесплатных материалов для веб-дизайнеров в 2015 году

10 малоизвестных факторов, которые влияют на конверсию

comments powered by HyperComments
comments powered by HyperComments

Теги

Об авторе: Ольга

Ольга

Главред @ Say-Hi.

Мы Вконтакте

Яндекс.Метрика