Подходы к дизайну веб-сайтов издателей

Что такое «веб-сайт цифрового издателя»? Это веб-сайт, который ежедневно публикует множество статей. Это уровень выше «блога». По сути, это новостной сайт или вирусная издательская платформа, такая как BuzzFeed.

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

Что отличает веб-сайт издателя от других?

Есть два основных различия между веб-сайтом издателя и более обычным веб-сайтом.

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

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

Зная это, вероятно, очевидно, что доход веб-сайта издателя исходит от самого сайта. Как? Объявления! Именно поэтому Google или Facebook генерируют большую часть своего дохода.

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

С точки зрения дизайна, это главный приоритет веб-сайтов издателей и журналов.

Создание сайтов с большим количеством контента

Давайте посмотрим на некоторых крупных издателей, таких как Variety:

Первое, что видишь, - это большое объявление вверху. Мы рассмотрим это подробнее через секунду, перед этим - макет контента. Большой заголовок со множеством ссылок - гамбургер сверху, поиск, призыв к действию и еще несколько пунктов меню. Цель состоит в том, чтобы обеспечить легкий доступ ко всем категориям контента. Это резко контрастирует со многими бизнес-сайтами, имеющими менее 10 страниц (исключая страницы блогов).

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

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

Это тип макетов, которым вы в основном будете следовать с более крупными издателями.

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

Существует больше «рейтингов», таких как 1, 2, 3 в разделе «Тенденции» справа, ярко-красная метка «Последние новости» и так далее. Одна из основных тенденций в подобном дизайне - привлечь внимание пользователя. Однако это внимание должно быть хорошо направлено, так как вы не хотите разделять его между двумя одинаково важными предметами.

Вот пример неправильного подхода, когда все пытается быть наверху:

Мы хорошо понимаем, что цель совершенно иная, и сайт выше может действительно приносить хорошую прибыль, но он хорошо иллюстрирует принцип «все пытается привлечь ваше внимание».

Цифровые издатели и реклама

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

Примеры этого - размеры объявлений. Есть 300 × 250, 300 × 600, есть 728 × 90, а также 300 × 50.

• Некоторые могут придерживаться одной стороны экрана, где вы можете прокручивать разные точки.
• Кто-то может оставаться в своем маленьком уголке, кто-то всегда будет вверху страницы.
• Остальные будут отображаться парами по два 300 × 250 или один 720x90 пикселей.

Как узнать обо всем этом и какие требования?

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

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

• Могут загружаться объявления с высотой. Это означает, что содержимое будет сдвинуто вниз, и дизайн, который будет соответствовать определенному виджету над сгибом, потерпит неудачу.
• Рекламным объявлениям может потребоваться фон. Это может быть светло-серый фон, окружающий рекламу, касающийся углов экрана.
• Во избежание случайных касаний между объявлениями часто требуется расстояние между ними. 20–30 пикселей - хорошее расстояние между объявлениями.
• Вы можете добавить метку «Реклама» до / после, чтобы привлечь больше внимания поставщиков рекламы.
• Рекламы не должно быть слишком много! Лучшее место для этого - то, над чем команда AdOps будет работать над определением конкретного издателя, конкретной страницы и даже определенного трафика (например, Facebook, Snapchat и т. Д.)

Производительность веб-сайта издателя

Основной причиной плохой производительности являются настройки с более чем 8 рекламными объявлениями, которые пытаются загрузить с множеством других скриптов. Почему это проблема дизайнера, когда все дело в коде? Разве разработчики не могут его просто оптимизировать? Ну да, но это почти самостоятельная работа, и дизайнер мог бы ей помочь. Чтобы разобраться во всем этом, сначала нужно немного разобраться в браузерах.

Источник

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

Вот несколько общих советов:

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

Источник

Приоритет дизайна

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

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

Резюме

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

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