← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

  1. True
  2. title text
  3. search box
  4. No
  5. Save button
  6. a wireframe
  7. uses the final pictures
  8. False
  9. 6
  10. a final design
  11. True
  12. big picture
  13. 4
  14. has the real colours
  15. a picture goes here
  16. shows the real fonts
  17. False
  18. 6
  19. a wireframe
  20. a wireframe
  21. is a quick sketch
  22. False
  23. True
  24. search box
  25. filter buttons
  26. big picture
  27. filter buttons
  28. has no real colours
  29. menu icon
  30. a simple screen sketch
  31. a final design
  32. a final design
  33. tab bar
  34. Save button
  35. filter buttons
  36. Add button
  37. search box
  38. tab bar
  39. True
  40. changes are quick

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