← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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