← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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