mockup amp Layout Diagrams A ReVIEW What is an annotated mockup diagram Mockups annotated diagrams A sort of photographic representation of what a printed page or a screen will look like ID: 550060
Download Presentation The PPT/PDF document "Annotated(" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Annotated(mockup)&LayoutDiagrams
A
ReVIEWSlide2
What is an annotated (mockup) diagram?Slide3
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
Another view of
mockups
is a hand-drawn representation of a page or screen with detailed formatting information.Slide4
This mockup plans out content, layout and formatting.Slide5
Another Example:Page 199 of you book:Slide6
What is a layout diagram?Slide7
Layout diagramsDone by handLike a mockup, but not as “photorealistic”
Concentrates on the
locations
and
formatting
of screen or page elements (e.g. headings, fields, tables)Slide8
Layout DiagramsInclude detailed
formatting info e.g. positions of objects, relative sizes, colours, borders, typefaces, text styles (e.g. bold) etc
Pets for Sale
Pet’s name, age, sex
Pet’s picture
Cost $
All body text is 12pt TNR, black.
Left justified.
Cost text is red if pet is on sale.
White page background
Fancy font, 20 pt, black, centred
Table 60% of screen, 3 cols, 3 point cell padding, black border 1 pt.
Max of 6 rows per page
Date code
Page last modified
As above
logo
Logo – 200 pixels wideSlide9
Another example:Page 199 of your book (Figure 5.31)Slide10
What information do you need to include in an Annotated (MOCKUP) and Layout diagram?