← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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