← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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