← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

  1. tab bar
  2. False
  3. filter buttons
  4. search box
  5. No
  6. Add button
  7. False
  8. Add button
  9. shows the real fonts
  10. a picture goes here
  11. 6
  12. uses the final pictures
  13. Add button
  14. tab bar
  15. 4
  16. a final design
  17. looks like the real app
  18. tab bar
  19. a wireframe
  20. 4
  21. big picture
  22. 4
  23. tab bar
  24. False
  25. True
  26. a wireframe
  27. a wireframe
  28. Add button
  29. has the real colours
  30. 4
  31. search box
  32. 4
  33. True
  34. pencil and paper
  35. False
  36. search box
  37. title text
  38. 4
  39. tab bar
  40. filter buttons

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