← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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