← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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