Content Design and UI Mapping in a nutshell

How to deal with content to output it independently on any UI

We live in a multiscreen world. Nowadays content has to be outputted on various interfaces. When you have to deal with both content and user interfaces (and UI components) it’s easier when you do this in a structured manner. When you have to (gather, manage and) publish content and display it independently on any target channel a “Content and UI Mapping” approach can help.

Content and user interfaces can be planned and assembled modularly and structured in a similar manner — comparable to bricks in a building block system. Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occure at the intersections of these three steps.

I’ll explain this briefly in the following article…

Modules and bricks

A modular approach helps to develop platform-independent content and user interfaces which can then be put together in a way that correspond with the user’s needs and the context of use.

There are several concepts and strategies that are based on a modular approach with single “bricks”. With Content Design, Content Modeling, and Atomic Design (or “UI modeling” in other words) individual bricks are assembled according to the building block principle similarly to LEGO. Other approaches (among others) I found during my research on that topic are object-oriented programming, object-oriented UX, or the Content and Display Patterns.

Foremost one important aspect: If content is built upon the building block principle each brick (of content) can be outputted as independent as possible wherever you want.

The content flows

Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occur at the intersections of these three steps. For that mapping you need structured individual bricks that can be assigned to each other.

Content and user interfaces can (and should) be planned and assembled structured and modularly in a similar manner — comparable to bricks in a building block system.

Inspiration comes from the child’s room

A systematic and structured approach (inspired by LEGO): Make an inventory of all the bricks that are available (LEGO bricks, content bricks, UI bricks, …. whatever). You can then easily build (and assign) different combinations and types out of the same brick pool depending on how you need them (racing car, truck, …, article detailed page, overview page, search result, foreign touchpoint such as a twitter post, ….)

Brad Frost explains it in his own words.

“Rather than diving headfirst into constructing the final work, you can take the time to take stock of the available pieces and organize them in such a way that they become more useful. […] By taking the time to organize the parts, you can now create the whole in a more realistic, deliberate, and efficient manner.”

Combine the (content and UI) bricks

I’ll explain the result of the brick building approach with the following example. Individual content bricks of the (structured) content type “event” can be mapped and assigned to different shapes of a “teaser” UI component and its individual UI bricks in the target system (here: a website with desktop-like presentation). This works also with other touchpoints and output UIs.

The achievement behind: One and the same content type can be displayed in various shapes AND vice versa. Different content types can be displayed similarly or even identically.

Sounds simple. When you have this in mind it will be easier to plan and design multiscreen-ready and touchpoint-independent content and user interfaces. Try it out.

📖🔖 You can find a more detailed explanation of this approach in another article.

I also uploaded some slides of my World Usability Day talk which explain this approach more visually.

Any thoughts? I’d be happy to read your comments.

If you liked this article, please ❤️ it so others stumble upon it as well! Thank you! You might also read some of my other articles.


About the author

Wolfram Nagel is a UX Designer, UI Architect, and Concept Developer. As Senior User Experience Designer at TeamViewer he is responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.

Previously he worked as Head of UX for SETU GmbH (a German software engineering company) with main responsibility in the areas of multiscreen, user experience, content design, UI architecture, and visual design. He gives talkes to these topics and is author of the book “Multiscreen UX Design”.

Senior UX Designer (@TeamViewer), UI Architect, Multiscreen Evangelist, JTBD Thinker, Author of @msxbook, Initiator of @dmfndr. I love the web, my 👪 and ⚽️🚵‍.