← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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