← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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