AFINA agency
webflow

Почему ваш дизайн должен начинаться с контента

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

Что такое контент ориентированный (content-first) дизайн?

Content-first представляет одну из основных философских точек зрения на процесс проектирования. Впервые поддержанный (в мире веб-дизайна) основателем A List Apart Джеффом Зельдманом в 2008 году, он заявляет, что для того, чтобы создать правильный дизайн для любого конкретного проекта, вы должны понять контент, прежде чем приступить к разработке.

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

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

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

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

В идеале, вы действительно должны иметь контент в руках, прежде чем создавать что-либо. Я покажу вам несколько полезных советов о том, как сделать все это лучше (и проще) с Webflow.
Твит услышан по всей индустрии.

Преимущества content-first дизайна

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

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

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

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

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

Кроме того, если вы сначала проектируете контент в Webflow CMS, вы обнаружите, что этот процесс намного быстрее и проще.

Посмотрим как.

Контент-первый дизайн с Webflow CMS

Первый шаг, который вы сделаете при создании сайта на основе Webflow CMS, - это создание Коллекции.

Коллекция - это, по сути, тип контента, который вы определите, выбрав Поля из следующего списка:
1. Простой текст
2. Богатый текст
3. Изображение
4. Видео
5. Ссылка
6. Номер
7. Дата / Время
8. Переключатель
9. Цвет
10. Ссылка
11. Многоэлементная ссылка

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

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

Смущенный? Я не могу винить тебя. Итак, давайте обосновать это обсуждение на примере, не так ли?
Типы полей Webflow CMS

Пример: создание продовольственного журнала с помощью Webflow CMS

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

Теперь вы можете испытать желание начать свой дизайн, создав коллекцию «Рецепт». Итак, вы создаете коллекцию, называете ее рецептами и начинаете выбирать поля. Естественно, вы начинаете продумывать поля с точки зрения визуального дизайна отдельной записи в блоге:

Изображение : большой, смелый крупный план блюда для изображения героя.

Изображение : для уменьшенной версии изображения героя, которое будет отображаться в индексе блога.

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

Простой текст : для кухни, которая будет ссылаться на страницу со списком всех рецептов для конкретной кухни (и удваиваться как страница категории) ...

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

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

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

Это также, где концепция моделирования контента становится очень мощной.

Моделирование контента для дизайнеров

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

Модели содержимого представлены в двух формах: один макрос и один микро. Для вашего веб-сайта журнала продуктов питания ваша модель контента на макроуровне может выглядеть следующим образом:
Модель контента на макроуровне для сайта еды журнала.
Все, что вы здесь делаете, - это определяете элементы контента, которые вы хотите, чтобы ваш сайт отображал, и указывали, как они могут связываться друг с другом. В Webflow CMS вы создадите ссылки с полем Reference или Multi-Reference.

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

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

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

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

Оооо. Повара. Время создать еще одну коллекцию!

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

Создание эмпатии путем проектирования с реальным содержанием

Уникальная особенность проектирования с помощью CMS заключается в том, что вы разрабатываете для двух групп пользователей:

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

2. Конечные пользователи сайта, люди, которые будут потреблять контент, который публикуют создатели.

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

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

Как вы настраиваете Webflow CMS

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

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

Визуальное проектирование динамического (CMS) контента

Как отмечает Джош Пакеттс в статье « Инструменты современного дизайна: использование реальных данных », проектирование с использованием реального контента также помогает вам распознать потенциальные недостатки в визуальном дизайне сайта. Длинные заголовки статей могут обернуться, мешая высотам в дизайне индекса блога с сеткой. Заголовки на фотографиях со светлым фоном могут стать неразборчивыми. Текст кнопки может сделать эти аккуратные CSS-кнопки огромными .

Каждое из этих испытаний дает вам возможность выполнить одно или оба из следующих действий:

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

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

Вы занимаетесь дизайном контента в первую очередь?

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

И если ваша первая мысль о содержании в первую очередь звучит так: «Звучит замечательно. Удачи в получении контента от клиентов », - вскоре мы опубликуем статью о способах решения этой проблемы.

А пока счастливого проектирования!

Статьи по теме

Made on
Tilda