← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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