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)

6.
Building block
principle

7.
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)

8.
Brick Component Segment Type Object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design

9.
Building block principle
Modeling according to the building block principle – comparable to the building blocks of the LEGO building block system
Korrelation

10.
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...

11.
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Brick

12.
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Component

13.
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Segment

14.
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
TYPE ObjeCt

15.
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Brick

16.
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Component

17.
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT

18.
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYPe

19.
ObjeCt

20.
Brick
Component SEGMENT TYPe

21.
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

22.
Example: article title on various touchpoints / channels

23.
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)

24.
SETU 3.0: content modeling software according to the building block principle (demo moodscreen)

25.
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