← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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