← Wireframes lesson New set →

App Dev Worksheet: Wireframes

App development lesson 10: Wireframes · Set 146 · 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.🖼️ In this wireframe (top to bottom), what is right below the search box?
    [ Add button ]
    [ tab bar ]
    [ search box ]
    [ top bar ]     (a) Add button (b) top bar (c) tab bar
  2. 2.🖼️ In this wireframe (top to bottom), what is right above the search box?
    [ top bar ]
    [ Save button ]
    [ filter buttons ]
    [ search box ]
    [ list of items ]     (a) Save button (b) filter buttons (c) list of items (d) top bar
  3. 3.True or false: a final design shows where things go. (a) False (b) True
  4. 4.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ big picture ]
    [ Add button ]
    [ search box ]
    [ menu icon ]     (a) Add button (b) search box (c) menu icon (d) big picture
  5. 5.Which of these is true of a final design? (a) has no real colours (b) uses plain grey boxes (c) shows where things go (d) looks like the real app
  6. 6.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ tab bar ]
    [ big picture ]
    [ Add button ]
    [ menu icon ]     (a) menu icon (b) Add button (c) tab bar (d) big picture
  7. 7.True or false: a final design is a quick sketch. (a) False (b) True
  8. 8.🖼️ In this wireframe (top to bottom), what is right below the list of items?
    [ big picture ]
    [ list of items ]
    [ menu icon ]
    [ search box ]     (a) menu icon (b) big picture (c) search box
  9. 9.Which of these is true of a wireframe? (a) has the real colours (b) uses the final pictures (c) looks like the real app (d) uses plain grey boxes
  10. 10.True or false: a final design has no real colours. (a) False (b) True
  11. 11.🖼️ How many parts (boxes) does this wireframe have?
    [ Save button ]
    [ tab bar ]
    [ top bar ]
    [ big picture ]
  12. 12.Which of these is true of a final design? (a) uses plain grey boxes (b) is a quick sketch (c) uses the final pictures (d) has no real colours
  13. 13.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ Add button ]
    [ search box ]
    [ big picture ]
    [ title text ]
    [ filter buttons ]     (a) Add button (b) search box (c) filter buttons (d) big picture
  14. 14.True or false: a wireframe shows where things go. (a) False (b) True
  15. 15.True or false: a wireframe uses the final pictures. (a) True (b) False
  16. 16.True or false: a wireframe has the real colours. (a) False (b) True
  17. 17.Which of these is true of a wireframe? (a) is a quick sketch (b) looks like the real app (c) uses the final pictures (d) has the real colours
  18. 18.🖼️ In this wireframe (top to bottom), which part is at the very bottom?
    [ Save button ]
    [ top bar ]
    [ title text ]
    [ tab bar ]
    [ big picture ]     (a) Save button (b) tab bar (c) big picture (d) title text
  19. 19.🖼️ How many parts (boxes) does this wireframe have?
    [ title text ]
    [ tab bar ]
    [ Save button ]
    [ filter buttons ]
    [ Add button ]
    [ menu icon ]
  20. 20.✏️ Is this true of a wireframe or of a final design: uses plain grey boxes? (a) a final design (b) a wireframe
  21. 21.✏️ Is this true of a wireframe or of a final design: looks like the real app? (a) a wireframe (b) a final design
  22. 22.✏️ What is a wireframe? (a) a charging cable (b) the finished app (c) a simple screen sketch (d) a type of password
  23. 23.🖼️ In this wireframe (top to bottom), what is right below the search box?
    [ menu icon ]
    [ search box ]
    [ top bar ]
    [ tab bar ]     (a) menu icon (b) top bar (c) tab bar
  24. 24.🖼️ How many parts (boxes) does this wireframe have?
    [ title text ]
    [ tab bar ]
    [ list of items ]
    [ Save button ]
    [ search box ]
    [ menu icon ]
  25. 25.True or false: a final design has the real colours. (a) False (b) True
  26. 26.🖼️ In this wireframe (top to bottom), what is right below the Add button?
    [ tab bar ]
    [ Add button ]
    [ list of items ]
    [ Save button ]
    [ menu icon ]     (a) Save button (b) menu icon (c) tab bar (d) list of items
  27. 27.✏️ Is this true of a wireframe or of a final design: has the real colours? (a) a wireframe (b) a final design
  28. 28.✏️ Is this true of a wireframe or of a final design: shows where things go? (a) a wireframe (b) a final design
  29. 29.True or false: a final design uses plain grey boxes. (a) True (b) False
  30. 30.🖼️ How many parts (boxes) does this wireframe have?
    [ filter buttons ]
    [ big picture ]
    [ search box ]
    [ title text ]
    [ tab bar ]
    [ Add button ]
  31. 31.🖼️ In this wireframe (top to bottom), what is right above the list of items?
    [ tab bar ]
    [ list of items ]
    [ search box ]
    [ title text ]     (a) search box (b) tab bar (c) title text
  32. 32.🖼️ How many parts (boxes) does this wireframe have?
    [ top bar ]
    [ title text ]
    [ search box ]
    [ tab bar ]
    [ filter buttons ]
    [ Add button ]
  33. 33.🖼️ How many parts (boxes) does this wireframe have?
    [ Add button ]
    [ top bar ]
    [ title text ]
    [ filter buttons ]
    [ menu icon ]
    [ big picture ]
  34. 34.🖼️ In this wireframe (top to bottom), what is right below the list of items?
    [ top bar ]
    [ Add button ]
    [ list of items ]
    [ tab bar ]
    [ menu icon ]     (a) menu icon (b) tab bar (c) top bar (d) Add button
  35. 35.True or false: a wireframe looks like the real app. (a) False (b) True
  36. 36.✏️ Do wireframes usually show the final colours? (a) Yes (b) No
  37. 37.🖼️ In this wireframe (top to bottom), what is right above the search box?
    [ top bar ]
    [ search box ]
    [ tab bar ]
    [ title text ]     (a) top bar (b) tab bar (c) title text
  38. 38.🖼️ In this wireframe (top to bottom), what is right below the Save button?
    [ Add button ]
    [ filter buttons ]
    [ title text ]
    [ Save button ]
    [ top bar ]
    [ menu icon ]     (a) filter buttons (b) title text (c) menu icon (d) top bar
  39. 39.True or false: a final design uses the final pictures. (a) True (b) False
  40. 40.🖼️ How many parts (boxes) does this wireframe have?
    [ menu icon ]
    [ search box ]
    [ title text ]
    [ filter buttons ]
    [ tab bar ]
    [ Save button ]

Answer key

  1. top bar
  2. filter buttons
  3. False
  4. menu icon
  5. looks like the real app
  6. menu icon
  7. False
  8. menu icon
  9. uses plain grey boxes
  10. False
  11. 4
  12. uses the final pictures
  13. filter buttons
  14. True
  15. False
  16. False
  17. is a quick sketch
  18. big picture
  19. 6
  20. a wireframe
  21. a final design
  22. a simple screen sketch
  23. top bar
  24. 6
  25. True
  26. list of items
  27. a final design
  28. a wireframe
  29. False
  30. 6
  31. tab bar
  32. 6
  33. 6
  34. tab bar
  35. False
  36. No
  37. top bar
  38. top bar
  39. True
  40. 6

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