← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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