← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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