← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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