← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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