Content Design and UI Architecture for Multiscreen Projects (compact)
10 likes7,924 views
This document discusses content design and user interfaces for multiscreen projects. It outlines a methodical approach involving iterative work in four core areas: the user, content, rules, and interfaces. Content is modeled according to a building block principle, with atomic elements that can be assembled into larger components and objects. This defines the user interface model. The document provides examples of how content structures map to user interfaces across different touchpoints and channels. It also introduces a software tool called SETU 3.0 that allows content modeling according to the building block principle.
![xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NEWS ITEM
name
photo
biography
URL
company
[...]
SPEAKER
name (e.g. usability)
description
time
[...]
SESSION
title
abstract
description
start time
duration
[...]
PRESENTATION
name
address
URL
[...]
VENUE
held at
featured in
valid for about
featured in presented by
content model
Own illustration (source / based on: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)](https://image.slidesharecdn.com/content-modelingkompakt01-120160223en-160223102759/85/Content-Design-and-UI-Architecture-for-Multiscreen-Projects-compact-10-320.jpg)
Content Design and UI Architecture for Multiscreen Projects (compact)
- 1. Introduction / compact Wolfram Nagel, SETU GmbH All rights reserved. Content Design AND UI Architecture fOr Multiscreen- Projects
- 2. From »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
- 3. › User / Target group / Context › Recognize topic / Taxonomy › Prioritize output channels › Content inventory / knowing the content › Define and design content (structure) › Content gathering (systems, users, sources) › Workflows and interfaces (API) › UI models / Living styleguide › Interaction / Prototyping › Visual design and development › Implementation and testing Methodical approach ITERATION
- 4. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
- 5. The content model defines the UI model Content model / Content type ↓ Content elements ! ↓ Back end UI (form elements) ↓ Front end UI (wireframe)
- 10. xxx name (1 day ticket) price date of purchase [...] TICKET (TYPE) title date description [...] EVENT title date body [...] NEWS ITEM name photo biography URL company [...] SPEAKER name (e.g. usability) description time [...] SESSION title abstract description start time duration [...] PRESENTATION name address URL [...] VENUE held at featured in valid for about featured in presented by content model Own illustration (source / based on: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
- 11. Brick Component Segment Type Object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
- 12. Building block principle Modeling according to the building block principle – comparable to the building blocks of the LEGO building block system Korrelation
- 13. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
- 14. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Brick
- 15. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Component
- 16. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Segment
- 17. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... TYPE ObjeCt
- 18. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Brick
- 19. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Component
- 20. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT
- 21. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen TYPe
- 22. ObjeCt
- 24. long text Mapping Content(structure) ←→ Display (UI ) title image (with caption and originator) dateauthor(s) short text Content strucutre title short text long text image date author
- 25. Example: article title on various touchpoints / channels
- 26. Twitter (tweet only) desktop (website) Instapaper website (smartphone) e-mail (sharing) Facebook (sharing) Facebook (timeline) Twitter (sharing) Twitter (with summary) smartwatch (push notification) smartphone WhatsApp (news sub) iPhone app tablet (video content) Potential touchpoints / channels (selection)
- 27. SETU 3.0: content modeling software according to the building block principle (demo moodscreen)
- 28. Information / ContaCt Wolfram Nagel / SETU GmbH Mail: wn@setusoft.de Twitter: @wolframnagel Web: www.setusoft.de Publikation »Multiscreen UX Design« Publisher: Morgan Kaufmann ISBN: 978-0128027295 www.msxbook.com/enbook URL to these slides: www.msxbook.com/CDUIAcompact