← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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