← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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