← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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