← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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