← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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