Content Design and UI Architecture for Multiscreen Projects (compact)

2,826 views

Published on

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

Published in: Design

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

×