← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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