← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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