← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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