← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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