SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Design considerations   by Zeenath Hasan  for a web based interface to a film production manual  VIPP 2009
[object Object],[object Object],[object Object]
Fig 1: Cmap chart depiction of the film production process
Fig 2: Home page of the website
Fig 3: Landing page of the ‘process’ section where tasks are listed in order of steps in the post production  process. Cross referencing of tasks is possible as each step has a unique reference number.
Fig 4: Subpage in the ‘process’ section where a task in being explained. The explanation can ride over more thank one webpage and be accessed by clicking on the page counter in the bottom right corner.
Fig 5: Landing page of the ‘vocabulary’ section (2.0) where tasks, concepts, terms etc are listed in alphabetic order (2.1). There is a link to the same terms being listed in order of most reference (2.2), which is a dynamic  list informed by the frequency in which students reference particular concepts, tasks etc offering a section on  website where it is the student’s collective curiosity or hunger for knowledge that affects the indexical order.
Fig 6: Color chart

Weitere ähnliche Inhalte

Ähnlich wie ZH Vipp

SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENT
SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENTSAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENT
SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENTAnusha GOT
 
Presentation1
Presentation1Presentation1
Presentation1nhuthi
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23Vivek chan
 
Getting Started with Dreamweaver
Getting Started with DreamweaverGetting Started with Dreamweaver
Getting Started with DreamweaverFrank Fucile
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Michael Dobe, Ph.D.
 
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...Katy Slemon
 
Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Walden University
 
Navigating the Multi Channel Labyrinth
Navigating the Multi Channel LabyrinthNavigating the Multi Channel Labyrinth
Navigating the Multi Channel LabyrinthGary Fisher
 
AD207 Presentation
AD207 PresentationAD207 Presentation
AD207 Presentationmackejo1
 
Visual basic concepts
Visual basic conceptsVisual basic concepts
Visual basic conceptsmelody77776
 
Public Library
Public LibraryPublic Library
Public Libraryeclumson
 
Segment 1 exam review ppt
Segment 1   exam review pptSegment 1   exam review ppt
Segment 1 exam review pptdlwadsworth
 
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...LiquidHub
 
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...LiquidHub
 

Ähnlich wie ZH Vipp (20)

Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
 
Web 240 web240
Web 240 web240Web 240 web240
Web 240 web240
 
SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENT
SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENTSAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENT
SAP ADOBE FORMS| SAP ADOBE FORMS COURSE CONTENT
 
Apen Technologies
Apen TechnologiesApen Technologies
Apen Technologies
 
Presentation1
Presentation1Presentation1
Presentation1
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
 
Getting Started with Dreamweaver
Getting Started with DreamweaverGetting Started with Dreamweaver
Getting Started with Dreamweaver
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)
 
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
 
Powell lynetta storyboard_week9
Powell lynetta storyboard_week9Powell lynetta storyboard_week9
Powell lynetta storyboard_week9
 
A new look for e4
A new look for e4A new look for e4
A new look for e4
 
Navigating the Multi Channel Labyrinth
Navigating the Multi Channel LabyrinthNavigating the Multi Channel Labyrinth
Navigating the Multi Channel Labyrinth
 
Spec by Role
Spec by RoleSpec by Role
Spec by Role
 
AD207 Presentation
AD207 PresentationAD207 Presentation
AD207 Presentation
 
Visual basic concepts
Visual basic conceptsVisual basic concepts
Visual basic concepts
 
CSC431_Chap1
CSC431_Chap1CSC431_Chap1
CSC431_Chap1
 
Public Library
Public LibraryPublic Library
Public Library
 
Segment 1 exam review ppt
Segment 1   exam review pptSegment 1   exam review ppt
Segment 1 exam review ppt
 
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
 
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
Hol262 Building%20 Info Path%20 Forms%20that%20 Run%20as%20 Both%20 Rich%20 C...
 

Kürzlich hochgeladen

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 

Kürzlich hochgeladen (20)

Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 

ZH Vipp

  • 1. Design considerations by Zeenath Hasan for a web based interface to a film production manual VIPP 2009
  • 2.
  • 3. Fig 1: Cmap chart depiction of the film production process
  • 4. Fig 2: Home page of the website
  • 5. Fig 3: Landing page of the ‘process’ section where tasks are listed in order of steps in the post production process. Cross referencing of tasks is possible as each step has a unique reference number.
  • 6. Fig 4: Subpage in the ‘process’ section where a task in being explained. The explanation can ride over more thank one webpage and be accessed by clicking on the page counter in the bottom right corner.
  • 7. Fig 5: Landing page of the ‘vocabulary’ section (2.0) where tasks, concepts, terms etc are listed in alphabetic order (2.1). There is a link to the same terms being listed in order of most reference (2.2), which is a dynamic list informed by the frequency in which students reference particular concepts, tasks etc offering a section on website where it is the student’s collective curiosity or hunger for knowledge that affects the indexical order.
  • 8. Fig 6: Color chart

Hinweis der Redaktion

  1. Information structure for an instructional website on the film post production process for students Lessons from the Cmapping process: The information as presented in the film production manual, delivered to the designers as a written text on Google docs, and as interpreted in the form of a chart, constructed using Cmap tools, displays a structure that is horizontally vast and vertically shallow. There are 12 main production activities, (see the yellow boxes in Fig 1. below). Less than half of the main production activities offer instructions for the student to perform a series of tasks i.e. instructions for serial and/ or parallel sets of tasks is explained to the student (after this, do that / if not, this then that). The rest of the main production activities offer an explanation or a description of a task, example explanation of duties and responsibilities or description of indications to watch out for while conducting a task. In the Cmap chart, both actual tasks and descriptions of tasks are depicted as vertical layers (where each new layer is indicated in a new color of boxes), thus providing a misleading impression of the number of tasks to be performed per main production activity. The distinction of tasks to be performed and explanation of a task in itself is left to the text-based description placed at the connector between two concepts. Example of text-based descriptors for conducting a process based task include, 'if material not linked to active projects, then (remove from servers)',' add logos (of YLE etc)'. Examples of text-based descriptors explaining a step in the process include, 'avoid (a certain software)', ' follow (Yleisradio guidelines)'. The point here being, that were the website to depict the production process as a diagrammatic hierarchy of activities then the conflation of tasks and explanations would result in a false impression of density of activities to the student-beholder. So I avoided representing instructions for tasks in the form of chart.
  2. What is the www interface for? For a student of film production, whom the website is aimed at, the website could play the role of, (1) providing step-by-step instructions of the film production process (2) a reference manual or a ready reckoner. These roles would not be mutually exclusive and would allow for both novice and advanced students to use the website. The information in the instructional manual was structured into two main sections for the website, Section 1.0: Process, where the tasks involved in the post production process would be explained step by step from an index of steps. The form of an index would allow for tasks that would require cross-referencing. Section 2.0: Vocabulary, where tasks, concepts, activities, terms etc would be accessible in alphabetical order and in order of most referenced. The following four slides contain screen shots of webpages at different levels of the www interface for the film post production manual.
  3. color: I selected two contrasting colors and worked with shades of the two. I wanted the color variation to evoke a symmetry with the shallow depth of the website structure.