1. I Input (data) P Process (calculations to be done on input) O Output (information) IPO Charts

2. InputProcessOutput This is what an IPO chart looks like:

3. InputProcessOutput Sum of 2 numbers. Eg. 7 Product of 2 numbers. Eg. 8 Age List[2] The trick to creating an IPO chart is: Work backwards – meaning start with the output. (start by deciding what information you want to display or output) For example, someone’s age in years

4. The next step is to now work out what data (input) you need to calculate this information (output). InputProcessOutput 2 numbers. Eg. 3, 4 Sum of 2 numbers. Eg. 7 2 numbers. Eg. 4, 2 Product of 2 numbers. Eg. 8 Date of Birth, Current Date Age ListList[2]

5. The last step – is the process (doesn’t have to be the exact code or functions) InputProcessOutput 2 numbers. Eg. 3, 4 Add 2 numbers. 3+4 Sum of 2 numbers. Eg. 7 2 numbers. Eg. 4, 2 Multiply to numbers. 4*2 Product of 2 numbers. Eg. 8 Date of Birth, Current Date (Now – DOB)/365.25 Age (in years) ListSearch for item 3 in list. List[2]

6. Mockups (annotated diagrams) A sort of “photographic” representation of what a printed page or a screen will look like A bit like a prototype or demonstration model Can be produced with software for extra realism May have faked text

7. Mockups – another interpretation Another view of mockups is a hand-drawn representation of a page or screen with detailed formatting information.

8. This mockup plans out content, layout and formatting.

9. Mockups Give enough detail so that the design could be given to someone else to accurately produce the page or screen. E.g. “Arial, 14pt, bold, dark blue” Don’t repeat yourself endlessly: summarise. E.g. “All body text 12pt Arial. All links are blue. All tables have invisible borders except for the pets table” etc

10. Mockups Does not need to be 100% specific. E.g. can specify a “fancy font, big, blue” or “picture of a cat”. Include content information (what a text block is talking about; what a picture should show)

11. Mockups Exact wording of text not needed. Include headings to identify contents of the text (e.g. Why dogs are good pets”) Do not produce a uselessly vague mockup… heading picture text This sort of design is a waste of time. No-one could work out what needs to go on this page.