← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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