Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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)
Nächste SlideShare
Wird geladen in …5
×

Content Design and UI Architecture for Multiscreen Projects (compact)

3.297 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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

×