← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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