← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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