← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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