← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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