← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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