← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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