← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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