← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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