← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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