← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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