← Wireframes lesson New set →

App Dev Worksheet: Wireframes

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

Answer key

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

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