← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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