← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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