14 красивых сайтов с объемным контентом

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

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

Вот несколько инструментов и принципов, которые должны быть на вооружении у каждого дизайнера. Их можно использовать при создании богатого контентом сайта:

Белое пространство - позволяет содержимому (и глазам ваших посетителей) дышать.
Скобки, границы и графические плоскости. Сегментирование информации в визуальные категории.
Интуитивно понятный метод поиска. Позвольте своим пользователям сразу перейти к информации, которая им нужна.
Сетки. Хотя это не всегда необходимо для понимания, хранение содержимого в жесткой, согласованной структуре помогает уменьшить усилия, необходимые для его обработки.
Сильная иерархия информации. Создание согласованного языка дизайна с использованием типов контента (рекламные ролики, выдержки, призывы к действиям).
Визуальная иерархия. Относительная значимость различных областей и элементов контента может быть визуально намечена разными способами: от типографских обработок (заголовки, подзаголовки, кавычки и т. д.) До размеров и насыщенности изображений, размещения и т. д.

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

POLYGON

Что это?

Polygon - это сайт для просмотра видеоигр от основателей проекта гаджетов-энтузиастов The Verge.

Почему нам это нравится?

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

THE VERGE

Что это?

Как новичок в блоке, который населяют такие гиганты, как Gizmodo и Engadget, The Verge принимает новый, смелый подход к освещению широкого мира технологий.

Почему нам это нравится?

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

CONDE NAST

Что это?

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

Почему нам это нравится?

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

BLIK

Что это?

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

Почему нам это нравится?

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

USA TODAY

Что это?

Как крупнейшее газетное издательство в США, USA Today знает кое-что о том, как разместить большой объем информации в ограниченном пространстве.

Почему нам это нравится?

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

THE NEW YORKER

Что это?

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

Почему нам это нравится?

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

AIGA

Что это?

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

Почему нам это нравится?

Сеточный стиль. Размер сетки каждой статьи пропорционален количеству информации, содержащейся в ней, что дает посетителям мгновенное визуальное представление о важности и времени.
Консистенция. Несмотря на то, что в ее образах присутствуют различные стили дизайна, типография и цветовые схемы, фактический сайт сохраняет прочную согласованность с точки зрения того, как он отображает заголовки, содержание статьи и т. д.
Сильная иерархия информации. Каждая статья предлагает ту же структуру Title / Subtitle / Excerpt. Статьи особой важности остаются полностью насыщенными, а не второстепенными, кои являются более приглушенными, и оживают только при наведении.
Кнопки. Непрямоугольные кнопки акцентируют этот макет, заметный в силу их формы. Эти призывы к действию красиво оформлены и выделяются достаточно, чтобы привлечь внимание.

A LIST APART

Что это?

Одна из де-факто библий проектирования для Интернета, A List Apart публикует ежедневные, заставляющие задуматься статьи о мельчайших точках нашего ремесла. Это глубокий, продуманный материал, поэтому полезный интерфейс и приятный опыт чтения имеют первостепенное значение.

Почему нам это нравится?

Чистая и простая типография - дизайн ALA хорошо известен в сообществе веб-дизайнеров, чтобы получить микроскопическое внимание к деталям, когда дело доходит до типографии на сайте. Каждая строка, заголовок и цитата бережно и сознательно приспособлены для идеальной читаемости.
Дисциплинированное редактирование. Несмотря на длину статей ALA, вы заметите, что не существует чрезмерно длинных разделов контента. Каждое сообщение было тщательно разбито на легко усваиваемые параграфы по 2-3 предложения каждый.

THE BLACK HARBOR

Что это?

Витрина искусства, охватывающая разновидность стилей из коллективного творчества художника: I Shot Him Because I Loved Him, Damn Him.

Почему нам это нравится?

Жесткая сетка. Каждая статья представлена на домашней странице с помощью фотографии умеренного размера, представленной в виде чистой сетки, чтобы предотвратить визуальную путаницу, учитывая разнообразие цветов, стилей и предметов.
Раскрытие контента. Простое отображение описаний и подзаголовков каждого изображения под ними добавляет контента. Вместо этого The Black Harbor раскрывает эту информацию только как оверлей, когда пользователь проявляет интерес, зависая над изображением. Кроме того, когда пользователи попадают в нижнюю часть главной страницы, им предоставляется возможность раскрыть больше контента.

EBONY

Что это?

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

Почему нам это нравится?

Гигантские изображения. Как и отличный пример Polygon, Ebony использует яркие и большие изображения, чтобы не только установить тон, но и дать пользователям сильные впечатления от самых важных статей на их домашней странице. Их слайдер на домашней странице занимает большую часть экрана на ноутбуках и более низких разрешениях.
Смелая типографская иерархия - шрифт подписи под заголовком Ebony, Didoni, служит для вызова основных статей на сайте в настоящий момент со вторичными историями, озаглавленными «Trade Gothic».

WIRED

Что это?

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

Почему нам это нравится?

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

BOSTON GLOBE

Что это?

Эта широко известная газета привлекла внимание Сети в прошлом году, когда они выкатили крупный ре дизайн сайта - один из первых основных сайтов, охватывающих отзывчивые методы проектирования.

Почему нам это нравится?

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

CO.DESIGN

Что это?

Блог разработчиков Fast Company демонстрирует все последние достижения в мире товара и графического дизайна. Излишне говорить, что в эти дни многое происходит в этих областях …

Почему нам это нравится?

Огромные изображения. Каждая статья сопровождается по-настоящему большим изображением, которое позволяет читателю недвусмысленно узнать, что они собираются прочитать.
Встроенные слайдеры. Многие статьи Co.Design открываются с помощью слайдера изображения, содержащего ключевые изображения из статьи. Они служат отличным визуальным вступлением для текста, который должен следовать, и заставляют читателя подготовиться к теме статьи.

Think Quarterly by Google

Что это?

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

Почему нам это нравится?

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

Заключение

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

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

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

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

Создание пользовательских блок-схем - Диаграмма прохождения различных групп посетителей через сайт. Испытайте себя, как Вы разрабатываете, чтобы ответить на общие вопросы, или подумайте о том, как выполнить типичные задачи, которые могут возникнуть у нового посетителя в рамках предлагаемой структуры сайта и макетов страниц.

Читайте, как другие планируют и создают хорошие, насыщенные контентом сайты:

Один дополнительный пиксель - Планирование веб-дизайна, насыщенного содержанием
Создание Интернета - Как спланировать насыщенный контентом сайт
Информационные архитекторы - Улучшение цифрового чтения
Spoonfed Design - 10 удобных советов для хороших, насыщенных контентом веб-дизайнов
Hongkiat - проектирование макетов с интенсивным контентом и примеры