← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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