← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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