← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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