← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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