Веб-дизайн CMS: руководство по приложениям с динамическим содержимым

Методы UI/UX для динамичного мира онлайн-медиа, ориентированного на контент.

Подавляющее большинство веб-приложений и мобильных приложений, особенно в сфере онлайн-медиа, основаны на системах управления контентом (CMS), таких как WordPress, Drupal и других. Эти системы были созданы для удовлетворения потребностей эпохи Интернета, когда контент является доминирующим и динамичным, постоянно и часто меняющимся.

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

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

Шаблоны CMS Web Design IA в приложениях, управляемых CMS

Дизайнеры должны иметь ментальную модель общих шаблонов информационной архитектуры в приложении, управляемом CMS, особенно если они работают над UX (пользовательский опыт) и проектируют его с нуля. Существует несколько типов страниц, которые являются общими и неотъемлемыми для этих приложений, и они часто связаны друг с другом предсказуемым образом, где «пост» функционирует как основной компонент. Как правило, нет теоретического ограничения на количество сообщений, которые может содержать приложение.

Титульная страница

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

Опубликовать страницу

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

Страница списка/категории

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

Страница поиска

Специальная страница для поиска не обязательна для небольших приложений, но всегда полезна. Иногда его можно объединить или интегрировать со страницей категории/списка.

Профиль пользователя/автора

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

Домашняя страница пользователя или панель инструментов

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

Контент-ориентированный дизайн пользовательского интерфейса для динамического контента

Контент предшествует дизайну. Дизайн при отсутствии контента — это не дизайн, а украшение. — Джеффри Зельдман

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

Рассмотрите содержимое перед определением стиля

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

ОБЯЗАТЕЛЬНО узнайте, кто будет создавать контент на регулярной основе.

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

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

СДЕЛАЙТЕ дизайн с реальным содержанием, где это возможно.

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

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

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

НЕ переусердствуйте со стилем.

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

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

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

Создайте каждую страницу как шаблон для различного контента

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

НЕОБХОДИМО установить четкий набор правил и последовательностей.

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

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

Чтобы добиться этого проще, разработайте модульный, многократно используемый набор компонентов стиля для максимально возможного количества частей интерфейса, включая заголовки, разделители, кнопки, виджеты и другие элементы в программе дизайна. Используйте эти компоненты многократно и в логической схеме, сводя вариации к минимуму. В этой статье Toptal Designer Wojciech Dobry представлено хорошее руководство по созданию UI-библиотеки в Sketch.

ЗАПРЕЩАЕТСЯ придавать постам индивидуальный дизайн.

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

НЕ ДУМАЙТЕ, что контент всегда будет помещаться в обозначенную область.

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

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

Чтобы быть уверенным в наихудшем сценарии, временно вставьте последовательность широких букв алфавита (например, «w», если контент на английском языке) до тех пор, пока не будет достигнуто согласованное ограничение на количество символов.

Позвольте контенту выделяться

В контент-ориентированном приложении контент всегда должен быть впереди и по центру, а стилистические элементы брендинга обычно должны отступать.

ОБЯЗАТЕЛЬНО окружите динамический контент чистыми, светлыми, нейтральными цветами фона.

Белый или не совсем белый обычно предпочтительнее. Это позволяет множеству различных типов изображений, светлых и темных, появляться на странице, не затеняясь.

ОБЯЗАТЕЛЬНО делайте изображения большими и внушительными.

Большие изображения, особенно фотографии, привлекают внимание посетителя эффективнее, чем что-либо еще.

ОБЯЗАТЕЛЬНО делайте заголовки и основной текст крупными и хорошо читаемыми.

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

НЕ переусердствуйте.

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

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

НЕ используйте цветной фон рядом с динамическими изображениями.

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

НЕ используйте темный фон для покрытия целых страниц текста.

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

Понять, как изображения и другие медиа работают на серверной части

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

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

ОБЯЗАТЕЛЬНО узнайте, какие форматы мультимедиа поддерживаются.

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

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

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

Хотя часто технически возможно создать множество отдельных кадров для изображения, обычно это приводит к негативным последствиям. Например, по умолчанию WordPress CMS автоматически генерирует несколько размеров загруженного изображения в одном соотношении, но предоставляет возможность создать только одну отдельно обрезанную миниатюру.

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

НЕОБХОДИМО определить, требуется ли поддержка устаревшего контента.

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

Предоставьте редакторам контента множество способов стилизации текста

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

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

СДЕЛАЙТЕ дизайн для всех распространенных способов форматирования текста.

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

НЕ давайте создателям контента слишком много стилистического контроля.

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

Будущие модели дизайна, ориентированного на контент

С появлением новых технологий, таких как дополненная реальность (AR), начали возникать новые парадигмы для дизайна, ориентированного на контент. Приложения на основе CMS в пространстве дополненной/смешанной реальности, которые в настоящее время находятся в зачаточном состоянии, используют объекты и/или сцены реального мира в качестве ключевой части контента.

Среда просмотра конкретного мобильного пользователя, условия освещения и физическая близость к тексту и вставленным 3D-объектам могут повлиять на конечный результат. Это значительно меняет представление о курировании контента и добавляет дополнительный уровень непредсказуемости, который следует учитывать в процессе проектирования.

Веб-дизайн CMS немного отличается

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