← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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