← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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