Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction / compact
Wolfram Nagel, SETU GmbH
All rights reserved.
Content Design
AND UI Architecture
fOr Multiscreen-
P...
From »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen
›	 User / Target group / Context
›	Recognize topic / Taxonomy
›	 Prioritize output channels
›	 Content inventory / knowing...
User
Content
Rules UI
Interfaces (API)
Four core areas (+ the user, of course)
The content model defines
the UI model
Content model / Content type
↓
Content elements !
↓
Back end UI (form elements)
↓
F...
Building block
principle
xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[......
Brick Component Segment Type Object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
Building block principle
Modeling according to the building block principle – comparable to the building blocks of the LEG...
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Brick
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Component
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Segment
Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
TYPE ObjeCt
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Brick
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Component
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYPe
ObjeCt
Brick
Component SEGMENT TYPe
long text
Mapping Content(structure) ←→ Display (UI )
title
image (with caption
and originator)
dateauthor(s)
short text
C...
Example: article title on various touchpoints / channels
Twitter
(tweet only)
desktop
(website)
Instapaper
website
(smartphone)
e-mail
(sharing)
Facebook
(sharing)
Facebook
(timel...
SETU 3.0: content modeling software according to the building block principle (demo moodscreen)
Information / ContaCt
Wolfram Nagel / SETU GmbH
Mail: wn@setusoft.de
Twitter: @wolframnagel
Web: www.setusoft.de
Publikati...
Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)
Upcoming SlideShare
Loading in …5
×

of

Content Design and UI Architecture for Multiscreen Projects (compact) Slide 1 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 2 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 3 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 4 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 5 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 6 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 7 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 8 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 9 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 10 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 11 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 12 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 13 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 14 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 15 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 16 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 17 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 18 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 19 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 20 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 21 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 22 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 23 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 24 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 25 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 26 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 27 Content Design and UI Architecture for Multiscreen Projects (compact) Slide 28
Upcoming SlideShare
Multiscreen UX Design - Developing for a multitude of devices
Next

10 Likes

Share

Content Design and UI Architecture for Multiscreen Projects (compact)

These days, each project is a project for multiple screens. Multiscreen has become digital reality and requires a continuous information flow, a central hub for contents and a system for the definition of user interface (UI) elements. Content and user interface should basically be independent, but there's a correlation. Content and user interfaces can be built and planned modularly and structured according to a similar pattern - comparable to the bricks in a building block system.

You can find more information on that topic in the book "Multiscreen UX Design": http://www.msxbook.com/enbook

Related Books

Free with a 30 day trial from Scribd

See all

Content Design and UI Architecture for Multiscreen Projects (compact)

  1. 1. Introduction / compact Wolfram Nagel, SETU GmbH All rights reserved. Content Design AND UI Architecture fOr Multiscreen- Projects
  2. 2. From »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  3. 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. 4. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  5. 5. The content model defines the UI model Content model / Content type ↓ Content elements ! ↓ Back end UI (form elements) ↓ Front end UI (wireframe)
  6. 6. Building block principle
  7. 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. 8. Brick Component Segment Type Object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
  9. 9. Building block principle Modeling according to the building block principle – comparable to the building blocks of the LEGO building block system Korrelation
  10. 10. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
  11. 11. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Brick
  12. 12. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Component
  13. 13. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... Segment
  14. 14. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ... TYPE ObjeCt
  15. 15. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Brick
  16. 16. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen Component
  17. 17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT
  18. 18. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen TYPe
  19. 19. ObjeCt
  20. 20. Brick Component SEGMENT TYPe
  21. 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. 22. Example: article title on various touchpoints / channels
  23. 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. 24. SETU 3.0: content modeling software according to the building block principle (demo moodscreen)
  25. 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
  • jamesherrera

    Oct. 28, 2018
  • StphaneGiordan

    Feb. 5, 2018
  • WibkeSchulz

    Nov. 1, 2017
  • grutschnig

    Oct. 26, 2017
  • rojaswilmer

    Feb. 1, 2017
  • MorganDaum

    Dec. 23, 2016
  • JCarlosArteaga

    Oct. 18, 2016
  • jgrodriguezdm

    Oct. 12, 2016
  • hold3n

    Oct. 12, 2016
  • bigbigyuan

    May. 5, 2016

These days, each project is a project for multiple screens. Multiscreen has become digital reality and requires a continuous information flow, a central hub for contents and a system for the definition of user interface (UI) elements. Content and user interface should basically be independent, but there's a correlation. Content and user interfaces can be built and planned modularly and structured according to a similar pattern - comparable to the bricks in a building block system. You can find more information on that topic in the book "Multiscreen UX Design": http://www.msxbook.com/enbook

Views

Total views

6,339

On Slideshare

0

From embeds

0

Number of embeds

3,557

Actions

Downloads

0

Shares

0

Comments

0

Likes

10

×