← Wireframes lesson New set →

App Dev Worksheet: Wireframes

App development lesson 10: Wireframes · Set 439 · 40 questions
TalentJR

Developer's tip (Boxes before beauty): A wireframe = plain boxes showing where each part goes; no final colours or pictures. Draw it before coding: changes are quick on paper. Read it top to bottom: “right below” is the next box, “right above” is the one before.

NameDateTime takenScore ___ / 40
  1. 1.✏️ Is this true of a wireframe or of a final design: uses the final pictures? (a) a wireframe (b) a final design
  2. 2.Which of these is true of a wireframe? (a) uses the final pictures (b) has the real colours (c) uses plain grey boxes (d) looks like the real app
  3. 3.✏️ What is the easiest way to draw a first wireframe? (a) a 3D printer (b) a microphone (c) pencil and paper (d) a phone case
  4. 4.✏️ Is this true of a wireframe or of a final design: shows the real fonts? (a) a wireframe (b) a final design
  5. 5.True or false: a wireframe uses plain grey boxes. (a) True (b) False
  6. 6.Which of these is true of a wireframe? (a) is a quick sketch (b) shows the real fonts (c) looks like the real app (d) uses the final pictures
  7. 7.✏️ Do wireframes usually show the final colours? (a) Yes (b) No
  8. 8.🖼️ In this wireframe (top to bottom), what is right above the filter buttons?
    [ list of items ]
    [ top bar ]
    [ title text ]
    [ filter buttons ]
    [ Add button ]
    [ search box ]     (a) list of items (b) top bar (c) title text (d) search box
  9. 9.True or false: a wireframe has no real colours. (a) False (b) True
  10. 10.✏️ Is this true of a wireframe or of a final design: uses plain grey boxes? (a) a wireframe (b) a final design
  11. 11.🖼️ How many parts (boxes) does this wireframe have?
    [ menu icon ]
    [ big picture ]
    [ filter buttons ]
    [ title text ]
  12. 12.🖼️ In this wireframe (top to bottom), what is right above the menu icon?
    [ Save button ]
    [ menu icon ]
    [ top bar ]
    [ filter buttons ]
    [ title text ]
    [ list of items ]     (a) filter buttons (b) title text (c) top bar (d) Save button
  13. 13.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ title text ]
    [ Save button ]
    [ filter buttons ]
    [ tab bar ]     (a) Save button (b) title text (c) tab bar (d) filter buttons
  14. 14.🖼️ In this wireframe (top to bottom), what is right below the list of items?
    [ Add button ]
    [ list of items ]
    [ search box ]
    [ menu icon ]     (a) Add button (b) menu icon (c) search box
  15. 15.True or false: a final design shows where things go. (a) False (b) True
  16. 16.True or false: a final design looks like the real app. (a) False (b) True
  17. 17.✏️ Why draw a wireframe before coding? (a) changes are quick (b) it adds colours (c) it saves data (d) it runs the app
  18. 18.🖼️ In this wireframe (top to bottom), what is right above the search box?
    [ top bar ]
    [ list of items ]
    [ filter buttons ]
    [ search box ]     (a) top bar (b) filter buttons (c) list of items
  19. 19.✏️ A box with a cross in a wireframe usually means ___. (a) a picture goes here (b) delete this (c) an error (d) a closed app
  20. 20.Which of these is true of a final design? (a) has no real colours (b) shows where things go (c) looks like the real app (d) uses plain grey boxes
  21. 21.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ tab bar ]
    [ Add button ]
    [ filter buttons ]
    [ top bar ]
    [ Save button ]
    [ search box ]     (a) filter buttons (b) Save button (c) search box (d) Add button
  22. 22.True or false: a wireframe looks like the real app. (a) True (b) False
  23. 23.🖼️ In this wireframe (top to bottom), what is right below the Add button?
    [ Add button ]
    [ Save button ]
    [ tab bar ]
    [ top bar ]     (a) tab bar (b) Save button (c) top bar
  24. 24.🖼️ In this wireframe (top to bottom), what is right above the search box?
    [ top bar ]
    [ search box ]
    [ list of items ]
    [ Save button ]
    [ Add button ]
    [ menu icon ]     (a) menu icon (b) list of items (c) Save button (d) top bar
  25. 25.True or false: a wireframe shows the real fonts. (a) True (b) False
  26. 26.🖼️ How many parts (boxes) does this wireframe have?
    [ Add button ]
    [ tab bar ]
    [ filter buttons ]
    [ title text ]
    [ menu icon ]
    [ list of items ]
  27. 27.🖼️ In this wireframe (top to bottom), what is right above the title text?
    [ Save button ]
    [ tab bar ]
    [ big picture ]
    [ title text ]     (a) Save button (b) tab bar (c) big picture
  28. 28.✏️ What is a wireframe? (a) a type of password (b) a charging cable (c) the finished app (d) a simple screen sketch
  29. 29.True or false: a final design uses the final pictures. (a) False (b) True
  30. 30.✏️ Is this true of a wireframe or of a final design: has the real colours? (a) a final design (b) a wireframe
  31. 31.Which of these is true of a wireframe? (a) shows the real fonts (b) has the real colours (c) uses the final pictures (d) has no real colours
  32. 32.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ top bar ]
    [ search box ]
    [ big picture ]
    [ tab bar ]
    [ Save button ]
    [ list of items ]     (a) list of items (b) big picture (c) Save button (d) search box
  33. 33.🖼️ In this wireframe (top to bottom), what is right below the search box?
    [ search box ]
    [ filter buttons ]
    [ Save button ]
    [ title text ]     (a) filter buttons (b) title text (c) Save button
  34. 34.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ filter buttons ]
    [ menu icon ]
    [ Save button ]
    [ tab bar ]
    [ top bar ]
    [ Add button ]     (a) filter buttons (b) top bar (c) Add button (d) menu icon
  35. 35.Which of these is true of a final design? (a) shows the real fonts (b) is a quick sketch (c) uses plain grey boxes (d) has no real colours
  36. 36.🖼️ In this wireframe (top to bottom), what is right above the filter buttons?
    [ list of items ]
    [ title text ]
    [ search box ]
    [ menu icon ]
    [ filter buttons ]
    [ Add button ]     (a) Add button (b) menu icon (c) list of items (d) title text
  37. 37.True or false: a final design uses plain grey boxes. (a) True (b) False
  38. 38.🖼️ In this wireframe (top to bottom), what is right above the filter buttons?
    [ list of items ]
    [ tab bar ]
    [ top bar ]
    [ filter buttons ]     (a) top bar (b) tab bar (c) list of items
  39. 39.Which of these is true of a wireframe? (a) shows where things go (b) uses the final pictures (c) looks like the real app (d) shows the real fonts
  40. 40.🖼️ How many parts (boxes) does this wireframe have?
    [ tab bar ]
    [ top bar ]
    [ list of items ]
    [ Save button ]

Answer key

  1. a final design
  2. uses plain grey boxes
  3. pencil and paper
  4. a final design
  5. True
  6. is a quick sketch
  7. No
  8. title text
  9. True
  10. a wireframe
  11. 4
  12. Save button
  13. tab bar
  14. search box
  15. False
  16. True
  17. changes are quick
  18. filter buttons
  19. a picture goes here
  20. looks like the real app
  21. search box
  22. False
  23. Save button
  24. top bar
  25. False
  26. 6
  27. big picture
  28. a simple screen sketch
  29. True
  30. a final design
  31. has no real colours
  32. list of items
  33. filter buttons
  34. Add button
  35. shows the real fonts
  36. menu icon
  37. False
  38. top bar
  39. shows where things go
  40. 4

Free app development lessons, practice and worksheets at talentjr.in/app-development-for-students